One source of truth. No manual handoff.
Token Bridge syncs @wyliedog/tokens to Figma Variables — so design references the same contract as code. When a value moves in the repo, the next sync moves Figma with it.
source
@wyliedog/
v0.0.1
transform
Token Bridge
v0.2.0
Mapping … 1090/1185
target
Figma Variables
Wylie Dog · UI
- Variables synced
- 1185
- Avg sync time
- 2.1s
- Manual handoffs
- 0
- Drift
- none
JSON source
All 1185 design tokens live in a single source-of-truth JSON file inside the monorepo — color, type, spacing, radius, elevation, and motion. Every token is OKLCH, every value is intentional.
Trigger the sync
One command reads the token JSON, transforms every value, and opens a connection to the Figma Variables API. No browser plugins, no manual copy-paste, no export steps.
Map CSS → Figma hierarchy
Token Bridge translates the flat CSS variable namespace into Figma's three-tier collection structure: Primitives, Semantic, and Components. The mapping is deterministic — no manual configuration.
Light + dark modes
Token Bridge writes both modes in a single pass. Every color token gets a Light value and a Dark value. Figma's mode switching reflects your code's theme switching exactly.
Propagate to components
Once Figma Variables are updated, every component in the Figma library that references those variables reflects the new values instantly — no relinking, no frame-by-frame updates.
0.58 → 0.54 lightness. Propagated to all 794 component-scoped references.- name: Sync design tokens to Figma if: contains(github.event.head_commit.modified, 'packages/tokens') run: pnpm sync:figma env: FIGMA_TOKEN: ${{ secrets.FIGMA_BRIDGE_TOKEN }}
One command. No GUI required.
Token Bridge runs from anywhere a pnpm script can: your laptop, CI, a release workflow, a pre-commit hook. The output is diff-able, the auth is keychain-managed, and a dry-run flag previews changes before they hit the file.
Requires Node 20+ and a Figma file with editor access. The bridge talks to Figma's REST Variables API — no plugin install.
Variables panel,
fully populated.
After one sync, the Figma Variables panel shows all 1185 tokens organized into three collections with Light and Dark modes populated. Designers use real token names — not hex codes, not guesses.
Keep design and code in sync.
Set it up once, forget it forever. Your designers stop asking which value is current, your engineers stop chasing drift, and your tokens become the single thing that's actually true.