Figma デザインを AI エージェントで読み書きできる MCP サーバーで、フレームワーク対応のコード生成と設計の直接編集が可能です。
中辛 の解説
Figwright は Figma デザイン要素を読み取って React・Vue などのフレームワーク対応コードに変換し、逆に記述内容から Figma キャンバスに直接フレームやテキスト・オートレイアウトを構築するツールです。MCP サーバー（Node.js 20.19+ または 22.12+）と Figma 無料版デスクトップアプリで動作し、プラグインはマニフェストからインポートする方式です。117 個のツールを備え、読み取りと書き込みの両方に対応し、既存コンポーネント・トークン・アイコンの再利用により生成コードをカスタマイズできます。複数エージェントが同時に動作できるうえ、ファイルごとに独立して作業を進められます。
こんなリポジトリです
こんなときに便利です
- デザイナーが Figma で作成した UI デザインを AI が React コンポーネントに自動変換し、開発者が実装時間を削減する
- エンジニアが仕様やコード記述から Figma キャンバスに直接デザイン要素を構築させ、デザインと実装の同期を取る
- 複数の AI エージェントが同じ Figma ファイル内で異なるフレーム領域を分担編集し、協調作業を実現する
主な機能
ほかとの違い
Dev Mode の有料シート不要で無料 Figma で動作し、読み取り専用でなく双方向編集と 117 ツール規模の操作が可能で、既存スタック・コンポーネント・トークンを生成コードに自動反映させます。
このリポジトリの作り方
はじめてですか？ むずかしくありません — 上から順にたどれば、自分の環境で動かして味見できます。
準備するもの
- MCP クライアント（Claude Code、Cursor、Codex など）
- Node.js 20.19 以上または 22.12 以上
- Figma デスクトップアプリ（無料プラン対応）
すぐに始める
- MCP クライアント設定ファイル（Claude Code の場合
.mcp.json）に以下を追加します。
{
"mcpServers": {
"figwright": {
"command": "npx",
"args": ["-y", "@figwright/mcp@latest"]
}
}
}
-
GitHub の最新リリースからプラグイン ZIP をダウンロードして解凍します。
-
Figma デスクトップアプリでメニュー → プラグイン → 開発 → マニフェストからプラグインをインポートを選択し、解凍した
manifest.jsonを指定します。 -
Figma でプラグイン（プラグイン → 開発 → Figwright）を開き、ローカルサーバーへの接続を確認します。
-
スキルをインストールします（オプション）。
npx skills add awdr74100/figwright/skills
- Figma でフレームを選択し、エージェントに「このselection を React コンポーネントとしてコード化してください」と指示します。
ギット飯トライで味見
入れるのが面倒で少し不安だったなら — 安全スキャンからインストールまで、ターミナル一行で終わります。
ターミナルに貼り付ければ、ギット飯の安全スキャン → 隔離フォルダへ clone → インストール → 実行方法の案内まで自動です。はじめてでも大丈夫 — この一行だけです。
npx gitbap-try awdr74100/figwright
Node.js さえあれば、インストールなしで動きます · ギット飯トライとは？ →
これを仕事に活かす
味見がすんだら次は応用です — 仕事やビジネスに活かす方法をまとめました。
レシピ — AI にこのまま頼んでみてください
レシピを読み込んでいます…
スター推移 · 7日
確認日時
使いやすさ · まねしやすいか
- ゆるいライセンス
- テストあり
- サンプル集
- 最近の更新
- AGENTS.md
- llms.txt
- テンプレート
最近の更新あり · 2026 年に作成
「デザイン・UI コンポーネント」 こういうリポジトリを毎週受け取りませんか？
毎週月曜の朝、選んだ一膳だけ。広告なし · いつでも解除。
自分のリポジトリですか？ README にギット飯バッジを貼る
[](https://www.gitbap.com/r/awdr74100/figwright)Claude からそのまま使う — ギット飯のつなぎ方
ギット飯を Claude につなぐと、こうしたリポジトリを Claude・Cursor・Codex から直接さがして試せます。
Claude の設定 → コネクタにこのアドレスを貼り付け。
https://www.gitbap.com/api/mcpプラグインを入れると /gitbap-trending·/gitbap-try のスラッシュコマンドで、その場でリポジトリを試せます。Claude Code で下の 2 行を順に実行してください。
/plugin marketplace add jakeparkcolde/gitbap-cowork/plugin install gitbap-cowork@gitbapAI が README をもとに要約しました · 原文を見る