| name | figma-sync |
| description | Read Figma files, extract design tokens, generate React Native Expo TS or Web React + Tailwind code,
write back to Figma, and diff local models against Figma for minimal patches.
Triggers: "pull figma", "sync figma", "figma to code", "push to figma", "diff figma",
"extract design tokens", "generate from figma", "preview figma changes"
|
figma-sync
Bidirectional Figma ↔ Code synchronization skill.
Setup
export FIGMA_TOKEN="your-personal-access-token"
Get a token at https://www.figma.com/developers/api#access-tokens
Commands
Pull (Read + Generate Code)
python3 scripts/figma_pull.py --file-key <KEY> --platform rn-expo --output-dir ./out
python3 scripts/figma_pull.py --file-key <KEY> --node-ids 1:2,3:4 --platform web-react --output-dir ./out
Outputs: designModel.json, tokens.json, codePlan.json, and generated component files.
Push (Write Back)
python3 scripts/figma_push.py --file-key <KEY> --patch-spec patch.json
python3 scripts/figma_push.py --file-key <KEY> --patch-spec patch.json --execute
Dry-run by default. Pass --execute to apply changes.
Diff
python3 scripts/figma_diff.py --file-key <KEY> --local-model designModel.json
Outputs changes and a patchSpec to sync.
Preview
python3 scripts/figma_preview.py --file-key <KEY> --operations ops.json
Shows what would change without touching anything.
Platforms
- rn-expo: React Native + Expo + TypeScript (primary)
- web-react: React + Tailwind CSS (secondary)
Rate Limits
Uses exponential backoff, ETag caching, and respects Figma's rate limits (~30 req/min).
Cache stored in .figma-cache/ directory.
References
