Dev Mode MCPサーバーは、Figmaデザインファイルからコードを生成するAIエージェントに重要なデザイン情報とコンテキストを提供することで、Figmaをワークフローに直接組み込むことができます。

MCPサーバーは、モデルコンテキストプロトコルを使用してAIエージェントがデータソースとやり取りするための標準化されたインターフェースの一部です。

サーバーが有効になると、以下が可能になります。

• 選択したフレームからコードを生成する

  Figmaのフレームを選択してコードに変換します。新しいフローを作成したり、アプリの機能を改良したりするプロダクトチームに最適です。

• デザインの背景を抽出する

  変数、コンポーネント、レイアウトデータをIDEに直接取り込みます。デザインシステムやコンポーネントベースのワークフローで特に役立ちます。

• Code Connectを使ってよりスマートにコードを書く

  実際のコンポーネントを再利用して出力品質を向上させます。Code Connectは、生成されたコードとコードベースの整合性を維持します。

  Code Connectに関する詳細はこちら→

ステップ 1: MCPサーバーを有効にする

1. Figmaデスクトップアプリを開き、最新バージョンに更新されていることを確認します。
2. Figma Designファイルを作成するか開きます。
3. 左上のFigmaメニューを開きます。
4. [基本設定]で、[Dev Mode MCPサーバーを有効にする]を選択します。
   

画面下部に、サーバーが有効化され、実行中であることを知らせる確認メッセージが表示されます。

ステップ 2: MCPクライアントをセットアップする

サーバーがFigmaデスクトップアプリによりローカルで実行されると、MCPクライアントがサーバーに接続できるようになります。お使いのクライアントの指示に従い、Dev Mode MCPサーバーを追加します。

{
  "mcpServers": {
    "Figma Dev Mode MCP": {
      "url": "http://127.0.0.1:3845/sse"
    }
  }
}

ステップ 3: MCPクライアントに指示を送る

Dev Mode MCPサーバーには、LLMがFigmaのデザインを解釈するのに役立つ一連のツールが導入されています。接続すると、特定のデザインノードにアクセスするよう、MCPクライアントに指示できます。

Figma designのコンテキストをAIクライアントに提供する方法は2つあります。

選択ベース

1. Figmaのデスクトップアプリを使用して、Figma内のフレームまたはレイヤーを選択します。
2. クライアントに現在の選択内容の実装をサポートするよう指示します。
   

リンクベース

1. Figmaのフレームまたはレイヤーへのリンクをコピーします。
   
2. 選択したURLでデザインを実装するよう、クライアントに指示します。

ツールと使用法の提案

get_code

MCPサーバーを利用してFigmaの選択内容のコードを生成できます。デフォルトの出力はReact + Tailwindですが、プロンプトを通じてカスタマイズすることができます。

• フレームワークを変更する

  • 「VueでFigmaの選択内容を生成してください。」
  • 「プレーンHTML + CSSでFigmaの選択内容を生成してください。」
  • 「iOSでFigmaの選択内容を生成してください。」

• 自分のコンポーネントを使用する

  • 「src/components/UIのコンポーネントを使用して、Figmaの選択内容を生成してください。」
  • 「src/uiのコンポーネントを使用してFigmaの選択内容を生成し、Tailwindでスタイルを適用してください。」

  プロンプトを表示する前に、リンクを貼り付けたり、Figmaでフレームまたはコンポーネントを選択したりすることができます。

  Code Connectを設定してコンポーネントの再利用を改善する方法はこちら→

get_variable_defs

選択範囲で使用されているバリアブルとスタイル(色、間隔、タイポグラフィーなど)を返します。

• 使用されているすべてのトークンを一覧表示する
  • 「Figmaの選択範囲で使用されているバリアブルを取得してください。」
• 特定のタイプにフォーカスする
  • 「Figmaの選択範囲で使用されている色と間隔のバリアブルは何ですか?」
• 名前と値の両方を取得する
  • 「Figmaの選択範囲で使用されているバリアブル名とその値を一覧表示してください。」

get_code_connect_map

FigmaノードIDとコードベース内の対応するコードコンポーネント間のマッピングを取得します。具体的に言うと、各キーがFigmaノードIDで、次の値が含まれるオブジェクトを返します。

