Apple’s New Liquid Glass Design: Practical Guidance for Designers

UXBrandStart-ups

22 Jul

From native mobile apps, hybrid REACT Native apps and web apps, we have the experience to help you.

The Liquid Glass language introduces a translucent, adaptive UI material across Apple’s 2025 OS releases and now ships in Figma’s latest effect update. When used thoughtfully, it can enrich hierarchy, but it carries real performance and accessibility costs if over-applied. The sections below summarise the design’s strengths and pitfalls, show how to recreate it in Figma, and outline best-practice patterns to keep products inclusive.

1. What Liquid Glass is and isn’t

A dynamic “digital meta-material” that combines real-time blur, depth-based refraction and specular highlights to create floating panels and controls.[1][2]
Adapts colour/contrast to underlying content and honours system settings for Reduced Transparency, Reduced Motion and High Contrast.[1][3]
Requires higher-end Apple silicon to deliver 60 fps; older devices see a frosted fallback.[4]
Apple’s accessibility guidance stresses content-first hierarchy and minimal glass above busy imagery.[1]

Benefits

Cohesive cross-platform look and feel.[2]
Clear spatial grouping: floating glass layers naturally separate controls from content.[1][5]
Subtle motion feedback (parallax/specular) improves perceived tactility for motor-impaired users.[6]

Risks

Legibility drops on complex wallpapers or where glass thickness is too light: contrast ratios can fall below WCAG 2.2 AA.[7][8]
Overuse causes cognitive overload; too many translucent panes can feel “visual noise”.[9]
GPU strain on low-power devices; fallback frost may diverge from the intended brand aesthetic.[4]

iOS 26 Control Centre using the Liquid Glass design.

2. Re-creating Liquid Glass in Figma (latest update)

Figma 2025.07 introduces a built-in Glass effect, mirroring Apple's specifications.[10][11] To convert any frame or component:

1. Select frame → Effects → Glass.

2. Adjust parameters:

Lighting angle (simulates device tilt).
Depth 0-30: Thicker glass increases refraction but harms readability. Keep ≤ 20 for UI controls.[11]
Frost 10-25: For accessible translucency; > 30 looks “milky plastic”.[11]

3. Maintain text layers above the glass group; apply an inner shadow (white 30%, blur 6) for lift.[12]

4. Export motion prototypes with Smart Animate to show morphing tab bars and context menus.[11]

Tip: Build two variants—“Default” (full glass) and “Fallback” (20% opacity solid)—and link them to the user’s prefers-reduced-transparency token so devs can swap at runtime.

3. Accessible usage guidelines

Apple’s HIG update and independent audits converge on four rules of thumb:

1. Minimum contrast: ensure 4.5:1 text/background ratio after blur. Use the new Xcode Accessibility Inspector or Figma Stark plugin.[1][3]

2. Layer economy: one primary glass sheet per view (toolbar, modal, or floating panel). Avoid stacking two translucent panes; nest buttons on solid fills inside the glass.[5]

3. Respect system toggles: Reduce Transparency must replace glass with solid colour; Reduce Motion disables parallax highlights.[8]

4. Motion limits: specular highlight amplitude ≤ 6 px; disable on battery-saver devices to prevent nausea for vestibular-sensitive users.[7][13]

Quick reference table

  
    
        Pattern
        Do
        Avoid
        Notes
      

    
        Navigation bars
        Single 15 pt glass with adaptive tint
        Glass over video backgrounds
        Keeps 4.5 : 1 contrast
      

        Cards/modals
        Frost 20-25, depth ≤ 15
        Nesting glass inside glass
        One translucent layer per Z-group
      

        Buttons
        Solid fill on glass; glass-on-glass only for featured CTAs at 18 pt+
        Thin outline-only buttons
        Solid ensures touch target clarity
      

        Icon theme
        Default or Light/Dark icons
        “All Clear” icons for general public homescreen
        Transparent icons fail discoverability for many users
      

        Lockscreen clock
        Morph within bounding box; leave 8 pt safe area
        Overlapping dog ears & time simultaneously
        Illustration below
      

  

4. Maintaining the Designed for Humans tone

Designed for Humans advocates a warm, plain-English voice: inclusive, down-to-earth, jargon-free. Keep sentences short, favour active verbs, prioritise clarity over cleverness, and speak directly to people, not “users”.[16]

When writing microcopy for glass components:

Lead with the verb (“Share file”) and drop helper verbs (“Please”) unless politeness adds value.
Offer context hints only when required (“Swipe up to close”).
Ensure tooltips remain visible on solid backgrounds when transparency is off.