「Figmaデザインエージェント（ベータ版）」が登場
5月20日に、Figmaにて「デザインエージェント」機能がベータ版として登場しました。
今回は、この機能を少し利用した内容を、使用感レポートとして、キャプチャー画像中心にお伝えします。
公式の案内はこちらをご覧ください。
公式ブログ：Figmaデザインエージェントが登場 | Figma Blog
利用方法は簡単で、既存のFigmaデザインのナビゲーションに追加された「エージェント」や、各フレームなどに表示されるエージェントアイコン（✦）から自然言語でプロンプトを入力すると、「エージェント」がモックアップ生成や変更をしてくれます。
（現在この機能は有償アカウントにて、AIクレジットを消費せずに、試用できます。正式リリース後はAIクレジットが消費されるようです。）
例1）簡単なプロンプト
まず、何も無い画面に、以下の簡単なプロンプトを送信しました。
Jira、Asana、Nulab Backlog、Redmineのような、SaaSのプロフェッショナルなタスク管理ツールの画面モックアップを作成してください。
画面は「タスク一覧ページ」と「各タスクの詳細ページ」の2つの画面。
2分ほどで、UIモックアップが描画され、品質としては、このまま利用しても、ほぼ問題無いものです。
配置されているUI要素、基本レイアウト、スペーシング（余白）、配色、文字サイズ、ダミーコンテンツ内容、どれも基本的に、不自然さはありません。
もちろん、生成されたモックアップはFigmaデザインのオートレイアウトが適用されたレイヤー要素で構成されており、手動で編集可能です。
例2）デザインシステムを指定
Figmaデザインエージェントは、既存のライブラリを指定可能です。UIコンポーネントやスタイル定義が格納されたライブラリを参照させることで、細かい指示なしでも意図に沿ったUI構築が期待できます。
具体的には、デザインファイルに対して、まずライブラリを追加します。（公式: Figmaのライブラリに関するガイド ）
そのうえで、エージェントのプロンプト欄のオプションにて有効にするライブラリを指定します。（チェックを入れる）
今回は公開されている「Primer Web」（Figmaデザインファイル）をライブラリとして指定し、プロンプトでは「例1」のプロンプトに加えて、念のため「デザインシステムは『Primer Web』を使用」と追記して実行したところ、3分半ほどで精度の高い出力が得られました。
出力されたモックアップについて、UIラベルや、コンテンツを日本語化したいため
画面の内容を日本語化して
と指示を行い、
さらに、タスク詳細ページの要素に重なりが発生しているので、詳細画面を選択して
コメント入力欄と、画面右側のステータスなどの要素が重なっているので、重ならないようにして。
と指示をすると、想定どおりに更新されました。
ライブラリのコンポーネント適用
各UI要素が、ライブラリのUIコンポーネントをインスタンスとして配置されているか、確認したところ、「ボタン」や「パンくずリスト」「ラベル」「アバター」などは、問題ありませんでした。
しかし「セレクト」や「データテーブル」などは、ライブラリが利用されていませんでした。
セレクト要素を選択して、ライブラリのコンポーネントを利用するように指示したところ、コンポーネントが適用されましたが、「優先度: すべて」などのラベル文字が無効化されたため、エージェントによる更新を「元に戻す」を行い、ラベル内容を保持するように再度指示をしたところ、そのとおりとなりました。
表（テーブル）部分は、DataTableコンポーネントの適用を指示しても、なかなか期待通りにはなりません。
テーブルには、ヘッダーや行、列、フッター、さらにセルの要素のバリエーションなど複雑なため、利用するコンポーネントの特性を踏まえて、指示をする必要がありそうです。
エージェントの制御が難しい場合は、早めに手動編集に切り替えるのが良いかもしれません。
なお、Figmaデザインエージェントは、同時に複数のプロンプトを送信しても並行して処理をすることも可能です。
例3）バリエーション生成
「例1」「例2」にて生成された画面は、デスクトップ用のライトモード画面でしたが、ダークモードやモバイル画面を、下記のようなプロンプトで依頼しました。
この画面のダークモード版を別のframeで作成して。
これら2つの画面に対する、モバイル（スマートフォン）用の画面を作成して。
結果としては、ダークモードは期待通りでした。
モバイル画面は、少々ぎこちないですが、たたき台として利用できそうです。
他のサービスと比較
以上がFigmaデザインエージェント（ベータ版）の簡単な使用感ですが、比較として、同じプロンプトを次の2つのサービスに送信してみました。
ChatGPT（画像生成）
静的な画像として出力されます。レイアウトや要素の構成は適切ですが、Figmaなどで編集可能なレイヤーとして出力はされないため、プロトタイプへの落とし込みや、詳細を手動編集するには別途作業が必要です。
Figma Make
「Figma Make」は2025年リリースの機能です。（公式：Figma Makeを探る）
プロンプトからフロントエンドコードの生成に重きを置いており、Figmaエージェントとは出力の指向性が異なります。Figma Makeで生成した内容はFigmaデザインファイルへコピー＆ペーストして編集することも可能です。
プロンプトを送信すると、数分でタスク一覧画面、詳細画面のプロトタイプができました。
画面の要素、レイアウトや配色は完成されており、違和感はありません。
「Make」と「デザインエージェント」は同じFigmaのサービスでも、同じプロンプトから生成される内容は異なる印象です。
おわりに
上記の公式案内に
…「AI生成か、それとも直接操作か?」といった、偽りの二者択一が浮上しています。しかし、どちらかを選ぶ必要などないはずです。（省略）私たちの目標は、Figmaに精通し、チームの働き方に自然に溶け込むエージェントを作成することでした。…
とあるように、手作業とエージェントとをうまく合わせることで、UIモックアップ、プロトタイプ作成、バリエーションづくりの工数削減や、品質の向上が実現できそうです。
Photo by Zac Wolff on Unsplash
