Skip to content
A/B Token Checker - Compare design tokens between two frames

A/B Token Checker - Compare design tokens between two frames

by 준

Spot token mismatches, hardcoded values & drift

FreeFigma

Installs

0

Likes

1

Users

5

Views

5

Preview

A/B Token Checker - Compare design tokens between two frames preview

About this plugin

A/B Token Checker compares any two frames — Light/Dark, before/after, or any A/B pair — and verifies that matching layers reference the same design tokens: variables and color styles.A variant should only change resolved values, never the tokens. But drift creeps in: a color gets hardcoded, a token is swapped for a similar one, a style replaces a variable, or a layer exists on only one side. This plugin surfaces all of it in one pass.

What it catches• Token mismatch — A uses bg/surface, B uses bg/elevated• One-side hardcoded — a raw hex where a token should be• Both-side hardcoded — values worth tokenizing• Structure differences — layers that exist on only one sideHow it works1. Select exactly two frames and run the plugin2. Layers are paired by path, with a same-name fallback3. Review in a two-pane view: full A/B previews on the left, findings grouped by component on the right (Matched · Mismatches · Structure · Hardcoded)4. Click any card to select those layers on canvas5. Unify Layer Names syncs B-side layer names to ACoverage• Solid fill/stroke colors (variables & color styles), corner radius, opacity, padding, item spacing, and text properties• Matched variables show a Mode × Value table with color swatches• No network access — everything runs locally in your file

More accessibility tools plugins

View all