# Getting started with Figma's Glass effect updates Source: https://www.youtube.com/watch?v=gIL--iNUai4 Recap page: https://rapidrecap.app/video/gIL--iNUai4 Generated: 2026-01-27T17:42:24.145+00:00 --- ## Quick Overview Figma's recent updates introduce a powerful new "Glass" effect within the Effects panel, allowing designers to create realistic frosted, refractive, and glossy visual styles by adjusting parameters like Light angle, Refraction, Depth, Dispersion, Frost, and Splay, which is demonstrated on shapes, vector icons, and text layers. **Key Points:** - The video demonstrates the application of the new 'Glass' effect, accessible in the Effects panel, offering advanced material simulation. - Key adjustable parameters for the Glass effect include Light angle (-45° shown initially), Refraction (set to 80 initially), Depth (set to 51 initially), Dispersion (set to 4 initially), Frost, and Splay. - The tutorial shows how to apply the Glass effect to a frame with rounded corners, then to vector shapes manipulated via Boolean operations (Union), and finally to text layers. - The instructor shows how to bind these Glass properties to variables within a design system, allowing for global adjustment of parameters like 'icon-glass-frost' (set to 72) across multiple elements. - The process for creating complex organic shapes involves using Boolean operations (Union) on overlapping elements and then applying the Glass effect to the resulting unified shape. - The instructor illustrates the effect's versatility by applying it to a mock iPhone lock screen clock text and a complex, multi-colored, organic shape. ![Screenshot at 00:18: The instructor opens the Effects panel and selects 'Glass' from the dropdown menu, revealing the detailed control panel for the new effect, including sliders for Light, Refraction, Depth, Dispersion, Frost, and Splay.](https://ss.rapidrecap.app/screens/gIL--iNUai4/00-00-18.jpg) **Context:** This video serves as a tutorial focusing on the new 'Glass' effect feature recently rolled out or updated in Figma. The presenter walks through the practical application of this effect, showcasing how it simulates real-world glass properties like refraction and frosting on various design elements, including basic frames, complex vector shapes created using Boolean operations, and text layers, emphasizing its utility in modern UI design trends like neumorphism or frosted glass interfaces. ## Detailed Analysis The video tutorial explains how to utilize Figma's updated Glass effect. The process begins by creating a frame and setting individual corner radii (e.g., 180 for two corners) to begin shaping the element. The core focus shifts to applying the Glass effect via the Effects panel. Initial settings shown include a light angle of -45° and 80% intensity. The instructor then adjusts parameters like Refraction (91), Depth (30), Dispersion (74), Frost (6), and Splay (51) to achieve a specific look on a red-filled object layered over other colors. The tutorial then moves to demonstrating the effect on vector objects; the instructor creates a composite shape using the Union Boolean operation on several overlapping elements, applies the Glass effect, and then adjusts the corner radius of the resulting union to create a smooth, organic shape. Furthermore, the instructor shows that the Glass properties can be managed via variables in a design system panel (e.g., 'icon-glass-frost' set to 72), allowing consistent application across many icons. Finally, the effect is applied to text on a mock iPhone screen (the time '9:41'), demonstrating its use in creating depth and gloss on typography, confirming that the effect works on vector fills derived from strokes combined via Boolean operations. ### Applying Glass Effect to Shapes - Setting mixed corner radius (180, 0, 180, 0) on a frame - Applying Glass effect - Adjusting parameters like Refraction (91), Depth (30), Dispersion (74), Frost (6), Splay (51) ### Working with Vector Objects - Creating complex shapes using Boolean Union operation on overlapping elements - Applying Glass effect to the resulting shape - Manipulating vector points to refine the organic outline ### Using Glass Effect Variables - Demonstrating the variables panel for Glass properties (e.g., icon-glass-frost set to 72) to control multiple icons simultaneously - Adjusting 'icon-light-angle' from 80 up to 1584 to change light direction across all linked icons ### Glass on Text/UI Elements - Applying the Glass effect to text (like the '9:41' clock) on a mock lock screen - Adjusting Refraction (91) and Depth (30) to achieve a frosted look ![Screenshot at 00:05: Demonstrating setting individual corner radius values \(180, 0, 180, 0\) on a square frame to begin shaping the element.](https://ss.rapidrecap.app/screens/gIL--iNUai4/00-00-05.jpg) ![Screenshot at 00:18: The instructor opens the Effects panel and selects 'Glass' from the dropdown menu, revealing the detailed control panel for the new effect, including sliders for Light, Refraction, Depth, Dispersion, Frost, and Splay.](https://ss.rapidrecap.app/screens/gIL--iNUai4/00-00-18.jpg) ![Screenshot at 00:36: The Glass effect panel is open while applied to text \('9:41'\) on a mock phone screen, showing parameter adjustments like Refraction and Depth.](https://ss.rapidrecap.app/screens/gIL--iNUai4/00-00-36.jpg) ![Screenshot at 00:56: The instructor navigates the 'glass-icons' variables panel, highlighting 'icon-glass-frost' set to 72, showing how these properties are linked across multiple design elements.](https://ss.rapidrecap.app/screens/gIL--iNUai4/00-00-56.jpg) ![Screenshot at 01:58: A complex, four-lobed organic shape is shown, created by unifying overlapping circles, demonstrating the effect's use on complex vector compositions.](https://ss.rapidrecap.app/screens/gIL--iNUai4/00-01-58.jpg)