Vivek — Glass Style Applier

Role Product designer

Timeline ~3 weeks

Scope Team-requested redesign; plugin approach self-initiated

Tools Figma, Figma Plugin API, Claude

Date 20 February 2026

The Ask

From flat to glass: Migrating an iOS app to Apple's new design language

The team wanted the app's existing iOS screens — dashboards, device cards, hierarchy panels, port views — moved from the current flat design system to Apple's Liquid Glass material. With dozens of screens built on the old system, manually reapplying a new material treatment to every card, button, and nav bar would be slow and inconsistent.

Automation

Batch migration mode — classify and apply, per frame, in one click

Glass presets

Nav bar, card, and button, each with its own material values

Tooling

Custom Figma plugin built to automate the migration

Process

Built and debugged with Claude throughout

The Challenge

Why this wasn't a simple restyle

Blur › Fill opacity › Stroke

Liquid Glass is a different material logic, not a new color. Every card, button and nav bar needed new blur, translucency and stroke properties, applied by hand across hundreds of layers.

A style, not a swap

Glass requires blur, translucency, and stroke together — a single color change doesn't reproduce it.

Hundreds of layers, no consistent naming

Existing layers were auto-named (Frame 488267, etc.), ruling out find-and-replace by name.

Element size changes the recipe

A nav bar can be almost fully see-through; a button with text on it can't — each element type needs its own values.

Building the Plugin

Starting with a working skeleton

Before any styling logic was written, the plugin needed to actually run inside Figma and talk to itself in both directions.

Initial preset values were cross-checked against Apple's official design library file alongside a few Liquid Glass kits on Figma Community — their blur and opacity values differed from the first pass, and the three presets were adjusted accordingly before finalizing them.

visionOS 2 UI Kit, Apple Design Resources

Three presets, grounded in Apple's actual spec

The three presets aren't interchangeable values — they scale with how much a user needs to read or tap. Nav bar carries no critical content, so it leans furthest into the material: highest blur, lowest fill. Button carries text and needs a confident tap target, so it stays closest to opaque. Card sits in between, translucent enough to feel like glass without losing the content underneath.

Nav bar

Blur 40 • Fill 12% • Stroke 20%

Card

Blur 30 • Fill 16% • Stroke 25%

Button

Blur 24 • Fill 20% • Stroke 30%

Why a plugin, not just a style

A saved style applies one fixed value to whatever's selected — it still can't decide anything on its own. The real upgrade was giving the plugin the ability to scan an entire frame, look at each layer, and decide what it is.

No Manual mode

Select one layer, pick a preset, apply. Same speed as using a saved style.

Batch migration

Select one frame. The plugin scans every nested layer, classifies each by size, and applies the right preset automatically.

Select a frame ↕ Scan every nested layer ↕ Classify by size ↕ Apply + report

Batch migration scanning a frame in Figma

What Broke, and What I Learned

Real iteration, not a smooth first pass

Three things went wrong along the way — each one changed how the plugin actually works.

Broke Fixed

Button with fill logic that overwrote its original color

The first fill logic replaced a layer's original color entirely instead of layering glass on top — a blue button turned solid white.

Button with translucent fill layered on top of its original color

Appended the translucent white fill on top of the existing fill array instead of overwriting it — original color stayed visible underneath.

Scanned 136 layers, 86 flagged as buttons

A batch run reported "86 buttons" on one screen — the size thresholds were catching tiny 16–24px status icons.

Scanned 181 layers with icons correctly skipped

Added a 40px minimum-dimension floor to the classifier so only real UI elements qualify, not icons.

Device card on a plain white panel with invisible glass effect

Glass effects were invisible on plain white panels — a translucent white layer on white content has almost no contrast.

Device card on a light blue panel with visible glass effect

Not a code fix — a design finding. Prioritized screens with real color/detail behind glass elements, matching Apple's own guidance that glass sits over content, not blank space.

Outcome

From flat to glass, at scale

The batch tool automatically classified and migrated nav bars, cards, and buttons across a frame in a single run — skipping anything it couldn't confidently identify rather than guessing wrong — with manual mode still available to handle those cases by hand.

Before / after

Operations cards before and after glass migration

Port View card before and after glass migration

Operations cards — before/after

Clearest visible shift — saturated color to frosted glass

Port View card — before/after

Fill and stroke refinement on a UI element

The plugin's value wasn't the styling values themselves — those could've lived in a saved style. It was the ability to scan an entire frame, classify each layer without relying on naming, and apply the right glass treatment automatically, cutting a manual layer process down to a single click per screen.