デザイン制作

Figma Design Agent入門｜キャンバス上でAIにUI案を作らせて直す方法

更新日：2026-10-05 著者：読了目安：7分

この記事の要点

Figmaのキャンバス上でAIエージェントに話しかけるだけでUI案が生まれ、デザインシステムに沿った修正もできる。2026年5月に公式発表されたFigma design agentの使い方を、初心者でも操作できる粒度で解説します。

PR 本ページにはプロモーションが含まれています。

Figma design agentで何が変わるのか

この記事を読むと、FigmaのAIエージェントを使ってUI（ユーザーインターフェース＝画面デザイン）の草案を作り、そのままキャンバス上で修正・仕上げまで完結させる一連の流れが分かるようになります。

これまでFigmaでUIを作るには、ゼロからコンポーネント（再利用できる部品）を並べてレイアウトを組む必要がありました。デザインに慣れていない社内Web担当者や初心者にとって「何から始めればいいか分からない」という壁が高く、Figmaを触り始めて早々に挫折するケースも少なくありませんでした。

2026年5月20日、Figmaは公式ブログでFigma design agentを発表しました。これはFigma Designのキャンバス上に直接呼び出せるAIエージェントで、自然言語（普通の言葉）で指示を送るだけでUIの生成・編集・フィードバックを実行してくれます。イメージとしては「デザイナーの同僚に口頭で依頼する感覚でFigmaを動かせる」ようになった、という変化です。

従来の作業との具体的な違い

以下の表で、エージェントを使う前後を整理しておきます。

作業内容	従来	Figma design agent使用後
ログイン画面の初稿作成	フレーム作成→コンポーネントを1つずつ配置→テキスト入力	「ログイン画面を作って」と入力するだけで草案が生成される
ボタンの色を一括変更	全ボタンを選択→塗りを手動で変更	「プライマリボタンをすべて青に変えて」と指示するだけ
デザインシステムへの準拠確認	ライブラリを参照しながら手作業でチェック	エージェントがコンポーネントやトークンを自動参照して生成
複数案の比較	同じデザインを複製してバリエーションを手動作成	「3パターン作って比較したい」と伝えると複数案を並べて生成

特に大きいのはデザインシステムとの連携です。デザインシステムとは、ボタンの色やフォントサイズなど「このプロジェクトで使うデザインのルール集」のこと。エージェントはすでに登録されているコンポーネント・トークン（色や余白などの変数）・ライブラリを参照しながら生成・編集してくれるので、ブランドルールを崩さずにAIを活用できます。

Figma design agentを使うための準備と条件

現時点でFigma design agentはベータ版（正式リリース前の試験提供段階）として段階的に展開されています。利用前に以下を確認してください。

対象プラン・シート：Figma公式ヘルプに記載されたプランおよびシート種別が対象。無料プランや一部のシートタイプでは利用できない場合があります。最新の対象条件はFigma公式ヘルプ（How do I access the AI agent beta in Figma Design）で必ず確認してください。
言語：英語での指示入力が基本です。日本語でも動作するケースがありますが、英語の方が精度が安定しやすい傾向があります。
Figma Designの最新版：ブラウザ版またはデスクトップアプリの最新版を使用してください。古いバージョンでは表示されないことがあります。

実際の操作手順｜初めてエージェントを呼び出すまで

操作の流れは思ったよりシンプルです。最初の一回だけ「どこにあるか」を把握すれば、あとは自然な会話感覚で使えます。

Figma Designでファイルを開く
既存のファイルでも、新規作成したファイルでもどちらでも構いません。
エージェントパネルを開く
画面右上のツールバーに表示される「AI」アイコン（スパークルマーク）をクリックします。右サイドパネルにエージェントのチャット入力欄が表示されます。もしアイコンが見当たらない場合は、上部メニューの「View（表示）」→「AI panel」から表示できます。
キャンバス上の対象を選択する（任意）
既存のフレームや要素を修正したい場合は、先にキャンバス上でその要素をクリックして選択状態にしておきます。新規作成なら何も選択しなくてOKです。
指示を入力して送信する
入力欄に指示を書いて「Enter」または送信ボタンを押します。例：
- 新規作成なら「Create a login screen for a mobile app」（モバイルアプリのログイン画面を作って）
- 既存の修正なら「Make the button text larger and center-align everything」（ボタンのテキストを大きくして全体を中央揃えにして）
生成された案を確認・採用・修正する
エージェントはキャンバス上に直接デザインを生成または変更します。気に入らない部分があれば、同じチャット欄に続けて「もう少しシンプルに」「色をもっと明るく」と追加指示を入れれば反映されます。

画像高画質化AIツール【Aiarty Image Enhancer】

1億点超の素材を業界最安水準で。日本人画像も豊富【イメージマート】

実際に使ってみると感じること｜最初の壁と慣れてきたときの使い道

最初に多くの人が感じる壁は「どんな指示を書けばいいか分からない」という点です。チャットAIを使い慣れていない場合、「完璧な指示を書かなければいけない」と身構えてしまいがちですが、Figma design agentはあまり厳密に構えなくて大丈夫です。

