A/B Token Checker - Compare design tokens between two frames
Spot token mismatches, hardcoded values & drift
Plugin 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
Plugin Details
| Version | 1 |
|---|---|
| Created | July 13, 2026 |
| Last Updated | July 13, 2026 |
| Category | Accessibility tools |
| Creator | 준 |
| Stats | 0 installs, 1 likes |
| Pricing | Free |
Technical Details
- API:1.0.0
- UI:dist/ui.html
- main:dist/code.js
- Document Access:dynamic-page
- Editor Types:figma
- Allowed Domains:
- none
More Like This
Discover other plugins in the Accessibility tools category.