Sync Figma Token
Keeps your design tokens and Figma variables in sync with a disciplined workflow that won't let you shoot yourself in the foot. It diffs tokens from JSON sources or platform code against Figma variables, flags every type of drift (missing tokens, value mismatches, broken aliases, scope differences), then forces you to approve changes before writing anything back. The safety rails are non-negotiable: you get a dry run summary, it stops and asks for confirmation, and only then applies creates, updates, or archives in a strict sequence. Persists reports to disk so you have an audit trail. If you've ever had tokens drift between design and code and needed more than a prayer and a script, this handles the boring paranoid parts.
- skills.sh installs
- 716
- GitHub stars
- 27
- last updated
- Jun 3, 2026
Install
$ npx -y skills add firebenders/sync-figma-token-skill --skill sync-figma-token --agent claude-codeInstalls into .claude/skills of the current project.
Files
sync-figma-token
Use this skill for token parity workflows (code tokens vs Figma variables).
MANDATORY prerequisite: load figma-use before every use_figma call.
Non-negotiable safety rule
After producing dry-run output, you MUST STOP and ask for approval.
- Do NOT run any write
use_figmacalls in the same turn as dry-run output. - Ask a normal confirmation question (example: "Apply these changes? (yes/no)").
- Only proceed on explicit affirmative approval.
- If the response is unclear or negative, do not apply writes.
Standard source formats (required)
Prefer real token sources in this order:
- Design Tokens JSON (
tokens.json,tokens/*.json, DTCG-style) - Style Dictionary input JSON
- Platform theme sources (Compose/Kotlin/TS) only when JSON source is unavailable
If source format is non-standard, explicitly state assumptions in dry-run output.
Required policies before writes
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/firebenders/sync-figma-token-skill
- Category
- Design & UI/UX
- First seen
- Jun 3, 2026
Recommended
More Design & UI/UX
writing-react-native-storybook-storiesstorybookjs/react-nativeCreate and edit React Native Storybook stories using Component Story Format (CSF). Use when writing .stories.tsx files, adding stories to React Native component715skills.sh installs
presentationsdylantarre/animation-principlesUse when creating Keynote, PowerPoint, Google Slides animations, or any presentation motion design work.705skills.sh installs
responsive-web-designsecondsky/claude-skillsBuilds adaptive web interfaces using Flexbox, CSS Grid, and media queries with a mobile-first approach. Use when creating multi-device layouts, implementing fle703skills.sh installs
storybook-story-writingthebushidocollective/hanUse when creating or modifying Storybook stories for components. Ensures stories follow CSF3 format, properly showcase component variations, and build successfu678skills.sh installs
tool-design-sprint-prototype-planproduct-on-purpose/pm-skillsDay 4 (Thursday) move of a Design Sprint that produces the planning artifact for the day. Output covers the prototype role plan (Maker, Stitcher, Writer, Asset 666skills.sh installs