こんにちは！デバイスソフトウエア開発部の山内です。
皆さん、最近Figma使ってますか？
実は2025年5月にFigma AIがオープンベータ版で公開されてから、
今回はその中でも「First Draft」という機能に着目して、実務の観点からどこまで使えるか、どう使えば良いのか、検証していこうと思います。
3行で要約
- FigmaのAI機能「First Draft」は、テキスト指示でUIのたたき台を素早く作ることが可能。
- しかしテキストのプロンプトしか受け付けておらず、特定のデザインを細部まで正確に再現するのは苦手。
- そのため、デザインの初期段階でアイデアを視覚化したり、複数案を検討したりする「下描きツール」として活用するのが最も効果的。
FigmaのAI機能について
FigmaのAI機能は、2025年5月のFigma Config 2025にて大々的に発表されてから、現在有料シートであれば誰でも利用することができます。
Figma Designで使えるAI機能には、例えば以下のようなものがあります：
- First Draft： テキストプロンプトからUIのたたき台を自動生成する機能
- Rename layers： Figmaの標準的な命名規則に沿ってレイヤーを自動リネームする機能
- translate： レイヤー内のテキストを任意の言語に翻訳して書き換える機能
- etc.
AI関連機能は、基本的に編集画面下部の「✨」アイコンにまとまっています。
First Draft のプロンプト入力画面
さて「Figma AIを全機能使ってみた」系のブログはいくつかあるのでそちらを見ていただくとして、この記事では「First Draft」を深掘りしてみます！
というのも、ゼロからちゃんとモックアップを作るのって、やっぱり大変です。私の場合は、1画面につき大体数十分～1時間くらいかかります。
そこを何かある状態から作り始められたら、だいぶ楽になるなぁ…という気持ちは、Figmaやったことある方なら共感していただけるのではないでしょうか？
そういう期待を込めつつ、果たしてFirst Draftはどこまでやってくれるのか、検証していきたいと思います。
検証①：まずはベーシックに使ってみる
まず手始めに、First Draftの基本的なUI生成能力を見てみましょう。
検証内容：ガントチャート付きタスク管理アプリのモックアップ作成
題材として、「ガントチャートを閲覧できる機能付きのタスク管理アプリを作って」という、シンプル（というかざっくり）なプロンプトを入力してみました。
ちなみにプロンプトの言語は日本語で特に問題ありません。
プロンプトを送信すると、こんな感じのレイヤーを作ってくれました。
結果：雑なプロンプトでもオートレイアウト適用済のレイヤーを生成してくれる。ただしコンポーネント・複数画面生成は不可。
プロンプトが多少雑でも、オートレイアウトが適用されたそれっぽいデザインが数秒で出てきました。
左側のレイヤーパネルを見てみると、プロンプト全文を名前とするレイヤーの下に階層構造が出来ていますね。
オートレイアウトは業務利用に必須とも言える存在ですが、最初からオートレイアウトがある状態なのは結構うれしいです。
また、作って終わりではなく、配色を切り替える、追加で修正依頼をするなどの操作も可能です。
「Style」タブで配色、角丸のサイズ、余白、フォントが調整可能
しかし、部品化した再利用可能なレイヤーであるコンポーネントは、残念ながら作れないようです。
「複雑すぎるので違うプロンプトで試して！」という趣旨のメッセージが表示されてしまいます。
また、複数画面を一気に作ることもできませんでした。あくまで1つのプロンプトに対して1画面のUIを生成するという挙動のようです。
プロンプトに実現困難な内容が含まれていると「もっとシンプルな指示にしてくれ」と言われる
検証②：特定のスタイルを再現させてみる
次に、First Draftが特定のスタイルや既存のデザインをどこまで再現できるのか検証してみましょう。
私は現在iOSアプリの開発に携わっているので、せっかくならiOSの標準的なUIをプロンプトだけで作ってくれないかな～と思う次第です。
さらに言えば、スクショを投げたらFigmaで同じようなレイヤーを作ってほしいですよね。
検証内容：iOS18のUIに寄せたモックアップの作成
iOS18のUIに寄せたモックアップを作成してもらうことを試みました。
まずAppleが公開しているiOS18のアセットから、リストのサンプル画面を拝借します。
これを作ってもらいましょう。
…しかし、実のところFirst Draftはまだ画像を読んでくれません。
なので、画像を読めるチャットボット（今回はGemini）を間に挟むという力業でトライしてみます。
つまり、
① アセットのスクリーンショットをGeminiに投げて、「画像をできるだけ細かく説明して」と指示する
② Geminiが生成した説明を Figma First Draft のプロンプトに入れる
ということです。
Geminiにプロンプトを作ってもらう様子
で、作ってもらったプロンプトを投げます
結果： 大体の雰囲気は頑張って合わせてくれるが、細部再現は難しい。
流石に力業過ぎました。
レイアウトは大体合っているものの、元画像からは「近からず遠からず」といった印象です。
細部の再現や、iOS特有の微妙なデザインニュアンスまでは拾いきれないことが分かりました。
ちなみに、Geminiに自然言語ではなくSwiftUIのコードを生成させ、それをプロンプトとして渡す方法も試みましたが、めぼしい成果は得られず。
というわけで、細かい要素を再現してもらう使い方は難しそうです。
（というかよく考えたら、我々も文章だけで完璧にイメージ通りのデザインを作るのは簡単ではないですね。）
検証3：同じプロンプトで繰り返し生成させてみる
First Draftは、厳密な再現や特定のスタイル適用は苦手そうな一方、「それっぽい」たたき台としてのデザインは作るのが得意そうです。
同じプロンプトを繰り返した場合、どういうバリエーションが出るのでしょうか？
検証内容：ざっくりした内容で同じプロンプトを繰り返してみる
せっかくなので、私がFigmaを業務利用するきっかけとなった製品をヒントに、「iPad用の配筋検査アプリを作って」と依頼してみます。
（ちなみにその時のFigma導入記もありますので、よければ見てみてください。）
結果： 同じプロンプトでもレイアウト・配色にランダム性がある
同じプロンプトで生成した3種類のレイヤーの比較
全体的な雰囲気は似ているものの、レイアウトや配色にはある程度のランダム性があることが確認できました。
確かにレイアウトや配色は特に指示していないので、AIが一定の選択肢の中で確率的にUIを生成しているのだと思います。
地図やタブバーなど、どのレイヤーにも決め打ちで入っているパーツは若干気になりますが、もう少しプロンプトを工夫すれば、「複数案の提示」として一定の使い道がありそうだと感じます。
ところで検証の観点からは外れますが、画像も自動生成してくれるようですね（地味にありがたい）。
まとめ
ここまでいくつかの検証を通してFirst Draftの機能性を確かめてきました。
結論としては、ざっくりとしたUIを、オートレイアウト付きかつ高速に作成できる点には強みがある一方、複雑なデザインや特定のスタイルを厳密に反映させる使い方には不向きであることが分かりました。
したがって、「First Draft」の名がまさに示す通り、「まだ細かい要件が決まっていないときの叩き台」、あるいは「ブレインストーミング用」に使うのが最も効果的だと考えられます。
ここまでお読みくださりありがとうございます。
エコモットでは一緒にモノづくりをしていく仲間を随時募集しています。弊社に少しでも興味がある方はぜひ下記の採用ページをご覧ください！
