🧭 はじめに｜「Figmaからコーディング」はどこまで進化したのか？
「Figmaでデザインしたら、コードは自動で出力される」
そんな夢のような世界が、少しずつ現実味を帯びてきつつあります。
Figma AIやChatGPT、Copilot、各種プラグインの進化によって、Web制作の「下書き」はAIに任せられる時代が近づいています。
今回は、筆者が実際に取り組んだ「Figma Desktop＋MCPサーバー＋VS Code＋Copilot Chat」という構成で、どこまでコーディング自動化が進んだかをレポートしていきます。
🧰 使用ツールと前提環境
今回使用したのは以下の構成です：
-
Figma Desktop版（Mac）
└ プロフェッショナル、ビジネス、またはエンタープライズプランの Dev シートまたはフルシートで Dev Mode 利用が可能 -
MCPサーバー
└ Figmaが公式に提供する Dev Mode MCPサーバー（ベータ版）を使用 -
VS Code（GitHub Copilot Chat設定済）
-
FigmaのUIサンプルデータ
前提として、ある程度のHTML/CSS構造理解がある方向けの内容となります。
Dev Mode MCPサーバーとは？
2025年6月にFigmaがベータ提供を始めた「Dev Mode MCPサーバー」は、
Figma Desktopの有料プラン（Professional／Business／Enterprise）で利用可能な機能です 。
このサーバーを有効化すると、コードエディタ（VS Code／Cursor／Claude Codeなど）から、
Figmaのフレームやコンポーネントの構造／スタイル／テキストなどを直接取得できるようになります。
MCP（Model Context Protocol）対応のエディタと組み合わせることで、AIツールが「Figma上の正確なデザイン意図」を理解したうえでコード生成が可能になる点が大きな革新です 。
ただし現在はβ版のため、バグや仕様変更、性能の不安定さは否めません。
これらを理解したうえで、「MCP導入→AIによる自動生成」への流れまでをたどってみることが、今回の目的です。
⚙️ MCPサーバー連携とFigma設定の流れ
📌 1. Figma Desktopの設定をおこなう
Figma Desktopからデザインデータを開き、開発モードに切り替えます。
今回使用したデータはFigmaコミュニティで無料テンプレートとして公開されているデザインを使用してみました。
通常は、レイヤー名をHeader, MainCard, Footerなど構造的にわかりやすく命名し、整った構造にしておくと精度が高くなります。
しかし今回はあえて、レイヤー名の構造化や整理を行わないままMCP連携を試してみます。
ページ上部のメニュー画面のプルダウンメニューから「MCPサーバーを有効にする」を選択。メニュー右にチェックマークが表示されていれば設定完了です。
📌 2. MCPサーバーの起動
面倒な設定は一切不要です。
Figmaが提供しているDev Mode MCPサーバー（ベータ版）は、VS Codeの設定画面にあるsettings.jsonに以下の記述を追加するだけで機能します
サーバーの起動自体は自動またはローカル環境で完結するため、特別な開発知識は不要です。
🔗 3. FigmaデザインデータをVS CodeのGitHub Copilotと連携する
FigmaとVS Codeをつなぐ方法はいくつかありますが、今回は以下の方法を紹介します：
- FigmaのDev Modeで、対象デザインデータのURLを取得
- そのURLをGitHub Copilot Chatに貼り付け
- 例：「このFigmaデザインを元に、レスポンシブ対応のHTMLとCSSを書いてください」などとプロンプトで指示
このやり方で、Copilotがある程度の構造を理解し、自動生成が始まります。
✅ 生成されたコードの実用性レビュー
作成されたhtml、cssファイルをSafari、Firefox、Chromeで表示させてみました。
Chromeのみ、ページ上部のアイコン画像に表示不具合が生じていますが、おおむね「見た目」は良く再現されている印象です。
ここではコードをレビューしていませんが、MCPサーバーを経由したコード生成はこれまで試してきたAnimaやFigma to Code、Locofyよりも期待が持てるようです。
⏱ 作業時間はどうか？（実体験ベース）
今回使用したデザインデータを手動作成の場合を60分と設定すると、MCPサーバー連携の自動生成はわずか2分で出力されました
| 工程 | 従来手動（目安） | 今回構成での時間 |
|---|---|---|
| HTML/CSS雛形作成 | 約60分 | 約2分 |
| レイアウト調整・修正 | 未対応 | 未対応 |
結論としては、ベースコードを作る時間は圧倒的に短縮できています。
現段階ではレイアウト調整・修正を行っていませんので、トータルでどれぐらいの工数短縮になるかは、今後検証していきたいと考えています。
🧩 今後の可能性と注意点
MCPを活用したFigma→コード変換は、従来の「Figma to Code系プラグイン」よりも実用性が高く、開発環境との親和性もあります。
ただし：
- ツールの設定と構成理解が必要
- 出力コードの品質は人の手でコントロールが必要
- ノンコーダーが手放しで使うにはまだ遠い
✍️ まとめ｜AIを活かすには「構造理解」と「検証力」がカギ
Figma AIを活用したコーディング自動化は、一気にすべて任せるものではなく、「自分の作業を加速させるアシスタント」としての活用が現実的です。
特に構造を理解し、間違いを見抜ける目を持つ人にとっては、
Figma + AIツール連携は大きな武器になる可能性があります。
この構成についてはアップデートを期待しつつ、引き続き追いかけていきたいと思います。
コメント