figma-sync
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"
Install via CLI (Recommended)
clawhub install openclaw/skills/skills/kristinadarroch/figma-syncfigma-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 # actually apply
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
- DesignSpec Schema
- API Guide
Metadata
Not sure this is the right skill?
Describe what you want to build — we'll match you to the best skill from 16,000+ options.
Find the right skillPaste this into your clawhub.json to enable this plugin.
{
"plugins": {
"official-kristinadarroch-figma-sync": {
"enabled": true,
"auto_update": true
}
}
}