Figma Sync
@kristinadarroch
npx machina-cli add skill @kristinadarroch/figma-sync --openclawfigma-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
Overview
Figma Sync reads Figma files, extracts design tokens, and generates React Native Expo TS or Web React + Tailwind code. It can write back patches to Figma and diff local models against the Figma design to minimize changes.
How This Skill Works
The skill authenticates with Figma via FIGMA_TOKEN to access design data. Pull commands read designs and produce outputs like designModel.json, tokens.json, codePlan.json, and platform-specific component code for rn-expo or web-react. Push applies patch-spec back to Figma, while diff and preview reveal changes without applying, enabling safe, incremental updates.
When to Use It
- Start a codegen workflow from a Figma handoff by pulling design models and token data for RN or web.
- Extract design tokens and scaffold platform-specific code (React Native Expo TS or Web React + Tailwind).
- Diff local models against Figma to generate minimal patchSets before pushing changes.
- Preview potential changes to understand impact without modifying Figma or local code.
- Keep Figma designs and codebase synchronized over time, with regular pull/diff/push cycles.
Quick Start
- Step 1: Set up authentication by exporting FIGMA_TOKEN and identify your Figma file key.
- Step 2: Run pull for your platform (rn-expo or web-react) to generate designModel.json, tokens.json, and code templates.
- Step 3: Review outputs with diff/preview; push patches only after confirming changes.
Best Practices
- Securely store FIGMA_TOKEN and limit access to it per project; rotate tokens periodically.
- Always start with a pull to generate designModel.json, tokens.json, and codePlan.json before editing code.
- Use diff/preview to review changes prior to pushing patches back to Figma.
- Version-control generated artifacts (designModel.json, tokens.json, codePlan.json) alongside source code.
- Choose the correct platform (rn-expo vs web-react) to ensure generated code aligns with your tech stack.
Example Use Cases
- A mobile app team uses Figma Sync to convert design tokens from Figma into React Native Expo TS components.
- A web product uses Figma Sync to generate React + Tailwind code from Figma, keeping design tokens in sync with UI components.
- Designers trigger 'pull figma' to refresh code plans and token mappings after major UI updates.
- Developers push minor patch changes back to Figma after code reviews, using a dry-run first to avoid surprises.
- A design-to-code workflow employs diff to propose minimal, safe patches that align Figma with the existing codebase.