たとえば「ヘッダーを作って」くらいの短い指示でも動きます。出てきた結果が「ちょっと違う」なら、次のメッセージで「左側にロゴを追加して」「ナビゲーションリンクを右揃えにして」と追加するだけです。料理に例えると、最初から完璧な注文をしなくても、「まず炒め物で」→「もう少し辛くして」と伝えながら仕上げていくイメージです。

慣れてくると特に役立つ場面は以下の3つです。

クライアントへの初回提案用ワイヤーフレーム（骨格図）の素早い作成：完成度を求めない最初の叩き台をAIに出させることで、提案準備の時間が大幅に短縮されます。
デザインシステムを使ったページ量産：すでにコンポーネントライブラリが整っているプロジェクトで、「同じレイアウトで内容違いのページを5ページ作って」と指示するだけで複数ページの草案が出てきます。
フィードバックの言語化：「このデザインで改善すべき点を教えて」と聞くと、エージェントがデザインを分析してコメントを返してくれます。デザインの説明や社内レビューの準備に使えます。

向く人・向かない人

Figma design agentが特に力を発揮するのは次のような人です。

Figmaは持っているがデザインに自信がなく、何から置けばいいか迷ってしまう人
デザイナーへの依頼前に「こんな感じ」を素早く可視化したい非デザイナーのWebディレクターや社内担当者
既存デザインの微調整を毎回手作業でやっていて時間がかかっている人

一方で、以下のケースには現時点では限界もあります。

独自性の高いブランドデザインやアニメーション表現：AIが出すデザインはある程度「よくある形」に落ち着くため、個性的な表現は手作業が必要です。
デザインシステムがまだ整っていないプロジェクト：デザインシステムがない状態でもエージェントは動きますが、一貫性のある修正には限界があります。
ベータ版非対象のプランユーザー：現在は段階的展開のため、利用できないプランやシートがあります。

初心者がつまずきやすいポイントと対処法

実際に使ってみると出てくるいくつかのつまずきポイントをまとめておきます。

AIアイコンが表示されない：対象外のプランか、ベータ展開がまだ自分のアカウントに来ていない可能性があります。Figmaのアカウント設定でベータ参加の申請ができる場合があるので、公式ヘルプを確認してください。
日本語で指示しても精度が低い：英語で入力してみてください。「シンプルなログイン画面」→「Simple login screen with email and password fields」のように置き換えるだけで精度が上がります。
生成されたデザインがライブラリのコンポーネントと合っていない：チームライブラリが有効になっているか確認してください。メニューの「Assets（アセット）」→「Libraries（ライブラリ）」から有効化できます。ライブラリが有効だとエージェントがコンポーネントを参照しやすくなります。
意図と違う変更が加えられた：「Ctrl＋Z（Mac はCmd＋Z）」で操作を取り消せます。Figmaは変更履歴も残るので、左上メニューの「File（ファイル）」→「Version history（バージョン履歴）」から過去の状態に戻すことも可能です。

FAQ

Q. 無料プランでもFigma design agentは使えますか？

現時点ではベータ版のため、対象プランとシート種別が設定されています。無料プランでは利用できない可能性が高いです。Figma公式ヘルプの「How do I access the AI agent beta in Figma Design」ページで自分のプランが対象かどうかを確認するのが確実です。

Q. 日本語で指示を出しても動きますか？

日本語で動作するケースもありますが、公式には英語での利用が想定されており、精度に差が出ることがあります。指示は英語で書いた方が安定しやすいため、まず英語で試してみることをおすすめします。短い英語フレーズに置き換えるだけで大きく改善することが多いです。

Q. 生成されたデザインは自分で修正できますか？

もちろんできます。エージェントが生成したデザインはすべて通常のFigmaオブジェクトとして配置されるため、そのまま手動で選択・移動・色変更・テキスト編集ができます。AIが出した草案を土台に、細部は自分で仕上げるというハイブリッドな使い方が一番効率的です。

Q. デザインシステムがないとエージェントは使えませんか？

デザインシステムがなくても使えます。その場合、エージェントは汎用的なコンポーネントを使ってデザインを生成します。ただし、チームで統一感のあるデザインを量産したい場合は、事前にカラートークン（色の変数）や共通コンポーネントをライブラリに登録しておくとエージェントがそれを参照してくれるので、より実務に合った結果が得られます。

今日からできる最初の一歩

まずFigmaを開いて、右上のAIアイコン（スパークルマーク）がある場合は「Simple dashboard layout with a sidebar」と英語で入力してみてください。それだけで画面にUIの草案が現れます。うまくいかなければ「もう少しシンプルに」と続けて打てばいい。完璧な指示を考える必要はありません。

Figmaを「ゼロから作るツール」として使うのをやめ、「AIが出した草案を整えるツール」として使い始めると、デザイン作業への心理的なハードルが一気に下がります。今日最初にやることは、ベータへのアクセス確認とその最初の一言を打ち込んでみること、それだけで十分です。

画像高画質化AIツール【Aiarty Image Enhancer】

1億点超の素材を業界最安水準で。日本人画像も豊富【イメージマート】