Visual Studio Code: GitHub Copilot Agent の Figma MCP Server セットアップ

概要

Figma MCP Serverを使えば、GitHub Copilot AgentにFigmaのデザインデータを参照させ、コード生成やデザイン仕様確認に活用できます。

必要な環境

以下の環境が必要です。

• Visual Studio Code
• GitHub Copilot（有料プラン）
• Figmaアカウント（Professional以上のプラン）
• Node.js環境（npxコマンドが使える環境）

Figmaの設定

Figma側で必要な準備として、Dev Modeの有効化を行います。

対象デザインファイルでDev Modeを有効化

MCP ServerでFigmaデザインを参照するには、対象ファイルでDev Modeを有効にする必要があります。

1. 参照するFigmaデザインファイルを開きます
2. 「Dev Mode」ボタンをクリックします

Dev Modeを有効化すると、VS CodeからFigmaデザインデータへのアクセスが可能になります。

Visual Studio Codeの設定

VS Code側でMCP Serverを設定します。設定方法は、コマンドパレットからのインストールと手動設定の2種類です。

インストール方法（推奨）

以下の手順でインストールを進めます。

1. ⌘ + Shift + P（macOS）またはCtrl + Shift + P（Windows/Linux）でコマンドパレットを開きます
2. MCP: Add Serverを検索して選択します
3. HTTPを選択します
4. サーバーURLを入力します:
   • リモートサーバー: https://mcp.figma.com/mcp
   • ローカルサーバー（デスクトップ版）: http://127.0.0.1:3845/mcp
5. サーバーIDを入力します:
   • リモートサーバーの場合: figma
   • ローカルサーバーの場合: figma-desktop
6. グローバル設定またはワークスペース設定を選択します

これで自動的にmcp.jsonファイルが生成されます。

手動設定

.vscode/mcp.jsonファイルを手動で作成・編集することもできます。

リモートサーバー使用時:

{
  "servers": {
    "figma": {
      "type": "http",
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

ローカルサーバー（デスクトップ版）使用時:

{
  "servers": {
    "figma-desktop": {
      "type": "http",
      "url": "http://127.0.0.1:3845/mcp"
    }
  }
}

設定完了後は、VS Codeを再起動します。

VS Codeのステータスバーに「MCP server」という項目が表示され、「Status: Enabled」となっていれば正常に接続されています。

MCP Server の起動と認証

mcp.json または拡張機能パネルのMCP サーバーセクションから右クリックでサーバーを起動します。

初回起動時の認証

MCP Server設定後、初回起動時にFigmaへの認証処理が行われます。

1. MCP Serverを起動すると、ブラウザでFigmaの認証ページが自動的に開きます
2. Figmaアカウントでログインしていない場合は、ログインします
3. 「Authorize」ボタンをクリックして、VS CodeからFigmaへのアクセスを許可します
4. 認証が完了すると、ブラウザに成功メッセージが表示されます
5. VS Codeに戻り、MCP Serverの接続状態が「Enabled」になっていることを確認します

Agentを使ったデザインデータの参照

GitHub Copilot AgentからFigmaデザインを参照する際は、以下の手順で進めます。

1. 対象となるFigmaファイルを開きます
2. Dev Modeに設定します
3. Share ボタンをクリックし、リンクをコピーします
4. VS CodeでGitHub Copilot Chatを開きます
5. チャットに以下のように入力してデザインデータを参照します

Figma MCP Serverから情報を参照できるか確認して。
<Figma File URL>

まとめ

これでFigma MCP Serverのセットアップは完了です。
GitHub Copilot AgentがFigmaデザインデータを参照できるようになり、コード生成やデザイン仕様確認に活用できるようになりました。