3. Figma中的原型准备

3.1 适用场景

本操作规程适用于以下前置任务场景：

• 设计团队在完成低保真线框图或高保真视觉稿后，需产出可供跨角色评审的可交互原型。
• 原型计划导入 Confluence，作为边界评审的锚定制品。
• 参与方包括产品经理、前端开发、后端开发、测试工程师及业务方，各方均需在统一的结构化原型上执行异步或同步评审。

3.2 前置条件

3.3 操作步骤

步骤采用强制流水线模式，上一环节的输出为下一环节的输入。全部操作在 Figma 文件内完成。

1. 建立页面层级树（耗时约 20 分钟）
   • 按照已签发的页面清单在 Figma 左侧 Pages 面板创建结构。
   • 使用父子层级表达流程归属：
     例：首页 → 登录页 → 忘记密码(子流程) → 注册页
   • 每一页面需在 Description 区域标注该页面向导路径（已登录/未登录）。
2. 构建交互连线（耗时约 30 分钟）
   • 使用 Figma Prototype 面板，以 On Click 为主要触发手势。
   • 非模态弹窗使用 Overlay，页面跳转使用 Navigate to 并设置 Smart Animate 补间。
   • 每条连线在 Interaction Details 中写入预期触发条件（如：填写手机号 > 点击获取验证码 > 倒计时启动）。
3. 实施标注规范（耗时约 40 分钟）
   • 对每个交互组件（按钮、输入框、切换开关、列表项）添加 Dev Mode 标注：
   • 标注必须包含：组件名称、状态（Default / Hover / Pressed / Disabled）、间距、颜色变量名。
   • 使用 Redlines 插件标注关键间距与对齐值：margin: 16px、padding: 12px 16px。
4. 激活版本管理（耗时约 10 分钟）
   • 在 Figma 编辑历史中确认当前版本为 v1.0-draft。
   • 发布 Branch 为 feat/border-review-prep，并将主分支锁定。
   • 在 Version History 中为当前检查点添加描述标签：[评审前准备] 页面结构+交互连线+标注 完成。
5. 自检 & 导出边界清单（耗时约 15 分钟）
   • 运行 Figma 内置 Prototype Checker 插件，确认无悬浮连线或死页面。
   • 导出页面清单 CSV 与交互矩阵供 Confluence 引用。

3.4 输入输出物

3.5 责任边界

3.6 记录材料

以下材料需在步骤执行过程中实时更新，并存放至项目共享文件夹：

• 页面结构审查表（page_structure_review.xlsx）：记录每页的创建状态、父子关系、描述文本。
• 交互连线走查表（interaction_walkthrough.xlsx）：包含连线 ID、触发元素、目标页面、手势类型、结果状态。
• 版本标签截图：在 Branch/Version History 创建时截屏留存，作为时间戳证据。
• 自检报告（prototype_self_check.pdf）：由 Prototype Checker 插件输出的无异常声明。

3.7 异常处理

3.8 验收标准

• 所有评审成员可在 Figma 中通过 Present 模式完整遍历全流程，无死页、无循环、无非预期弹窗。
• 每个交互节点在 Dev Mode 中可查看完整的标注卡：组件名称、状态、间距、颜色变量。
• 版本管理处于 feat/border-review-prep 分支，主分支保持锁定，历史标签描述清晰。
• 页面结构树与产品经理签发的页面清单完全一致，偏差 = 0。
• 自检报告 输出 All checks passed 状态，零警告零错误。

—— 本章核心流程：Figma 原型准备 SOP ——