【実践】デザインを一瞬でコード化！Figma MCP × Cursorで次世代の開発ワークフローを紹介

「Figmaのデザインをコードに落とし込めるようになった！」

最近SNSなどでよく目にする内容ですが、「実際どうやるの…？」という方も多いと思います。

そこで本記事では、最近注目を集める「Figma MCP」と次世代コードエディター「Cursor」を組み合わせて、デザインデータを一瞬でUIコードに変換する方法を紹介します！

実際に筆者が手を動かした手順をステップバイステップで紹介していくので、「CursorとかMCPとか、よくわからない…」という方も理解しやすくなっていると思います。ぜひ最後まで読んでみてください！

この記事でわかること

• AIがデザインデータを読み取れるようになる「Figma MCP」の概要
• CursorとFigma MCPの具体的な接続・設定手順
• Figmaのデザインからページを自動生成する実践事例
• AI生成コードの実力と、手動修正が必要な「限界」のリアル
• 開発精度を高めるためのベストプラクティス

デザインデータをAIが直接読み解く「Figma MCP」とは？

まずは「Figma MCP」が一体どういうものなのかを見ていきましょう。

端的に言えば、「外部のAIとFigmaを繋げるサーバー」なのですが、まだ分かりづらいと思うので、前提として「MCP」について解説していきます。

そもそも「MCP」とは？

MCPとは「Model Context Protocol」の略称で、「AIが、他の外部ツール（FigmaやNotion、社内データベースなど）と安全かつ簡単に情報をやり取りするための”世界共通のルール”」のことです。

これまで、AIに外部ツールのデータを読み込ませるには、それぞれのツールごとに専用の複雑な設定（API連携）を開発する必要がありました。しかし、MCPという標準化された「AI × 外部ツールの接続ルール」が登場したことで、AIはさまざまなツールのデータに直接アクセスし、外部のツールを使いこなすことができるようになりました。

MCPの詳細はこちらの記事でわかりやすく解説していますので、ぜひご覧ください。

MCPとは？難解になりがちな話を改めて整理して解説

Figma MCPで何ができるようになる？

Figma MCPは、この仕組みを利用して、AIにFigmaのデザインデータを直接読み取らせるための「橋渡し役」として機能します。

これまでのAIコーディングでは、「Figmaの画面をスクリーンショットしてAIに画像を解析させる」といった方法が主流でした。しかし、AIの画像認識だけでは「見えている表面的なデザイン」しか把握できず、余白の正確な数値やレイアウトの構造までは完璧に理解できませんでした。

Figma MCPの革新的な点はまさにここで、画像としてではなく「Figmaの裏側にある構造データ」を直接AIに読み取らせることができる点です。

具体的に、Figma MCPによってAIは以下のような情報を把握できるようになります。

• レイアウトの階層構造（Auto Layoutの設定など）
• 正確な余白（マージンやパディング）の数値
• テキストスタイル（フォント、サイズ、ウェイト）
• カラーコード
• コンポーネントのプロパティ設定

これにより、AIはデザインデータを理解した状態でコードを記述できるため、従来とは比較にならないほどデザインに忠実かつ実用的なUIコードを瞬時に自動生成できるようになった、というわけです。

Cursorとは？

今回Figma MCPと合わせて紹介する「Cursor」についても簡単に説明しておきます。

Figma MCPが「デザインを読み取るための橋渡し役」だとすれば、その情報を直接受け取ってコードを書くのが、AIコードエディターの「Cursor」です。

Cursorは、世界中の開発者に愛用されている「VS Code」をベースに開発されたエディターで、VS Codeユーザーであれば、拡張機能やショートカットキーなど、これまでと同じ操作感ですぐに使い始めることができます。

さらに、単に「エディターの中でChatGPTとチャットできる」というレベルではなく、Cursorは、「プロジェクト全体のコード（Codebase）を深く理解した上でAIがサポートしてくれる」という点で大きな注目を集めています。

具体的には下記のような作業を担ってくれます。

