Figma MCP serverとGithub Copilotの連携、VS Codeでの導入手順を解説

2026年3月、GitHub CopilotとFigma MCPサーバーの連携がアップデートされ、デザインからコードを生成するだけでなく、コードで実装したUIをFigmaに編集可能なフレームとして送り返す「双方向ワークフロー」が実現しました。

これまでのデザインと実装の関係は「Figmaでデザイン → 開発者がコーディング」という一方通行でしたが、Figma MCPサーバーの登場により、AIがFigmaのデザインデータを構造的に理解してコードを生成し、さらに実装済みのUIをFigmaに戻すことが可能になりました。

本記事では、Figma MCPサーバーの概要から、VS Code × GitHub Copilotでの導入手順、実際に使えるプロンプト例、そして導入時の注意点までをステップバイステップで紹介します。

Figma MCPサーバーとは

Figma MCPサーバーは、FigmaのデザインデータをAIエージェントが直接読み取れる形で提供するサーバーです。 MCPは「Model Context Protocol（モデルコンテキストプロトコル）」の略で、AIがさまざまなデータソースとやり取りするための標準化されたインターフェースです。

従来、AIにデザインの実装を依頼する際はスクリーンショットを貼り付けたり、CSSの値を手動で伝えたりする必要がありました。 Figma MCPサーバーを介すことで、AIはFigmaのデザインファイルを単なる画像としてではなく、レイアウト情報・コンポーネント構成・カラーやフォントのスタイル・オブジェクト間の制約といった構造化されたデータとして直接理解できるようになります。

以下にFigma MCPサーバーでできることを紹介します。

デザインからコードを生成（Figma → コード）

Figmaのフレームやレイヤーを選択し、AIに指示するだけでコードを生成できます。 デフォルトではReact + Tailwind CSSで出力されますが、プロンプトでVueやプレーンHTML + CSSなど別のフレームワークを指定することも可能です。

ライブUIをFigmaに送信（コード → Figma）

2026年3月のアップデートで追加された目玉機能です。 ローカルホストやステージング環境で動作しているWebアプリのUIを、Figmaの編集可能なデザインレイヤーとして取り込むことができます。 スクリーンショットではなく、実際に操作・編集できるFigmaフレームとして生成されるため、デザイナーとの共同作業がスムーズになります。

デザイントークンの抽出

Figmaで使用されているカラー・スペーシング・タイポグラフィなどのバリアブル（変数）やスタイルをAIが読み取り、CSSカスタムプロパティやTailwindの設定として出力できます。 デザインシステムとの連携に特に有効です。

Code Connectによるコンポーネントマッピング

FigmaのコンポーネントとコードベースのReact（または他のフレームワーク）コンポーネントをマッピングする仕組みです。 Code Connectを設定しておくと、AIがデザインからコードを生成する際に、プロジェクトの既存コンポーネントを再利用した出力が得られるようになります。

リモートサーバーとデスクトップサーバーの違い

Figma MCPサーバーには「リモートサーバー」と「デスクトップサーバー」の2種類があります。 利用できる機能や前提条件が異なるため、目的に応じて選択してください。

導入の前提条件

Figma MCPサーバーをVS Code × GitHub Copilotで利用するには、以下の準備が必要です。

VS Code × GitHub Copilotでの導入手順（リモートサーバー）

ここからは、VS CodeとGitHub Copilotを使ってFigma MCPサーバー（リモート）を導入する具体的な手順を解説します。

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

デスクトップサーバーでの導入手順

Figmaデスクトップアプリからローカルサーバーを起動する方法です。 選択ベースでの操作が可能なため、フレームを選択するだけでコード生成を指示できます。

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

基本的な使い方

Figma MCPサーバーには複数のツールが搭載されています。ここでは主要な使い方をプロンプト例とともに紹介します。

Figmaのデザインからコードを生成する

Figma上でフレームまたはレイヤーを右クリックし、「コピー/貼り付けオプション」→「選択範囲へのリンクをコピー」でリンクを取得します。 そのリンクをCopilotチャットに貼り付けて指示します。

以下のFigmaデザインをReactコンポーネントとして実装してください。
https://www.figma.com/design/xxxxx?node-id=1-234

デフォルトではReact + Tailwind CSSで出力されますが、プロンプトでフレームワークやスタイリングを変更できます。

