Getting started with Figma's Glass effect updates

Quick Overview

Figma's Glass effect updates allow users to apply the effect to Frames, not just layers, and introduce new properties like Refraction, Depth, Dispersion, Frost, and Splay, which are demonstrated through creating complex visual effects like distorted typography and abstract logo shapes.

Key Points: Figma's Glass effect now applies directly to Frames, enabling its use on containers rather than just individual layers. The updated Glass effect includes new adjustable parameters: Light angle (-45° shown), Refraction (e.g., 80 or 180), Depth (e.g., 75 or 180), Dispersion (e.g., 50 or 32), Frost (e.g., 22), and Splay (e.g., 0 or 77). The tutorial demonstrates creating a distorted, glass-like 'S' shape using vector draw features and applying the Glass effect to it. Variable binding is now supported for Glass effect properties, allowing designers to link parameters like 'icon-glass-light-angle' (380) to controls for easy modification across assets. The effect is shown working on vector fills, modifying the appearance of a complex, multi-colored shape resembling the Figma logo. The presenter demonstrates how the Splay property specifically warps background patterns (like a black and white dot grid) when applied to a glass element covering them (02:35).

Context: The video provides an overview and demonstration of recent updates to Figma's Glass effect feature, focusing on expanded application capabilities and new fine-tuning controls. The presenter walks through applying the effect to different types of elements, including Frames, vector shapes, and text, showcasing how the new parameters allow for more realistic and customizable glass-like visuals.

Detailed Analysis

The video details significant updates to Figma's Glass effect, primarily enabling its application directly onto Frames, which was previously restricted to layers. The presenter first shows how to apply the effect to a Frame with rounded corners, adjusting parameters like Refraction, Depth, Dispersion, Frost, and Splay (0:25-0:28). Next, the tutorial shifts to applying the effect to text, specifically the number '9:41' on an iPhone mockup, setting the fill opacity to 10% and adjusting the Glass properties to create a translucent, frosted look interacting with the background (1:00-1:25). A major new capability highlighted is the integration of Glass effect properties with Variables (1:31). The presenter shows a 'glass-icons' collection where properties like 'icon-glass-light-angle' (value 380) are bound to variables, allowing for global control over the effect's appearance across multiple elements simultaneously (1:36-2:18). Finally, the video showcases the effect on complex vector shapes, demonstrating how the Splay property can create a warping, tunnel-like distortion effect on a background pattern visible through the glass shape (2:22-2:45), and how the Glass effect works seamlessly on vector strokes, such as a custom-drawn 'S' shape (2:55-3:57).