据 AlphaMoat 统计,截至 2026-09,Figma Sync 累计下载 2,712 次、获 0 个星标,在全部 5,078 个 AI 技能中排名第 3,941 位,在「开发编程」分类(577 个)中排名第 495 位。

累计安装

267

累计下载

2,712

星标

全站排名

#3,941

全站前 78% · 「开发编程」前 86%

平台	累计安装	累计下载	星标	评论
ClawHub ↗	71	2,246	-	-
SkillHub ↗	267	2,712	-	—

各平台的计数口径不同,统计时间不一致。

这个技能是做什么的

读取 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 有什么差异

预览一下这些变更会影响什么，先别真的写回

月度数据趋势

累计下载2,712

星标-

2026-09 起统计方法调整:同名技能按作者分别统计,并覆盖全部技能。图中虚线为调整前的月份,与之后的数据不直接比较,也不计算跨越调整的增长。

月份	累计下载	环比	星标
2026-09	2,712	—	-
2026-08	2,341	+8.4%	-
2026-07	2,159	+9.6%	-
2026-06	1,969	+6.1%	-
2026-05	1,856	—	-
2026-03	1,500	—	-

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)