Figma AIを使って「店舗検索アプリ」生成のデモを行うDiagram創設者であり現在はFigmaのプロダクトデザイナーであるジョーダン・シンガー氏

シンガー氏のプロンプト通りのアプリ画面が数秒で現れると、拍手が起こった。

プロンプトの出し方次第でさまざまな種類のサイト、アプリを瞬時に生成できる

デモによれば、Figma AIは、適したコンポーネントの提案だけでなく、位置情報の表示の仕方や、カードの大きさや色などの微調整も簡単な操作で可能。ペンシルツールで雑に描いた手描きアイコンも、「Search for Similar（似たものを探す）」機能にかければ、ものの数秒でいくつかの候補を提案してくれる。シンガー氏は、管理者用ダッシュボードのUIも、数秒で数種類生成でき、要素や並び方も自在に入れ替えられることを示した。

さらに、既存のアプリ画面のスクリーンショットを指定して「似たものを探す」にかければ、単に色や形といった視覚情報だけでなく、コンテンツの意味をAIが理解し、複数のレイヤーを備えたデザイン、それを作動させるコードも含めて提案してくれるのだ。

左が実際のGrabの画面のスクリーンショット。右がFigma AIが生成したデザイン

実際に、東南アジアで広く使われる配車＆フードデリバリーアプリ「Grab」の開発チームが会場で見ている前で、シンガー氏がGrabアプリのファーストビューのスクリーンショットを指定し、この「ビジュアル検索」機能にかけた。すると、数秒でほぼ同一のデザインが生成された。 　

画像の準備、レイヤー名の統一、多言語対応のための作業時間もAIが削減

圧巻だったのは、レシピアプリの生成だ。「チキンチャーハンのレシピを作りたい」と指示するだけで、コンポーネント、料理の画像、制作者の画像の背景、ディスクリプション、材料や調味料の種類と分量まで、AIが生成した。

Figma AIで料理画像、ディスクリプションを生成した後、作者のアイコンが画像に沈み込まないよう目立たせるプロンプトを書いているところ

1つのレシピをサイトに載せるために、実際に料理を作ったり、それを撮影してトリミングして色調補正したり、分量や手順をメモして調理のコツを文章に起こしたりする必要すらなくなったのだ。生成された文字は、「Translate To（～に翻訳）」機能にかければ、多言語にも一括変換できる。テキスト翻訳、要約、テイストに合わせたリライトも、今後はAIが担ってくれる。

次にシンガー氏は「たくさんのレイヤーにそれぞれ名前をつける作業も多くのデザイナーの時間を奪ってきたよね？　AIが代わりにやってくれたらうれしくない？」と観客に語りかけた。たしかに左側のレイヤーパネルには、レイヤーがバラバラの名称で書かれている。そこで彼が「Rename Layers（レイヤーの名称再設定）」をクリックし、上から次々と、統一感のある短い名称に変換されていった瞬間、会場からどよめきと歓声がおきた。 今回のデモで、シンガー氏らが2023年のConfigで開発中と言っていた機能が、2024年はかなりの精度でFigmaに実装されていることが実証された。AIが「生成」と「再利用」をさらに進化させたことで、サイト制作はもはや完全自動化目前と言えるだろう。