🎨

Figma MCP Server β版を試してみた — VS Code × Copilot でノーコード開発してみる

に公開
Figma
VS Code
ノーコード
Model Context Protocol
GitHub Copilot
tech

はじめに

Figma 公式の Dev Mode MCP Server がオープン β 版で登場し、ローカルの Figma Desktop アプリから起動可能になっています。今回はこれを VS Code × GitHub Copilot で試してみたので、その使用感やハマった点をまとめます。

Dev Mode MCP Server オープン β 解放

現状は「ローカル起動限定」

β 版では、Figma Desktop アプリを通じてローカルで MCP サーバーを立ち上げる必要があります。よってクラウド環境で直接使うことはできず、GitHub Copilot Coding Agent などには今のところ直結できません。

将来的な対応に期待です。

VS Code × Copilot で試してみた

  1. Figma Desktop で MCP Server を有効にする
    • 基本設定 → Dev Mode MCPサーバーを有効にするをチェック
  2. 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 → コード」のフロー改善における大きな一歩といえます。
特に「ゼロからコンポーネントを生成」などの用途では即戦力になる予感があり、今後のアップデートが楽しみです。

GitHubで編集を提案

Discussion