Figwright

無料の双方向MCPサーバーとプラグインで、AIコーディングエージェントをFigmaに接続します。エージェントがデザインをコードとして読み取り、キャンバスに直接デザインを書き込むことができます — 有料のDev Modeシートは不要です。

概要

Model Context Protocol (MCP) サーバー (@figwright/mcp) と、それに付随するFigmaプラグインを組み合わせます。これにより、AIエージェント（Claude Code、Cursor、Codex、任意のMCPクライアント）はFigmaファイルへの双方向アクセスが可能になります。

• 読み取り: Figmaの選択範囲 → フレームワーク対応のコード（React、スタイリングシステム、既存のコンポーネント/トークン/アイコンの再利用）を生成。
• 書き込み: キャンバスへ → フレーム、テキスト、オートレイアウト、スタイル、変数、コンポーネント、ページ、モーションアニメーションの作成/編集。

双方向をカバーする121のMCPツールに加え、エージェントに正確なデザインコンテキストを提供するグラウンディングツール（get_design_context、component_map、token_map）も含まれます。

特長

• 無料ティア – 公式のDev Mode MCPには有料シートが必要ですが、FigwrightはFigmaの無料プランで動作します。
• 双方向 – 読み取り専用ではありません。エージェントがデザインを構築・編集できます。
• プロバイダー優先のコード生成 – 実際のスタックを検出し、既存のコンポーネントとスタイルを再利用して、汎用的なマークアップを生成しません。
• マルチエージェント – リーダー/フォロワー選出により、複数のエージェントが異なるFigmaファイルを同時に操作できます。
• プライバシー – すべてがローカルで実行されます：サーバー、リレー、プラグイン。デザインがマシンの外に出ることはありません。

仕組み

1. MCPクライアントがサーバーを stdio で起動します。
2. サーバーはローカルの WebSocket (127.0.0.1:3055) を介してFigmaプラグインにリレーします。
3. プラグインはエディター内でFigma Plugin API呼び出しを実行します。

セキュリティゲート（Host/Originヘッダー）により、Webページがローカルリレーに到達するのを防ぎます。

対象

AIコーディングエージェントを使用してデザインを実装したりUIコードを生成したりする開発者やデザイナー向けで、特にDev Modeサブスクリプションなしで無料の双方向Figma統合を求める方に適しています。