Dev Mode MCPサーバー利用ガイド – Figma Learn - ヘルプセンター

🚧 Dev Mode MCPサーバーは現在オープンベータ版です。一部の機能や設定は、まだ利用できない場合があります。この機能はベータ期間中に変更される可能性があり、バグやパフォーマンスの問題が発生する場合があります。

はじめに

この機能を使用できるユーザー

Dev Mode MCPサーバーはオープンベータ版です。

プロフェッショナル、ビジネス、またはエンタープライズプランのDevまたはフルシートで利用できます。

MCPサーバーをサポートするコードエディターまたはアプリケーションを使用する必要があります(VS Code、Cursor、Windsurf、Claude Codeなど)。

Dev Mode MCPサーバーはFigmaデスクトップアプリからのみ使用可能です。Figmaデスクトップアプリのダウンロード→

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

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

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

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

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

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

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

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

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

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

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

サーバーはローカルのhttp://127.0.0.1:3845/sseで動作しています。次のステップの設定ファイルで使用しますので、このアドレスをメモしておいてください。

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

サーバーがFigmaデスクトップアプリによりローカルで実行されると、MCPクライアントがサーバーに接続できるようになります。これを行うには、MCPサーバーの設定ファイルに以下を追加してください。

{
  
    "mcpServers": {
    
      "Figma": {

        "url": "http://127.0.0.1:3845/sse"

    }

  }

}

お使いのクライアントの指示に従い、Dev Mode MCPサーバーを追加します。

[コード] → [設定] → [設定]の順に移動するか、ショートカット[⌘ ,]を使用します。
検索バーに「MCP」と入力します。
[settings.jsonで編集]を選択します。

以下の設定を追加します。

"chat.mcp.discovery.enabled": true,
 "mcp": {
   "servers": {
     "Figma Dev Mode MCP": {
       "type": "sse",
       "url": "http://127.0.0.1:3845/sse"
     }
   }
 },
 "chat.agent.enabled": True

チャットツールバー⌥⌘Bを開き、エージェントモードに切り替えます。
選択ツールメニューを開き、MCP Server: Figma Dev Mode MCPというラベルのセクションを探します。ツールが表示されない場合は、FigmaデスクトップアプリとVS Codeを再起動してください。

注: VS CodeでMCPを使用するには、アカウントでGitHub Copilotを有効にする必要があります。

詳細については、VS Codeの公式ドキュメントをご覧ください。

[Cursor] → [設定] → [Cursor設定]を開きます。
[MCP]タブに移動します。
[+ 新しいグローバルMCPサーバーを追加]をクリックします。

次の設定を入力して保存します。

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

詳細については、Cursorの公式ドキュメントをご覧ください。

[Windsurf] → [設定] → [Windsurf設定]を開くか、ショートカット[⌘ ,]を使用します。
[Cascade設定]に移動して、[プラグインストアを開く]を選択します。
Figmaを検索してプラグインをインストールします。
Cascadeを開くと、Figma MCPサーバーと利用可能なツールが表示されます。

詳細については、Windsurfの公式ドキュメントをご覧ください。

注: Windsurfの場合、エラーを回避するために、設定ファイルの urlプロパティをserverUrlに変更してください。

ターミナルを開いて、以下のコマンドを実行します。

claude mcp add --transport sse figma-dev-mode-mcp-server http://127.0.0.1:3845/sse

以下のコマンドを使用して、MCP設定を確認し、サーバーを管理します。
- すべての構成済みサーバーを一覧表示する
```
claude mcp list
```
- 特定のサーバーの詳細を取得する
```
claude mcp get my-server
```
- サーバーを削除する
```
claude mcp remove my-server
```

詳細については、Anthropicの公式ドキュメントをご覧ください。

設定が完了したら、サーバーを更新または起動します。接続が成功し、利用可能なツールが表示されます。接続が失敗した場合やツールが表示されない場合は、Figmaデスクトップアプリでサーバーがアクティブであることを再確認してください。

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

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

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

選択ベース

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

リンクベース

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

注: クライアントは選択したURLに移動できませんが、MCPサーバーがどのオブジェクトに関する情報を返すかを識別するために必要なノードIDを抽出します。

Dev Mode MCPサーバーを使用中に、Figma内でフィードバックを求めるポップアップが表示されることがあります。フィードバックをお寄せいただくには、このフォームをご利用ください。