Figma Just Shipped Liquid Glass Effects (And They're Actually Good)

Figma dropped glass effects in their latest release. It's the same liquid glass style Apple's been using in iOS 26: those translucent, refractive surfaces that make UI elements look dimensional and premium.

I just spent three hours playing with to make some marketing material for UserJot and it's genuinely fun. Previously, achieving this effect required managing multiple layers, blend modes, and blur effects. Now it's a single toggle with customizable parameters.

Here's what I've learned so far.

What Glass Effects Actually Are

Glass in Figma is a shader effect that simulates how light passes through and bends around translucent materials. It's not just another blur variant; it creates actual refraction, depth, and light behavior that makes UI elements look dimensional.

The effect gives you five parameters:

Light Controls angle and intensity of edge lighting
Refraction How much the glass distorts what's behind it
Depth The apparent thickness of the glass
Dispersion Chromatic aberration (rainbow edges)
Frost Background blur amount

How to Use It

Glass only works on frames. Not shapes, not text, just frames.

Select your frame
Add effect → Glass
Adjust parameters until it looks right

That's it. No complex layering or blend modes needed.

The Limitations You'll Hit

Before you redesign everything with glass, here are the constraints:

Corner radius must be uniform All corners need the same radius value. Mixed corners? No glass for you.

No glass-on-glass stacking Multiple glass layers don't compound. The top layer ignores glass effects beneath it.

Export limitations Can't export as SVG. PNG only. This matters if you're building icon libraries or need vector assets.

Performance impact Complex designs with multiple glass elements will slow things down. This is a beta feature running real-time calculations.

Figma Sites incompatibility Glass shows in the editor but throws errors when publishing to Figma Sites.

Practical Settings That Work

After testing various combinations, these ranges produce usable results:

Light: 70-80% intensity, angle based on your light source
Refraction: 70-90% (higher values quickly become illegible)
Depth: 10-30% (subtle depth reads better than thick glass)
Dispersion: 30-50% (a little goes a long way)
Frost: 0-20% (depends on background complexity)

Start conservative. It's easier to add more effect than dial back from "disco ball."

When Glass Makes Sense

Good use cases:

Navigation bars over content
Modal overlays
Cards that need depth without shadows
Premium UI elements where polish matters

Skip glass for:

High-performance requirements
Web designs (good luck in CSS)
Projects needing SVG exports
Accessibility-first interfaces

What This Means for Design

This release signals Figma moving toward more sophisticated visual effects. We're getting closer to prototyping actual production UI without switching tools.

But it's beta. The limitations are real, and some workflows will need adjusting.

The feature works well for what it is: a way to achieve iOS-style glass effects without manual workarounds. Just understand the tradeoffs before committing to glass everything.

Quick Tips

Test performance with your actual designs, not isolated components
Create glass and non-glass versions of key components
Document which elements use glass for your dev team
Consider fallbacks for older devices/browsers

The glass effect is solid for high-fidelity mockups and prototypes. Whether it fits your workflow depends on your specific needs and constraints.

Real World Example

I couldn't resist trying this on some branding materials for UserJot. If you're not familiar with it, UserJot is a feedback and roadmap tool I'm building that helps product teams close the loop with their users. We do all our design work in Figma, from the product UI to marketing materials.

Adding glass effects to our marketing assets instantly elevated them. What used to take forever to achieve: that high-end, polished look for hero sections and feature cards now takes minutes. The glass effect gives our brand elements depth and sophistication without being heavy-handed.

What used to take forever to achieve: that high-end, polished look for hero sections and marketing graphics now takes minutes. Glass effects on key brand elements create depth without being heavy-handed.