Figma Dev Mode MCP Serverを使ってデザインデータからHTML/CSSコード生成（やってみた）
こんにちは、サービシンククリエイターチームの岡村です。
フロントエンドエンジニアとして、日々業務に取り組んでいます。
この記事は「やってみた」系記事となっています！楽しんでいただけますと幸いです。
はじめに
今も昔も、デザインと実装の間に生まれるギャップをいかに効率的に埋めるかが重要な課題となっています。特に、Figmaのような強力なデザインツールが普及する中で、デザインデータを直接HTML/CSSに変換することができれば、開発時間の短縮と一貫性の向上に大きく貢献します。
そんな中、2025年6月にFigmaよりMCPサーバーのオープンβ版に関する発表がありました。
これまでもFigmaでは、デザインからコードを生成するプラグインが提供されたり、2024年には「Figma Sites」のベータ版が発表されたりと、デザインデータからサイトを実装する手段は注目を集めています。
このような新たな技術や仕組みが現れると、「この機能によってフロントエンドエンジニアの仕事が無くなるのでは？」といった議論がSNS等で行われそうですが、むしろ業務の効率化が図れることは歓迎すべきであり、それによって得たリソースで業務や活動の幅を広げていきたいとも思います。
ただ、私の場合はそれ以前に「なにそれ、面白そう！」という欲が勝ってしまい、社内の生成AI活用の取り組みとして実際に触ってみることとしました。
本稿では、「Figma Dev Mode MCP Server」を活用してデザインデータからHTML/CSSへの自動変換を実現する方法について解説するとともに、実際に使用して感じた可能性や今後に向けた課題について紹介したいと思います。
Figma Dev MCP Serverとは？
公式ドキュメントによりますと、以下のように紹介されていました。
Dev Mode MCPサーバーは、Figmaデザインファイルからコードを生成するAIエージェントに重要なデザイン情報とコンテキストを提供することで、Figmaをワークフローに直接組み込むことができます。
MCPサーバーは、モデルコンテキストプロトコルを使用してAIエージェントがデータソースとやり取りするための標準化されたインターフェースの一部です。
公式ドキュメント「Dev Mode MCPサーバー利用ガイド」より引用
公式ドキュメントには実際に使用するための設定方法や簡単な使い方もまとめられていましたので、実際に使ってみようと思われる方は一読しておくことをおすすめします。
少し補足しますと、「モデルコンテキストプロトコル」というのがMCP（Model Context Protocolの略）であり、AIエージェントや外部のサービスなどに接続して情報を受け取るための標準的な取り決めを意味します。
MCPを使って情報を受け取る仕組みは様々なプロダクトやサービスから提供されていますが、今回FigmaからもMCPを使ってAIが情報をやり取りする仕組みが提供されたということになります。
自動変換のメリット
デザインデータからHTML/CSSへの自動変換には、以下のような多くのメリットがあります。
- 開発時間の短縮
手動でのコーディング作業を大幅に削減し、開発サイクルを加速させます。 - ヒューマンエラーの削減
手動によるコーディングで発生しがちなミスを減らし、品質を向上させます。 - デザインの一貫性の維持
Figmaのデザインシステムに則ったコードを生成することで、視覚的な一貫性を保ちます。
前提条件
Figma Dev Mode MCP Serverを使用するには、大きく3つのツールが必用です。
- Figma（デザインデータを作成し、MCPサーバを提供する）
- AIエージェント（MCPサーバーと連携してデザインデータを解析する）
- コードエディタ（コードを生成する）
今回は、自社の開発環境として使用していた環境をそのまま使いたいと考え、コードエディタはVisual Studio Code、AIエージェントとして、GitHub CopilotのAgent Modeを使用しました。
例えばコードエディタとしてCursorを使用している場合、Cursorには標準でAIエージェントが備わっているため、GitHub Copilotは不要となります。
続いて、それぞれのプロダクトに必要な条件や注意点を見てみましょう。
Figma
- Figmaデスクトップアプリのみ利用可能（ブラウザ版では使用できない）
- 無料プランでは使用できない
プロフェッショナル、ビジネス、またはエンタープライズプランのDevまたはフルシートで利用できます。
コードエディタ（Visual Studio Code）
- 「GitHub Copilot」と「GitHub Copilot Chat」の拡張機能をインストールしておく
- VSCodeでGitHubアカウントにログインしておく
- Figma MCPサーバーの設定を行っている（後述）
※インターネット上では、VSCodeでMCPサーバーを使用する設定方法として「setting.json」を編集する方法が多く紹介されていますが、現在（2025年9月時点）ではGUI操作で簡単に設定できるようになっており、手動での編集は不要です。
AIエージェント（GitHub Copilot の Agent Modeを使用）
- MCPサーバとGitHub Copilotを接続するための設定を有効にする（GitHubを組織で管理している場合、制限されている可能性があるため、GitHubの管理者に設定を依頼する必要があります）
実装ステップとポイント
1. Figmaでデザインデータを作成（準備）する
すでにデザインデータがあれば、Figmaデスクトップアプリで開きます。
私の場合は検証のために簡単なデザイン（というほどではありませんが）データを作成しました。
2. FigmaでローカルMCPサーバーを起動する
開いたデザインデータのメニュー（図参照）より「基本設定」「ローカルMCPサーバーを有効化」をクリック。これでFigma側の設定は完了です。（とても簡単）
- デザインデータを開いて3ステップで設定完了！
3. Visual Studio CodeでMCPサーバーの設定をおこなう
- 新しくVisual Studio Codeのウィンドウを開きます
- 左側のメニューから「拡張機能」のボタンをクリックします
- 開くと左側のペインに現在インストール済みの拡張機能が表示されます
- インストール済みの拡張機能の上に拡張機能を検索する入力エリアがありますので、そこに「@mcp」と入力します
- すると「MCPサーバー」という見出しとともに「MCP サーバーの参照」という青色のボタンが表示されるので、このボタンをクリックします（ブラウザでGitHubのページ「MCP Registry」が表示されます）
- 開いたページの中央にある検索フォームに「Figma」と入力し検索ボタンをクリックすると、FigmaのMCPサーバーが候補として出てくるので、Installをクリック、更に「Install in VS Code」をクリック。（ブラウザでポップアップが表示され、Visual Studio Codeを開こうとしますのでOKをクリックします）
- 実はこのページも検証期間中に刷新されました（当初は検索機能がありませんでした）
- Visual Studio CodeにFigma Dev Mode MCP Serverの設定がおこなえました。（とても簡単）
- この画面からMCPサーバーの起動や停止もおこなえます
4. 実際にデザインデータを読み込めるか確認する
Visual Studio Codeのチャットウィンドウを開き、GitHub Copilotに指示をしてみます。
Figmaデザインをコンテキストとして指定する方法として2種類あります。
| 選択ベース | デザインデータ上のフレームやレイヤーを選択した状態でAIに指示を出す方法 |
| リンクベース | フレームやレイヤーを右クリックし「選択範囲へのリンクをコピー」で取得したURLを貼り付ける方法 |
今回は選択ベースを試してみます。
なお、その際作成するプロンプトには注意が必要です。
「現在選択しているFigmaのデザインを取得して」という一文を加える必要があります。
また、実際にファイルへの出力を指示しなければ、指示に対する回答としてチャットウィンドウ側にコードが表示されます。
今回は以下のようなプロンプトで指示を出しました。
「現在選択しているFigmaのデザインを取得してプレーンHTML + CSSを生成してください。生成したコードはindex.htmlというファイル名で保存してください。」
無事、コードが生成されました。
早速出来上がったコードをブラウザで見てみましょう。
細かく見ると意図していない結果もありますが、概ねデザインデータに近い形になっています。ここまで1行も、1文字もコードを書いていません。
良かった点、気になった点
挙げ始めるとキリがありませんが、生成されたコードを見て気になったことをいくつかご紹介します。
フォントの指定にあわせてWebフォントを読み込み
今回、デザインデータではNoto Sans JPを使用していたのですが、生成されたコードを見るとGoogle FontsのNoto Sans JPを読み込んでくれていました。
フォントにもよりますが、Googleフォントとの親和性は高そうです。これは地味にすごいなと思いました。（今回は1種類のフォントしか使用していないため、bodyタグにfont-familyの指定がされていましたが、複数のフォントを使用した際の挙動も試してみたいです）
また、デザインで指定したフォントサイズは完全に一致していました。やはり数値で指定したものは再現しやすいのだと思います。
要素数の不一致
一番最初に気になったのはこの点でした。
カード要素のセクションが2箇所ありますが、どちらもデザインと比べて要素数が異なります。
要素のカウントはそこまで複雑では無いような気もしますが原因はわかりません。
プロンプトの記述方法によって精度が変わるか確認してみたいところです。
画像の指定方法
例えば、ヒーローエリアはレイヤーの塗りに画像を指定し、要素の背景（background-image: url(“xxxxx.jpg”);）のような指定を期待していたのですが、imgタグで再現されていました。（左側に余白があるのは親要素の左右の余白による影響です）
実は、この挙動は検証期間中に変化したもので、当初はとにかく背景画像として指定する傾向がありました。
できればどちらか一方の動作というより要素に応じて柔軟に指定したいので、デザインの作りに応じたプロンプトの工夫が必要そうです。
クラス名
表面上では見えませんが、レイヤー名（例えばヘッダー部にはsite-headerという名前をつけています）をそのまま使ってCSSのクラスを設定していました。これはありがたいです。
ただし、必ずしもそうとは言えないケースもあり、「section-descriptions」というレイヤー名が「section-desc」というクラス名になるなど、対応はまちまちでした。
注意点と課題
現時点で見えた注意点や課題をまとめたいと思います。
完璧な変換は困難
さすがに「これを作って」の一言で完璧に再現できるわけではありません。
これはデザインの作りによる部分と、指示の出し方（プロンプト）それぞれに求められることだと思いますが、クライアントワークに導入する際には、AIに生成してもらうことを想定してワークフローやガイドラインの見直しが求められるかもしれません。
情報が随時アップデートされ、挙動も変わりやすい
今回は約1ヶ月の期間で検証を進めていましたが、その間にも情報は随時アップデートされ、Web上の情報がすぐに当てはまらない状況に何度か遭遇しました。自動生成時の挙動も同様で「こう使えばこうなる」という確証があるものではありません。
そのままクライアントワークに導入すると結局コードのリファクタリングに時間を割くことになりかねないため、導入には十分な検証と組織としての検討が必要になります。
さいごに
Figma Dev MCP Serverを利用したデザインデータからHTML/CSSへの自動変換は、フロントエンド開発の効率を飛躍的に向上させる可能性を秘めています。
流石に現時点では「魔法のツール」とはいかないまでも、AIエージェントの進化の速さを考えると、決して夢物語ではないと感じます。
また、AIの精度が向上したとしても使い手次第でその結果は変わってきますので、AIの活用、使い方の習得はこれからも求められることだと思います。
特に、意図を正確に伝えるための言語化能力（プロンプト作成能力）は、開発者にとって不可欠なスキルになると感じています。
今回は基本的な使い方にとどまりましたが、引き続きデザインとプロンプトの側面から細かな検証を行いAIによるコーディングの可能性を追求したいと思います。
Webサイト・システムの
お悩みがある方は
お気軽にご相談ください
出張またはWeb会議にて、貴社Webサイトの改善すべき点や
ご相談事項に無料で回答いたします。
