How to Create Icon Effects in Figma

Step beyond flat design and add dimension to your icons with neumorphic effects in Figma.

Whether you’re a budding UX/UI designer or just an avid icon user who wants to add a bit more pizzazz to otherwise flat designs, this is our guide to making neumorphic-style drop shadow effects using the design platform Figma. A bit of dimension can go a long way in conveying new information about your design, including what’s important and what is or isn’t a clickable button.

Why Using Icons is Critical in UX and UI Design

Designing websites, apps, and even wayfinding signage necessitates breaking down concepts or instructions using instantly recognizable icons and pictograms. Rather than requiring people to stop and read, icons allow people to instantly grasp a piece of information — which is critical for website navigation, translating concepts between languages, and more.

Today’s users expect to successfully navigate through common everyday experiences like mobile apps through recognizable symbols like menus, home buttons, “back,” “save,” and “like” buttons.

How to use icons in UX design: make sure your UI icons are consistently designed with similar stroke weights, fills, resolutions, and curvatures. The UX icons should be legible at smaller sizes, and designed with matching styles.
Material UI icon collection by Chinnaking.

But in order to make a design stand out from the rest, many designers have opted to ditch the strictly “flat and minimal” style to bring back a bit of eye-popping dimension and evoke more of the tactile qualities often missing from flat design. Hence, neumorphic design was born.

What is Neumorphic Design?

Neumorphic design emerged as a popular trend in response to the previous “skeumorphic” style in which designers tried to realistically replicate recognizable objects for things like app icons and interfaces. Skeumorphism relied on rendering things like televisions, radios, or other objects as you would see them in real life with a higher level of detail. When you think about the evolution of app icons — from the early YouTube or Instagram icons, representing a TV and camera, respectively — to today’s more muted and minimalist versions, you’re witnessing the difference between skeumorphic and neumorphic (AKA neo-skeumorphic) design.

As mobile screens continued to proliferate, icon design became both a necessity and an art form all of its own. Rendering “true to life” objects in an under-100-pixel square often made them harder to decipher, so designers focused on conveying as much as they good in as few (digital) brushstrokes as possible. Not only did minimalist icons take over common website navigation, but app icons came to resemble more abstract logos.

The difference between neumorphic and skeumorphic design can be seen in the evolution of YouTube and Instagram’s app icons. The old skeumorphic app icons and logos represented real, physical objects with more literal accuracy, while the newer, minimalist or neumorphic style icons appear as abstract brand logos.
Early app icons for Instagram and Youtube (at left) relied on skeumorphic design to more accurately and literally depict real-life objects, before evolving into abstract, minimalist logo forms (at right).

Neumorphic design bridges the gap between the strictly flat and minimal icon form, and the true-to-life skeumorphic form. It provides just enough dimension — through things like cleverly designed drop shadows and gradients — that an interface can appear sleek and minimal, but with a dimensional surface that looks “touchable” through visual indentations and buttons.

Regardless of your stance on UX and UI design trends, neumorphic design captures a sleek and sophisticated look that invites interaction through tactile and dimensional appearances.

How to Create “Neumorphic” UI Design Effects in Figma

Figma is a web-based design platform that teams use to collaborate on designs and prototype apps. It has become a favorite among UX and UI designers for its ease of use, simplicity of tools, and opportunities for live collaboration.

Best of all, you can easily drag and drop both .PNG and .SVG icons straight from the Noun Project Mac App into Figma. Being a Noun Pro subscriber allows you to access our complete library of over 3 million icons, customize, and drag and drop them into your favorite apps without having to worry about attribution.

Let’s Get Started

1. From the Figma homepage, go to New File > Design File at the upper right.

2. Create a new Frame to serve as your project canvas. Hit “F” or the hash symbol at the top left in the menu bar, and either click and drag your cursor or select one of the templates that appears in the right-hand column.

Here, I’ll be using the regular Desktop dimensions, 1440 x 1024.

