Figmaデザインエージェントで勉強会バナーを作ってみた

Figmaデザインエージェントで勉強会バナーを作ってみた

Figmaの新しいAIエージェント機能を試してみました。勉強会バナーの作成を通じて、その操作感や精度、現在のネックな点をレポートします。
2026.06.09

Figmaの新機能「Figmaデザインエージェント」のベータ版が、自分の環境でも使えるようになりました。早速、勉強会バナーを作る作業で試してみました。

Figmaデザインエージェントとは

Figma専用のAIエージェントで、キャンバス上や左パネルから直接操作できます。MCPサーバーとは異なり、Figmaファイルに直接組み込まれているため、別途設定なしに使えます。
主な特徴はこちらです。

  • 任意のレイヤーからプロンプトを開始できる
  • 複数アイデアを同時展開できる並行プロンプト
  • エージェントが生成中でも手動で編集を加えられる

参照:Figmaエージェントをデザインファイルで使用する

実際に試してみた

今回は、勉強会のシリーズバナーの新規作成を行います。同シリーズの過去バナー3つ分を1つのセクションにまとめ、そのセクションに対して以下指示を出しました。

このシリーズバナーを以下内容で新規作成してください。
- タイトル:クリエイティブキャンプ OFFLINE
- サブタイトル:クラウド・生成AIの活用を学ぶ2泊3日の合宿
- 日付:2026.6.3(水)@東京
- 背景色:オレンジのグラデーション

スクリーンショット 2026-06-09 0.10.04
同シリーズの過去バナー3つ分を1つのセクションにまとめ、そのセクションに対して指示を入力

実際に生成されたバナーはこちらです。生成に9分12秒かかりました。
スクリーンショット 2026-06-09 0.09.06

タイトル、サブタイトル、カラーリングは指示通りに仕上がりました。背景の装飾も過去バナーを踏襲しています。一方で、日付が6.3と指定したのに6.4で生成されてしまいました。

修正をお願いしてみた

生成されたバナーの気になった要素を選択し、修正内容を入力しました。

タイトルを選択し以下内容を入力。

- タイトル「クリエイティブキャンプ」の余白が気になるので、文字サイズを大きくしつつ左右の余白を狭めてください
- 緑色が浮いているので、背景色に馴染む色に変更してください

スクリーンショット 2026-06-09 0.10.57
タイトルを選択し、修正内容を入力

日付を選択し以下内容を入力。

- 日付を6.3に修正してください

スクリーンショット 2026-06-09 0.11.16
日付を選択し、修正内容を入力

フレームを選択し以下内容を入力。

- 背景のグラデーションは、上下反転させて、上が彩度高くなるように修正してください

スクリーンショット 2026-06-09 0.12.46
フレームを選択し、修正内容を入力

修正したい要素を選択した状態でプロンプトを入れると、その要素に対して修正がかかります。複数の修正をまとめて依頼できるので、一つずつ確認しながら進める手間が省けました。

実際に、修正されたバナーとそれぞれの生成時間はこちらです。
スクリーンショット 2026-06-09 0.19.36

  • タイトルの修正:2分54秒
  • 日付の修正:6分30秒
  • 背景色の修正:6分10秒

結果、修正できたのはタイトルと背景色のみで、日付は修正されませんでした。

日付が修正されなかった理由

日付のフォントに「Univia Pro Black」(ローカルフォント)を使用していたため、テキストの変更ができませんでした。リモートのみの use_figmaを使うため、ローカルフォントが使われているテキストは編集できないようです。
今回は手動で修正しましたが、Figmaにフォントをアップロードすることで編集できるようになります。ローカルフォントを使用している場合は事前にアップロードしておくと良さそうです。(※アップロードする際は、フォントを使用するために必要な権利とライセンスを所有していることを確認してください。)

参考:Figmaにフォントを追加する

再修正をお願いしてみた

修正後、まだ気になる部分があったのでさらに修正を依頼しました。

- クリエイティブキャンプの文字サイズは66ptに変更し、左右の余白は狭めてください。また、オレンジが暗いので少し明るくしてください
- サブタイトルのフォントサイズは40に変更してください

スクリーンショット 2026-06-09 10.15.07

フォントサイズを指定したため、期待する出力結果となりました。

使ってみて感じたこと

良かった点

要素を選択してプロンプトを入れられる

修正したいレイヤーを選択した状態でプロンプトを入力できるので、「どこを直してほしいか」が伝わりやすいです。テキストで説明するより直感的で、思った通りの修正に近づきやすいと感じました。

複数要素の同時修正が可能

色の変更・余白の調整・テキストの修正など、複数の修正をまとめて依頼できます。一つずつ依頼して都度確認する手間が省けました。

コンポーネントはそのまま使われる

ロゴなどの素材は、生成時に変形されてしまう可能性があります。今回のClassmethodロゴはコンポーネントのインスタンスとして配置していたため、生成時に加工されることなくそのまま使用されていました。コンポーネントとして管理されている要素はエージェントに触られないため、ロゴや固定素材はコンポーネント化しておくと安心です。

気になった点

生成に時間がかかる

複数の修正を同時に依頼できるとはいえ、一つ一つの生成に時間がかかります。今回のようなタイトルや色変更程度のバナー作成の場合は、現状まだ手作業の方が早い印象でした。

まとめ

要素を選択してプロンプトを入れる操作感は直感的で、複数要素の同時修正も便利でした。生成に時間がかかる点は現状のネックですが、精度が上がれば非デザイナーでも品質を担保したバナー作成ができる可能性があると感じています。ベータ版ということもあり、今後の改善に期待しています。

今回はバナー作成に絞って試しましたが、0→1の生成やコンポーネントインスタンスの編集、ライブラリの参照など、まだ試せていない機能がたくさんあります。次はこの辺りを検証し、またレポートにしたいと思います。

最後までお読みいただきありがとうございました。


国内企業 AI活用実態調査2026 配布中

クラスメソッドが独自に行なったAI診断調査をもとに、企業のAI活用の現在地を調査レポートとしてまとめました。企業規模別の活用度傾向に加え、規模を超えてAI活用を進める企業に共通する取り組みまで、自社の現在地を捉えるためのヒントにぜひ。

国内企業 AI活用実態調査2026

無料でダウンロードする

この記事をシェアする

関連記事