画面はできたけれど、そのまま開発者に渡してよいのでしょうか？
たとえばFigmaエージェントに決済画面を依頼してすぐに案が出ても、ボタンを確認すると、チームのコンポーネントではなく新しい図形かもしれません。同じ青に見えても、誤ったセマンティック変数につながっている可能性があります。デザインシステムを運用するチームにとっては、生成速度よりもこの後始末のほうが心配になります。
Figmaエージェントの有用な変化は、結果を画像として渡す代わりに、人が作業していたデザインファイル内に編集可能なレイヤーを作成する点です。選択したレイヤーを基準に依頼でき、エージェントの作業中に別の部分を直接修正したり、別フレームで複数の方向性を並行して探ったりもできます。
ただし、同じキャンバスで作業するからといって、チームのルールまで自動的に理解するわけではありません。ここに、長いプロンプトを書く前に、エージェントが参照する公開ライブラリとコンポーネント構造を整えるべき理由があります。
まず1画面でライブラリ準拠を試しましょう
最初の試行は、新しい製品全体でなくても構いません。ログインや決済のように状態が明確な画面を1つ選べば十分です。元の画面を複製し、以下の手順で編集可能な結果と構造的な正確さを一緒に確認してください。
- テスト用フレームを作成します。
Figma Designファイルで既存画面を1つ複製し、そのフレームのレイヤーを選択してください。ファイルを変更するには、Full seatと編集権限が必要です。 - 選択範囲からエージェントを開きます。
Agentsをクリックするか、Cmd/Ctrl+Enterを押すと、選択範囲を対象にプロンプトを開始できます。会話を続けるには、デザインファイル左側のナビゲーション領域からAgentsを開いてください。 - 公開済みライブラリをコンテキストとして接続します。
プロンプトボックスのAdd contextからチームライブラリを追加し、必要なコンポーネント・変数・スタイルは@を入力して一覧から実際の項目を選択してください。ライブラリを最近変更した場合は、最新内容を参照できるよう先に再公開する必要があります。 - 許容範囲と必要な状態をまとめて依頼します。
以下のように、接続したライブラリだけを使うよう制限し、3つの方向性をそれぞれ別フレームに作成するよう依頼してください。角括弧内をそのまま送らず、@を入力して一覧からチームの実際のコンポーネントとセマンティック変数を選んで入れます。
Add contextで接続したProduct UIライブラリのみを使用し、選択した決済画面を3種類の情報アーキテクチャに変えてください。比較できるよう、各方向性はそれぞれ別のフレームに作成してください。[@で選択した決済サマリーコンポーネント]、[@で選択したボタンコンポーネント]、[@で選択した背景・テキストのセマンティック変数]のみを使用し、新しい色や分離されたコンポーネントは作成しないでください。各方向性にdefault、loading、errorの状態を表示してください。
- 美しい画面ではなく、接続構造で成功を判定します。
3つの変形がそれぞれ別フレームに編集可能なレイヤーとして作成されたか、チームのコンポーネントとセマンティック変数を使っているか、ハードコード値や必須状態の欠落がないかを確認してください。OrganizationまたはEnterpriseプランでは、Check designsにより、誤った色、他ライブラリの要素、変数にすべきハードコード値も追加で見つけられます。 - 誤った部分だけを戻します。
不要な変更は、チャットのUndoまたはCmd/Ctrl+Zで取り消せます。前後の結果を比較するには、先にAI修正版を複製してから元の画面を戻してください。
アクセスの問題は、見えている状態に応じて確認してください
Agents自体が表示されない場合は、まず管理者がAI機能を無効にしていないか確認してください。公式ヘルプでは対象プランとdraftsのseat範囲に関する説明が一致していないため、現在のアカウントUIと管理者設定も併せて確認するほうが安全です。
チャットはできるのにファイルを編集できない場合は、Full seatと対象ファイルの編集権限があるか確認してください。View・Dev・Collab seatと閲覧専用ユーザーもチャットはできますが、ファイル編集は制限されます。月間利用上限に達すると製品内に上限の案内が表示され、上限は毎月リセットされます。
エージェントが組み立てられる上位ブロックを用意しましょう
優れたデザインシステムは今や、人のためのギャラリーであると同時に、エージェントのための作業インターフェースでもあります。Figmaは、原子的なコンポーネントだけを並べるのではなく、カードやヘッダーのように間隔・色・レイアウトのルールをすでに備えた上位ブロックを提供することを推奨しています。これにより、エージェントが小さな要素の組み合わせルールを毎回推測する負担を減らせます。
準備する項目は具体的です。意味のあるレイヤー名とコンポーネント名、オートレイアウト、明示的なcomponent propertiesとvariants、用途が分かる変数、平易な説明を用意してください。説明には、「いつ使うか」「似たコンポーネントと何が違うか」「どの状態が必要か」を書くとよいです。
画面でよく使うブロックから整理する順序
すべてのボタン名を整えることから始めるより、決済サマリーカード、検索結果行、設定セクションのように実際の画面で繰り返されるブロックを1つ選んでください。そのブロックのオートレイアウト、プロパティ、状態、セマンティック変数を整えて公開した後、エージェントの結果がどれだけ変わるかを比較すると、準備作業の効果を確認しやすくなります。
エージェントはシステム整理にも使えます。公式ワークフローでは、ドキュメントの下書き作成、コンポーネント・スタイル・変数の一括変更、反復パターンからのコンポーネント候補抽出、不足状態と不整合の初期レビューが紹介されています。ただし、これらの結果も公開前に人の確認が必要な下書きです。
画面が似ていても、システムが守られたとは限りません
独立したデザインスタジオによるテストでは、ライブラリを接続して使用を明示した後に結果は改善しましたが、ボタンに別のセマンティック変数が接続されたり、テキスト用の色変数が区切り線に使われたりする事例が見つかりました。明るい背景でコントラストが低くなった結果もありました。
このテストは1社のデザインシステムで行われ、プロンプト全文、反復回数、定量的なエラー率は公開されていません。したがって、すべてのアカウントと最新バージョンでも同じエラーが起きると一般化することはできません。ただし、視覚的に似た結果と、ハンドオフ可能な構造は別々に確認すべきですという実務上の警告としては有用です。
開発者に渡す前に4点を確認してください。
- チームコンポーネントのインスタンスは維持されていますか
- 色・間隔・タイポグラフィに正しいセマンティック変数が接続されていますか
- default・loading・error・disabledなど、必要な状態がありますか
- ハードコード値や他ライブラリの要素が混ざっていませんか
問題があれば、画面全体を作り直すのではなく、該当レイヤーと変数だけを選択して修正を依頼してください。
DesignエージェントとMakeでは成果物が異なります
画面構造と視覚的な変形を作ることが目的なら、Designエージェントが出発点です。Figma Designの実際のレイヤーを生成・編集するため、人がキャンバス上で引き続き仕上げられます。一方、Figma Makeはインタラクティブなアプリやプロトタイプの作成とWeb公開に重点を置いています。Designで整理した画面をMakeに送って動作を具体化したり、Makeのフレームを再びDesignへコピーしたりする往復フローにも対応しています。
外部コーディングエージェントで作成したコンテンツをFigmaファイルへ取り込む場合、リモートFigma MCPサーバーのuse_figmaツールで提供されるwrite to canvasが別の経路です。既存ファイルへ書き込むにはFull seatとそのファイルの編集権限が必要で、取り込んだ結果はキャンバスで直接確認する必要があります。
3つの機能をすべて使う必要はありません。編集可能な画面探索にはDesignエージェント、クリックして確かめる動作検証にはMake、外部コード作業とキャンバスの接続にはMCPと目的を分けると、選びやすくなります。
さらに深く知りたいなら
The Figma design agent is here — 選択レイヤーから始まる編集、並列プロンプト、Design・Make間のワークフローを確認できます。 figma.com
Work with the Figma agent in design files — Agentsを開く場所、ライブラリ接続、@参照、Undo、現在の利用条件を確認できる導入ドキュメントです。 help.figma.com
AI workflows collection: Best practices to help Figma AI understand your design system — 上位ブロック、命名、オートレイアウト、variants、変数など、ライブラリ準備の基準をより詳しく説明しています。 help.figma.com
We Tested Figma Agent On a Real Design System. Here's What Actually Happened. — 実際のシステムを接続した後に見つかったセマンティック変数とコントラストの問題を確認できる独立テストです。 entifydesign.com
