grafta

Figma ファイルと会話しましょう。
Figma ファイルを用意すれば、そのファイルと会話できます。中身を AI に尋ねたり、変更したり、普段使っている言語でコードにしたりできます。
Figma アカウントも、起動中の Figma アプリも、API の制限も必要ありません。

試してみる · インストール · 質問できること · ツール · 制限 · FAQ · ウェブサイト

これは何ですか？ Claude、Cursor、Codex などの AI アプリが使う、無料のオープンソースツールです。MCP を通じて接続します。これは AI アプリがツールに接続するための仕組みです。コンピューター上の Figma ファイルを正確に読み取るため、AI は実際の値に基づいて作業でき、推測することはありません。

.fig とは何ですか？ Figma ファイルです。Figma で「File → Save local copy…」を選択してください。誰かから送られてくることもあります。スライド、FigJam、Sites のファイルにも対応しています。

自分にも使えますか？ Figma ファイルと AI アプリをお持ちなら、使えます。デザイナーはファイルを変更し、開発者はコードに変換し、ファイルを受け取った人はその内容を尋ねられます。

試してみる

1. AI アプリに grafta をインストールします。

2. ファイルを用意します。ご自分のファイルでも、上のカードの サンプルでも構いません。

3. 自然な言葉で依頼します。

   grafta で order.fig を開いてください。中身は何ですか？

   明るいテーマにして、コントラストを確認し、新しいファイルとして保存してください。

   では、コードにしてください。

grafta は元のファイルを上書きしません。新しいファイルとして保存し、完了したと伝える前に読み戻して確認します。Figma で開いて確認してください。コードの品質は AI によって異なります。grafta は正確な値を提供しますが、コード自体は作成しません。

インストール

場所	実行方法
Claude Desktop	grafta.mcpb をダウンロードして開きます
Claude Code	/plugin install grafta --marketplace n0ss4/grafta
ChatGPT desktop, Codex	codex plugin marketplace add n0ss4/grafta@main && codex plugin add grafta@grafta
macOS, Linux	curl -fsSL https://raw.githubusercontent.com/n0ss4/grafta/main/install.sh | sh
Homebrew	brew install n0ss4/tap/grafta
Windows	irm https://raw.githubusercontent.com/n0ss4/grafta/main/install.ps1 | iex
npm	npx -y grafta mcp
Rust	cargo install grafta

Claude Desktop はファイルを開くと、Settings → Extensions からバンドルをインストールします。ターミナルも Node.js も必要ありません。バイナリは署名されていません。macOS で初回起動時に grafta を確認できないと表示された場合は、System Settings → Privacy & Security で許可してください。 うまく動作しない場合は、トラブルシューティングで状況に応じた対処方法を確認できます。

Claude Code プラグインはサーバーを登録し、モデルにその使い方を教えます。それ以外の場所では、次の設定を一度だけ登録してください。

claude mcp add grafta -- grafta mcp

または、JSON で設定するクライアントでは、次のように設定します。

