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

2025年11月24日(月)7日前

3分で読めます

概要

Figma MCP Serverを使って GitHub Copilot Agent に Figma のデザインデータを参照させ、コード生成やデザイン仕様確認に活用する方法を解説します。

Figma側で必要な準備を行います。

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

MCP Server Status

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

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

コマンドパレットから簡単にインストールできます。

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

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

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

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

JSON

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

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

JSON

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

設定ファイルを保存したら、VS Codeを再起動します。

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

MCP Server 起動

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

実際にGitHub Copilot AgentでFigmaデザインを参照してみましょう。

Text

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

MCP Server Response

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

Facebook

はてな

UI Designer / Web Director