UI Parity compares them, property by property.
Point a story at a Figma frame. The addon extracts values from both sides and shows every mismatch — colors, spacing, type — right inside the Storybook panel.
Phase 0 · script-based value check · free · AI review coming next
Components
Alex Smith
Product Designer
ΔE 47.2 · token --color-primary
padding-y off by 8px
UI Parity running inside a real Storybook panel — expected vs. actual, per property.
See it in your Storybook
UI Parity lives as a panel tab inside the Storybook you already run. The verdict appears next to the component it's checking.
The gap
UI Parity works in two layers: exact checks you can trust today — and judgment for everything exact values can't measure, coming next.
Storybook
Renders components in isolation. Has no idea what Figma says they should look like.
Visual regression
Snapshots your stories and flags anything that changed since your last accepted build. Great for catching accidental regressions.
UI Parity
Compares your story to the Figma design you point it at — property by property, every run. Catches drift that was wrong from day one, not only what changed.
Phase 0 · what the script catches
Exact values catch what's measurable — perfectly, with zero false positives. The semantic, contextual, and emergent mismatches need judgment. That's AI review — where this is going.
Exact hex compare with perceptual ΔE. Flags wrong tokens, opacity drift, and color-space mismatches.
Padding, margin, gaps, and dimensions to the pixel. Figma HUG / FILL–aware; no false positives from auto-layout.
Font family, size, weight, and line-height compared against the resolved design token — not the raw string.
How it works
01
Add UI Parity to your Storybook config. No infrastructure, no service to run.
02
In the panel, paste the Figma frame URL for the story you're viewing. One-time per story. Auto-mapping is on the roadmap.
03
Open the UI Parity tab. See expected vs. actual values, per property, right next to the component it's checking.
Coming soon
Catches what a spec structurally can't — the mismatch no one thought to encode. A spec checks what you remembered to specify; AI review checks what actually rendered. The exact-value layer stays as the deterministic, zero-false-positive floor — AI adds judgment on top, it never replaces it.
Skip the manual link step. The addon will suggest and confirm the Figma frame for each story based on story metadata and component name.
Beyond Figma. Additional design sources land as they're production-ready.
Phase 0 · script-based · free · no signup · AI review coming next