インストール
npx -y @figwright/mcp@latest誰向けか
AI エージェントに Figma を「見る」以上のことをさせ、ローカル WebSocket 中継で公式プラグインに繋ぎ、設計を読みキャンバスにも書きたいなら、この無料双方向 MCP が合う。対象は Claude Code、Cursor、Codex、および任意の MCP クライアント。ツールは 113 個で、読み、書き、grounding を覆う。代理は設計どおり実装でき、キャンバス上でも組み立てられる。Figma の無料枠で動き、公式 Dev Mode MCP のように有料席は要らない。このマシンでの設計協働に合う。デスクトップが無い、またはプラグイン未接続で書きツールを呼ぶのには合わず、名指しされていない 113 個を既知 API とするのも合わない。要約はデータがこのマシンに留まると書く。ファイル読みとキャンバス書きは、なおローカルなプライバシー境界であり、「ローカル読み取り無し」ではない。
3分で最初の試行
先に MCP クライアント、Figma デスクトップ、Node.js 20.19+ または 22.12+ を確認する。公式は Node 18/21 と 22.0–22.11 を未対応と書く。サーバは npx が別途引き、その版はプロジェクト構築用 Node と違ってよい。無料枠で足りるが、プラグイン取り込みにはデスクトップアプリが要る。クライアントの主設定は:
npx -y @figwright/mcp@latest
グローバル導入は不要。起動後、リポジトリ説明どおり Figma デスクトップでプラグインを取り込み、ローカル WebSocket 中継が繋がったことを確認する。先に低リスクな読み取り:クライアント一覧から読み取り専用または grounding を選び、現在の選択またはページ構造を見る。証拠は 113 個のツールを名指ししない。欠けていれば一覧で呼び、レイヤ API を作らない。成功の合図は設計構造が返ることであり、キャンバスが書き換えられたことではない。キャンバス書きの前に、読み取り成功を必ず見る。任意の npx skills add awdr74100/figwright/skills は主経路ではなく、スキルは MCP 接続済みを求める。リポジトリ: https://github.com/awdr74100/figwright
利用事例
事例1: 設計どおり実装する。プラグイン接続後、読み取り/grounding 系ツールでフレームワーク認識の設計構造を理解し、このマシンでコードを出す。タイトルは設計をフレームワーク認識コードにできると書く。証拠は対応フレームワーク名を書いていない。欠けていればクライアントが返す構造に従い、書き出し形式を作らない。
事例2: 結果をキャンバスへ書き戻す。代理に Figma で組み立てやコードの押し戻しをさせるときは、キャンバス書きツールを使う。設計ファイルを変え、副作用がある。先に、現在ファイルが捨てられる副本か、明確に変えたいファイルかを確認してから実行する。証拠は双方向・非読み取り専用だけを保証し、取り消し手順は無い。失敗時は Figma 履歴を基準にし、undo コマンドを作らない。
利用上の境界
デスクトップが無ければプラグインを取り込めず、中継も繋がらない。Node 版が合わないときに無理に走らせない。113 個のツール名は未公開。自分で作らない。書き込みはキャンバスを変える。読み取り成功前に一括書きしない。公式 Dev Mode MCP の有料制限は Figwright に当てはまらないが、Figwright は Figma 公式席の代わりでもない。スキルパックは付加物であり @figwright/mcp の代わりにはならない。代理が設計ファイルを見えないとは仮定しない。最初の試行は npx -y @figwright/mcp@latest だけにし、成功の合図を1回の読み取り専用構造戻りとする。