はじめに
Figma公式の Dev Mode MCP Server がオープンβ版で登場し、ローカルのFigma Desktopアプリから起動可能になっています。今回はこれを VS Code × GitHub Copilot で試してみたので、その使用感やハマった点をまとめます。
Dev Mode MCP Server オープンβ解放
- MCPは、LLMやエージェントがFigmaやGitHubなどのツールから“設計情報”を取得するための標準プロトコル
https://modelcontextprotocol.io/introduction - Figmaの Dev Mode MCP Server は、選択中のフレーム（またはフレームへのリンク等）からカラー値・変数・レイアウト構造などを抽出し、エージェントへ渡せるようにするローカルサーバー
https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Dev-Mode-MCP-Server - 対応エディタは VS Code、Cursor、Windsurf、Claude Code など
現状は「ローカル起動限定」
β版では、Figma Desktopアプリを通じてローカルでMCPサーバーを立ち上げる必要があります。よってクラウド環境で直接使うことはできず、GitHub Copilot Coding Agentなどには今のところ直結できません。
将来的な対応に期待です。
VS Code × Copilot で試してみた
- Figma Desktop で MCP Server を有効にする
-
基本設定 → Dev Mode MCPサーバーを有効にするをチェック
-
- VS Code の設定（.vscode/mcp.json）に以下を追加
.vscode/mcp.json
{
"servers": {
"Figma Dev Mode MCP": {
"type": "sse",
"url": "http://127.0.0.1:3845/sse"
}
}
}
これで Copilot Agent から「Figma Dev Mode MCP」が見える状態になります。
Copilot Agentでノーコード開発
あらかじめ用意したFigmaのデザイン
試しに以下の2パターンでコード生成を試しました
- ① 既存HTMLを修正させる形
- ② 0からHTMLを生成させる形
① 既存HTMLを修正させる形
プロンプト
Figmaのデザインに合わせてCSSを修正してください。
編集前のベースとなるアプリ画面
編集後のアプリ画面
パディングやマージンなどの微妙なスタイルがずれる結果となりました。
（何度か試しても完全一致はせず）
② 0からHTMLを生成させる形
プロンプト
Figmaのデザインに合わせてindex.htmlとcssを実装してください。
今回は見た目が同じものを作れれば良いです。jsなどの実装は不要です。
生成されたアプリ画面
完全一致といっても差し支えのないレベルです。
（ただし見た目だけの実装なのでアプリとしての動作はしません）
結果と考察
①では期待通りにはいかず、②ではFigma通りのHTML＋CSSが生成されました。
推測ですが、これはFigmaフレームとHTMLタグ構造が厳密に一致しないと調整が失敗しやすいからだと思います。
既存の実装はズレがあったのに対し、0から生成では自ら一致する構造を作れる点が有利でした。
MCPの仕様とハマりどころ
- フレーム構造・ネスト階層とタグ構造のズレが生成品質に直結する
- すでにHTMLベースがある場合、Agentはどこを変更すればいいか理解しづらく、結果的に失敗しやすい
- フレーム全体を「ゼロからコード化」させると、MCPサーバーから得られるノード情報の順序・構造を崩さずに生成されやすい
まとめ
- FigmaのMCPサーバーがオープンβ版で登場
- 現状はローカル起動のみ、Github Copilot Coding Agent との接続は今後に期待
- ゼロベースHTMLが強い
- 既存HTML修正よりも構造再生成の方が成功率高い
- Figmaフレーム構造とタグ構造が一致しないと生成精度低下
MCPはまだβ版ですが、「Figma → コード」のフロー改善における大きな一歩といえます。
特に「ゼロからコンポーネントを生成」などの用途では即戦力になる予感があり、今後のアップデートが楽しみです。