modbender 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 # 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