EP05. “原型（Prototype）、分享与留言：让客户先试用再开工”
🔒 登录后可标记已读- 客户看静态图说「OK」，网站做好后才说「这个按钮点下去怎么不是这样？」——先做一个能点的原型给客户试，可以省掉大量返工
- 原型就是把画面用「点这里 → 跳到那一页」的线连起来，不用写任何代码
- 分享只需要一条链接，客户在浏览器或手机上就能试用，不用注册也能看（视分享设定而定）
- 客户直接在设计上留言（Comment），每条意见钉在对应位置，比 WhatsApp 截图画圈清楚得多
重点内容
原型的基本概念
| 名词 | 意思 |
|---|---|
| Hotspot（热区） | 被点击的物件，例如按钮、菜单 |
| Connection（连线） | 从热区拉到目标画面的蓝色箭头 |
| Destination（目标） | 点了之后要去的 Frame |
| Flow（流程） | 一连串连起来的画面，有一个 Flow starting point（起点） |
| Interaction（互动） | 触发方式 + 动作 + 动画 |
flowchart LR
subgraph P1["首页 Frame"]
A["「查看产品」按钮<br/>Hotspot"]
end
subgraph P2["产品页 Frame"]
B["「加入购物车」按钮"]
end
subgraph P3["购物车 Frame"]
C["结账画面"]
end
A -->|On click → Navigate to| P2
B -->|On click → Navigate to| P3
建立连线
- 右侧面板切到 Prototype 分页
- 选取按钮，按住右边出现的 + 圆点，拖到目标 Frame 上
- 第一条连线建立时，Figma 会自动为起始 Frame 加上 Flow starting point
- 点连线可以调整互动设定
互动设定
| 设定 | 常用选项 |
|---|---|
| Trigger（触发） | On click（点击）、While hovering（鼠标停留）、After delay（几秒后自动）、On drag |
| Action（动作） | Navigate to（跳页）、Open overlay（弹出视窗）、Scroll to（滚到某个位置）、Back（返回）、Open link（打开网址） |
| Animation（动画） | Instant、Dissolve、Move in、Push、Slide in、Smart animate |
- Open overlay：做弹窗、手机版汉堡菜单，可以设定显示位置和点背景关闭
- Scroll to：单页网站的「跳到联络我们」菜单
- Smart animate：两个画面里同名图层会自动做出位置、大小、颜色的过渡动画
- 长页面要能滚动：Frame 的高度比设备画面高就能上下滚；页首要固定在上方，选取页首 → Prototype 分页 Position 设为 Fixed
💡 按钮的 Hover 效果：配合 EP04 的 Variants，在 Default 变体上设 While hovering → Change to → Hover，整个网站的按钮实例都会有这个效果（interactive components）。
播放原型
- 右上角按 ▶ Present，在新分页播放
- 右侧 Prototype 分页（没选任何物件时）可以设定 Device（例如 iPhone、Desktop）和背景颜色
- 手机上看：安装 Figma 手机 App，登录后打开原型链接，就能在真手机上操作
分享
右上角按 Share：
| 设定 | 说明 |
|---|---|
| 邀请 Email | 指定对方权限：can view（查看、留言、检视属性）或 can edit（编辑） |
| Copy link | 复制文件链接 |
| Copy prototype link | 复制原型播放链接，客户打开直接进入 Present 模式 |
| 链接权限（Who has access） | Anyone with the link（任何有链接的人）或只限受邀者 |
📌 Starter 免费方案下，Drafts 里的文件只能邀请别人 can view；要让别人一起编辑，需要付费方案。
⚠️ Anyone with the link 代表任何拿到链接的人都能看；客户的未公开品牌设计、价格资料，最好只邀请指定 Email。付费方案另外可以为文件或原型加密码保护。
留言（Comment）
| 操作 | 做法 |
|---|---|
| 进入留言模式 | 按 C，或下方工具列的对话框图标 |
| 留言 | 在画面上点一下，写下意见 |
| 标注某人 | 打 @名字，对方会收到通知 |
| 回复 | 点开留言串回复 |
| 标记完成 | 按 ✓ Resolve，留言会隐藏（可以在筛选里显示已解决的） |
| 在原型播放时留言 | Present 模式下也可以按 C 留言 |
💡 跟客户约好「所有修改意见都在 Figma 留言」，每一条改完就 Resolve，比较不会漏改，也有记录可以查。
学完你会
- ✅ 用 Prototype 分页把画面连成可点击的原型
- ✅ 设定 Trigger、Action、Animation，做弹窗和 Smart animate
- ✅ 用 Share 分享文件或原型链接，并控制权限
- ✅ 用 Comment 收集、回复、Resolve 客户意见
常见错误
- ❌ 在 Design 分页找不到连线功能：要切到 Prototype 分页。
- ❌ 连线连到 Frame 里的物件而不是 Frame：目标应该是最上层的画面 Frame。
- ❌ Smart animate 没有动画效果：两个画面里对应的图层名称要一样。
- ❌ 页首跟着内容一起滚走：把页首的 Position 设为 Fixed。
- ❌ 把机密设计设成 Anyone with the link 到处转发：只邀请需要的人。
Sources
官方文档：