How To Create Neumorphism In Figma? A 7-Step Guide

Are you struggling to understand how to create neumorphism in Figma? This design trend promises to bring a sense of depth and realism to your digital interfaces, merging the best of both worlds – the tactile, familiar feel of skeuomorphism and the minimalistic, clean lines of flat design.

Despite Figma’s reputation for being incredibly user-friendly, diving into a new design technique is always challenging. You find yourself in front of the canvas, ready to transform your ideas into reality. But the complexity of achieving that perfect balance of shadow parameters, color palettes, and the nuances of neumorphic interface design leaves you second-guessing every move.

Before you start exploring best practices for implementing this trend, it’s crucial to understand the core web design principles that drive conversions (to avoid ending up with a nice-looking site that fails to sell). I’ve prepared a free mini-course, 7 Days To Profitable Aesthetics, to help you prevent common mistakes from slipping into your designs and learn sneaky ways agencies leverage design elements to create high-converting sites for themselves and clients.

After you master those psychological triggers in web design and understand which mistakes you must pay close attention to, creating a high-converting neumorphism design will become much easier.

My Los Angeles web design company has created neumorphism in Figma for multiple clients. In this article, I’ll show you seven essential steps you can’t afford to overlook when it comes to neumorphism in Figma.

I’ll show you how to achieve that tactile feel for your neumorphism user interfaces. In this neumorphism Figma tutorial, you’ll also learn how to choose colors and how to improve the accessibility of neumorphism UI designs within this tool. This knowledge will allow you to confidently tackle neumorphism design projects and unlock new opportunities within this rising trend.

Table of Contents:

• What Is The Neumorphism Technique?
• Step-By-Step: How To Create Neumorphism In Figma
  • 1. Create A Frame And Select The Background Color
  • 2. Use Shape Tool To Create A Desired UI Element And Set The Same Color As For The Background
  • 3. Add Drop Shadow Effects With The Right Settings
  • 4. Turn Your Shape Into UI Components To Maintain Consistency More Easily
  • 5. Experiment With Inner Shadows To Achieve Various Neumorphic Styles
  • 6. Fill Your UI Components With The Desired Content
  • 7. Use Different Contrast To Communicate Button States To Users
• Key Tips For Creating Figma Neumorphism
• Final Thoughts – Neumorphism Is Cool, But Only When You Apply Best Practices

What Is The Neumorphism Technique?

Neumorphism, a term that may sound complex at first, is actually quite straightforward once you break it down. This design trend stands at the crossroads between skeuomorphism and flat design. If you’re keen on understanding how it contrasts with its predecessor, you might find my guide on skeuomorphism vs neumorphism helpful.

Characterized by its soft, subtle shadows, understated light effects, and a palette of semi-flat colors, neumorphism aims to replicate the tactile essence of physical objects in a digital context.

This design trend crafts an illusion of depth that makes interface elements appear as though they are softly emerging from or receding into the background, offering a raised or embedded look.

Accessibility Issues To Consider Before Creating Neumorphic Design In Figma

Gaining momentum as one of the key web design trends in 2024, neumorphism has intrigued designers with its modern, fresh aesthetic. Luckily, creating neumorphism in Figma is easy.

However, before rolling up your sleeves and creating neumorphism designs, it’s worth considering the potential accessibility problems this style is known for.

• Poor contrast: One of the most prominent issues is poor contrast. This design style often employs subtle differences in shading to denote various elements, which can make it challenging for users, especially those without access to high-quality screens, to distinguish between UI components.
• Identifying interactive UI elements: Another hurdle is the difficulty users might face in identifying which elements are interactive. Neumorphism’s reliance on subtle cues for differentiating clickable buttons from non-interactive elements can leave users guessing. Without clear indicators, such as conventional buttons that stand out, users may not understand how to interact with the design.
• The lack of labels: When aesthetic preference leads to the minimization or omission of text labels, users may find it challenging to navigate the interface efficiently. This can be particularly problematic for those relying on screen readers or users who depend on clear, textual cues to understand functionality.

Step-By-Step: How To Create Neumorphism In Figma

Creating neumorphism in Figma is easy. However, before exploring these seven steps, I recommend learning the basics of using Figma for web design so it becomes easier for you to create neumorphism in user interfaces.

Moreover, learning how to export Figma to HTML is essential to ensure your neumorphism user interfaces function as intended once you make the website go live.

Now, let’s explore seven key steps when learning how to create neumorphism in Figma:

1. Create A Frame And Select The Background Color

After opening a new Design File in Figma, use the ‘Frame’ tool to draw a frame on your canvas. This is going to be the area where you’ll apply your neumorphic design elements.

Choosing a background color is your next move. This decision impacts the overall look and feel of your design, especially in neumorphism, where the interplay of light and shadow against the background is key. Whether you go for a dark or light background depends on your project’s requirements and branding style.

