Getting started with Figma's Glass effect updates

Categories: Design, Product

Summary

Figma's latest updates to the Glass effect unlock new design possibilities, allowing creators to apply the effect to frames with custom corner radii, text, and vector shapes - unlocking organic, branded visuals with just a few clicks.

Key Takeaways

  1. Apply the Glass effect to frames with independent corner radii to create unique glass shapes and textures.
  2. Use text with the Glass effect to create interactive, translucent typography that adapts to the background.
  3. Bind Glass properties to variables to globally control depth, dispersion, frost, and splay across multiple objects.
  4. Use the new Splay property to fine-tune the edge behavior of Glass elements, creating more organic shapes.
  5. Apply Glass effects directly in Figma Slides to elevate brand visuals and presentations.
  6. Leverage vector shapes and Figma Draw brushes within Glass elements for advanced design possibilities.

Related topics

Transcript Excerpt

Hi friends, Miggi from Figma here. You can now do more with Figma's glass Effect, and I'm gonna show you how. So let's go. Figma s Glass effect can now be applied to frames that have different rounded corners. If I go here and I apply independent values, so 180 on the top left, 180 on the bottom, let's come down here to my effects panel and apply the glass effect. Give it some exaggerated properties there. And when I bring this over this color layer. You can see how that effect is being applied to the objects below. Go ahead and duplicate that and let's duplicate that one more time to recreate the Figma logo with these frames with the glass effect applied and I can even modify this last independent corner there. That's pretty cool. You can now apply the glass effect to text. I'm gonna sele…

More from Figma