この記事では、Figmaでデザインしたワイヤーフレームを、**MCP（Model Context Protocol）**を使ってVS CodeのAIエージェント（GitHub Copilot）に読み込ませ、コード実装まで自動化する手順を記録します。
はじめに
まずは、今回登場する主要なキーワードを整理しておきます。
- Figma: WebデザインやUI/UX設計で広く使われるデザインツール。
- MCP（Model Context Protocol）: AIモデルが外部のツールやデータ（Figma、データベース、ローカルファイルなど）と安全に連携するための仲介プロトコル。
1. MCPサーバーとは
AIを活用する機会は増えていますが、これまではExcelやメール、DB、デザインツールといった「外部に溜まった情報」をAIに伝える際、人間が手動でデータを整理して投入する手間がかかっていました。
MCPサーバーは、この「情報の受け渡し」を自動化してくれる存在です。AIが直接外部サービスを参照できるようになるため、指示の精度が飛躍的に向上します。
2. 今回の背景
今後あらゆるツールにAIが組み込まれることになりますが、開発者としては、できる限り**「一つのプラットフォーム」**で全ての作業を完結させたいという思いがあります。
そのためにはMCPサーバーを使いこなす必要があるため、手始めに「デザイン → コード実装」という、手作業だと工数のかかるプロセスをどれだけ圧縮できるか検証しました。
3. 準備するもの
実装にあたり、以下の環境が必要になります。
- VS Code: GitHub Copilotなど、AIエージェントが利用可能な状態であること。
-
Figma:
- 有料ライセンス（Dev Modeを利用するため）。
- デスクトップ版アプリ。
4. VS Codeでの設定
まずはVS Code側にFigmaと通信するための拡張機能を導入します。
- 拡張機能マーケットプレイスで**「Figma MCP」**と検索。
-
Figma MCP Serverプラグインをインストールします。
これでデスクトップ版のFigmaと接続する準備が整いました。
5. Figmaでの設定
次に、Figma側でAIが読み取れる状態を作ります。
ⅰ. デザインファイルの準備
デスクトップ版Figmaで、コード化したいデザインを開きます。
ファイル形式は 「Design」 である必要があります。ベータ版の「Site」形式では、現状Dev Modeへの移行が正しく行えない場合がありました。
今回はサンプルとして、フリーのサイトデザインを使用します。
ⅱ. Dev Modeへの切り替え
- 画面上のアイコンをクリック（または
Shift + D）し、Dev Modeに切り替えます。 - コード化したいレイヤーを選択すると、右側のメニューにMCP連携メニューが表示されます。
- 表示されたプロンプト例をコピーし、VS CodeのAIエージェントに指示を出します。
6. やってみた結果
今回は「HTML、CSS、imageを含めて作成して」と、あえて少し大まかな指示を出してみました。
結果：
大枠のレイアウトは一瞬で出来上がりましたが、生成されたコードを確認すると**画像のパスが通っていない（リンク切れ）**箇所がいくつか見受けられました。さすがに一発ですべて完璧、というわけにはいかないようです。
しかし、その後に一度だけ修正指示を出したところ、ここまで綺麗な状態になりました。
7. まとめ
これまでMCPサーバーの構築は、外部ツール側もVS Codeの拡張機能も整っておらず、ハードルが高い印象でした。しかし、2026年4月現在では、このように非常に簡単なステップで連携が可能になっています。
今後も、AIエージェントに直接読み込ませるのが難しいデータ形式などは、積極的にMCPサーバーを活用して連携し、開発効率を上げていきたいと思います。