2. Use Shape Tool To Create A Desired UI Element And Set The Same Color As For The Background

Whether you’re designing a button, an input field, or any other element, select the appropriate shape (rectangle, ellipse, polygon, etc.) from the toolbar. Draw your shape directly onto your frame, giving physical form to what will become a key part of your user interface design.

Next, click on the fill color picker for your shape and choose the exact same color as your background. This step is crucial for achieving the subtle, embossed, or inset look that defines neumorphism.

3. Add Drop Shadow Effects With The Right Settings

Adding drop shadow effects is a pivotal step in achieving the neumorphism look in Figma. Here’s how to refine your UI elements with the right shadow settings to bring that distinctive neumorphic style to life:

• Access Drop Shadow Effects: Start by clicking on ‘Effects’ in the right sidebar when you have your UI element selected. From there, choose ‘Drop Shadow’ to begin customizing your effect.
• Adjust Drop Shadow Settings: For a convincing neumorphic effect, tweak the X and Y values to between 10-20, aiming for a subtle but distinct shadow that suggests depth. The blur ratio should be about double your X and Y values to ensure the shadow gently diffuses into the background.
• Create a Counter Shadow: Neumorphism is characterized by its soft inset and outset look, achieved by shadows. To create this, add another drop shadow effect. However, enter negative values for X and Y this time. This countershadow should be subtle, ensuring it doesn’t give the impression that the element is detaching from the background or forming a harsh border.
• Choose the Right Color for Your Shadow: The shadow color is crucial for maintaining the neumorphic aesthetic. Opt for a hue that matches your background surface but is slightly darker. This nuanced difference in shade contributes to the depth and softness that neumorphism is known for without overpowering the design.

4. Turn Your Shape Into UI Components To Maintain Consistency More Easily

Now it’s time to convert your shapes into UI components. Once you’re satisfied with the design of your shape, including its neumorphic shadows and color matching, transforming it into a component is straightforward.

Simply select your shape, and then look for the option to “Create Component” in the right-click context menu. Alternatively, you can use the shortcut in the Figma toolbar, which looks like four interconnected diamonds.

Once you do this, any modifications you make to the original component will automatically update all its instances.  This step is crucial for maintaining design consistency, especially when dealing with multiple elements that share the same neumorphic styling.

Figma organizes components within the “Assets” panel. From here, you can easily access and drag your Figma neumorphism components into new frames or different parts of your design.

5. Experiment With Inner Shadows To Achieve Various Neumorphic Styles

Experimenting with inner shadows is your next step towards mastering various neumorphic styles in Figma. This technique is crucial for creating the impression that your UI elements are either inset into the background or slightly embossed, enhancing the tactile feel of your design.

To begin, select the UI component that you’ve turned into a component. Instead of applying an outer drop shadow style this time, you’ll switch to using ‘Inner Shadow’ from the effects menu. The settings you’ll use for inner shadows mirror those of the drop shadows, but their application will inversely affect the appearance of your elements, giving them a recessed look.

The key difference with inner shadows lies in their ability to simulate depth by appearing as though the element is cut into the surface. This is achieved by carefully selecting the shadow color, ideally a shade slightly lighter than your background for the inner shadows.

Mastering various shadow styles gives you the freedom to experiment with the depth of your neumorphic elements. You’ll be able to achieve a range of visual effects, from soft and subtle to more pronounced and tactile.

6. Fill Your UI Components With The Desired Content

Once you have sculpted your UI components into neumorphic designs, it’s time to infuse them with life by adding content. This step transforms your carefully crafted elements from mere shapes into functional parts of your user interface.

Filling your UI components with content typically involves inserting text, icons, or both. For text, select your component and use the text tool in Figma to type directly onto the component. The choice of font, size, and color should align with your overall design guidelines, ensuring readability and coherence with the neumorphic style. If you need inspiration, check the hottest 2024 font trends.

To maintain the neumorphic aesthetic even within your text, consider applying subtle effects such as a very light drop shadow or an inner shadow to the text itself. This technique can enhance the sense of depth and ensure the text feels integrated with the UI element rather than simply placed on top.

Icons can also be added to your components to provide visual cues or enhance functionality, such as in buttons or menus. When incorporating icons, you can apply similar shadow effects to ensure they harmonize with the component’s neumorphic design. Figma’s vast library of icons and the ability to import custom graphics make it easy to find the perfect iconography for your project.

7. Use Different Contrast To Communicate Button States To Users

One of the nuanced challenges with neumorphism lies in its inherently subtle use of shadows and colors. while aesthetically pleasing, soft shadows can sometimes obscure the functionality of interactive elements like buttons.

Users rely on visual cues to understand which actions are available to them and to distinguish between different states of UI elements, such as active, inactive, or pressed buttons.

The solution to ensuring clarity and usability within your neumorphic design is to strategically employ contrast. Unlike more traditional design approaches where you’d highlight button states by using distinct colors, neumorphism requires a careful approach.

