今回は、デザイン作成ツールの「Figma」と、AIコードエディタの「Cursor」を使って、デザインデータからコードを生成する方法を解説します。
「なぜ今さら？」と思うかもしれませんが、実際試してみると、UIや設定方法が変わっていたりと、つまずくポイントが多々ありました。
そこで今回、執筆時点の「無料プラン」で、実際に自分で調べながら試した手順を備忘録として残すことにしました。
今後のアップデートにより、設定方法が変わる可能性はありますが、気になる方はぜひ一緒に試してみてください。
【先に結論】実際に生成してみた結果
早速ですが、本記事の検証結果であるデザインデータと生成されたWebサイトをご覧ください。
左がFigmaのデザインデータ、右がCursorで生成したコードをブラウザで表示したものです。
細かな調整は必要ですが、今回試した限りでは想像していた以上の精度で再現されていました。
文字の部分もテキストデータになっており、打ち替え可能な状態となっていました。
では、AIはどのようにしてFigmaのデザインデータを読み取っているのでしょうか。
デザインデータをAIに渡す「MCP」
最近では、AIによるコード生成が注目されていますが、実はAIだけではFigmaのデザインデータを参照できません。
人間が見ているFigmaの画面を、そのままAIが見られるわけではないためです。
そこで必要になるのが、AIエージェントが外部のデータにアクセスするMCP（Model Context Protocol）という仕組みです。
今回使用するFigmaにも、このMCPを利用した「Figma MCP」が用意されています。
このFigma MCPを使うことで、Figmaのデザイン情報をAIに渡し、デザインをもとにコードを生成できるようになります。
Figma MCPは２種類ある
Figma MCPサーバーには、「デスクトップMCP」と「リモートMCP」の2種類があり、公式では設定がシンプルな「リモートMCP」を推奨しています。（Figma公式ページ）
上の比較表のとおり、デスクトップMCPは、Figmaアプリで選択したレイヤーをそのままAIに渡せるという特徴があります。
一方、リモートMCPはFigmaが提供するMCPサーバーを利用する方式で、無料プランを含むすべてのプランで利用できます。（プランにより利用制限あり）
本記事は、このリモートMCPを使ってコード生成を試していきます。
Figma のデザインデータを用意する
引用元：Figma Communityのトップページ
今回使用するデザインデータは、「Figma Community」で公開されている無料のデザインデータを使用します。( https://www.figma.com/community )
すでにデザインデータを用意している方は、お手持ちのデザインデータをそのままご使用ください。
Figma Communityでは、目的に応じたキーワードでデザインデータを検索できます。
・Webサイト：Website
・LP：Landing Page
・ECサイト：E-commerce
・アプリ：Mobile App
Figma Communityでデザインを探す
引用元：Figma Communityで「landing page」と検索した結果
検索結果の中から、Webサイトとしてある程度完成された構成の「Travel Website Landing Page」を使用します。
デザインデータを使用する際は、ライセンスを確認し、利用条件に沿って使用しましょう。
出典：Designer「Travel Website Landing Page」
ライセンス：CC BY 4.0
使用するデザインデータを開いたら、「Figmaで開く」をクリックします。
デザインデータのコピーが自分のDrafts（ドラフト）に保存されます。Draftsに保存されたファイルは、自分のFigmaファイルとして編集できます。
これでデザインデータの準備は完了です。
ちなみに、CC BY 4.0は、作者のクレジットを表示するなどの条件を守ることで、作品の利用や改変が認められているライセンスです。
ライセンスの表記場所は、「Figmaで開く」ボタンの下にライセンス情報が表示されているので、使用前に確認しておきましょう。
PCなら右サイドバー、SPならページ下部に記述があります。
Figma Communityに表示されたCC BY 4.0のライセンス
【注意】Cursorの画面は２種類ある
Cursorには、現在「Agents Window」と「Editor Window」という2種類のウィンドウがあります。
本記事では、実際にコードを生成・編集するために、Editor Window（エディターウィンドウ）を使用します。
←Agents Window：AIエージェントを中心に操作するための画面
→Editor Window：コードエディター、ファイル一覧、ターミナルなどを使って開発するための画面
今回の記事で「Cursorを開く」「CursorにFigmaのURLを貼り付ける」と説明している場合は、Editor Windowのことを指しています。
Figma MCPをCursorに接続する
まずはCursorを起動します。
今回はFigma公式が推奨しているプラグイン方式で接続を行います。（公式ページ）
step
1Cursorで Command Palette（コマンドパレット） を開く
ショートカットキー
Cmd + Shift + P
Ctrl + Shift + P
step
2「Open Chat」を実行
step
3表示されたチャット欄に「/add-plugin figma」 と入力
step
4「Add Plugin」をクリック
step
5続けてチャット欄に表示される「Authenticate」をクリック
step
6するとFigmaが起動するので、「同意してアクセスを許可する」をクリック
認証が完了すると、チャット欄に次のようなメッセージが表示されます。
「You are signed in, so those tools should work in this chat.」
「サインインが完了し、このチャットからFigma MCPを利用できる状態になった」
このメッセージが表示されていれば、Figma MCPとCursorの接続は完了です。
Cursorによるコード生成
step
1Cursorの画面中央の「Open Project」をクリック
新規プロジェクトを任意の場所に作成します。
step
2Figmaに戻り、左サイドバーの 「レイヤー」からコード化したいフレームを選択
その状態で、右クリック → 「コピー/貼り付けオプション」 → 「選択範囲へのリンクをコピー」 の順に選択してください。
step
3Cursorの画面に戻り、右サイドバーのチャット欄に移動
今回は Agentモード を使用してコードを生成しました。
今回はページ全体を一気にコード化したかったため、❷でコピーしたFigmaのURLを含めて、以下のプロンプトを送信します。
実際に入力した内容はこちらです。
【ここにFigmaのリンク】
このFigmaデザインをもとに、Webページをコーディングしてください。
完成したファイルは、以下の構成にしてください。
index.html
style.css
img/（画像）Figmaのデザインをできるだけ忠実に再現してください。
レスポンシブにも対応してください。
step
4プロンプトの入力が完了したら、右下の 送信ボタン（↑） をクリックして実行
すると、CursorがFigma MCP経由でデザインデータを取得し、自動的に解析を開始します。
今回は生成に約5分かかりました。
※処理の途中で「Run」ボタンが表示されることがあります。その場合は、基本的に「Run」をクリックして進めて大丈夫です。
step
5生成が完了すると、画面下部に 「Undo All」「Keep All」「Review」 のボタンが表示
今回は生成されたコードをそのまま採用したかったため、「Keep All」 をクリックしました。
変更をすべて取り消す場合は「Undo All」、生成されたコードを確認しながら進めたい場合は「Review」を選択するとよいでしょう。
これで、Figma MCPを利用したコード生成は完了です。
生成された index.html をブラウザで開くと、実際にWebページとして表示できます。今回は問題なく表示されることを確認できました。
コードの精度を上げる方法（Figma公式推奨）
では、AIにFigmaのデザインデータを渡す場合、どのようなデータの作り方をしておけばよいのでしょうか。
Figma MCPの公式ドキュメントなどを参考にすると、コード生成を意識したFigmaデータの構造として、いくつか押さえておきたいポイントがあります。
今回は、Web制作で特に意識しておきたいものとして、Figma公式が推奨している内容の中から、次の4つを紹介します。（ 公式ドキュメント ）
step
1コンポーネントを使用する
ボタンやカードなど、繰り返し使う要素はコンポーネントとして作成します。
step
2Figma Variablesを使用する
カラー、余白、角丸、タイポグラフィなど、デザイン内で繰り返し使う値をVariablesで管理します。
なお、VariablesはText StyleやColor Styleのプロパティにも適用できます。今回は、デザイントークンをVariablesで管理し、必要に応じてStylesにも適用しています。
※参考：Figma公式「Apply variables to designs」「The difference between variables and styles」
step
3レイヤーに意味のある名前を付ける
「Frame 123」「Group 456」のような名前ではなく、「Header」「Logo」「Button」など、要素の役割が分かる名前を付けます。
step
4Auto Layoutを使用する
要素同士の間隔や配置ルールをAuto Layoutで設定します。
この4つは、今回のようにFigmaのデザインデータをAIに渡してコードを生成してもらう場合だけでなく、普段のWeb制作でも意識しておきたいポイントだと思います。
ただ、実際に既存のデザインデータをこれらに合わせて整理してみると、思った以上に手間がかかりました。
AIにコードを書いてもらうために、Figmaのデータ整理に何時間もかけてしまっては本末転倒です。
最後に
今回は、Figma MCPとCursorを使って、FigmaのデザインデータからWebページのコードを生成してみました。
実際に試してみると、細かな調整は必要なものの、想像していた以上の精度でFigmaのデザインをコードに変換することができました。
「デザインをコードにする」という作業のスタート地点を、AIに任せられる。
これは、Web制作におけるAI活用の大きなメリットのひとつなのではないでしょうか。
今後も、実際にWeb制作でAIを使いながら、どこまで作業を効率化できるのか試していきたいと思います。
