figma-prototype

用 Figma 做 Prototype（交互原型）

1. 定义

Prototype（交互原型） = 在 Figma 里把多个静态画面（frame）用”连接线”串起来，加上触发动作和过场动画，做一个能点、能跳、能演示的可交互 Demo——不写代码就能验证产品流程和交互。

一句话：Design 模式画静态界面，Prototype 模式把它们”连成会动的产品”。

类比：frame 是一张张幻灯片，Prototype 是给幻灯片加”点这里翻到下一页”的跳转 + 转场特效。你之前在 心得.md 里写的”快速原型探索交互范式”，Figma Prototype 就是这种低成本试错的可视化工具。

2. 核心概念（Prototype 模式里要认识的词）

概念	是什么	在哪设置
Frame / 画板	一个屏幕/页面，原型的最小单位	左侧层面板
Connection / 连线	从某元素拖到目标 frame 的箭头，建立跳转	Prototype 模式拖拽
Trigger（触发）	什么操作引发跳转：点击 / 悬停 / 按压 / 延时 / 键盘	右侧 Interaction 面板
Action（动作）	触发后做什么：跳转 / 开浮层 / 关闭 / 返回 / 滚动 / 设变量	同上
Overlay（浮层）	盖在当前页之上的层（弹窗/菜单），不离开本页	Action: Open Overlay
Animation（动效）	Instant / Dissolve / Smart Animate / Move / Push + 缓动 + 时长	同上
Flow Starting Point	原型的入口（从哪开始演示）	右上面板设置

3. 基本原理（一图）

[ Frame A: 首页 ]
     │  选中"按钮" → 拖出箭头 →
     ▼
[ Frame B: 详情页 ]
     ▲                        │
     │  Back 返回             │  再连更多 frame…
     └────────────────────────┘

交互 = (起点元素) ──Trigger──▶ Action ──▶ (目标 frame) ──Animation──▶ 过渡

4. 基本步骤（五步做出可点原型）

1. 准备画面：在 Design 模式画好多个 frame（如 首页、列表、详情、弹窗）。
2. 切到 Prototype 模式：左上角把标签从 Design 切到 Prototype。
3. 连线：选中起点元素（按钮/卡片）→ 出现小圆点 → 拖到目标 frame。
4. 配交互：右侧面板设
   • Trigger：On Click（最常用）
   • Action：Navigate To → 选目标 frame
   • Animation：选 Smart Animate / Move In 等，设时长（如 300ms）与缓动（Ease Out）
5. 设入口 + 预览：在首页 frame 上设 Flow Starting Point → 点右上角 ▶ Present（或按 ⌥ + Enter）播放。手机看用 Figma Mirror。

5. 进阶技巧

• Smart Animate（智能补间）：两个 frame 里同名同类型的图层会自动补间动画（按钮位移、颜色渐变）。让原型”丝滑”的关键。
• Overlay（浮层）：Action 选 Open Overlay → 弹窗/下拉菜单盖在当前页上；记得给浮层加 Close Overlay（点遮罩或关闭按钮）才关得掉。
• Swap Overlay：在多个浮层间切换（如 Tab 切内容）而不重开。
• Variables + Conditional：用变量记状态（输入值/开关），配合 Set Variable / Condition 做”可交互表单""暗黑模式切换”等高级原型。
• Components & Variants：把按钮/卡片做成组件+变体，原型里切状态复用，避免重复画。
• After Delay：自动跳转（引导页 / loading 演示）。

6. 典型工作流

新功能快速验证

画 3–5 个关键 frame → 连主流程 → Present 给团队/用户点一遍 → 早发现问题早改（呼应”快速原型探索”）。

接手别人文件

找 Flow Starting Point 从入口看；在 Prototype 面板看连线理清跳转关系。

交付开发

Prototype 演示交互意图；配合 Design 标注（自动布局/间距）+ 切图，开发照着实现。原型 ≠ 实现。

7. 常见误区

❌ “在 Design 模式找不到连线入口” → 连线在 Prototype 模式，先切标签。

❌ “Smart Animate 没动” → 两个 frame 里要补间的图层必须同名（在层面板改名对齐）。

❌ “浮层弹出来关不掉” → 没给浮层加 Close Overlay 交互（点遮罩/关闭按钮触发）。

❌ “Present 一打开就卡在某一页” → 没设 Flow Starting Point，或 Present 时点错了 frame；设好入口再播。

❌ “动画很生硬” → 用 Smart Animate + 合适 Easing（如 Ease Out）+ 合理时长（200–400ms），别到处用 Instant。

❌ “原型做完了就等于开发完了” → 原型只验证交互/流程，不生成代码；真实实现还要开发写。

❌ “所有跳转都用 Navigate To” → 弹窗/菜单用 Overlay（保留当前页上下文），全用 Navigate 会丢失页面状态。

8. 延伸阅读 / 关联概念

• Auto Layout（自动布局）/ 组件变体：做可复用、好连线界面的基础，连线前先把组件化做好
• PRD（产品需求文档）：原型是 PRD 里”交互说明”的可视化补充，01-diary.md、02-game.md 这类 PRD 可配原型演示
• 心得.md：快速原型为什么是探索交互范式的低成本手段——Figma Prototype 就是落地工具
• 官方参考：Figma 帮助中心 “Prototyping” 章节（Smart Animate、Overlay、Variables 的用法细节）