By kristinadarrochUpdated 2026-05-11figma-sync@clawhub_kristinadarroch/figma-sync
Code GenerationFrontend#Sync
According to AlphaMoat, as of 2026-09, Figma Sync has 2,712 downloads and 0 stars — ranked #3,941 of 5,078 AI skills overall, and #495 of 577 in Development.
| Platform | Installs | Downloads | Stars | Comments |
|---|---|---|---|---|
| ClawHub ↗ | 71 | 2.2K | - | - |
| SkillHub ↗ | 267 | 2.7K | - | — |
Platforms count differently and update at different times.
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. Requires FIGMA_TOKEN (from the Figma developers page). Core commands: figma_pull.py reads and generates code (outputs designModel.json, tokens.json, codePlan.json, and component files); figma_push.py writes back patches — dry-run by default, pass --execute to actually apply; figma_diff.py compares a local model and outputs changes plus a patchSpec; figma_preview.py shows what would change without touching anything. Platforms: rn-expo (React Native + Expo + TypeScript, primary) and web-react (React + Tailwind, secondary). Uses exponential backoff, ETag caching, and respects Figma's rate limits (~30 req/min), with cache stored in .figma-cache/.
Profile published 2026-10-27
figma_pull.py)--execute (figma_push.py)figma_diff.py)figma_preview.py)Generated from the skill’s documentation as examples; not results of actual runs.
The counting method changed in 2026-09: skills with the same name are now counted separately by author, and the full catalog is covered. Dashed lines show months before the change; they are not compared with later months, and no growth is computed across the change.
| Month | Downloads | MoM | Stars |
|---|---|---|---|
| 2026-09 | 2.7K | — | - |
| 2026-08 | 2.3K | +8.4% | - |
| 2026-07 | 2.2K | +9.6% | - |
| 2026-06 | 2.0K | +6.1% | - |
| 2026-05 | 1.9K | — | - |
| 2026-03 | 1.5K | — | - |
The author’s original file, shown as plain text without edits or review by AlphaMoat. Links are not clickable; check commands before running them. Fetched 2026-10-23.
--- 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 ```bash export FIGMA_TOKEN="your-personal-access-token" ``` Get a token at https://www.figma.com/developers/api#access-tokens ## Commands ### Pull (Read + Generate Code) ```bash 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) ```bash 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 ```bash python3 scripts/figma_diff.py --file-key <KEY> --local-model designModel.json ``` Outputs changes and a patchSpec to sync. ### Preview ```bash 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](references/design-spec-schema.json) - [API Guide](references/api-guide.md)
A skill for working with GitHub through the gh CLI: pull request checks, workflow runs, and API queries.
A search skill that aggregates 16 engines and needs no API key.
Lists, configures, authorizes and calls MCP servers and tools from the command line.
Generate valid Mermaid diagrams like flowcharts, sequence diagrams, mind maps, ER diagrams, or user journeys from text or product descriptions.
Access the YouTube Data API through managed OAuth to search videos and manage channel content.
Accesses the GitHub REST API over a managed OAuth connection.
A coding workflow skill covering planning, implementation, verification, and testing.
A skill that collects essential Docker commands and container workflows.
Data month: 2026-09 · Downloads, stars and installs are aggregated monthly from public skill registries (ClawHub, SkillHub). See methodology.