figma-user-flow-planner

Figma ユーザーフロープランナーのスキル

ピクセルに触れる前に、何をデザインする必要があるかを計画します。すべての画面、状態、入口、エッジケースを整理することで、デザイナーが制作途中で不足している状態に気づくのを防ぎます。

必須入力

• デザイン対象の機能またはタスク
• ユーザータイプ（このフローを実行するのは誰ですか？）
• プラットフォーム（iOS／Android／Web／マルチプラットフォーム）
• 開始地点（ユーザーはどこから開始しますか？）
• 既知のエッジケース（任意）

出力構成

1. フローの概要

機能、ユーザー、目標、入口、成功時の終了地点、失敗時の終了地点。

2. 画面マップ

#	画面名	種類	トリガー	メモ
1	[画面]	新規／モーダル／ドロワー／トースト	[トリガーとなる操作]	[考慮事項]

対象とする画面の種類：入口、通常フロー、読み込み中、成功、エラー（ネットワーク／バリデーション／権限）、空、初回利用／オンボーディング、エッジケース。

3. 状態マトリクス

[画面名]

状態	トリガー	視覚的な変化	実行可能な操作
デフォルト	ページ読み込み	[説明]	[ユーザーができること]
読み込み中	ユーザーが操作をタップ	スケルトン／スピナー	なし
エラー	API エラー	エラーメッセージ	再試行／戻る
空	データなし	空の状態	[CTA]

4. 判断ポイント

判断：[名前]

• はいの場合：[画面 N]
• いいえの場合：[画面 X]

5. 推奨する Figma ファイル構成

Feature name/
- Cover
- Flow Map
- Happy Path
- Error States
- Empty States
- Edge Cases
- Handoff

6. まだデザインしないもの

[スコープ外の項目を明示します。スコープの拡大を防ぎます]

品質チェック

• 3 種類すべての状態を網羅している：読み込み中、エラー、空
• すべての判断ポイントについて、両方の分岐をマッピングしている
• 入口に、現実的なユーザーパスがすべて含まれている
• スコープ外の項目が明示されている
• Figma ファイルの構成が画面マップと一致している

アンチパターン

• 通常フローだけを計画しないでください。デザインを始める前に、すべてのエラー状態、空の状態、エッジケースをマッピングする必要があります
• Figma ファイルの構成と一致しないフローマップを作成しないでください。ページ構成はフローマップを反映する必要があります
• 必要な状態をすべて指定せずに画面を定義しないでください。バリエーションのない画面は、デザインスコープとして不完全です
• 入口と終了地点を完全に文書化する前にデザインを始めないでください。境界が不明確だと、スコープが拡大します
• 各ステップをユーザーの目標に結び付けずにユーザーフローを計画しないでください。すべての画面に存在意義が必要です

トリガーフレーズの例

• 「Figma で[機能]のユーザーフローを計画してください」
• 「[機能]のデザインにはどの画面が必要ですか？」
• 「デザインを始める前に、[機能]の状態を整理してください」
• 「[機能]の Figma ファイル構成を考えるのを手伝ってください」
• 「開発者に引き渡す前に、何をデザインする必要がありますか？」