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

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

Spot token mismatches, hardcoded values & drift

Plugin 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

Plugin Details

Version1
CreatedJuly 13, 2026
Last UpdatedJuly 13, 2026
CategoryAccessibility tools
Creator
Stats0 installs, 1 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:dist/ui.html
  • main:dist/code.js
  • Document Access:dynamic-page
  • Editor Types:
    figma
  • Allowed Domains:
    • none