• codeConnectSrc: コードベース内のコンポーネントの位置(ファイルパスやURLなど)。
• codeConnectName: コードベース内のコンポーネントの名前。

このマッピングは、Figmaのデザイン要素をReact(または他のフレームワーク)の実装に直接接続するために使用されます。これにより、デザインからコードへのシームレスなワークフローが可能になり、デザインの各部分に正しいコンポーネントが使用されるようになります。Figmaノードがコードコンポーネントに接続されている場合、この機能はプロジェクト内の正確なコンポーネントを識別して使用するのに役立ちます。

get_image

このツールを使用するには、[設定] > [Dev Mode MCPサーバー設定] > [get_imageツールを有効にする]の順に移動します。

レイアウトの忠実性を保つため、選択範囲のスクリーンショットが撮影されます。トークン制限を管理している場合を除き、この設定をオンのままにしてください。

Dev Mode MCPサーバー設定

[基本設定]で切り替え、MCPクライアントで使用できる追加設定です。

get_imageツールを有効にする

• プレースホルダーを使用する: 画像の抽出をスキップし、代わりに一般的なプレースホルダーを追加します。コード内で手動で交換したい場合に便利です。そうでない場合は、ファイルから実際の画像を取得します。

Code Connectを有効にする

応答にCode Connectのマッピングを含めることで、生成されたコードが接続されたコードベースのコンポーネントを可能な限り再利用できるようにします。

MCPベストプラクティス

生成されるコードの品質を左右する要因は複数あります。ご自身でコントロール可能な要因もあれば、使用しているツールによってコントロールできるものもあります。明確で一貫性のあるコードを生成するための提案を以下にいくつかご紹介します。

優れたコードを生成できるようFigmaファイルを構造化する

デザインの意図に沿った最適なコンテキストを提供することで、MCPやお使いのAIアシスタントが明確で、一貫性があり、システムに沿ったコードを生成できるようにします。

• 再利用されるもの(ボタン、カード、入力など)にコンポーネントを使用する

• Code Connectを介してコンポーネントをコードベースにリンクする。コード内で一貫性のあるコンポーネントの再利用を実現する最良の方法です。リンクしない場合、モデルは推測に頼らなければなりません。

• 間隔、色、半径、タイポグラフィにはバリアブルを使用する

• レイヤーに意味のある名前を付ける(Group 5ではなくCardContainerなど)

• オートレイアウトを使用してレスポンシブなデザインの意図を伝える

  ヒント: コードを生成する前に、Figmaでフレームのサイズ変更し、期待通りに動作するか確認してください。

• アノテーションと開発リソースを使用して、ビジュアルだけでは捉えにくいデザインの意図を伝える。たとえば、動作や整列、応答をどのようにするべきかなどです。

AIをうまく活用する上で効果的なプロンプトを作成する

MCPはAIアシスタントに構造化されたFigmaデータを提供しますが、結果を左右するのはプロンプトです。プロンプトが優れていれば、以下が可能になります。

• 結果を貴社のフレームワークやスタイリングシステムに合わせる
• ファイル構造と命名規則に従う
• 特定のパスにコードを追加する(src/components/uiなど)
• 新しいファイルを作成するのではなく、既存のファイルにコードを追加したり、既存のファイルのコードを変更したりする
• 特定のレイアウトシステムに従う(グリッド、Flexbox、絶対位置など)

例:

• 「このフレームからiOS SwiftUIコードを生成してください。」
• 「このレイアウトにはChakra UIを使用してください。」
• 「src/components/uiコンポーネントを使用してください。」
• 「src/components/marketing/PricingCard.tsxにこれを追加してください。」
• 「Stackレイアウトコンポーネントを使用してください。」

プロンプトはチームメイトへの指示書のようなもの。明確な意図を示すことで、より優れた結果をもたらします。

必要に応じて特定のツールをトリガーする

MCPはさまざまなツールをサポートしており、それぞれが異なる種類の構造化されたコンテキストをAIアシスタントに提供しています。より多くのツールが利用できるようになると特に、アシスタントが自動的に適切な内容を選んでくれないこともあります。結果が適切でない場合は、プロンプトをわかりやすく入力してみてください。

