Figmaは他のデザインツールにはない機能をリリースしました:あなた独自のデザインシステムコンポーネントを使用して、キャンバス上で直接デザインを作成するAIエージェントです。インターフェースを説明するチャットボットではありません。静的なモックアップを作成するプロンプト・トゥ・イメージ生成器でもありません。編集可能なFigmaレイヤー(実際のフレーム、コンポーネント、オートレイアウト、変数)を生成し、他のデザイナーが作成したかのように選択、修正、構築できるエージェントです。
Design Agentは、FigmaのSkills、MCPサーバー、拡張されたDraw機能、Figma Sitesの2026年5月リリースと共に発表されました。しかし、エージェントが中心的存在です。デザイナーの日常業務を最も直接的に変える機能です。開発にClaude Codeや他分野のAIエージェントを使用したことがあれば、概念は馴染みがあるでしょう:ワークスペース内で多段階のタスクを自律的に実行するAIです。Figmaのバージョンは、その概念をビジュアルデザインに応用しています。
重要なポイント
Design Agentは、公開されたコンポーネント、変数、デザイントークンを使用して実際のFigmaレイヤーを生成します。これはモックアップではありません。実際のデザインシステム作業です。エージェントはベータ期間中無料で、GA時にクレジットベースの価格設定に移行します。コストがかからない今のうちに学習しましょう。ベータ期間中に構築するワークフローの習慣が、永続的なスピードの優位性となります。
Design Agentの実際の動作
エージェントは、Figmaの左パネルの自然言語インターフェースを通じて動作します。「コンポーネントライブラリを使用して、アカウント設定、通知トグル、セキュリティセクションを含む設定ページを作成」のように、希望を説明すると、エージェントがキャンバス上に生成します。しかし、単純なテキスト・トゥ・イメージ生成器とは異なり、エージェントはデザインシステムに基づいて、レイアウト、スペーシング、コンポーネント選択、階層について意図的な決定を行います。
内部的には、エージェントは多段階のプロセスに従います。まず、公開されたコンポーネントと変数を分析して、利用可能な構成要素を理解します。次に、プロンプトを解釈して、必要なレイアウト構造、コンテンツセクション、インタラクションパターンを決定します。3番目に、実際のコンポーネントを使用してデザインを生成し、適切なオートレイアウト、スペーシングトークン、カラー変数、テキストスタイルを適用します。4番目に、完全に編集可能なレイヤーとして結果をキャンバスに配置します。
このプロセスは、エージェントの出力品質がデザインシステムの品質に大きく依存することを意味します。公開されたコンポーネント、名前付き変数、明確な規則を持つ整理されたシステムは優れた出力を生成します。混乱したシステムは混乱した出力を生成します。これはバグではなく機能です。AI使用に関係なく、チーム全体に利益をもたらす優れたデザインシステムの実践を促進します。
| エージェントが使用するもの | 使用方法 | 品質への影響 |
|---|---|---|
| 公開されたコンポーネント | タスクに適したコンポーネントを選択 | 重要 — コンポーネント数が多いほど出力が向上 |
| デザイン変数 | 色、スペーシング、サイズトークンを適用 | 高 — ブランドの一貫性を確保 |
| テキストスタイル | タイポグラフィ階層を適用 | 高 — 一貫した見出し/本文スタイル |
| オートレイアウトパターン | レスポンシブパターンを認識し適用 | 中 — 標準パターンをうまく処理 |
| Skills(カスタム指示) | チーム固有の規則に従う | 高 — チームごとに動作をカスタマイズ |
エージェントがデザインできることとできないこと
得意なもの:確立されたパターンに従う標準的な画面タイプ — 設定ページ、プロフィール画面、リストビュー、ダッシュボードレイアウト、フォームページ、オンボーディングフロー、通知センター、検索結果。これらは構造パターンがよく知られており、エージェントが馴染みのあるテンプレートにデザインシステムを適用する画面です。出力は通常70-85%本番準備完了で、手動作成の2-3時間ではなく15-30分の調整が必要です。
苦手なもの:新規のインタラクションパターン、複雑なデータ視覚化、ビジネスロジックの深い理解が必要な画面、高度にクリエイティブまたは説明的な作業。エージェントはパターン認識から生成します。認識可能な規則に従う画面では優秀ですが、デザインが何か新しいものを発明する必要がある場合に苦労します。カスタムアニメーション、通常とは異なるナビゲーションパラダイム、複雑な条件ロジックを持つ画面は、まだ手動でデザインする方が速いです。
重要な制限:エージェントはユーザーを理解しません。視覚的に正しい設定ページを作成できますが、そのページにどの設定が属するか、どのように優先順位を付けるべきか、デフォルト値は何であるべきかを決定できません。エージェントは制作を担当し、あなたがプロダクト思考を担当します。この分業はAI支援されたすべての職業で現れているのと同じパターンです:AIは既知パターンの実行に優れ、人間は戦略と判断を担当します。
ベータ期間が重要な理由(今学ぶか後で支払うか)
ベータ期間中、Design Agentは無料です — クレジット消費なし。これは続きません。エージェントが一般提供に移行すると、Figma MakeやMake Imageのように、AIクレジットを消費します。1回の呼び出しでエージェントが行う作業量(デザインシステムの分析、複数レイヤーの生成、コンポーネントと変数の適用)を考えると、GA時のクレジットコストはおそらく相当なものになるでしょう。
戦略的な動き:実験にコストがかからない今のうちに、エージェントのワークフローを学習しましょう。効果的なプロンプトの筋肉記憶を構築しましょう。試行錯誤を通じてSkills(カスタム指示)を開発しましょう。エージェントがうまく処理するタスクと手動で行うタスクを理解しましょう。GA価格設定が到着するまでに、どのタスクがクレジットに値するかを正確に知ることになり、学習曲線でクレジットを無駄にしません。
初日からより良いエージェント結果を得るために、ICCSSEフレームワークでプロンプトを構造化しましょう。無料のPrompt Optimizerはこの構造を自動的に適用します — エージェント指示を貼り付けて、最初の試行でより良い出力を生成するより明確なバージョンを取得します。ChatGPT、Claude、Gemini内でのワンクリック最適化には、TresPromptがAIサイドバーに追加されます。
エージェントがより広いFigma AIエコシステムにどう適合するか
Design Agentは、より大きなシステムの一部です。Skillsはチーム固有の指示でエージェントの動作をカスタマイズします。MCPサーバーは、双方向のデザイン・トゥ・コードワークフローのために、コーディングエージェント(Claude Code、Cursor)をキャンバスに接続します。Figma Makeはデザインを動作するプロトタイプに変換します。Figma Sitesはデザインをライブウェブサイトとして公開します。各部分がエージェントの価値を拡張します — Skillsはそれをより賢くし、MCPはコードとの協働を可能にし、Makeはその出力をインタラクティブなプロトタイプに変換します。
すべてのFigma AI機能の完全な概要については、包括的なガイドをご覧ください。すぐに始めるには、ステップバイステップ設定ガイドをご覧ください。
よくある質問
Design Agentは誰でも利用できますか?
エージェントは現在ウェイトリスト付きのベータ版です。FigmaのAI設定からウェイトリストに参加してください。一部の有料プランユーザーには自動的にアクセス権が付与されています。ベータ版は無料です — クレジット消費なし — リスクフリーで試すことができます。Figmaは一般提供日を発表していませんが、2026年5月時点で機能は着実にアクセスを拡大しています。
Design Agentはデザインシステムなしでも動作しますか?
技術的にはイエス — Figmaのデフォルトコンポーネントを使用してデザインを生成できます。実際には、デザインシステムなしの出力は汎用的で、大幅な編集が必要です。エージェントの価値提案は、あなたのコンポーネント、変数、規則を適用することです。それらがなければ、v0やBolt.newのような汎用ツールを使用した方が良いでしょう。エージェントは、利用できる豊富なデザインシステムコンテキストがあるときに輝きます。
これはGalileoやUizardのようなAIデザインツールとどう比較されますか?
GalileoとUizardは独立したモックアップ画像を生成します。Figmaのエージェントは、実際のデザインシステムを使用して編集可能なFigmaレイヤーを生成します。違いは、AIがコードの写真を生成するのと、AIが実際の実行可能コードを書くようなものです。Figmaの出力はデザインファイルそのものです — 何も再作成する必要がありません。他のツールは、結局Figmaで手動で再構築することになる参考資料を生成します。
エージェントはモバイルとデスクトップの両方でデザインできますか?
はい — プロンプトでフレームサイズを指定してください。「390×844フレームでモバイル設定ページを作成」はモバイル最適化出力を生成します。「1440×900フレームでデスクトップダッシュボードを作成」はデスクトップ出力を生成します。エージェントはフレーム制約を尊重し、コンポーネントサイジング、レイアウトパターン、スペーシングを適宜調整します。
ベータ版が終了すると何が起こりますか?
エージェントは、Figmaの他のAI機能と一致するクレジットベースの価格設定に移行します。インタラクションあたりの正確なクレジットコストは発表されていません。類似機能(Makeは複雑な生成で50-100+クレジット消費)に基づくと、エージェントタスクには相当な消費が予想されます。無料ベータ版は、経済的リスクなしに学習できる窓です — 今時間を投資しましょう。より広いコンテキストについては、クレジットコスト分析をご覧ください。
開示:この記事の一部のリンクはアフィリエイトリンクです。私たちは個人的にテストし、定期的に使用しているツールのみを推奨しています。完全な開示ポリシーをご覧ください。