FigmaがDev Mode MCP Serverを発表：CursorやClaudeがデザイン意図を直接理解

これまで、AI コーディングツールにデザインの意図を伝える手段といえば、画面のスクリーンショットを撮って Cursor や ChatGPT に貼り付けるのが定番でした。しかしその結果生成されるのは、既存のコンポーネントを無視し、デザインシステムを崩壊させるようなコードになりがちでした。

こうした課題に対し、Figma は同社初となる Figma MCP server のパブリックベータ版を発表しました。Figma のデザインデータを、開発者が日常的に使うコーディング環境へ直接接続できるようにする試みです。

デザインシステムをそのままエディタへ橋渡しする

この機能は、Anthropic が主導して広まりつつある Model Context Protocol（MCP）規格を採用しています。Cursor、Windsurf、Claude Code、VS Code の GitHub Copilot といった自律型コーディング環境から、Figma の構造化データを直接参照できます。

現在のベータ版では、選択したレイヤーやノード ID に基づいてコンテキストを取得する 3 つのツールが提供されています。コード、画像、そして変数定義の 3 種類です。サーバー設定側で返されるコードの形式を調整することも可能で、React や Tailwind を用いたインタラクティブな表現にも対応します。

単なる画像入力と決定的に違うのは、デザインの裏にあるメタデータを渡せる点です。ボタンの画像だけを見せられた AI は、コードベース内のどのコンポーネントを使うべきか推測しなければなりません。しかし Figma MCP server を経由すれば、Code Connect を通じて既存コードのファイルパスが直接渡されます。色や余白についても、単なる数値ではなく設定済みの変数名が提供されるため、AI によるコンポーネントの重複作成を防ぎ、コンテキストウィンドウのトークン消費も大幅に抑えられます。

利用条件は、Figma の Dev シートまたは Full シートを契約しているユーザーです。Figma によれば、今後はデスクトップアプリの常駐が不要になるリモートサーバー機能や、より深いコードベース連携、アノテーション対応などを順次追加していく方針です。

なぜ重要か

Cursor などの AI ツールを使ってフロントエンドを構築している開発者にとって、試す価値は十分にあります。これまで手作業で修正していたコンポーネントの差し替えやデザイントークンの指定が自動化され、生成コードをそのまま本番環境に近づけることができます。

業界全体にとっても、MCP の普及を象徴する動きと言えます。デザイン領域で圧倒的なシェアを持つ Figma が、独自のエコシステム内に閉じこもるのではなく、オープンなプロトコルを通じて外部の IDE にコンテキストを提供する道を選んだからです。

私たちは、Figma が自前の AI エディタを無理に作らず、コンテキスト供給役に徹した判断は非常に賢明だと考えています。一方で、この仕組みを活かすには前提条件があります。チーム内でコンポーネントや変数が整理されていない乱雑なデザインファイルを渡せば、AI は整然としたコードを生成できません。ツールの真価は、各チームのデザインシステムの整備レベルに大きく依存することになりそうです。