前回は生成AIとVisual Studio Codeを連携させてFigmaのデザインを自動コーディングする方法をご紹介しました。今回は、FigmaのFigma MakeというFigmaのAI機能を使った自動コーディングの方法をご紹介したいと思います。

※この記事は2025年10月時点の内容です。無料アカウントで使えなくなる可能性がありますのでご了承ください。

前回の記事 MCP編：https://studiokyoto.jp/article/blog/staff/2836/

最初に必要なもの

1. Figma
今まではFigmaの有料アカウントのみ利用可能でしたが、無料アカウントでも利用できるようになりました。
2. Visual Studio Code
エディタはデジハリの教材でも使っているVisual Studio Codeを利用します。前回のようにプラグインを使ったりしませんのでテキストでも大丈夫です。

Figma MakeでWebサイトを

では早速Figma Makeを使ってみましょう。Figmaのホーム画面の右上にMakeというボタンが出ているかと思います。ここからFigma Makeの画面に移ります。

Figmaのデザインデータの添付

Figma Makeの画面に「Figmaフレームを貼り付けます。」と書かれているかと思います。わざわざデータをアップロードして読み込ませる必要がなく、フレーム自体をコピペすることができます。めっちゃ便利！

Figmaのデザインデータ側のフレームをコピーしてからFigma Makeにペーストしてプロンプトを入力していきます。

デザインとコードの確認

生成が完了するとFigmaの右側にいい感じのデザインが仕上がっていると思います。上部のプレビュー/コードの切り替えボタンでコードの表示が可能です。

コード画面に切り替えると右側にはファイル構成が表示され、右上の↓アイコンからデータ一式ダウンロードが可能です。

ファイル構成にindex.htmlが無かったり、見慣れないCSSの書き方になっていたりしています。これは、Figma Makeが出力するコードがJavaScriptのReactというフレームワークとCSSのTailwind CSSというフレームワークを使っているからです。

慣れている方は一式ダウンロードしてからnpm run devで起動できます。

今回はHTMLとCSSとJSファイルが欲しいので追加のプロンプトで調整していきます。

次にHTMLの出力をしていきます。

最初「ReactではなくHTMLで出力してください」とプロンプトを入力したら、Reactでできているため不可能ですのような返事が来たので回りくどい言い方になっています。

index.html、CSSファイルはstyles>app.css、JSファイルはscripts>app.jsとして出力されました。コードに問題がなさそうなら右上の↓アイコンからダウンロードします。

ダウンロードデータの確認

ダウンロードデータを解凍したらsrcというフォルダがありますので、その中のindex.htmlを開きます。

画像データのリンク先がFigmaのURLになっていて表示できないので修正していきます。

今回はassetsフォルダの中に画像データが入っていました。

出来上がったWebページ：https://studiokyoto.jp/figma_make/

PCデザイン：https://studiokyoto.jp/figma_gemini/pc.jpg

スマホデザイン：https://studiokyoto.jp/figma_gemini/sp.jpg

メニューデザイン：https://studiokyoto.jp/figma_gemini/menu.jpg

前回と同様デザインは完成と比べると微妙に違っていますが、いい感じに仕上がってます。何よりFigma MakeはMCPよりも下準備が少なく簡単にできるのが良いですね。

今回は触れていませんが、プレビュー/コードの切り替えボタン右側に公開というボタンを押せばそのままWebサイトとして公開もできます。Figma Sitesというノーコードツールも現在ベータテスト中ですのでFigmaの今後が楽しみですね。

前回のMCPと違いFigmaがあれば簡単に試すことができますので良かったらお試しください。デジタルハリウッドでは生成AIを活用したデザインやマーケティングもサポートしています。卒業後も施設の利用やライブ授業への参加が無料ですので、最新の情報にも対応できるようサポートしています。少しでも興味を持たれた方は説明会予約フォームよりお気軽に見学にお越しください。