• エディター内でAIとチャットしながら、狙った箇所に直接コードを生成・挿入できる
• プロジェクト全体のファイル構成や、既存のコンポーネント（再利用可能なパーツ）を理解し、チームのルールに沿ったコードを書いてくれる
• エラーの修正やコードの整理（リファクタリング）を的確にサポートしてくれる

こういった賢さを持つ「Cursor」と、Figmaの設計図を正確に伝える「Figma MCP」。今回はこの強力な2つのツールを使って、フロントエンド開発における次世代のワークフローを実践していこうと思います！

Figma MCP × Cursor でワークフローはどう変わる？

「デザインを直接コードに落とし込めるようになる」と、具体的にどのようにフロントエンド開発のワークフローが変わるかをここでは見ていきましょう。

【Before】手作業と修正ループが続く従来のアナログなフロー

これまでの一般的なフロントエンド開発では、次のような流れで作業が進んでいました。

1. デザイン完成: デザイナーがFigma上でデザインを作成し、エンジニアに引き継ぐ。
2. 手動でのデータ確認: エンジニアがFigmaの画面を開き、要素間の余白（px）、フォントサイズ、カラーコードを一つひとつ手作業で確認する。
3. コーディング: 取得した数値を元に、HTMLやCSS（Tailwindなど）をエディターに手打ちしていく。
4. レビューと修正: ブラウザで表示を確認し、「Figmaと微妙にズレている」部分を見つけては手直しを繰り返す。

もちろんこの方法でも制作は可能ですが、「目で見て、数値を拾い、手で打ち込む」という作業は非常に時間がかかり、ヒューマンエラーも発生しやすくなります。 同じようなコーディング作業の繰り返しに、負担を感じているエンジニアも多いはずですよね。

【After】AIがたたき台を一瞬で作る効率化フロー

一方、Figma MCPとCursorを連携させた「新しいワークフロー」では、この手間のかかる工程をAIに任せることができます。

1. デザイン完成: デザイナーがFigmaでデザインを作成する。（ここは同じです）
2. AIにデザインを読み取らせる: 開発者がCursorからFigma MCPを経由して、対象のFigmaリンクをAIに読み込ませる。
3. UIコードの自動生成: AIがFigmaの「構造データ」を直接解析し、数秒〜数十秒でUIコードの最初のたたき台を一気に生成する。
4. 人間の手による最終調整: 生成されたコードをエンジニアが確認し、足りない動き（アニメーション）の追加や、ビジネスロジックの連携、微調整を行う。

この新しいフローの最大のメリットは、「ゼロからコードを書く時間をまるごとスキップできる」という点です。面倒な余白の設定や、基本的なレスポンシブ対応のレイアウト組みなど、単純な作業はAIに任せ手作業の負担が減ることで、開発スピードと品質の両方を大きく引き上げることが可能です。

【準備編】CursorとFigma MCPの連携手順

ここからは、実際にCursorとFigma MCPを接続する手順を紹介していきます。実際の設定画面も用意しているので、画像も参考にしながら進めてみてください！

1. Cursorの「Settings（設定）」を開きます。

2. 「Tools & MCP」に移動します。

3. 「Add Custom MCP」をクリックします。

すると、mcp.json ファイルが開きます。

4. mcp.jsonを次のように更新します。

上記のようにmcp.jsonを更新したら、Cursorの設定画面に戻ります。すると、このような表示が確認できます。

5. CursorとFigma MCPを接続します。

6. 「Open」をクリックします。するとブラウザが開き、アカウントへのログイン画面が表示されます。

ログインが完了すると、Figma MCPとCursorの接続が完了です！

【実践編】Figmaのデザインからページを自動生成してみた

連携の準備が整ったところで、いよいよAIにコーディングを依頼する実演に入ります！

題材として、クーシーの実際のサービスページのデザインを使用し、「このデザインからページを生成して」という依頼をしてみます。

※今回は使用したモデルはClaude Opus 4.5です。

こちらが、今回生成しようとしているページのデザインです。

