📌 この記事のポイント

• Figma Design Agentは2026年5月20日にベータ公開された「デザインキャンバス上で動くAI」です

• 1プロンプトで複数バリエーションを並列生成し、Figma上のデザインシステムを使用することができる

• 利用条件はProfessional/Organization/Enterpriseの有料プランが中心で、Full seatはDesignファイル全体、Dev/Collab seatはドラフトで利用できる

• ベータ期間中はAIクレジット消費なし、正式リリース後は標準のAIクレジット体系が適用される

• @メンションでcomponents・variables・stylesを指定すると精度が大きく上がる

2026年5月29日更新

Figma Design Agentは「デザインシステムを読んでバリエーションを作るAI」

Figma Design Agentとは、2026年5月20日にベータ公開された、Figma Designのキャンバス上で直接動くAIエージェント機能のこと。

Figma公式では「Figma's agent」「agent in Figma Design」とも表記されるが、この記事では便宜上「Figma Design Agent」と呼びます。

機能の特徴は、1つのプロンプトで複数のバリエーションを並列生成し、ファイル内のcomponentsやvariablesといったデザインシステムを利用して生成できること。Figma Make（ゼロから生成）とは別の系統で、「既存のデザインファイルの中で動くAI」として位置づけられています（Figma公式ブログ）。

デザイナーにとって一番の変化は、「自分で全部のレイヤーを動かす作業役」から「AIに意図を伝えて動かしてもらう指示役」への転換点に立っている、ということ。プロンプトの精度＝デザインの言語化精度が、そのままアウトプットの差になる時代になってきました。

この記事では、Figma Design Agentの全体像・料金・使い方・@メンション活用法・Figma Makeとの違い・限界までを、駆け出しデザイナーが今日から触れる形でまとめました。

参考：Figma公式ブログ「The Figma Design Agent is Here」／Figma公式ヘルプ「Work with the AI agent in Figma Design」

Figma Design Agentとは？2026年5月ベータ公開の新機能の全体像

Figma Design Agentとは、Figma Designの左サイドバーとキャンバス内で動作し、ファイル内のレイヤー・コンポーネント・変数・トークンを読み取りながらデザインを生成・編集するAI機能のこと。2026年5月20日からProfessional/Organization/Enterprise契約のフルシートユーザー向けに段階ロールアウトが始まりました（Figma公式ヘルプ「About Figma AI」）。

これまでの「First Draft」が進化した位置づけで、テキストプロンプトから新規UIを生成するだけでなく、既存ファイルを直接編集できる点が大きく進化した点です。

ちなみにFigma Design Agentの基盤モデル名は2026年6月時点で公式には明示されていないようです。Figmaのサブプロセッサ一覧では、Figma Design向けAI機能のモデルプロバイダーとしてOpenAIが記載されているが、Design Agent単体で利用される具体的なモデル名や構成は非公開です。

何ができる？5つの主要機能を紹介！

Figma Design Agentでできることは、大きく分けて5つあります。すべて「ファイル内のコンテキストを理解した上で動く」点が共通しています（Figma公式ヘルプ「Work with the AI agent」）。

1. デザインバリエーション生成

選択したフレームを起点に、複数のスタイル方向で並列生成できます。例えば「チェックアウト画面を、オーガニック・モダン・レトロの3方向で展開して」と指示すると、3つのバリエーションを同時に作ります。

ライトテーマのデザインを、ダークテーマに変更してもらうなどもできます。

2. UI新規生成

テキストプロンプトから新しいUIをゼロベースで作成する機能。ファイル内で使用頻度が高いコンポーネントを優先的に使う仕様になっているそう。

試しに「レシピアプリの画面を作成してください」とお願いして作成されたデザイン。約1分で生成されました。

ライブラリを指定する機能もあり、指定によって同じプロンプトでもデザインが変わります。（左：ライブラリ指定なし / 右：iOS 18 and iPadOS 18を指定）

3. バルク編集（一括変更）

「すべてのチップコンポーネントをアクティブ状態に切り替えて」「lorem ipsumを実コピーに置き換えて」「ファイル全体をダークモードに変換して」といった、これまで手作業で何時間もかかっていた作業を一度に実行できる。

4. デザインシステムの適用

すでに作成済みの画面に対して「このCTAを既存のPrimary Buttonに置き換えて」「色を@brand-primaryにそろえて」「ダークモード用のvariablesに切り替えて」といった形で、後からデザインシステムに寄せる使い方もできます。デザインシステムが整っていればいるほど、エージェントの精度が上がる構造になっている。

@メンション機能の具体的な使い方は、後半で詳しく解説します。

5. コメント・フィードバックの整理と修正案作成

Figma Design Agentは、デザインファイル上に付けられたコメントやフィードバックもコンテキストとして扱えます。例えば「この画面に付いたコメントをテーマ別に整理して」「修正すべき点を優先度順にまとめて」「コメント内容をもとに改善案を3つ出して」といった使い方ができます。

注目機能1｜並列作業、バックグラウンド作業が可能！

Figma Design Agentの大きな特徴は、AIの処理を待っている間も、人間側の作業を並行して進められることです。つまりAIの処理を待つ必要がありません。

