Figma Make (AI) を使った新しいプロトタイピング手法

本記事は【Advent Calendar 2025】の1日目の記事です。

はじめに

直近数年くらいで、プロトタイピングの手法がかなり発達してきたなと感じています。

数年前に、FigmaやAdobe XDといったデザインツールが登場し、Figmaのプロトタイプ機能を使えば、デザインツール上でインタラクションまで作れるようになりました。

そして最近、AIを活用したプロトタイピングがかなり進化してきています。

個人的に思うのは、「今まで数日や数時間かかったプロトタイピングが一瞬で終わる時代になってきた」ということです。

最初から完璧なコードを書くよりも、プロトタイプをサクッと作って価値検証していく方が圧倒的に楽だし、いろんなアイデアを試せるんじゃないかなと思っています。

今回は、そんなAIを使った新しいプロトタイピング手法について、Figma Makeを題材にまとめていきます。

新旧のプロトタピングを比較する題材

新旧のスピード感や労力を比較していくので、題材を合わせてみます。

今回は、「名言をスワイプしてみれるアプリ」を題材にやってみようと思います。

従来のプロトタイピング手法：Figma prototype

まずは従来のパターンで作っていきます。

作成風景も載せてみたので、なんとなくこんな感じにで作っているんだなと思ってみてみてください。(100倍速)

① 要素を作る

まずは、枠を作ります。これは普通のFigmaファイルを作るの大体同じです。

② バリエーションを作る

今回は5つの名言があるので、5パターン作ります。

③ ナビゲーションで繋げる

ナビゲーションで5画面を繋げます。
スワイプみたいな便利（おそらくない？）は、使わずクリックイベントで擬似的に作ってます。

インタラクションは全部同じです。
ちなみに、Animation: Smart animate を使うといい感じにアニメーションしてくれるので大変便利です。

かかった時間と労力

動画の時間が、大体17分くらいでした。（初めての人はもう少しかかると思います。）

作業の労力としては、慣れてればそんなに辛くはないのですが、画面にはずっと張り付きっぱなしになると思います。

新しいプロトタイピング手法：Figma Make (AI) を使う

ここからが本題です。

AIを使った新しいプロトタイピング手法について紹介していきます。

0→1（ゼロから作る）でも使えるし、既存のFigmaファイルがある状態から修正していくこともできます。

今回はFigma Make AIを使いますが、V0やLovableでも似たようなことはできます。

ただ、今回は、Figma Make AIに絞って話を進めていきます。

0→1 パターン

まず、何もない状態から作る場合の流れです。

①AIと壁打ちをする

最初にやるのは、ClaudeやChatGPTと壁打ちです。
Figma Make AIに投げる前に、まず要件を整理しておくとスムーズに進みます。

欲しいもの：

• 要件定義
• 仕様の部分
• 大体の画面一覧

この3つがあれば、AIは割といい感じに作ってくれます。

ちなみに、音声入力で2〜3分くらい、だらだらと喋るのがおすすめです。

「こういうアプリを作りたいんですよね。ユーザーは〜で、機能としては〜があって、画面は〜と〜が必要で・・・」

みたいな感じで、思いついたことを全部喋っちゃいます。
情報量は多い方がいいので、遠慮せずに全部話しましょう。

※会社では、claudeは使用できないので、余暇で実施しています。

②AIに整理してもらう

壁打ちした内容をAIに投げたら、次は整理してもらいます。
【プロンプト例】

今話した内容を整理して、
足りない部分
確認が必要な事項
をまとめてください。
その後、画面定義と要件定義を生成してください。

こんな感じで投げると、AIがいい感じに整理してくれます。
足りない部分があれば質問してくれるので、それに答えながら詰めていきます。

③Figma Makeに流し込む

要件が固まったら、いよいよFigma Make AIに投げます。
ここはもう本当にシンプルで、
【プロンプト例】

Figma Make AIに流したいので、
要件定義書とドキュメントを作ってください。

これだけです。
するとAIが、Figma Makeに投げやすい形式で整理してくれます。
↓出力されたマークダウン

そのままコピペでFigma Makeに投げればOKです。

④チャットで調整

Figma Makeがプロトタイプを生成してくれたら、あとはチャットで調整していくだけです。

「このボタンの色を変えて」
「この画面に〜の要素を追加して」
「レイアウトをもう少し広くして」
みたいな感じで、対話的に修正できます。

（今回は背景だけ夜空に変えてもらいました。）

↓こんな感じになりました。

かかった時間と労力

動画の時間が、大体10分くらいでした。

時間も早かったですし、

• アニメーションの融通が利きやすい (スワイプ可能)
• AI待ちの時間が多いので、ながらで進めやすい
• 画面を複製する手間がない (複製すればするほど細かい調整が大変になってくる)

あたりが良かったなという印象ですね。

やはりプロトタイピングは、Figma Make 系のツールで良いのではと思ってしまいました。

既存のUIがあるケース

既存のUIもうすでにFigmaにあるケースで、それのプロトタイプをしたい場合も、FigmaMakeが強いです。

Lovableやboltなどは、Figmaの連携機能がなかったり、乏しかったりします。
（v0は課金プランで利用可能）

やり方は簡単でこな感じで、Figmaから、Send to > Figma Make とするだけです。

送信すると、テキストボックスに 該当のFigmaが入っていくので、プロンプトを入力してみます。
今回は、雑にスクロールのアニメーションを改善するという課題にしました。

この“雑に“投げられるというのが、かなりポイントです。

「このUIどうしようかな・・・」と思った時にとりあえず、「FigmaMakeに投げてみて、発散してみよう」みたいなことができます。

ちなみにできのたがこんな感じです。リッチなアニメーションになりました。

どんなツールを使うべきか・・・?

色々なツールがある中、今回は、Figma Make を解説してきました。

個人的には、AIでアプリケーションの精度としては、あまり差はないように思えます・・・。
そのため、周辺機能などで、利用するものをかけることが多いですね。

個人的な使い分け方

個人差ありますが、自分はこんな感じで使い分けています。

ケース① Figmaとの親和性

既存Figmaがある、最終的にFigmaファイルに落としたい
→ Figmaのインポートエクスポートができる（FigmaMake）

ケース② DBやGitHubとの連携

個人開発くらいの場合（DBまで連携してリリースを想定）
→ SupabaseやGitHub連携がしやすい（v0・Lovable）

ケース③ モバイルアプリ

モバイルアプリを作りたい
→ ReactNative が書き出せる（bolt）
→ flutter が書き出せる（FlutterFlow）

FigmaMakeにとらわれずに、いろんなツールを触ってみて、良し悪し研究していきたいですね。

まとめ

最後まで見ていただいてありがとうございました。

AIの精度もここ一年くらいで、上がってきたので、来年はどのくらいになっているのでしょうか・・・？
（正直想像もしたくないくらい怖いですが。）

なるべく、この波に乗るべく、色々なツールを使っていきたいところですね・・・！

イベント告知

12月23日にイベントを開催します！申し込みはこちらから▼

https://mynaviit.connpass.com/event/376769