Getting started with Figma's Glass effect updates

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.

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.