Liquid Glass in Figma

Key Concepts

Liquid Glass, Figma, UI Design, Effects, Background Blur, Texture, Auto Layout, Gradients, Drop Shadow, Opacity, Corner Radius, iOS Corner Smoothing, Scale Tool, Frames, Layers Panel, Plugins, Icons, Stroke, Clip Content, Lens Distortion.

Replicating Apple's Liquid Glass Effect in Figma

Introduction

Apple's interfaces utilize a dynamic material called "Liquid Glass," which combines the optical properties of glass with a sense of fluidity. This video demonstrates how to reproduce a similar effect in Figma for UI designs, focusing on gaining confidence in applying various effects within Figma. Liquid Glass is primarily used with controls and navigation elements.

Setting up the Base Layout

1. Reference Image: An official Apple example of Liquid Glass is imported into Figma, along with a photograph from Unsplash to serve as a background.
2. Resizing: The photograph is resized using the "Scale" tool (K) to fit the design.
3. Creating Frames:
   • A frame (F) is created to replicate the overall layout of the Apple example. The frame's color is set to red with 50% opacity for initial visualization. Dimensions are adjusted to match the reference.
   • A second frame is created within the first, colored green at 50% opacity, and resized to create an inner section. The "Option" key is used while dragging to resize towards the center.
4. Rounded Corners: The corner radius of the green frame is adjusted, specifically the bottom corners, to match the rounded corners in the Apple example. iOS corner smoothing is applied for a more accurate look. The corner radius is set to 38. The outer frame's corner radius is set to 56 with iOS corner smoothing.
5. Layer Arrangement: The frames are arranged in the Layers panel, ensuring the inner frame (screen) is above the outer frame (device).

Applying Effects

1. Drop Shadow (Outer Frame): A drop shadow effect is added to the outer white frame to create depth. The settings are: X:0, Y:4, Blur:16, Spread:0, Color: Black at 50% opacity.
2. Subtle Drop Shadow (Inner Frame): The drop shadow effect from the outer frame is copied (Command+C) and pasted (Command+V) onto the green inner frame. The settings are adjusted to be very subtle: X:0, Y:0, Blur:16, Spread:0, Color: Black at 20% opacity.
3. Background Image: The photograph is dragged into the inner frame ("screen") in the layers panel. The photo is scaled up (3x) to achieve a similar composition to the reference image.

Adding Icons

1. Using Plugins: The "Feather Icons" plugin is used to import icons (edit, trash, folder, arrow) into the design. The plugin is accessed via Command+K.
2. Resizing Icons: All icons are resized to the same dimensions (12x12) using the scale tool (K).
3. Auto Layout: The icons are placed into an Auto Layout frame (Shift+A) to manage their arrangement. The layout is set to horizontal. The order of the icons is adjusted in the Layers panel. The frame is renamed to "icons left".
4. Styling the Icon Container:
   • A fill color (red initially) is added to the "icons left" frame for visibility.
   • The width and height of the frame are set to "Hug contents" to dynamically adjust to the size of the icons.
   • The icons are aligned to the left and bottom within the frame.
   • The gap between the icons is set to 24 pixels.
   • Horizontal padding is set to 10 pixels, and vertical padding to 8 pixels.
   • The corner radius is set to 999 to create a pill-shaped background.
5. Styling the Edit Icon:
   • A frame is created around the edit icon (Option+Command+G), then converted to an Auto Layout frame (Shift+A). The frame is renamed to "edit icon".
   • The icon is aligned to the center within the frame.
   • A fill color (red initially) is added.
   • The corner radius is set to 999 to create a circular shape.
   • Horizontal and vertical padding are set to 8 pixels.
6. Positioning Icons: The "icons left" and "edit icon" elements are positioned to match the reference image. The align right (Option+D) and align vertical (Option+S) shortcuts are used.

Creating the Glass Effect

1. Removing Background Colors: The fill colors from the "icons left" and "edit icon" frames are removed.
2. Adding Background Blur:
   • A fill is added back to both frames, setting the color to white with 1% opacity.
   • A "Background Blur" effect is added to both frames. The blur is set to 4.
3. Adjusting Photo Exposure: The exposure, contrast, and highlights of the background photograph are adjusted to match the reference image's color tone.
4. Creating a Stroke Gradient:
   • A stroke is added to the "edit icon".
   • The stroke type is set to "Gradient".
   • Three color stops are added to the gradient: white, white (at 50% opacity), and white (at 0% opacity).
   • The gradient angle is adjusted to create a fade-out effect at the bottom.
   • The stroke is positioned to the outside.
   • The stroke style is saved as a new style called "glass stroke".
   • The "glass stroke" style is applied to the "icons left" frame.

Simulating Liquid Distortion

1. Creating a Texture Layer:
   • A rectangle is created with a white fill.
   • A "Texture" effect is added to the rectangle. The size is set to 100, and the radius to 16.
   • The rectangle is dragged into the "icons left" frame.
   • "Ignore Auto Layout" is enabled for the rectangle.
   • The rectangle is moved to the back of the layer stack.
   • The fill opacity of the rectangle is set to 1%.
   • "Clip content" is enabled on the "icons left" frame.
   • The rectangle is renamed to "liquid".
   • A "Background Blur" effect is added to the "liquid" rectangle, set to 4.
2. Applying to Edit Icon: The "liquid" shape is copied and pasted into the "edit icon" frame. "Clip content" is enabled, "Ignore Auto Layout" is enabled, and the "liquid" layer is sent to the back.
3. Adjusting the Liquid Layer: The size and position of the "liquid" layer are adjusted to fine-tune the distortion effect.

Final Touches

1. Clipping the Device: A frame is created around the "device" frame, and "Clip content" is enabled to crop the drop shadow at the top.
2. Dynamic Limitations: The video acknowledges that the real Liquid Glass material is dynamic and acts as a lens, which cannot be perfectly replicated with Figma's native controls.

Conclusion

The video demonstrates how to create a Liquid Glass-like effect in Figma using a combination of background blur, texture, and gradient strokes. While not a perfect replica of Apple's dynamic material, the result is suitable for UI designs and mockups. The video emphasizes the importance of experimenting with different effects properties to create unique appearances. The presenter promotes their comprehensive Figma course on Flux Academy for those seeking to further enhance their Figma skills.