まず、デザインリンクをコピーします。

そしてCursorにプロンプト（指示文）を入力し、ページを生成します。
（このプロジェクトではNext.jsを使用していますが、他の技術スタックでも問題ありません。HTMLのみで生成することも可能です。）

今回使用したプロンプトは下記の通りです。

日本語訳

このプロンプトでは、
・「Role（役割）」
・「Tech Stack（技術構成）」
・「Task（作業内容）」
・「Page path（ページの場所）」
・「Image path（画像の保存先）」
・「Figmaのデザインリンク」

を明確に記載しています。特にPCとSPの両方のリンクを渡すことで、AIがレスポンシブ（画面幅によるレイアウトの切り替え）を正確に判断できるようにしました。

また、期待するアウトプット形式も具体的に指定しています。あえて「コンポーネント化せず、すべて1つのファイルに書き出して（write everything in one file）」と指示しているのが実務的なポイントです。

個人的には、ファイルの分割をAIに任せるよりも、まずは1つのページとして出力させる方が良いと考えています。

その理由は以下の通りです。

AIが自動的にファイル分割を行うと、プロジェクト独自のディレクトリ構造や命名ルールとズレてしまう危険性があります。そのため、

1. まずは1ファイルで全体のレイアウトとロジックを完成
2. ブラウザで意図通りに動くか確認
3. 最後に人間がリファクタリング（整理・分割）

というやり方の方が、結果的に安全でメンテナンス性の高いコードになると思います。

では実際に、下の画像のようにプロンプトを投げてみます。

プロンプトを送信すると、ページ生成のプロセスが開始されます。Figma MCPのツール実行を求められるので、「RUN」をクリックして進めましょう。

しばらく待つと、画像も含めたページ全体のコードが生成されます。

では、このコードをもとに実際に生成されたページを見てみましょう！

【結果】AIが生成したコードの実力は？結果と手動修正のリアル

全体的な結果としては「非常に良好」でした！

ページはしっかりとレスポンシブに対応しており、ほとんどのセクションはFigmaで意図されたレイアウトやスタイルに沿って実装されていました。ホバーエフェクトなども適切に適用されており、そのまま実務のたたき台として使えるレベルかと思います。

ただし、複雑なレイアウトの部分ではいくつか修正が必要な箇所がありました。

キービジュアル（KV）の複雑な配置

要素が重なり合ったり、特殊な配置が求められたりする複雑なKVセクションは、AIが構造を完全に正確に再現するのが難しく、画像とタイトルの位置関係などにズレが生じていました。

「画像内のテキスト」の誤認識

Figmaのデザイン上、「テキストが埋め込まれた一枚の画像」として作成されていた要素がありました。AIは画像内の文字を読み取れず「別々のテキスト要素」として扱ってしまったため、レイアウトが崩れていました。ここは手動で適切な画像に差し替える必要があります。

セクションの順序や細かな構造のズレ

一部のセクションで順番が入れ替わっていたり、「左に画像、右にテキスト」というレイアウトが想定通りに組まれていない箇所がありました。また、ヘッダーに意図しない背景色（黄色）が混ざっていたり、フッターのSNSアイコンやラインの色が少し違うといった軽微なスタイルのズレも確認できました。

カスタムフォントの適用

Google Fontsのような一般的なフォントは認識しやすいですが、今回はFigma上で「Adobe Fonts」を使用していたため、自動では適用されませんでした。エンジニア側で font-face の設定を手動で追加する必要があります。

その他のセクション

ただし、下の画像のようにシンプルな構成のセクションについては、デザインは適切に作成されており、ホバーエフェクトも実装されています。

フッターも全体的には適切に作成されています。ただし、アイコンのデザインと色については修正が必要ですね。とはいえ、これらは軽微な修正で済みそうです。

使ってみて感じた、Figma MCPの「得意なこと」と「限界」

