Figma 原型制作指南

谁可以使用此功能

支持于任何团队或计划。
任何拥有编辑权限的人都可以创建原型。
任何拥有查看权限的人都可以在演示视图中播放回原型。

Figma 的原型功能允许你创建交互式流程，探索用户如何与你的设计进行交互。

原型是一种绝佳的方式：

观看我们下方的原型视频。或查看我们 Youtube 上的 Prototype & Collaboration Playlist 。

Tip 为了更高效的工作流程，您可以使用键盘快捷键 Shift E 快速在 ** 设计**和 ** 原型 ** 选项卡之间切换。

流程和起点

在 Figma 中进行原型设计时，你可以在一个页面上创建多个流程，以预览用户通过你的设计所经历的完整旅程和体验。

一个流程是单页面上帧和连接的网络。原型可以映射出用户在应用或网站上的整个旅程，也可以通过其自身的流程专注于其中特定的一部分。例如：你的原型涵盖了电子商务网站上所有可能的交互。在原型中，你有创建账户、将商品添加到购物车以及结账的流程。

当你添加两个帧之间的第一个连接时，Figma 会创建一个流程起点。还有其他几种方法可以在你的原型中添加流程起点：

当需要测试你的设计时，你可以共享整个原型或复制流程起始点的链接。

注意：一个顶层框架可以是多个流程的一部分，但只能有一个起始点。嵌套在顶层起始框架内的框架可以有连接，引导用户在多个流程之间导航。例如，登录和注册按钮可以嵌套在同一个起始点框架内，然后连接到每个体验的独立流程框架。

Anatomy of a connection between two frames

Tip 您可以同时从多个对象创建连接到同一个目标框架——在构建原型流程时节省您的时间和精力。要这样做，请选择画布上的多个起始热点，然后点击并拖动图标到目标位置。

Create interactions and animations

Prototype tab of right sidebar with device preview background and flow settings

starting point（起点）是一个流程的第一帧。设置多个起点，以便在演示视图中展示原型的不同流程。
trigger（触发器）决定了与热点交互的类型，这将使原型前进。这可以是鼠标或触摸交互，例如点击、拖动、单击、悬停等。
The destination is where the transition ends. This must be a top-level frame - a frame that is added directly to the canvas - and not an object within a frame. If we think of moving from A to B, A is the hotspot and B is the destination

destination（目的地）是过渡结束的位置。这必须是顶层框架——直接添加到画布上的框架——而不是框架内的对象。如果我们从 A 移动到 B，A 是热点，B 是目的地。