For buttons that are meant to invite interaction or signify an action (“press me” buttons), ramping up the contrast is key. For example, you can use bold icons that stand out against the background. Moreover, you can adjust the shadow and lighting effects to create a more pronounced sense of depth. The goal is to make these interactive elements pop from the rest of the design. Another option is to create a hover effect in Figma.

Conversely, to indicate a button that has already been pressed or is currently inactive, a lower contrast approach can be effective. This might involve muting the colors, simplifying the shadow effects, or using icons that blend more seamlessly with the button’s background. Such visual cues subtly inform users of the button’s current state without the need for explicit labels.

Key Tips For Creating Figma Neumorphism

To ensure your designs not only embody the unique tactile essence of neumorphism but also remain functional and user-friendly, here are some key tips to keep in mind when learning how to create neumorphism in Figma:

• Prepare your color palette: Before diving into your design, have a color palette ready. Neumorphism thrives on subtle color variations and soft shadows, so choosing the right hues is crucial.  Opt for a palette that supports both light and dark mode designs if necessary, including shades that can be used for shadows to enhance depth without overwhelming the user. I recommend checking out popular minimalist color palettes.
• Use the same color for the background and UI elements: One hallmark of neumorphism is the seamless integration of UI elements with the background. To achieve this, use the same color for both, adjusting only the shadows to create differentiation. This technique lays the groundwork for the soft, embossed look characteristic of neumorphism.
• Experiment with shadow settings:  Don’t hesitate to experiment with shadow settings to find the perfect balance that brings your elements to life. Adjusting the X, Y, blur, and spread values can dramatically change the perception of depth and tactile feel of your UI components. Remember, there’s no one-size-fits-all solution.

5 Profit-Draining Mistakes to Avoid When Creating Neumorphism Designs in Figma

While neumorphism can elevate your designs, it’s also a style with its own pitfalls. To ensure your designs remain both visually appealing and user-friendly, here are some common mistakes to avoid:

Mistake #1 – Overusing Shadows:

Shadows are key to neumorphism design. They add depth.

However, overusing shadows or applying them too heavily can lead to a cluttered and overwhelming design.

Mistake #2 – Ignoring User Interaction Clarity

In neumorphic designs, buttons and other interactive elements can sometimes blend too seamlessly into the background, making it unclear what users can click on or interact with.

Avoid this by using varying contrast levels, shadows, or even subtle color differences to make sure interactive elements stand out enough to be recognized easily. Also, make sure to use only the proper website effects in combination with neumorphism designs to avoid clutter.

Mistake #3 – Failing to Maintain Consistency

Consistency is crucial in any design system, and neumorphism is no exception. Inconsistent use of shadows, colors, or effects can disrupt the flow of your design and confuse users.

Mistake #4 – Overcomplicating the Design

Neumorphism thrives on simplicity. Don’t add too too many elements or too complex details. Focus on clean, minimalist designs where every element has a purpose.

Mistake #5 – Neglecting Responsiveness

As with any design trend, it’s essential to consider how your neumorphic design will look and function across different devices and screen sizes.

Some designers neglect responsiveness when creating neumorphism in Figma, which leads to poor user experience, especially on mobile devices where space is limited.

Final Thoughts – Neumorphism Is Cool, But Only When You Apply Best Practices

Neumorphism has undeniably carved its niche in the design world. It captivates both designers and users with its soft, tactile aesthetic that brings a hint of realism to the digital experience.

However, remember not to sacrifice functionality for the sake of style. Experiment with shadows, colors, and effects to achieve the neuromorphic look, but keep the user experience in mind with every design decision you make.

If you’re serious about mastering digital assets that converts, I’ve created an interactive roadmap called Profitable Websites From Scratch. This course is designed to teach you the 4% of essential skills that will yield 64% of the results your clients value most, helping you avoid the common pitfalls that many designers fall into when focusing too heavily on aesthetics.

Instead of spending 6+ months trying to learn every tool and technique (and still not being able to make a living by creating and selling websites), you can master evergreen skills and become a highly sought-after web designer. In 90 days or less, you’ll learn:

• Low code, no code, or light code skills so you can simplify your design process without sacrificing quality.
• Fundamentals of Design so you can create digital assets that are not just beautiful but also effective.
• Fundamentals of Copywriting so you don’t have to worry about others diminishing the impact of your designs.
• SEO fundamentals so you can optimize your websites for search engines and guarantee traffic to companies buying digital assets from you.
• UX fundamentals to ensure people will find your user interfaces intuitive and enjoy using them.
• Offer Creation so you can consistently land new clients as a web designer and unlock a steady income.

Whether you’re incorporating neumorphism or any other design trend, mastering these skills is essential to become an irreplaceable designer.

You’ll get lessons in text and video forms, but you’ll also get access to me to ask me questions if you ever get stuck.

Ready to start? Order your Profitable Websites From Scratch here.