更にAI自体を並列で走らせることも可能です。

たとえば、同じ画面に対して「オーガニック・モダン・レトロの3方向で展開して」と指示し、複数案を比較しながら、別のフレームでは人間が手作業で余白やコピーを調整する、といった使い方ができます。

同じFigmaファイル内で人間とAIが並行して作業できるため、案出し・比較・修正・一括変更を同じキャンバス上で進めやすくなっています。これは便利！

注目機能2｜@メンションでcomponents・variables・stylesを指定できる！

Figma Design Agentで精度を一段引き上げる仕組みが「@メンション」。ライブラリをコンテキストとして接続したうえで、プロンプト内で @ を使って特定のcomponents・variables・stylesを直接参照させることができます。（Figma公式ヘルプ「Work with the Figma agent in design files」）。

@メンションが効く条件

ファイル内、または接続したライブラリ内にcomponents・variables・stylesが整備されていることが前提になります。何も定義されていないファイルでは@メンションで参照できる対象が少ないため、エージェントは汎用UIを推測で出してしまい、結果として手戻りが増える可能性があります。

Figma Makeとの違い｜どの場面で使い分けるか

Figma Design Agentと混同されやすいのが、Figma Make。両方ともFigmaのAI機能ですが、役割が異なります。

Figma Makeとの違いは出力が明確に分かれる点です。Figma Makeは「実装可能なコード＋プロトタイプ」を返すのに対し、Design Agentは「Figmaのデザインレイヤー」を返します。ゼロから動くプロトタイプを作りたいときはFigma Make、デザインファイル内でデザインを展開したいときはFigma Design Agent、という棲み分けしましょう。

Figma Make単体については Figma Makeとは？使い方・料金・活用例まで徹底解説 で別途まとめているので参考にしてみてください。

また、First Draftは、2026年5月20日以降、Design Agent内に統合される形になりました。現在メニューには表示されますが、使用するとDesign Agentを使用するように誘導されます。

駆け出しデザイナーが今日から試せる3つの活用シーン

ベータ期間中の今、駆け出しデザイナーが触っておくと得しやすい活用シーンを3つご紹介します。

シーン1｜複数スタイル生成でトンマナの方向性探索

完成形がまだ見えていない初期段階では、Figma Design Agentのバリエーション生成が役立ちます。

たとえば、同じ画面に対して「信頼感のあるBtoB SaaS風」「親しみやすい教育サービス風」「高級感のあるブランドサイト風」のように、複数のトーンで展開してもらうことで、手作業では時間がかかる方向性の比較を短時間で行えます。

駆け出しデザイナーにとって特に大きいのは、複数案を見比べながら「なぜこの方向性が合っているのか」「どの要素が印象を変えているのか」を考えられる点です。配色、余白、タイポグラフィ、コンポーネントの使い方を比較することで、トンマナを言語化する練習にもなります。

シーン2｜ワイヤーフレーム用のDSで高速プロトタイピング

ワイヤーフレーム用のコンポーネントやvariablesを用意しておけば、Figma Design Agentを使って初期案をすばやく組み立てられます。

たとえば、見出し、本文、ボタン、カード、入力欄、ナビゲーションなどをワイヤーフレーム用のデザインシステムとして整理しておき、「予約フォームの画面を作って」「オンボーディング画面を3ステップで作って」と指示すると、ゼロから手で並べるよりも早くたたき台を作れます。

この段階では、見た目を作り込みすぎるよりも、情報設計や導線の確認を優先するのがポイントです。ワイヤーフレーム用DSを使えば、ビジュアルの細部に引っ張られず、画面構成やユーザーの流れを検証しやすくなります。

シーン3｜ボタンの差し替えなどバルク修正を一発解決

複数画面にまたがる修正では、Figma Design Agentのバルク編集が便利です。

たとえば、「選択中のフレーム内にあるCTAボタンをすべてPrimary Buttonに置き換えて」「ダミーテキストを実際のコピーに差し替えて」「カード内の余白を24pxにそろえて」といった指示を出すことで、手作業では面倒な一括変更をまとめて進められます。

駆け出しデザイナーの制作では、後からコンポーネント名や余白、ボタンの種類をそろえる作業が発生しがちです。そうした修正をエージェントに任せることで、単純作業に使う時間を減らし、レイアウトの意図や改善案の検討に時間を使いやすくなります。

料金とプラン｜誰が使えるのか・AIクレジットの扱い

Figma Design Agentの料金は、ベータ期間中は無料で試用できます。ただし、Figma AIはAIクレジット制で運用されており、Figma Design Agentについてもタスクの複雑さに応じてクレジット消費が変わると案内されています。正式提供後は、FigmaのAIクレジット体系に組み込まれる可能性が高いため、チーム導入時はクレジット消費量も確認しておく必要があります。

利用できるのはProfessional/Organization/Enterpriseプランが中心で、フルシートユーザーはFigma Design files全体で利用でき、Dev seat・Collab seatユーザーはDrafts内でのみ試すことができます（Figma公式ヘルプ「How do I access the AI agent beta」）。