• get_codeは、Figmaの選択内容を構造化されたReact + Tailwind表現として提供します。AIアシスタントがプロンプトに応じて、任意のフレームワークやコードスタイルに変換するための出発点と言えるでしょう。
• get_variable_defs は、選択範囲で使用されているバリアブルとスタイル(色、間隔、タイポグラフィなど)を抽出します。これにより、モデルは生成されたコード内でトークンを直接参照できるようになります。

たとえば、トークンではなく生のコードを取得している場合は、以下次のようなプロンプトをお試しください。

• 「このフレームで使用されているバリアブルの名前と値を取得してください。」

カスタムルールを追加する

新しい開発者に対するオンボーディングノートのように、プロジェクトレベルのガイダンスを設定して、結果の一貫性を保ちます。以下を参考にしてください。

• 推奨されるレイアウトプリミティブ
• ファイル整理
• 命名パターン
• ハードコードしないもの

MCPクライアントが命令ファイルに使用する形式であれば、どのような形式でも提供できます。

例:

 
---
description: Figma Dev Mode MCPルール
globs:
alwaysApply: true
---
 - Figma Dev Mode MCPサーバーは、画像やSVGアセットを提供するアセットエンドポイントを提供します。
 - 重要: Figma Dev Mode MCP サーバーが画像またはSVGのローカルホストソースを返す場合、その画像またはSVGソースを直接使用してください。
 - 重要: 新しいアイコンパッケージをインポート/追加しないでください。すべてのアセットはFigmaペイロードに含まれている必要があります。
 - 重要: ローカルホストソースが提供されている場合、プレースホルダーを使用または作成しないでください。

# MCPサーバー
## Figma Dev Mode MCPルール
 - Figma Dev Mode MCPサーバーは、画像やSVGアセットを提供するアセットエンドポイントを提供します。
 - 重要: Figma Dev Mode MCP サーバーが画像またはSVGのローカルホストソースを返す場合、その画像またはSVGソースを直接使用してください。
 - 重要: 新しいアイコンパッケージをインポート/追加しないでください。すべてのアセットはFigmaペイロードに含まれている必要があります。
 - 重要: ローカルホストソースが提供されている場合、プレースホルダーを使用または作成しないでください。

- 重要: `/path_to_your_design_system`のコンポーネントを可能な限り毎回使用してください。
- デザインを正確に一致させるために、Figmaの忠実度を優先してください。
- ハードコードされた値を避け、Figmaのデザイントークンが利用可能な場合はそれを使用してください。
- アクセシビリティに関するWCAG要件に従ってください。
- コンポーネントのドキュメントを追加してください。
- UIコンポーネントを`/path_to_your_design_system`に配置し、本当に必要な場合を除き、インラインスタイルは使用しないでください。

これらを一度追加するだけで、繰り返し指示する必要性が劇的に減少し、チームメイトやエージェントが同じ結果を一貫して期待できるようになります。

IDEまたはMCPクライアントのドキュメントでルールの構成方法を確認し、チームに最適な構成を探りましょう。ガイダンスが明確で一貫していれば、再利用可能な優れたコードを生み出すことができ、やり取りを減らすことにつながります。

大きな選択範囲を分割する

画面をコンポーネントや論理的なチャンクなどに小さく分割すると、より迅速で信頼性の高い結果が得られます。

選択範囲が広いと、特にモデルで処理するコンテキストが多すぎる場合に、ツールの速度が低下したり、エラーが発生したり、応答が不完全になったりする可能性があります。代わりに以下を行ってください。

1. 小さなセクションや個々のコンポーネント(カード、ヘッダー、サイドバーなど)のコードを生成する
2. 動作が遅い、または固まっていると感じた場合は、選択範囲を縮小する

これにより、ご自身にとっても、モデルにとっても、コンテキストが管理しやすくなり、より予測可能な結果を得られます。

結果に何らかの問題がある場合は、基本を見直してみましょう。Figmaファイルの構造、プロンプトの書き方、送信されるコンテキストなどをご確認ください。上記のベストプラクティスに従うことで大きな違いを生み出し、より一貫性のある、再利用可能なコードの生成につながります。