Figma MCPがデザイナーの制作フローを変える

MCPとは

MCP（Model Context Protocol）は、Anthropicが提唱したAIとアプリケーションをつなぐオープン標準です。わかりやすく言えば「AIのUSB-C」。CursorやClaude Codeなどのコーディングエージェントが、外部サービスの情報をリアルタイムで参照できるようにする仕組みです。

FigmaはこのMCPに対応したサーバーを公開しており、デザインファイルの情報をAIエージェントに直接渡せるようになりました。

デザイナーにとって何が変わるか

これまでデザインからコードへの伝達は、Inspectパネルを見ながらの手動作業でした。Figma MCPでは、コンポーネント構造・変数・オートレイアウトといったデザイントークンがAI側に直接渡ります。

つまり「Figmaの通りに実装して」と言えば、AIがデザインファイルを参照して、実際のコンポーネントやトークンを使ったコードを生成できるということです。

特にCode Connectと組み合わせることで、AIは自分たちのデザインシステムのコンポーネント・import・propsを正しく使ったコードを出力します。これはデザインと実装の一貫性を保つ上でかなり大きい変化です。

具体的にできること

デザインコンテキストの取得: 変数、コンポーネント、レイアウト情報をAIが直接参照
コード生成: Figmaのフレームを選択して、実装コードを自動生成
キャンバスへの書き込み: AIからFigma上にフレームやコンポーネントを直接作成（現在ベータ）
ライブUIの取り込み: 実装済みのUIをFigmaデザインに変換

セットアップ

対応しているAIツールは、Cursor・Claude Code・VS Code・Codexなど多数。接続方法はリモートMCP（https://mcp.figma.com/mcpへ接続）が推奨されており、設定ファイルにエンドポイントを追加するだけで使い始められます。

所感

デザイナーがAIツールと組み合わせて使うと、デザインレビューの精度が上がるし、実装とのズレを事前に検知できる可能性がある。まだベータの機能もあるけれど、制作フローの中にFigma MCPを組み込む価値は十分にあると感じています。