クライアント	ファイル	設定
Cursor	.cursor/mcp.json (or ~/.cursor/mcp.json)	{ "mcpServers": { "grafta": { "command": "npx", "args": ["-y", "grafta", "mcp"] } } }
Windsurf	~/.codeium/windsurf/mcp_config.json	Cursor と同じ
Claude Desktop, by hand	claude_desktop_config.json	Cursor と同じ
VS Code	.vscode/mcp.json	{ "servers": { "grafta": { "command": "npx", "args": ["-y", "grafta", "mcp"] } }

スクリプト、Homebrew、または Cargo で grafta をインストールした場合は、"command": "grafta", "args": ["mcp"] とすれば、npm を使わず同じように動作します。

macOS（Apple silicon および Intel）、Linux（x86_64 および arm64）、Windows（x86_64）向けのビルド済みバイナリを用意しています。自己完結型のバイナリが 1 つです。Apple silicon 搭載の Mac で手動実行しており、CI では Linux と Windows でもテストに合格しています。Claude Code、Cursor、VS Code、Windsurf、Codex、ChatGPT デスクトップアプリは npx で起動します。その実行には Node.js 18 以降が必要です。Claude Code と Claude Desktop で動作を確認済みです。その他も同じ設定を使用します。ウェブ版の ChatGPT はローカルサーバーを読み込まないため、現時点では grafta を使用できません。

理由

モデルは、デザインに込められた意図を読み取り、何を作るか判断するのが得意です。一方、バイナリ形式は苦手で、数値を推測してしまいます。grafta はその逆です。43 個のツールを使って .fig を開き、すべてのノード、色、変数、コンポーネントを読み取り、変更し、確認用に描画して、Figma で開ける新しいファイルとして保存できます。

4 つの製品

同じツールで、Figma が保存するすべてのファイルを開き、読み取り、描画し、保存できます。また、それぞれの製品でファイルを開いて動作を確認済みです。

製品	ファイル	grafta が扱うもの
Figma Design	.fig	画面、コンポーネントとバリアント、モード付き変数、スタイル、オートレイアウト、リッチテキスト、画像、ベクター
Figma Slides	.deck	グリッド内のスライド、発表者ノート、テンプレート。スライドを移動しても、トランジションとオブジェクトアニメーションを保持します
FigJam	.jam	付箋、テキスト付き図形、ノード間のコネクター、セクション、表、スタンプ
Figma Sites	.site	ルートごとのサイトページと、それぞれに含まれるブレークポイント。ブレークポイント内では、フレームと同じようにすべてのツールが機能します

実例を見る

同じフレームを3回表示しています。それぞれの画像は、grafta 独自の render_node によるものです。画像の間にある変更はすべて、モデルが実行するツール呼び出しです （58個）。

下書き	デザイン済み	ダークモード
フレームとテキスト	9個のカラー変数、Lucide アイコン、自動レイアウト	フレーム上の1つのプロパティ：explicitVariableModes

モデルとの連携方法

結果には上限があります。省略された項目がある場合、結果の omitted にその内容と取得方法が示されます。何も知らせずに切り詰められることはありません。

依頼の例

そのまま使えるプロンプトです。使用するツールはモデルが選択します。

作業	依頼内容	使用するツール
内容を理解する	grafta で handoff.fig を開いてください。何が含まれていて、どのように整理され、どの色とコンポーネントが使われていますか？	summarize, search_nodes, read_node
コードに変換する	grafta で checkout.fig を開いてください。このファイルの正確なサイズ、色、アイコンを使って、決済画面を私たちのスタックで構築してください。	read_node, list_variables, render_node
ダークモード	grafta で app.fig を開いてください。Settings 画面の色を Light と Dark の変数にし、すべての塗りをそれらにバインドして、両方のモードをレンダリングし、app-dark.fig として保存してください。	create_variable set_properties render_node
デザインシステムの監査	grafta で library.fig を開いてください。コンポーネント、変数、スタイルを一覧表示し、変数またはスタイルとして定義されていない色が画面で使われている箇所を教えてください。	list_components list_variables search_nodes
アクセシビリティ	grafta で checkout.fig を開き、すべての画面のテキストコントラストを WCAG AA に照らして確認してください。基準を満たさない箇所を、このファイル独自の色で修正し、修正前と修正後を見せてください。	check_contrast set_properties render_node
データから画面を作成する	grafta で shop.fig を開いてください。products.csv の各行に1つずつ Product card コンポーネントを配置し、各行の名前、価格、写真を使った折り返しグリッドを作成してください。	fill_template
HTML からレイヤーへ	ランディングページのスナップショットである page.json を、grafta で site.fig の新しいページにインポートしてください。	import_layout
スライドデッキ	grafta で pitch.deck を開いてください。タイトルの後に第3四半期の数値を含むスライドを3枚追加し、スライド間にフェードを設定して、発表者ノートを追加してください。その後、すべてのスライドを1つの PDF としてエクスポートしてください。	duplicate_node set_properties export_pdf

できること

目的	ツール
見つける	open_file summarize search_nodes list_open close_file	ページ、件数、名前または種類で検索したノードとそのパス
読む	read_node read_raw list_components component_instances get_image	Figma プラグイン API の名称そのままでノードを正確に読み取ります
見る	render_node export_pdf check_contrast	変数モードでのフレームの PNG（未保存の編集も含みます）、各ページを 1 ページずつにしたフレームのベクター PDF、各テキストとその背後に描画された要素との WCAG AA コントラスト
描く	create_page create_frame create_text create_shape create_vector create_instance create_section	フレーム、リッチテキスト、図形、SVG アイコン、インスタンス
インポート	import_layout	ブラウザーが取得したスナップショットから、ウェブページのレイアウトをフレーム、テキスト、画像、自動レイアウトとして取り込みます（下記）
変更する	set_properties override_instance move_node duplicate_node group_nodes ungroup delete_node	塗り、線、エフェクト、自動レイアウト、サイズ、制約、画像、順序
デザインシステム	create_component create_variant_set set_variant add_component_property fill_template	コンポーネント、バリアントとそのプロパティ。JSON または CSV の各行につき 1 つずつ配置したコンポーネント
トークン	list_variables create_variable_collection create_variable set_variable set_variable_collection	モード（Light、Dark）、エイリアス、バインディングを含むコレクション
スタイル	list_styles create_style set_style	色、テキスト、エフェクトのスタイル
保存	new_file save_as	何もない状態からの新規ファイル、または編集内容を含む現在開いているファイル

各ツールとその引数はツールリファレンスに記載されています。これはサーバー独自のツール一覧から生成されています （ウェブサイト上）。grafta tool を実行すると、ターミナルで一覧を確認できます。

信頼できる理由

約束	意味
正確	すべての数値はファイルのバイト列から読み取ります。推測的な手法、モデル、ネットワークは使用しません
省略した内容を明示	省略された結果には欠けている内容を記載し、画像には近似して描画した内容を記載します
ファイルに上書きしない	save_as は、new_file が作成した空のファイルを除き、既存のパスへの保存を拒否します。また、書き込んだ内容を再読み込みします
再起動後も維持	未保存の編集は変更のたびにジャーナルに記録され（~/.grafta/journals）、再度開いたときに再適用されます
壊すより拒否	参照されているノードを削除したり、Figma が修復する内容を書き込んだりすることはありません。理由を説明します

制限事項

• デザインを解釈することはできません。 解釈するのはモデルです。grafta はファイルに何があるかを回答し、指示された内容を書き込みます。
• ライブではなく、共同作業にも対応していません。 保存済みのコピーで作業し、返された新しいファイルを開きます。ライブファイルには、Figma's own server を使用してください。
• コードの品質はモデル次第です。 grafta は正確な値を渡すだけで、コード自体は書きません。Figma's server と Framelink も、アカウントがあれば Figma のリンクからデザインをコードに変換できます。
• Figma とは提携していません。Figma の支援を受けずに、そのフォーマットを読み書きします。
• Figma のクラウドではなく、ファイルを扱います。 Figma Design の .fig、Figma Slides の .deck、FigJam の .jam、Figma Sites の .site に対応します。ローカルコピーを保存し、結果を Figma で開いてください。new_file は、お持ちの .fig ファイルから Figma のフォーマットを取り込みます。grafta にそのフォーマットは同梱されていません。
• 画像は近似であり、Figma の画像そのものではありません。 お使いのマシンにインストールされたフォントを使用します。デザインで使われているフォントがインストールされていれば、ほとんどの行の幅は Figma の幅から 2% 以内に収まります。インストールされていない場合は代替フォントが使われ、その旨がキャプションに表示されます。フォントをインストールして、サーバーを再起動してください。
• ファイルを開くと、ファイルサイズをはるかに上回るメモリを消費します。 ある Mac では、57 MB のファイルを開くのに 1.3 GB、86 MB のファイルを開くのに 5.5 GB を消費しました。作業が終わったファイルは閉じてください。
• 未対応の機能： オートレイアウトのグリッド、コンポーネントスロット、ブール演算、プロトタイピング、Dev Mode の注釈、バリアント上のコンポーネントプロパティ。
• 変更できるのは grafta 独自の変数とスタイルのみです。 ファイルに既存のものは読み取って紐付けますが、編集はしません。

Web ページから

import_layout は HTML を編集可能なデザインに変換します。フレックスボックスはオートレイアウトになり、サイズはブラウザーで測定した値に基づいて、フィル、ハグ、固定に設定されます。grafta はブラウザーを実行しません。ブラウザーがレイアウトのスナップショットを取得し、grafta がそれを読み取ります。

curl -fsSLO https://n0ss4.github.io/grafta/snapshot.sh && curl -fsSLO https://n0ss4.github.io/grafta/snapshot.js
sh snapshot.sh page.html page.json 'main'     # headless Chrome; a CSS selector picks the part

または、任意のブラウザーのコンソールやモデルのブラウザーツールに snapshot.js を貼り付けて、copy(JSON.stringify(graftaSnapshot('main'))) を実行してください。その後、モデルに page.json をインポートするよう依頼します。変換できないもの（グラデーション、変形、インライン SVG、リモート画像）は推測せず、一覧に表示されます。

ターミナルから

モデルを使わずに、同じツールを利用できます。

grafta tool                                     # list the tools
grafta tool read_node                           # what one takes, with an example
grafta tool open_file '{"path":"design.fig"}'   # call one: each call starts afresh
grafta tool --batch calls.json                  # a sequence on one open file

バッチは { "tool", "args", "out"? } の JSON 配列です。引数内の "$0.handle" は呼び出し 0 の結果フィールドを指し、"out" は画像をファイルに書き出します。showcase がその一例です。

FAQ

Figma アカウントや API キーは必要ですか？ いいえ。grafta はディスク上のファイルを使います。ローカルコピーを保存し、結果を開くときだけ Figma が必要です。

ファイルが自分のマシンから外部に送信されることはありますか？ grafta はネットワーク接続を行いません。モデルが grafta を通じて読み取る内容は、ほかのツール結果と同様に、お使いの MCP クライアントが会話を送信する先に送られます。

ファイルが壊れることはありますか？ 既存のファイルに上書きすることはありません。save_as は存在するパスへの保存を拒否し、書き込んだ内容を読み戻します。Figma が修復を必要とする状態のファイルも拒否し、未保存の編集内容は再起動後も保持されます。

どのクライアントとモデルに対応していますか？ stdio 経由で使う任意の MCP クライアント（Claude Desktop、Claude Code、Cursor、VS Code、Windsurf など）と、そのクライアントで動作する任意のモデルに対応しています。

Figma と提携していますか？ いいえ。無料のオープンソースで、MIT ライセンスのもとで提供されています。

貢献

構築方法（ARCHITECTURE）、今後の予定（ROADMAP）、貢献方法（CONTRIBUTING）をご覧ください。変更内容は CHANGELOG に記載されています。脆弱性は SECURITY の説明に従って報告してください。

MIT ライセンス。Figma とは提携していません。