figma-user-flow-planner

Figma 用户流程规划技能

在动手设计像素之前，规划需要设计的内容——梳理所有屏幕、状态、入口点和边缘情况，避免设计师在构建过程中才发现缺少状态。

必需输入

• 正在设计的功能或任务
• 用户类型（谁会执行此流程？）
• 平台（iOS / Android / Web / 多平台）
• 起始点（用户从哪里开始？）
• 已知边缘情况（可选）

输出结构

1. 流程概述

功能、用户、目标、入口点、成功出口、失败出口。

2. 屏幕映射

#	屏幕名称	类型	触发条件	备注
1	[屏幕]	新建/模态框/抽屉/Toast	[触发条件]	[注意事项]

需涵盖的屏幕类型：入口、顺利流程、加载、成功、错误（网络/验证/权限）、空状态、首次使用/引导、边缘情况。

3. 状态矩阵

[屏幕名称]

状态	触发条件	视觉变化	可用操作
默认	页面加载	[描述]	[用户可以执行的操作]
加载中	用户点击操作	骨架屏/旋转指示器	无
错误	API 调用失败	错误消息	重试/返回
空状态	没有数据	空状态	[CTA]

4. 决策点

决策：[名称]

• 如果是：[屏幕 N]
• 如果否：[屏幕 X]

5. 建议的 Figma 文件结构

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

6. 暂不设计的内容

[明确列出范围之外的项目——防止范围蔓延]

质量检查

• 已涵盖全部三种状态类型：加载、错误、空状态
• 已映射所有决策点及其两个分支
• 入口点包含所有合理的用户路径
• 明确说明了范围之外的内容
• Figma 文件结构与屏幕映射一致

反模式

• 不要只规划顺利流程——开始设计前，必须映射所有错误状态、空状态和边缘情况
• 不要生成与 Figma 文件结构不匹配的流程图——页面结构必须反映流程图
• 不要在未明确所有必需状态的情况下定义屏幕——没有变体的屏幕意味着设计范围不完整
• 在入口点和出口点都完整记录之前，不要开始设计——边界不清会导致范围蔓延
• 规划用户流程时，不要忽略每个步骤与用户目标的关联——每个屏幕都必须有存在的理由

示例触发短语

• “在 Figma 中为 [功能] 规划用户流程”
• “为 [功能] 需要设计哪些屏幕？”
• “在开始设计前，梳理一下 [功能] 的状态”
• “帮我规划 [功能] 的 Figma 文件结构”
• “交给开发者之前，我们需要设计哪些内容？”