Getting started with Figma's Glass effect updates

By Figma

Categories: Design, Product

Summary

Figma's latest Glass Effect update lets designers create stunning, customizable visuals with control over individual corner radii, global variable settings, and organic shapes - unlocking new possibilities for compelling UI/UX designs.

Key Takeaways

1. Individually adjust corner radii on frames to create unique shapes with the Glass Effect.
2. Bind Glass Effect properties to global variables to synchronize lighting and visual styles across elements.
3. Apply Glass Effects to vector objects, including strokes converted to union objects, for enhanced depth and texture.
4. Use the Boolean Union tool and generous corner radii to create organic, glass-infused shapes and compositions.
5. Experiment with the Glass Effect's new 'splay' feature to gain more control over the edges and dispersion of the glass-like material.
6. Adjust refraction, depth, and dispersion properties of the Glass Effect on text layers to create eye-catching typographic treatments.

Topics

• Figma
• Design Tools
• UI/UX Design
• Visual Effects
• Graphic Design

Transcript Excerpt

today I'm gonna cover some updates to Figma's Glass Effect. So let's go. You can now apply a different rounded corner value to each corner of a frame i'm gonna set 180 and 180. Come down to the effects panel and choose glass. With the glass effect selected. See what it looks like over other layers. Adjust those properties. exaggerate some of them and see how that looks. Duplicate that and see how that appears. We can round off that last individual corner, making a fun little Figma logo. You can ...