FigmaのAIエージェントで、既存画面から「読み込み中・空・エラー」などの抜けている状態を洗い出す
正常系の画面しかないデザインから、実装に必要な状態のバリエーションをAIに展開させ、人がレビューして仕上げる。
どんな問題を解決するか / いつ使うか
エンジニアがデザインまで担当するとき。デザインはあるが、ローディング・データなし・エラー・操作中などの状態が描かれていないとき。
やり方
投稿者の流れ（そのまま使える手順として紹介されていた）：
- 既存のデザイン（デザインシステム・コンポーネント）を用意する
- Figmaのエージェントにデザインの前提（コンテキスト）を渡す
- UI状態を展開するスキル（投稿ではFigma Communityの
/ui-state-expander）で、loading / empty / error / interaction の各状態を生成させる - 出力を全部は受け入れずレビューする
- Figma上で直接手直しする
- 実装する
注意点・対応状況
- 投稿は #ad（Figma Creator のスポンサー投稿）。
- 投稿によるとFigmaのエージェントは一般提供が始まっており、利用にはAIクレジットを消費する（タスクごとの消費量は一定ではないという指摘もある）。
- 状態の一覧はリリース前UI監査（「リリース前のUI監査を、観点別の読み取り専用サブエ…」）の「状態の網羅」と組み合わせると漏れが減る。
出典
- 投稿者: @systemdesignone (Neo Kim)
- 投稿: @systemdesignone · 2026-10-07
- 収集日: 2026-10-09（JST）