Step-by-step Guide to Making Glassmorphism with Figma and Adobe Xd

by

Glassmorphism is a popular design trend characterized by frosted-glass effects, transparency, and subtle shadows. Creating this effect can enhance your UI designs, making them look modern and sleek. In this guide, we’ll walk through the steps to achieve glassmorphism using two popular design tools: Figma and Adobe XD.

Understanding Glassmorphism

Before diving into the tools, it’s important to understand the key elements of glassmorphism:

  • Transparency and blur effects
  • Subtle shadows and highlights
  • Layered backgrounds
  • Rounded corners for a soft look

Creating Glassmorphism in Figma

Follow these steps to design a glassmorphic card in Figma:

  • Step 1: Create a new frame or rectangle for your card.
  • Step 2: Set the fill color to a semi-transparent white or light color (e.g., rgba(255,255,255,0.2)).
  • Step 3: Apply a blur effect by selecting the rectangle, then go to the Effects panel and add an ‘Background Blur’.
  • Step 4: Add a subtle shadow to give depth. Use a soft, low-opacity shadow in the Effects panel.
  • Step 5: Round the corners for a softer appearance.
  • Step 6: Place your background image or color behind the card to enhance the frosted-glass effect.

Creating Glassmorphism in Adobe XD

Follow these steps to design a glassmorphic element in Adobe XD:

  • Step 1: Draw a rectangle for your design element.
  • Step 2: Set the fill to a semi-transparent white (e.g., 20% opacity).
  • Step 3: Add a blur effect by selecting the rectangle, then go to the ‘Appearance’ panel and enable ‘Background Blur’.
  • Step 4: Apply a subtle drop shadow for depth.
  • Step 5: Round the corners as desired.
  • Step 6: Place your background behind the element to complete the frosted-glass look.

Tips for Effective Glassmorphism

To make your glassmorphic designs stand out:

  • Use high-quality background images for better transparency effects.
  • Maintain consistency in shadows and blurs across your design.
  • Combine with minimalistic UI elements for a modern look.
  • Experiment with different levels of transparency and blur to achieve the desired effect.

By mastering these techniques in Figma and Adobe XD, you can create stunning glassmorphic interfaces that are both functional and visually appealing. Happy designing!