Hit “Frame” in the upper-left (or F on your keyboard) to get started with a standardized template size, or your own manually-sized canvas.

3. Pick a base color for your frame. With the frame selected, look at the right-hand column under “Fill” and click the small square color thumbnail. Choose a color from the selection window or input a HEX code directly. I’ll be using a neutral-yet-warm beige color.

How to create a new file in Figma: create an image by clicking “Frame” or “F” to create your canvas.

4. Create a rectangle. Click the box-shaped icon at the top, or type “R” and click and drag. Hold shift to make it a perfect square.

To have a smooth, seamless neumorphic interface, we want our buttons to be the same color as the background. With the rectangle selected, go again to “Fill” and the color picker window, and hit the eye dropper icon to click your frame and make it the same color.

5. Now, the key to making a sleek Neumorphic design is adding softer drop shadows. In the same right-hand panel with your rectangle selected, click Effects or the plus sign next to it to add an effect. A drop shadow is the first effect added by default. Here, the “sunshine” thumbnail icon takes us to an Effect Settings window where we can adjust our parameters.

Drop shadows typically appear as a sharp contour that can make an object like our rectangle appear as if it’s levitating off a surface.

This is where you want to leave room to experiment with the effect settings until it’s to your liking.

6. Adjust the drop shadow to make it bigger. In the Effect Settings window, the X and Y fields tell us how far off the drop shadow is placed on each axis. Click X or Y and either click-and-drag your cursor side to side, use your up-and-down keyboard arrows, or input a particular integer to adjust each value. To bring my drop shadow further out, I’ve set the X and Y both to 20.

To cast the shadow on the opposite side, simply make the values negative. Too high a number, and it’ll appear to float away off the page. Too low, and it appears as a mere border around the rectangle.

How to add a drop shadow in Figma: with a shape selected, go to the properties panel on the right-hand side and click the Plus Sign under Effects to add a new effect. This effect is a drop shadow by default.
Adjust the X and Y coordinates to reposition the drop shadow.

7. Make the shadow softer and more natural. By default, it will have a black color with opacity. In the color picker beneath X and Y, once again use your eye dropper to select the same color as the rectangle — but pick a slightly darker value. Keeping it in the same hue will help it look like a more seamless part of the material surface.

8. Adjust the blur so that it looks more like a “mound” than a levitating plane. Typically, setting the blur value to twice the X and Y value gives it enough breathing room.

Achieve a softer, less stark shadow by using the same hue as your shape and background. Use the eye dropper to select the same color, but just pick a slightly darker value. Crank up the blur to twice the X and Y values to make it softer.

9. Add a new drop shadow to highlight the opposite site. Back in the right-hand panel, hit the “+” next to Effects one more time to add another drop shadow. This time, put in the opposite coordinates (negative X and Y values) to make a drop shadow on the other side. Adjust your blur the same way, but use the color picker to pick a lighter or pure white value. This will complete the visual dimensionality of our rectangle.

To create a neumorphic design in Figma, give your shapes a more soft shadow by adjusting the drop-shadow’s blur and color under “effects.”
Use opposite X and Y values, and a lighter shadow value, to create a “highlight” side and make the rectangle look more 3D.

10. Make it a component for easy replication. With the rectangle selected, right-click it and select “Make Component” or click the quadruple-diamond at the center of the top menu. When an object is a component, you can replicate it multiple times — and any edits you make to the original will be applied to any instance you have of it. You can find components later under the “Assets” view at the top-left.

Make your original rectangle a component, and you can replicate it endlessly — but any edits to the original (like changing the color or drop shadow properties) will apply to all other instances.

11. Try different shapes and variations. Perhaps you want rounded rectangle or circular shaped buttons. Click on the rectangle (and if it’s a component, make sure you click the original rectangle shape from the Layers menu) and you’ll see dots appear at the four corners to adjust your radius. Click and drag them inwards, or input a radius value on the right-hand column where you see the arc icon.

