はじめに
この記事では、FigmaのAI機能「Figma Make」を使って、
デザインのプロトタイプ制作を高速化した際の体験についてお話しします。
「デザインのたたき台を作るのに時間がかかる」
「プロトタイプを利用したユーザーテストをスピーディーに行いたい」
といった課題をお持ちの方にAI活用の事例として参考にしていただければ嬉しいです。
背景
先日、社内で利用する管理画面のデザイン作成依頼がおりてきました。
管理画面のデザイン制作は今回初めてだったので、使い勝手の良いUIを設計できるよう早い段階でプロトタイプを作成し、ユーザーテストを実施したいと考えていました。
しかしスケジュール的にあまり時間もなかったので、
限られた時間の中で、どうすれば効率的にプロトタイプを用意できるかというのが一番の課題でした。
そこで利用したのが「Figma Make」です。
Figma Make とは
Figma Makeは、今年5月「Figma Config 2025」で発表されたもので、
自然言語によるプロンプトや既存のFigmaデザインを貼り付けるだけで、プロトタイプを作成できるツールです。
以前β版を触ったときに、簡単にプロトタイプが作れた記憶があったので、お試しで使ってみることにしました。
Figma Make を立ち上げる
まずは右側の作成ボタンから「Make」を選択します。
立ち上がるとこのような画面が表示されます。
プロンプトを入力
入力欄に管理画面の要件を入力していきます。
今回は以下のように入力しました。（実際はもう少し詳細な要件を入れています）
ユーザーに以下の要素を提供する、直感的で視覚的に魅力的なダッシュボードを作成してください:
ログイン画面
- ロゴ
- ユーザーID
- パスワード
ホーム画面
- ロゴ
- アバタードロップダウンを備えた固定トップナビゲーションバー
- 概要や達成統計、データ可視化を備えたヒーローパネル
- サマリーカード
- エントリーのテーブル
生成完了
プロンプトの内容にもよりますが、上記だと2分程で生成してくれます。
実際の生成結果はこんな感じです。
ログイン画面
ホーム画面
名前やステータスといったそれらしいモックデータまで、よしなに生成されていることが分かります。
モックデータのコード↓
さらに、生成されたプロトタイプにはマウスホバー時の挙動が設定されていたり、
レスポンシブ対応されていたりと細かい部分まで作り込まれていました。
マウスホバー時の挙動
レスポンシブ対応
モバイルプレビューを押下
デバイスの切り替えもできます
用途に合わせて修正・調整
AIが生成したUIはあくまで汎用的なものなので、
プロジェクトの要件に合わせてカスタマイズを加えていきました。
例１：ヘッダーに社員の名前を表示させる
①プロンプトに要件を入力。
②プロトタイプのヘッダーに社員氏名が表示されるようになりました。
コードを見てもモックデータが作成されていることが確認できます。
例２：デザインシステムを適用させる
カラーパレットやフォントスタイル、コンポーネントなどを適用させることもできます。
※適用させるにはライブラリとして公開しておく必要があります。
今回はサンプル用のコンポーネントを作成したので、こちらを用いて説明します。
①ライブラリの公開から「Figma Makeにエクスポート」を押下。
②Figma Make側で「ライブラリを選択」を押下し、適用したいライブラリを選択。
③表示されたダイアログ内で「スタイルを書き換える」を押下。
④ボタンが指定のデザインに変更されました。
Figmaの公式サイトに詳細が掲載されていますので、ご参照ください。
メリットとデメリット
実際に使ってみて感じたメリット・デメリットをまとめてみました。
メリット
- 数分でプロトタイプを制作できる
- 管理画面のような定型UIでは特に相性が良い
- 議論用のたたき台としても十分機能する
- デザインファイルにコピーして編集できる（New機能）
デメリット
- プロンプトだけでは意図通りに出ないこともある（プロンプトに工夫が必要？）
まとめ
今回Figma Makeを活用したことで、「短期間でユーザーテスト用のプロトタイプを用意する」という当初の課題を無事に解決することができました。
最終的なクオリティは人の手で担保する必要がありますが、
デザインプロセスのスタート地点をAIが用意してくれるだけで作業は驚くほど加速します。
また、自社のデザインシステムを適用できたことは良い発見でした。
これにより単なるたたき台ではなく、より完成形に近い状態からデザインプロセスを開始できます。
UI/UXデザインの初期検討フェーズにおけるAI活用は、今後ますます面白くなっていきそうです。
この記事が、皆さんのデザイン業務のヒントになれば幸いです！
Discussion