Figmaエージェントがキャンバスに登場—上手に使うなら、プロンプトより先にデザインシステムを整えましょう

Figmaの新しいデザインエージェントは、画像を作って渡すのではなく、チームが作業しているキャンバス上で実際のレイヤーを一緒に編集します。ただし、結果の品質はプロンプトの巧拙よりも、コンポーネント・変数・ドキュメントがどれだけ明確に整理されているかに大きく左右されます。 figma

変わったのは生成機能よりも作業場所です

Figmaデザインエージェントの要点は、AIと人が同じファイル、同じレイヤー、同じデザインシステムを見ながら作業することです。2026年5月に公開されたこのエージェントはFigma Designのキャンバスと左レールに入り、選択したレイヤーからすぐにプロンプトを始められます。エージェントの作業中にデザイナーが別の部分を直接修正したり、複数のプロンプトを並列実行して異なる方向性を比較したりすることもできます。 figma +1

そのため、空の画面から完成品を一つ出す用途より、探索と反復作業で実用的です。同じ決済画面に対して情報構造を三つ作ったり、見出し配置や画像構成が異なる案を同時に並べて比較したりできます。気に入った方向が出たら、プロンプトを追加し続ける代わりに、キャンバスでレイヤーを直接調整すればよいのです。Figmaも、直接編集の方が自然でAIの利用量を節約できる場面があると説明しています。 figma

三つのツールは競合するというより、作業段階を分担します。Designエージェントで画面の流れ・状態・文言を整え、Makeに送って動作を確認した後、再びDesignへ戻せます。コードから始めた場合は、MCPのuse_figmaツールで実際のコンポーネントと変数を使ったレイヤーを作り、それをキャンバスで整える流れも可能です。 figma +1

良いデザインシステムは、今やAIのためのインターフェースでもあります

エージェントにブランドに合う結果を出させるには、デザインシステムを人にとって見栄えのよい展示場ではなく、機械が誤解しにくい作業ルールとして作る必要があります。Figmaは、ライブラリが構造的で完全であるほど、エージェントがデザインをより正確に解釈・適用できると案内しています。接続するライブラリを直接選び、プロンプト内で特定のトークン・変数・コンポーネントを@メンションして使用範囲を絞ることもできます。 figma +1

特に、ボタンや入力欄のような小さな原子コンポーネントだけを集めておくと、エージェントは組み合わせのルールを推測しなければなりません。カード、ヘッダー、機能行のように、間隔・タイポグラフィ・色のルールがすでに含まれた上位ブロックを提供する方が有利です。オートレイアウト、意味のあるレイヤー名、明示的なvariantとstate、色・間隔・タイポグラフィの変数も必要です。最近更新したライブラリは、エージェントが最新バージョンを参照できるよう必ず公開してください。 help.figma

ドキュメントの整理自体もエージェントに任せられます。既存テンプレートを選び、コンポーネント説明の下書きを作らせたり、レイヤー名をkebab-caseに統一したり、不足しているstateやvariantを見つけたり、画面で繰り返されるパターンを新しいコンポーネント候補として整理させたりできます。CSS変数の一覧をキャンバスに置き、実際のコードとFigma変数の間で不足している項目を探すワークフローも、公式ヘルプで紹介されています。 help.figma

高速な生成と安全なハンドオフは別の問題です

現在のベータを完成品の自動作成機として扱うのは危険です。Entify Designが自社のデザインシステムで行った公開テストでは、接続済みライブラリを使うよう指示した後に結果は改善しましたが、ボタン内部に意味の異なる色変数が入ったり、テキスト用変数が区切り線に適用されたりする問題が確認されました。画面がもっともらしく見えても、トークン参照が誤っていることがあります。 entifydesign

同じテストでは、明るい背景に低コントラストの色が適用された例もありました。単一チームのテストなので、すべての環境に一般化はできません。しかし少なくとも、生成速度をハンドオフ準備完了の証拠と見なしてはいけないという警告としては十分です。Figmaも、ライブラリ公開前に誤った色、別ライブラリのコンポーネント・変数・スタイル、変数に置き換えるべきハードコード値を個別に確認するよう案内しています。 help.figma +1

テスト前にはアクセス条件とコストも確認が必要です。2026年8月時点で、エージェントはオープンベータであり、Professional・Organization・Enterpriseプランで提供されています。共有ファイルのチャットはFull seatが利用でき、draftsではFull・Dev・Collab・View seatが試せます。ベータ中はエージェントのプロンプトと作業でAIクレジットは消費されませんが、正式リリース後は通常のAIクレジットポリシーが適用される予定です。 help.figma +1

一つの画面で安全に試す4ステップ

1. 小さく検証可能な対象を複製します。
   ログイン、検索結果、決済のように状態が明確な画面を一つ、別ページに複製します。元の画面ではなく複製から始め、「エラー・空・ローディング状態を含む」「既存ライブラリだけを使う」といった成功基準を書いておきましょう。
2. ライブラリとルールをプロンプトに固定します。
   Figma Designの左レールからエージェントを開き、対象フレームを選択します。使用するライブラリを指定してから、必要なコンポーネントと変数を@メンションします。「このフレームを三つの情報構造に複製するが、新しい色や分離されたコンポーネントは作らないこと」のように許容範囲も記載してください。 figma
3. 生成と一括修正を分けます。
   まず三つの方向性を別フレームとして作らせ、人が一つを選びます。選んだ案の中だけで、実際の文言入力、paddingの統一、コンポーネント状態の変更といった反復作業を依頼します。探索と整理を一つのプロンプトに混ぜなければ、どの段階でルールが壊れたかを見つけやすくなります。
4. 構造レビューの後にのみハンドオフします。
   LayersパネルとVariablesパネルで、インスタンス接続、意味トークン、ハードコード値、オートレイアウトを確認します。hover・focus・error・disabled状態と色のコントラストも検査してください。エラーが一つでも出たら、全体を再生成するのではなく該当フレームと変数だけを選んで修正させ、再確認します。 help.figma +1

この実験で見る指標は、「何分で画面ができたか」だけではありません。最初の結果から維持したレイヤーの割合、誤って接続された変数数、分離されたインスタンス数、アクセシビリティエラー、人がレビューと修正に費やした時間を一緒に記録してください。生成時間が短くなってもレビュー時間が増えたなら、まだプロダクションワークフローは速くなっていません。

さらに深掘りしたい場合

The Figma design agent is here — キャンバスエージェントの公開背景、並列プロンプト、一括編集とフィードバック活用の例を確認できます。 figma.com

Get started with Figma AI — 現在のベータ提供プラン、seatごとの利用範囲、Figma Makeとの違いを確認するのに便利な公式ヘルプです。 help.figma.com

AI workflows collection: Best practices to help Figma AI understand your design system — コンポーネント名、上位ブロック、変数、説明フィールドをエージェントが理解しやすい形に整える方法を扱います。 help.figma.com

AI workflows collection: Use the Figma agent to improve your design system — ドキュメント化、一括修正、パターン抽出、公開前レビューにすぐ使えるプロンプトがまとめられています。 help.figma.com

We Tested Figma Agent on a Real Design System. — 実際のデザインシステムで見つかった意味トークンの逸脱とアクセシビリティ問題を示す独立テストです。 entifydesign.com