figma-sync

⚠Review·Scanned 2/18/2026

This skill syncs Figma files to code and back, generating React Native/React components and design tokens. It requires FIGMA_TOKEN, provides shell commands like python3 scripts/figma_pull.py --file-key <KEY>, and makes network calls to https://api.figma.com.

from clawhub.ai·vb3926b8·74.9 KB·0 installs
Scanned from 1.0.0 at b3926b8 · Transparency log ↗
$ vett add clawhub.ai/kristinadarroch/figma-syncReview findings below

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