據 AlphaMoat 統計,截至 2026-09,Figma Sync 累計下載 2,712 次、獲 0 個星標,在全部 5,078 個 AI 技能中排名第 3,941 位,在「開發程式設計」分類(577 個)中排名第 495 位。

累計安裝

267

累計下載

2712

星標

全站排名

#3,941

全站前 78% · 「開發程式設計」前 86%

平台	累計安裝	累計下載	星標	評論
ClawHub ↗	71	2246	-	-
SkillHub ↗	267	2712	-	—

各平台的計數口徑不同,統計時間不一致。

這個技能是做什麼的

讀取 Figma 檔案、提取 design tokens、生成 React Native Expo TS 或 Web React + Tailwind 程式碼、寫回 Figma，並將本地模型與 Figma 做差異比對以生成最小補丁。需要 FIGMA_TOKEN（在 Figma 開發者頁面獲取）。核心命令：figma_pull.py 讀取並生成程式碼（輸出 designModel.json、tokens.json、codePlan.json 和元件檔案）；figma_push.py 寫回補丁——預設 dry-run，傳 --execute 才實際應用；figma_diff.py 對比本地模型輸出變更與 patchSpec；figma_preview.py 預覽變更但不改動任何內容。平台支援 rn-expo（React Native + Expo + TypeScript，主要）和 web-react（React + Tailwind，次要）。內建指數退避與 ETag 快取，遵守 Figma 限速（約 30 req/min），快取存於 .figma-cache/。

資料釋出於 2026-10-27

可以用來做什麼

從 Figma 檔案拉取設計模型、tokens 並生成元件程式碼（figma_pull.py）
以 dry-run 方式生成寫回補丁，確認後用 --execute 應用（figma_push.py）
對比本地設計模型與 Figma 的差異並生成 patchSpec（figma_diff.py）
預覽將要發生的變更而不實際修改（figma_preview.py）

什麼時候用

需要把 Figma 設計轉成 React Native Expo 或 Web React 程式碼時
需要同步原生代碼改動回 Figma 或先預覽變更影響時

示例提示詞

以下是根據技能文件生成的示例,不代表實際執行結果。

把這個 Figma 檔案拉下來生成 Expo 元件

diff 一下本地模型和 Figma 有什麼差異

預覽一下這些變更會影響什麼，先別真的寫回

月度資料趨勢

累計下載2712

星標-

2026-09 起統計方法調整:同名技能按作者分別統計,並覆蓋全部技能。圖中虛線為調整前的月份,與之後的資料不直接比較,也不計算跨越調整的增長。

月份	累計下載	環比	星標
2026-09	2712	—	-
2026-08	2341	+8.4%	-
2026-07	2159	+9.6%	-
2026-06	1969	+6.1%	-
2026-05	1856	—	-
2026-03	1500	—	-

SKILL.md 原文

以下是作者釋出的原始檔案,按純文字顯示,本站未做修改或稽核;其中的連結不可點選,命令請核實後再執行。抓取於 2026-10-23。

1.8 KB · ClawHub v1.0.0

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

展開全部(共 72 行)


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)