How to make liquid glass in Figma [New Update] without plugin

Apple's revolutionary Liquid Glass design language has transformed the digital landscape, and now Figma has introduced native support for this stunning visual effect. This comprehensive guide will show you exactly how to recreate Apple's iOS 26 liquid glass aesthetic directly in Figma—no plugins required.

The Game-Changing Update: Figma's Native Glass Effect

In July 2025, Figma officially launched its native glass effect feature, marking a significant milestone for designers worldwide. This update eliminates the need for complex workarounds or third-party plugins, bringing Apple's sophisticated liquid glass aesthetic directly into your design workflow.

The timing couldn't be more perfect. Apple unveiled its most comprehensive software redesign in over a decade at WWDC 2025, introducing "Liquid Glass" across all major platforms. This new design language debuts with iOS 26 and matching updates to iPadOS, macOS, watchOS, tvOS, and visionOS. As Apple's VP of human interface Alan Dye noted, "This is our broadest design update, ever," representing "the first time we're introducing a universal design across our platforms".

Step-by-Step Tutorial: Creating Liquid Glass in Figma

Now that Figma has introduced native glass effects, creating professional liquid glass designs has never been easier. Here's your complete guide to mastering this technique.

Step 1: Set Up Your Canvas

Start by creating a new Figma file and setting up your workspace:

  1. Create a frame: Select the Frame tool (F) and choose your desired dimensions
  2. Add a background: Insert a colorful image or gradient background to showcase the glass effect
  3. Position your elements: The glass effect works best when there's content behind it to refract

Step 2: Create Your Glass Frame

The glass effect in Figma can only be applied to frames, so this step is crucial:

  1. Select the Frame tool and create a new frame on top of your background
  2. Set the frame properties:
    • Choose your desired dimensions
    • Apply consistent corner radius (glass cannot be applied to frames with mixed corner radii)
    • Enable "Clip content" if needed

Step 3: Apply the Glass Effect

Liquid glass effect in figma

Here's where the magic happens:

  1. Select your frame
  2. Navigate to the Effects panel in the right sidebar
  3. Click the plus (+) button to add a new effect
  4. Choose "Glass" from the dropdown menu

Step 4: Configure Glass Properties

Figma's glass effect offers six powerful parameters to customize your design:

liquid glass prooperties
PropertyFunctionRecommended Range
Light AngleDirection of projected light0-360 degrees
Light IntensityBrightness of projected light20-80%
RefractionOptical distortion along curved edges10-50%
DepthHow far curved edges extend inward5-25%
DispersionChromatic splitting intensity0-30%
FrostBackground blur amount5-20%

Step 5: Fine-Tune Your Effect

For optimal results:

  1. Adjust opacity: Set your frame's fill opacity between 10-99% to see the glass effect
  2. Experiment with fills: Try different fill colors and opacities
  3. Test different backgrounds: The glass effect responds dynamically to underlying content

Advanced Techniques

Creating Layered Glass Effects

For more complex designs, you can layer multiple glass frames:

  1. Create multiple frames with different glass settings
  2. Vary the frost and refraction values
  3. Use different opacities for depth variation

Combining with Other Effects

While you cannot combine glass with background blur on the same layer, you can:

  • Add drop shadows for depth
  • Use inner shadows for additional dimension
  • Apply noise effects for texture

Key Limitations and Considerations

Understanding Figma's glass effect limitations ensures better design outcomes:

Technical Constraints

  • Frame-only application: Glass effects work exclusively on frames, not other shapes
  • Uniform corner radius required: All corners must have the same radius value
  • Performance impact: Complex designs may experience slower rendering
  • Export limitations: Glass effects don't support SVG export

Performance Considerations

While visually stunning, liquid glass effects can impact performance. Figma recommends:

  • Limiting the number of glass effects in complex files
  • Toggling effect visibility during design iterations
  • Testing performance on various devices and internet connections

Figma's native glass effect feature represents a pivotal moment fordesigners. By eliminating the need for plugins or complex workarounds, Figma has democratized access to Apple's premium liquid glass aesthetic. This update empowers designers to create sophisticated, professional interfaces that align with the latest design trends.

The key to mastering liquid glass lies in understanding its subtleties—the interplay between light, refraction, and background content. By following the techniques outlined in this guide, you'll be equipped to create stunning liquid glass effects that elevate your design work.

Ready to start creating? Open Figma, select a frame, and begin experimenting with the glass effect. The future of interface design is translucent, dynamic, and beautifully refractive—and it's available in Figma right now.