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:
- Create a frame: Select the Frame tool (F) and choose your desired dimensions
- Add a background: Insert a colorful image or gradient background to showcase the glass effect
- 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:
- Select the Frame tool and create a new frame on top of your background
- 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
Here's where the magic happens:
- Select your frame
- Navigate to the Effects panel in the right sidebar
- Click the plus (+) button to add a new effect
- Choose "Glass" from the dropdown menu
Step 4: Configure Glass Properties
Figma's glass effect offers six powerful parameters to customize your design:
Property | Function | Recommended Range |
---|---|---|
Light Angle | Direction of projected light | 0-360 degrees |
Light Intensity | Brightness of projected light | 20-80% |
Refraction | Optical distortion along curved edges | 10-50% |
Depth | How far curved edges extend inward | 5-25% |
Dispersion | Chromatic splitting intensity | 0-30% |
Frost | Background blur amount | 5-20% |
Step 5: Fine-Tune Your Effect
For optimal results:
- Adjust opacity: Set your frame's fill opacity between 10-99% to see the glass effect
- Experiment with fills: Try different fill colors and opacities
- 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:
- Create multiple frames with different glass settings
- Vary the frost and refraction values
- 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.