前回 Animaを利用した Figma to HTML を試しましたが、 今回 Cursor などのAIを利用し Figma のデザインからコードを生成できるというFigma-Context-MCPを試してみました。これはオープンソースのツールで、AIコーディングアシスタントのCursorと組み合わせて使うことで、Figma上のデザインデータを読み込み、そのままHTML/CSSを吐き出してくれる仕組みです (GitHub - GLips/Figma-Context-MCP: MCP server to provide Figma layout information to AI coding agents like Cursor)。今回はエンジニアの視点で、このFigma-Context-MCP＋Cursorを使った体験をカジュアルにレポートしてみます。
Figma-Context-MCPって何？
まず簡単にFigma-Context-MCPについて紹介します。MCPとは
Model Context Protocolの略で、AIアシスタントに外部データ（今回はFigmaのデザイン情報）を提供するためのオープンなプロトコルです。Figma-Context-MCPはそのプロトコルに沿って作られたサーバーで、CursorなどのAIコーディングツールにFigmaのレイアウト情報を提供してくれます。要するに、
FigmaとCursorの橋渡しをしてくれるツールで、これを使うことでCursorがデザインの詳細を理解し、より正確にコードを書いてくれるようになります。
実際、公式のREADMEにも「Cursorがデザインデータへアクセスできると、スクリーンショットを貼り付けるよりも正確に一発でデザインをコード化できる」と記載されています。また海外のブログでも「Figma-Context-MCPを使えば、デザインから生成されるフロントエンドコードはほぼ完璧に近い」と評価されていました。これは期待が高まりますね。
では早速、このFigma-Context-MCPを使ったセットアップからコード生成までの流れを見ていきましょう。
準備とセットアップ
1. FigmaのAPIキーを取得する
まず最初に、Figmaのデザインデータにアクセスするため
APIキー（Personal Access Token）を用意します。これはFigmaのアカウント設定から発行可能です。Figmaのアカウント設定画面で「Personal access tokens」のセクション（上図） (
Get your Figma file into R • figma)。ここで「新しいトークンを発行」ボタンをクリックし、任意の説明文（トークンの名前）を入力すると、APIトークン文字列が表示されます。
このトークンは一度しか表示されないので、発行直後にコピーしておきましょう。
※APIキーの取得にはFigmaのファイル閲覧権限が必要です。自分のアカウントの設定画面の「Settings > Security > Personal access tokens」で行います。
2. CursorでMCPサーバーをセットアップする
次に、取得したAPIキーを使ってFigma-Context-MCPサーバーを起動します。私は普段からCursor（AI搭載のコードエディタ）を使っているので、その中でセットアップしてみました。
Cursorの設定画面を開き、「Features > MCP Servers」の項目へ進みます。そして「+ Add New MCP Server」をクリック。 (
image)これはCursorのMCPサーバー追加設定画面の例です (
Use your own MCP on Cursor in 5 minutes - DEV Community)。Name（名前）に分かりやすく「Figma MCP」と入力し、Typeは「command」を選択。Command欄には先ほどのAPIキーを使って以下のコマンドを指定しました：
npx figma-developer-mcp --figma-api-key=
（※npxを使うことで、ローカルにパッケージをインストールしていなくても一時的に実行できます。）
手順3：Cursor の設定 → MCP → 「Add New Global MCP」で JSON を設定
- Cursor の
「Settings」 画面を開きます。
- 左メニューから
「MCP」 タブを探し、
「Add New Global MCP」 をクリック。
- 本家のドキュメントにあるサンプル JSON を参考に、MCP サーバーの設定を入力します。
Name や type（command）など必要な項目を埋める
- Command には先ほどの npx figma-developer-mcp ... を指定する
- 最後に
「Save」 して保存します。
これで Cursor から Figma-Context-MCP へアクセスできるようになりました。公式リポジトリの README に設定例があるので、それを丸コピしてくるのが一番早いかもしれません。
手順4：以下のプロンプトでコード生成をお願いする
最後に、実際にコードを生成させるためのプロンプトを Cursor に送ります。例えば私は、ざっくりと下記のように指示しました。
「Figma MCP を利用して fileKey = 4fA5nTh7JT0bglRZmaJC7X のこの Figma デザインの HTML/CSS の生成をしてください。images は img ディレクトリにダウンロードし、HTML/CSS で利用してください」
- fileKey は、Figma ファイルの URL の一部です。共有リンクをコピーしたときに含まれる「https://www.figma.com/file/xxxxx/…」の xxxxx 部分が fileKey になります。
- 画像をローカルの img/ ディレクトリに保存して使ってほしい、という要望も一緒に伝えておくと、Cursor が生成コードでのパス指定をそれに合わせてくれます（完璧ではないこともあるので、多少は手直しが必要でした）。
プロンプトを送ると、Cursor が Figma-Context-MCP を通じてデザイン情報を取得し、
HTML / CSS / 画像ファイル などを一気に書き出してくれました。
結果1：とりあえず形にはなった
まず何も考えずにとりあえず出力させましたが、
「ちょっとおかしいけど、なんか出来てる?」 わりと完成度の高い。レイアウトやテキスト、カラー、アイコンなどがほぼ再現された状態で HTML/CSS が生成され、ローカルに落とした画像もコード上で参照されていました。
Anima のときには、毎回レスポンシブレイアウト用意するが中途半端だったり、それぞれのレイアウトマージが結局大幅な修正が必要でしたが、今回は
一発生成 でそれなりに動くものが仕上がった印象です。ただし、いくつか気になる点もありました。特に、
画像の縦横比 が崩れてしまうケースがあったり、そもそも画像が表示されない箇所が出てきたり。そこで Cursor に対して「画像サイズがちょっとおかしいよ」と突っ込んだところ、しばらくやり取りをするとそれなりの修正案を出してくれました。
使ってみた結果と考察
実際にFigma-Context-MCP＋Cursorでデザインからコーディングしてみて感じたことをまとめます:
-
画像の取り扱いで発生したトラブル: デザイン内の画像（写真素材）がコード上ではうまく反映されない問題がありました。生成直後のコードではタグこそ出力されていたものの、パスが一時URLになっていて表示されなかったのです。そこでCursorに「画像が表示されないのですが？」と尋ねたところ、すぐに対処法を提案してくれました。結局、Figmaの画像をエクスポートしてローカルに保存し、そのパスをタグに反映することで解決を試みました（もしくは一時的にプレースホルダー画像で対応）。
-
Animaとの比較（セットアップ難易度など）: デザインからコード生成といえば、以前
Animaというサービスも試したことがあります。AnimaはFigmaからコードを書き出せる手軽さがありますが、正直どちらがいいかというと、コーディングの面からこちらです。細かいレイアウトなどがあるとまた違うと思いますがシンプルなのをすぐ出すならこちらで十分という感想です。Figma-Context-MCPは事前準備にAPIキーやコマンド実行といった手間があるものの、中身が見える分エンジニアには理解しやすく感じました。
-
生成されたコードの完成度: 一番驚いたのはコードのクオリティです。生成直後のHTML/CSSを確認してみると、クラス名やレイアウト構造も整理されており、人間の書くコードと遜色ない出来でした。CSSもFlexboxやGridを適切に使っており、FigmaのAuto Layout設定が反映されたようなレスポンシブ対応のスタイルになっていました（少なくとも私のテストしたデザインでは、ウィンドウ幅を変えても崩れにくいレイアウトが再現されていました）。手直し箇所はごくわずかで、
短時間で実用レベルのコードが得られたのは大きな収穫です。
-
ハンバーガーメニューの意外な生成: 面白かった点として、
デザインに描かれていなかったハンバーガーメニューが自動生成されたことがありました。具体的には、ヘッダー部分のナビゲーションをコード化した際、Cursorが勝手に小画面用のハンバーガーアイコンと開閉メニューのコードを付け加えてくれたのです。Figma上ではPCレイアウトしか作っていなかったのに、AIが「モバイルではメニューを折りたたむだろう」と判断したのかもしれません。
さいごに
以上、Figma-Context-MCPを使ってFigmaデザインからHTML/CSSコードを生成してみた体験レポートでした。準備こそ多少必要ですが、実際に動かしてみると
想像以上にスムーズかつ割と使えそうなコード生成ができて驚きました。
Figma-Context-MCP＋Cursorの組み合わせは、コードを書き起こす時間を大幅に短縮してくれる可能性があります。デザインと実装の間のギャップを埋める新しいワークフローとして、個人的には今後も活用してみたいと思いました。興味のある方はぜひ一度試してみてください。
