How Do You Do Neumorphism in Figma?
Neumorphism, also known as Soft UI, is a design trend that combines the principles of skeuomorphism and flat design. It creates user interfaces that appear to be slightly raised from the background, giving them a soft and tactile look.
Figma, a popular design tool, provides several techniques to achieve this effect. In this tutorial, we will explore how you can do neumorphism in Figma.
To get started with neumorphism in Figma, follow these steps:
Step 1: Open Figma and create a new project or open an existing one.
Step 2: Select the object you want to apply the neumorphism effect to. It could be a button, card, or any other element.
Step 3: Create two rectangles of the same size as your selected object. One rectangle will represent the light source and the other for shadows.
Note: You can adjust the size and positioning of these rectangles later to achieve the desired effect.
Step 4: Apply colors to each rectangle using Figma's fill tool. The color of the light source rectangle should be lighter than your selected object's background color. The shadow rectangle should be darker.
Step 5: Position and resize both rectangles around your selected object. The light source rectangle should be placed on top and towards one side of your object while the shadow rectangle should be placed on the opposite side.
Note: You can experiment with different positions to achieve different lighting effects.
Step 6: Select both rectangles and your object by holding down Shift key while clicking on each element. Then right-click on them and select "Create Component" from the context menu.
Note: Creating a component allows you to easily apply neumorphism effect across multiple instances of this component.
Step 7: With the component selected, go to the right panel in Figma and click on the "Effects" tab.
Step 8: In the "Effects" panel, click on the "+" button to add a new effect. From the drop-down menu, select "Inner Shadow".
Step 9: Adjust the properties of the inner shadow effect to create a soft and subtle look for your neumorphic element. You can experiment with values like blur radius, spread radius, and color to get the desired effect.
Step 10: Once you are satisfied with the neumorphic effect, you can duplicate and reuse this component across your design project. Any changes made to one instance of this component will be reflected in all other instances.
That's it! You have successfully created a neumorphic element in Figma using simple techniques. Remember to experiment with different colors, sizes, and positions to achieve unique neumorphism effects.
- Tips:
- If you want to create a more pronounced neumorphism effect, increase the blur radius of the inner shadow.
- To give your neumorphic element depth, you can apply a slight gradient to its background color.
- Don't overuse neumorphism in your design as it might make your interface appear too heavy and cluttered.
In Conclusion
Figma provides powerful tools and features that allow designers to easily create neumorphic elements. By following these steps and experimenting with different settings, you can achieve stunning neumorphism effects in your designs. Remember that design trends come and go, so use them wisely and consider if they align with your project's goals and Target audience.