このFigmaデザインをVue 3のコンポーネントとして、
CSS Modulesでスタイリングして生成してください。
https://www.figma.com/design/xxxxx?node-id=1-234

generate my Figma selection in plain HTML + CSS
https://www.figma.com/design/xxxxx?node-id=1-234

デザイントークン（バリアブル）を取得する

Figmaで定義されているカラー・スペーシング・タイポグラフィなどの変数とスタイルを取得できます。 デザインシステムの構築やCSSカスタムプロパティの生成に活用できます。

このFigmaデザインで使用されているカラーとスペーシングの
バリアブル名と値を一覧で教えてください。
https://www.figma.com/design/xxxxx?node-id=1-234

実装済みのUIをFigmaに送る（UIキャプチャ）

リモートサーバーを使っている場合、ローカルで動作しているWebアプリのUIをFigmaのデザインレイヤーとして取り込めます。

Start a local server for my app and capture the UI
in a new Figma file.

Start a local server for my app and capture the UI in
https://www.figma.com/design/xxxxx

プロンプトを送信するとブラウザウィンドウが開き、キャプチャツールバーでページや要素を選択してキャプチャできます。 キャプチャが完了すると、Figmaファイルへのリンクが返されます。

コード生成の精度を上げるコツ

Figma MCPサーバーでのコード生成は、Figmaファイルの作り方とプロンプトの書き方によって精度が大きく変わります。 実際に導入した各社の体験レポートから得られた知見をまとめます。

Figmaファイル側の工夫

プロンプト側の工夫

プロンプトはチームメンバーへの指示書と同じ要領で記述します。 具体的であるほど、期待に近い出力が得られます。

以下のFigmaデザインからコンポーネントを生成してください。

https://www.figma.com/design/xxxxx?node-id=1-234

## 条件：
- 形式: React（TypeScript）
- コンポーネント名: PricingCard
- ファイルパス: src/components/ui/PricingCard.tsx
- スタイリング: CSS Modulesを使用
- レスポンシブ: モバイルファーストで実装
- 既存コンポーネント: src/components/ui 配下のButtonやBadgeを再利用
- アクセシビリティ: 適切なARIA属性を付与

カスタムルールの活用

Figma MCPサーバーには create_design_system_rules というツールがあり、プロジェクトの技術スタックやデザインシステムに合わせたルールファイルを生成できます。 このルールファイルをプロジェクトの rules/ や .github/copilot-instructions.md に配置しておくと、毎回のプロンプトでルールを指定する手間が省けます。

- Figma MCPの出力（React + Tailwind）はデザインと振る舞いの表現として扱い、
  最終的なコードスタイルとしてそのまま使わない
- Tailwindのユーティリティクラスはプロジェクトの
  デザインシステムトークンに置き換える
- 既存コンポーネント（ボタン、入力欄、タイポグラフィ等）を
  重複作成せず再利用する
- プロジェクトのカラーシステム、タイポグラフィスケール、
  スペーシングトークンを一貫して使用する
- Figmaデザインとの1:1のビジュアルパリティを目指す

Figma MCPサーバーで利用できるツール一覧

Figma MCPサーバーには以下のツールが搭載されています。状況に応じて使い分けることで、より精度の高い出力が得られます。

導入してみた所感と注意点

Figma MCPサーバーを実際に導入した各社のレポートから、現時点での評価と注意すべきポイントをまとめます。

できること・メリット

現時点での制約・注意点

Figma MCPサーバー × GitHub Copilot連携まとめ

Figma MCPサーバーとGitHub Copilotの連携により、デザインと実装の間にあった「翻訳作業」が大幅に効率化されます。 特に2026年3月のアップデートで追加された双方向ワークフローにより、デザインからコードを生成し、実装済みUIをFigmaに戻して確認・修正し、さらにその変更をコードに反映するという一連のサイクルが実現しました。

全体的にはまだ「発展途上」の段階ですが、AIモデルの性能向上やMCPサーバー自体のアップデートで今後さらに精度と機能が向上することが期待されます。 まずは小さなコンポーネントで試してみて、プロンプトやFigmaファイルの整備を少しずつ進めていくのがおすすめです。

参考
Guide to the Figma MCP serverFigma Help Center

参考
Remote server – Installation & setupFigma Developer Docs

参考
Figma MCP server can now generate design layers from VS CodeGitHub Changelog

参考
A guide on how to use the Figma MCP serverGitHub