With your rectangle selected, click the radius tools and drag them inwards to increase the circular radius. Dragging all the way in will make it a circle. You can also manually input a radius value on the right-hand column, where you see the black text next to the radius icon.

12. To show dimensional button states, make “innies and outies.” One critical aspect of UI design is conveying what buttons can be pressed, and which (if any) already have been pressed. Now that we have a 3D “pop-out” button, let’s make a depressed button.

Duplicate your shape, but under effects, switch each Drop Shadow to an Inner Shadow. Given the parameters of your existing shadow, it will stay visually consistent put convey an indentation.

Under Effects, take your existing drop shadows and make them inner shadows. With the same X, Y, and Blur values, it’ll appear as the indented version of your previous shapes. You can still decrease or increase the visual depth by changing these values, on both the inner or drop shadows.

13. Drop in Noun Project icons to make these usefully labelled buttons. To make these buttons a cohesive part of your UI design, let’s bring in descriptive icons. Whether you need typical navigation buttons that users expect (home, download, like, save, menu) or a custom navigation cue, you can find it in Noun Project’s collection.

Open up the Noun Project Mac App and enjoy 100 free starter icons, or upgrade to Noun Pro and log in to unlock over 3 million icons, endless customization and unlimited royalty-free downloads.

The best part of the Mac App is you can simply drag and drop any icon you search for, in whatever color, background shape and color, or format (SVG or PNG) you need. Because Figma works with vectors, you can click, drag, and resize any SVG icon to any scale you want.

Add Noun Project icons to Figma instantly with the Noun Project App for Mac. Drag and drop unlimited icons royalty-free with Noun Pro. Change icon color and import icons as vector SVG’s into your Figma file.
The Noun Project Mac App makes it easy to instantly drag and drop any icon you want from our 3-million-plus icon library. Change color inside the app or in Figma under “Selection Color” on the right-hand column.

14. Make your button states clear. A common practice in UI design is to clearly signify what buttons are pressed or unpressed. In addition to the dimension you’ve achieved with your shadows, be aware that contrast is the primary attention-grabber. Maintain higher contrast by using bold icons on the “press me” buttons, and a lower contrast like the grayed-out ones above to signify a button has already been pressed.

Explore the Possibilities.

The sky is the limit for exploring different visual effects, even with Figma’s simple built-in drop shadows.

You can apply the same neumorphic shadow effects to the icons themselves — just be sure the vector, rather than its frame, is selected (double-click the icon again and be sure the vector is selected in the Layers panel).

In the below example, I’ve applied a similar drop-shadow scheme to my “Share” icon, but decreased those X, Y, and blur values since it’s on a smaller scale. I then copied and pasted the base circle, scaled it up, and placed this second circle underneath the first. Adding both an inner and an outer drop shadow on this circle creates a fascinating and layered effect.

Using the same drop shadow techniques and parameters, see what else is possible. You can apply drop shadows to icons themselves, and layer elements with different combinations of inner and outer shadows to discover new, strikingly dimensional effects.
You can take the effects even further by filling the shapes with gradients instead of solid colors. Under “Selection Colors,” open the window and in the upper left, click from “Solid” to “Linear.” The gradient sliders can be individually adjusted with selections from the color panel or eye dropper, and you can arrange the gradient’s line directly in the frame where it lands.

Don’t Let “Cool” Get in the Way of “Useful.”

If usability is your chief concern for a new design, keep legibility and accessibility in mind. Just because your app now serves up a streamlined aesthetic doesn’t mean that it’s particularly user-friendly. Plus, in the realm of web and app development, accessibility isn’t just a nice-to-have — it’s the law.

You can find plenty of usability and accessibility guides online, and even test out your design’s accessibility through these Figma plugins.

Jeremy Elliott
Jeremy Elliott

Marketing Communications Manager at Noun Project, Designer and Illustrator.

Related Articles