Figma 原型制作指南

#Design/UI/Figma
谁可以使用此功能

支持于

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

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

原型是一种绝佳的方式：

  • 预览交互和用户流程
  • 分享并迭代想法
  • 从协作者那里获取反馈
  • 与用户测试交互
  • 向利益相关者展示您的设计

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

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

流程和起点

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

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

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

  • 选中起始帧后，点击右侧边栏中流程起点部分中的。
  • 右键点击框架，然后点击**添加起始点 **。
  • 复制一个具有现有起始点的框架。

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

了解更多关于起始点和流程→

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

创建连接

  1. 选择连接的热点。
  2. 点击创建连接。
  3. 将其拖到目标位置。
  4. 如果没有现有连接，Figma 会将第一个框架设为起点。

Anatomy of a connection between two frames

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

了解更多关于批量创建和编辑连接的方法→

创建交互和动画

  1. 在右侧边栏中打开原型 选项卡
  2. 添加交互
  3. 设置交互详情
  4. 应用 动画
  5. 预览 动画

Create interactions and animations

调整原型设置

  1. 选择一个设备和型号
  2. 预览你的原型
  3. 选择背景颜色
  4. 设置原型的起始框架

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

了解更多关于原型设计

开始使用

高级交互

分享与协作

术语表

  • 一个 hotspot 是交互发生的地方。hotspot（热点）可以是原始框架内的任何对象，例如链接、按钮、图像或图标等。
  • Connection  是连接热点和目标点的蓝色箭头或"面条"。我们通过连接来应用交互和动画设置。
  • 一个flow是由连接的帧组成的原型路径网络。每个流程都有自己的 start point（起点） 。原型中可以有多个流程。
  • 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 是目的地。
  • action（动作）定义了原型中正在进行的进展类型。例如，动作可以是导航到另一个框架，或打开外部 URL。
  • animation（动画）设置决定了原型如何从一个框架移动到另一个框架。您可以控制动画类型，以及速度和方向。
  • transition（过渡）是动画的类型。这定义了动作如何移动到目的地。
  • direction（方向）控制过渡的来源方向。在左、右、上或下之间选择。
  • duration（持续时间）控制完成动画所需的时间。持续时间越短，过渡越快。选择 1ms 到 10000ms（10 秒）之间的持续时间。
  • Easing（缓动）影响动画的加速度——是开始慢还是快。这使你能够创建感觉更自然的动画。
  • Overlay（覆盖层）是出现在当前屏幕或框架上方的框架。您可以使用覆盖层来创建工具提示、交互式菜单、警报或确认信息。
  • Overflow behavior（溢出行为）允许您定义原型如何响应滚动。这使您能够创建更高级的用户交互，例如轮播、画廊或交互式地图。
  • 选择在展示原型时显示的device（设备）。定义设备及其型号。
  • background color（背景颜色）允许您定义原型的背景颜色。
  • 如果你有一个包含竖屏和横屏画面的原型，你可以选择一个 orientation（方向）。这个方向适用于整个原型。在原型中无法在竖屏和横屏视图之间切换。
  • preview（预览）将展示原型中某物的外观或工作方式。我们展示动画动画和原型设备设置的预览。