実際に試してみても、Figma MCP × Cursor の組み合わせは非常に有効ということがわかりましたが、同時に限界も感じました。ここでは、実際に使うときに、「適切な場面で活用できるようにするため」に、Figma MCPが「得意なこと」と「限界」を整理していきましょう。

Figma MCPの「得意なこと」

以下のような「静的な視覚情報と構造」を直接読み取ることは得意なようでした。

• レイアウトの構造と余白（マージン、パディング）
• 色（カラーコード）
• タイポグラフィ（フォントサイズ、ウェイト、行間など）
• コンポーネントとその関係性の把握

こういった情報を読み取れるようになったことで、開発者がいちいちFigmaのプロパティパネルを覗き込み、サイズや数値を手動でコードに転記するような「単純作業の時間」は大幅に削減することができるようになると思います。

Figma MCPの「限界」

一方で、Figma上のデータだけでは表現しきれない「動的な要素」や「裏側の仕組み」については、まだ難しいようです。

複雑なインタラクションとアニメーション
スクロールに応じたフェードインや、複雑なホバーアクションなど、デザイン上で明確に定義されていない「動き」は再現しきれませんでした。

複雑に要素が重なり合うレイアウト
ヒーローエリア（KV）のような特殊な配置は、生成されたコードがデザインと完全には一致しないことが多く、手動調整が必須です。

機能的な実装
データの取得や処理、状態管理、バックエンドとの連携にも、対応できていないようです。

外部アセットの使用
オープンソースではない商用フォントファイルなどは自動で含まれないため、別途設定が必要です。

つまり、Figma MCPは「視覚的な構造の変換」では驚異的な再現性を発揮しますが、それ以上の「Webアプリケーションとしての機能」を持たせるには、依然としてエンジニアの力が不可欠だ、ということです。

精度を高める！Figma MCP活用のベストプラクティス

最後に、Figma MCPとCursorの組み合わせを最大限に活用し、生成されるコードの精度を高めるための「5つのベストプラクティス」を紹介します。

1. Figmaファイルを徹底的に整理する

実はこれが一番重要です。レイヤー名を明確にし、不要なグループ化を避け、Auto Layoutを正しく設定しましょう。構造が整った美しいデザインファイルであればあるほど、AIは正確に意図を理解し、クリーンなコードを出力してくれます。

2. 明確で具体的なプロンプトを書く

実践編でもお伝えした通り、「役割」「技術スタック」「タスク内容」「期待するアウトプット」をプロンプトにしっかり盛り込みましょう。前提条件をしっかりと与えるほど、手戻りの少ないコードが生成されます。

3. まずは「1ファイル」で出力させる

最初からAIにコンポーネント分割を任せると、プロジェクトのルールから逸脱するリスクがあります。まずは1ページ全体を1つのファイルに出力させ、実装全体を把握・検証してから、エンジニア自身の手で適切にリファクタリングするのが安全です。

4. AIの出力を「出発点」として扱う

「これで完成！」と思うのではなく、あくまで「優秀なたたき台」として扱いましょう。特に複雑なセクションは、最初からレビューと手動調整の時間をスケジュールに組み込んでおくことが大切です。

5. レスポンシブ対応を各ブレークポイントで確認する

PCとSPのデザインを両方渡したとしても、その中間のタブレットサイズなどでレイアウトが崩れることがあります。AI任せにせず、各ブレークポイントでの挙動は必ず人間の目で確認・調整するようにしましょう。

まとめ

Figma MCPとCursorの組み合わせは、長年フロントエンド開発者を悩ませてきた「デザインと開発のギャップ」を埋める、非常に強力なツールであることは間違いないと思います。実際、本記事の検証で示したように、Figmaから実際に動くページのドラフトを、これまでにない速さで生成することができるようになっています。

AIは機械的な作業を担当し、人間はロジックや品質、ユーザー体験の最終判断に集中する。

人とAIがそれぞれ得意な領域を分担するこのワークフローは、これからのスタンダードになっていくはずです。今からこの次世代の開発体験を取り入れ、より速く、よりクリエイティブなものづくりを実現していきましょう！