AlphaMoatによると、2026-09時点でFigma Syncのダウンロード数は2,712、スター数は0で、AIスキル全体5,078件中3,941位、開発では577件中495位です。

インストール数

267

ダウンロード数

2712

スター数

総合順位

#3,941

全体の上位 78% · 開発の上位 86%

プラットフォーム	インストール数	ダウンロード数	スター数	コメント
ClawHub ↗	71	2246	-	-
SkillHub ↗	267	2712	-	—

プラットフォームごとに集計方法と集計時点が異なります。

このスキルでできること

Figma ファイルを読み込み、design token を抽出し、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 ファイルからデザインモデルとトークンを取得しコンポーネントコードを生成（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 コンポーネントを生成して

ローカルモデルと 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 原文

作者が公開した元のファイルをテキストのまま表示しています。AlphaMoat による編集や審査はしていません。リンクはクリックできません。コマンドは内容を確認してから実行してください。取得日 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)