なお、ベータは段階ロールアウトのため、対象プランのユーザーでもすぐに使えるとは限りません。Figma公式フォーラムでは、まだAgentが表示されない有料シートユーザー向けにウェイトリスト参加が案内されています。

校長の見解｜Figma Design Agent使ってみてどう？

ここは、もち本人がNOT DESIGN SCHOOL校長として、Figma Design Agentを使ってみて何を感じたか３つに分けて紹介します。

視点1｜整備されたデザインシステムがあると強い

Figma Design Agentは、components・variables・stylesが整っているファイルほど力を発揮します。新規画面の生成でも既存画面の修正でも、参照できるルールがあるほど、チームのトンマナに沿った出力になりやすいからです。

逆に、色や余白を直打ちしているファイルでは、エージェントも判断材料が少なくなります。AI時代はデザインシステムの整備や管理がより重要視されるようになってきています。

視点2｜実はデザイン生成以外のAI活用も便利

Design Agentは、デザイン生成以外でも使えます。「このファイルの内容を要約して」「コメントを優先度順に整理して」「新規ユーザー目線で改善点を出して」といった使い方もできます。壁打ち相手としても使えるので、Figmaと他のAIツールを行き来する回数が減らせるのは良いなと思いました。

視点3｜UIデザイン以外の生成もできる

Figma Design Agentは、UI画面だけでなく、スライド資料、Webサイトのワイヤーフレーム、SNS投稿画像なども生成できます。

「UIを作るAI」だけでなく、Figma上の制作を広く助けるエージェントとして見るとUIデザイナー以外でも活用の幅が広がります。

視点4｜ポン出しで使うのではなく、たたき台として使う

Figma Design Agentは便利ですが、生成されたデザインをそのまま納品物として使えるほど、常に完成度が高いわけではないと感じました。

一発ポン出しでそのまま使用するのではなく、あくまでもたたき台として使用するのが今のところは現実的かなと感じています。

限界と注意点｜現段階で気をつけたいこと

ベータ段階ということもあり、現時点では理解しておきたい制約があります。誇張せずに正直なところをまとめました。

注意点1｜ベータ期間中は招待制で全員が使えるわけではない

2026年5月20日から段階ロールアウトが始まったが、Professional/Organization/EnterpriseのFull seat契約者でも順次有効化されている状況。Starter・Education・Governmentプランは現時点で対象外。Dev・Collab seatはFigma Design files全体ではなく、Drafts内でのみ試せる（Figma公式ヘルプ「How do I access the AI agent beta」）。

注意点2｜ファイルの添付などはできない

Figma Design Agentのチャットには、現時点ではChatGPTのようにPDFや画像ファイルを直接添付して読み込ませる機能はありません。

そのため、「このPDF資料を読んで画面に反映して」「この画像を添付するので参考にして」といった使い方は、そのままではできない点に注意が必要です。

参考にしたい画像やデザイン素材がある場合は、Figmaのキャンバス上に配置してから選択し、プロンプト内で参照させることはできます。たとえば、参考画像をキャンバスに置いたうえで「選択中の画像を参考にして、この画面のトンマナを調整して」と指示します。Figmaファイル内に置いた要素をコンテキストとして扱わせるイメージです。

注意点3｜GA後はAIクレジット消費（料金変動リスク）

今は無料でも、GA後は月間AIクレジット枠に組み込まれる。チームやプロジェクト導入を検討する場合、リクエスト内容や処理の複雑さによってクレジット消費量が変わる点を前提に見積もる必要があります。Figma Make単体の料金プランも参考になるため、Figma Make記事も併せて確認しておくと、料金感覚が掴みやすいと思います。

よくある質問（FAQ）

Q1. Figma Design Agentは無料で使えますか？

ベータ期間中はAIクレジット消費なしで使えます。Professional/Organization/Enterprise契約のFull seatならFigma Design files全体で使え、Dev・Collab seatはDrafts内で試せます。Starterプラン（無料）では利用できません（Figma公式ヘルプ）。また有料プランであっても現在段階的にロールアウト中なので、全員が使えるわけではないので注意しましょう。

Q2. Figma MakeとFigma Design Agentはどう違いますか？

Figma Makeは「実装可能なコード付きプロトタイプ」を生成するゼロイチ系ツール、Figma Design Agentは「既存のFigmaファイル内でレイヤーを編集・展開する」エージェント系ツール。場面が分かれている。詳細は Figma Make記事 でも解説しています。

Q3. ベータに登録するにはどうすればいいですか？

Professional以上のFull seatでログインしていれば、段階ロールアウトで自動的に有効化されていきます。早めに触りたい場合は、Figma公式のウェイトリストに登録してみましょう。

Q4. プロンプトのコツはありますか？

「意図＋制約」を1セットで渡すこと。例えば「@brand-primaryを使い、3パターン展開して」のように、ターゲット・制約・要望を明確に書く。AIプロンプト設計の基本については Claude入門 でも基礎を解説しています。

Q5. First Draftはもう使えないんですか？

First Draftの機能はDesign Agentに統合された形になっています。今後は「Design Agentから新規UIを生成する」ことになります。