sync-figma-token — Claude Code skill: sync tokens with Figma
This skill diffs design tokens in code against Figma variables, reports drift, and applies changes only after you approve them.
npx skills add firebenders/sync-figma-token-skill --skill sync-figma-token -a claude-codeWhat sync-figma-token does
The skill reads tokens from JSON sources and lines them up with Figma variables: key, type, per-mode values, aliases, scopes, code syntax. Drift lands in named buckets — missing on either side, value mismatch, broken alias, type or mode mismatch. Every run starts with a dry-run: a headline count plus a detailed list of token keys with before and after values.
Then it stops. The skill must ask for approval and will not fire write calls in the same turn as the dry-run. Nothing changes until you answer yes. Deletion is off by default — the policy is archive_only, and removing tokens takes an explicit instruction.
One hard prerequisite: load figma-use before every use_figma call, otherwise the skill won't run. You also set the policies up front — direction, conflict handling, name normalization, mode mapping. Reports are persisted to /tmp/sync-figma-token-dry-run-{runId}.json and /tmp/sync-figma-token-final-{runId}.json, and the skill tells you if writing them fails. Write calls go one at a time, never in parallel.
What it helps with
- find drift between code tokens and Figma variables
- validate color and numeric values before writing to Figma
- repair broken aliases and scopes
- normalize token names across both sides
- keep a drift report for review after a sync
Example prompts for the agent
- diff
tokens.jsonagainst the Figma variables and show me the drift - run a dry-run sync with direction
code_to_figma - check aliases and scopes, don't apply conflicts without me
How to install sync-figma-token
1Skills CLI (Vercel)
npx skills add firebenders/sync-figma-token-skill --skill sync-figma-token -a claude-code2Manually: put the files in place
~/.claude/skills/sync-figma-token/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/sync-figma-token/
1Skills CLI (Vercel)
npx skills add firebenders/sync-figma-token-skill --skill sync-figma-token -a codex2Manually: put the files in place
.agents/skills/sync-figma-token/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add firebenders/sync-figma-token-skill --skill sync-figma-token -a cursor2Manually: put the files in place
.cursor/skills/sync-figma-token/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install firebenders/sync-figma-token-skill sync-figma-token2Manually: put the files in place
.github/skills/sync-figma-token/SKILL.md1Skills CLI (Vercel)
npx skills add firebenders/sync-figma-token-skill --skill sync-figma-token -a gemini-cli2Platform CLI
gemini skills install https://github.com/firebenders/sync-figma-token-skill --path skills/sync-figma-tokenManually: put the files in place
.devin/skills/sync-figma-token/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add firebenders/sync-figma-token-skill --skill sync-figma-token -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about sync-figma-token
How do I install sync-figma-token in Claude?
Run npx skills add firebenders/sync-figma-token-skill --skill sync-figma-token -a claude-code. The skill lands at ~/.claude/skills/sync-figma-token/SKILL.md.
What does sync-figma-token do?
It compares design tokens in code with Figma variables, reports the drift, and applies fixes once you approve them.
What does the skill need to run?
It requires figma-use to be loaded before every use_figma call. You also set policies for direction, conflicts, name normalization and mode mapping.
