Liquid Glass

About this plugin

Hi, I'm Dylan de Heer, co-founder of Square One. We built this free plugin to help designers create stunning Apple-inspired glass effects

Apple's latest design direction features beautiful liquid glass elements - from iOS interfaces to macOS windows. These effects create depth and sophistication, but recreating them manually in Figma was time-consuming and often inconsistent.

So we built Liquid Glass to bring Apple's authentic glass physics directly to your Figma workflow.

What Apple's Glass Language Looks Like

Apple's new glass effects aren't just simple transparency. They feature:

1. Dynamic lighting that responds to light source position
2. Multi-layer depth with inner shadows and highlights
3. Variable blur that creates realistic thickness
4. Smart transparency that adapts to brightness conditions

Our plugin recreates these exact specifications.

What We Built

1. Authentic Apple Glass Physics
2. Real light calculations with proper shadow casting
3. 5-layer rendering system matching Apple's approach
4. Dynamic transparency that responds to lighting direction

Interactive Light Control

1. Drag a light source around a glass sphere interface
2. Watch shadows and highlights update in real-time
3. Find the perfect lighting angle with immediate feedback
4. Physics-accurate shadow positioning

Advanced Glass Controls

1. Brightness slider: Seamlessly blend from dark to light glass
2. Diffusion slider: Adjust blur and glass thickness
3. Dynamic shadows: Inner and drop shadows that follow light direction
4. Smart blending: Automatic blend modes for authentic appearance

Professional Workflow

1. Non-destructive preview - experiment safely
2. One-click apply when you're satisfied
3. Instant reset to return to original designs
4. Batch processing for multiple objects

Perfect For Apple-Style Design

Interface Elements

1. Navigation bars with subtle depth
2. Card components with professional transparency
3. Modal overlays with authentic blur
4. Button states with glass highlights

Modern Product Design

1. Hero sections with premium glass feel
2. Dashboard panels with layered transparency
3. Mobile interfaces matching iOS aesthetics
4. macOS-style window treatments

How It Works

We focused on simplicity:

1. Select your objects in Figma
2. Open Liquid Glass plugin
3. Drag the light source to position lighting
4. Adjust brightness and diffusion sliders
5. Apply to make changes permanent

The plugin handles all the complex Apple-specification calculations while you focus on the design.

Technical Implementation

5-Layer Glass System

1. Background blur (4-40px based on diffusion)
2. Brightness-dependent fill (black/white with dynamic opacity)
3. Tight inner shadow for sharp light reflection
4. Soft inner shadow for light diffusion
5. Dual drop shadows for realistic depth

Physics-Based Lighting

1. Shadows cast away from light source
2. Highlights positioned toward light source
3. Proper angular calculations for realistic effects
4. Real-time updates as you adjust lighting

Performance Optimized

1. 60fps smooth interactions
2. GPU-accelerated dragging
3. Smart caching for complex projects
4. Optimized for professional workflows

Our Philosophy

At Square One, we believe powerful design tools should be accessible to everyone. That's why Liquid Glass is completely free.

We're designers ourselves, and we built this tool the way we wish all plugins worked:

1. Intuitive - No learning curve required
2. Powerful - Professional Apple-quality results
3. Fast - Smooth, responsive interactions
4. Free - No subscriptions or hidden costs

Get Started

1. Completely free forever
2. Works with all Figma plans
3. Regular updates based on Apple's evolving design language
4. Built by designers who use it daily

Liquid Glass brings Apple's sophisticated glass effects to your Figma workflow. We're excited to see how it enhances your designs.

Dylan de Heer

Co-founder, Square One