创建原型 #

Figma 的原型功能允许你创建交互式流程，模拟用户与你的设计交互的方式。

1. 建立你的原型 #

要构建原型，你需要将你的设计放在在单个文件中的不同框架中。

我们建议你首先查看 原型入门 一文。

本文提供了每个触发器、动作和过渡的详细说明和示例。

创建一个连接 #

  1. 切换到属性面板中的 Prototype 选项卡：

  2. 找到要在原型中使用的第一个框架。

  3. 在该框架中选择图层，组，框架或对象。你可以从框架中的任何对象创建热点，甚至可以从顶层框架本身创建热点。 圆形原型节点将出现在对象的右侧：

  4. 单击并将节点拖动到你要将其连接到的框架 - 这将是目标框架。

    蓝色箭头将建立连接：

自定义连接 #

然后，你可以使用“原型”选项卡中的字段自定义“连接”。

提示

我们的Prototyping入门文章详细解释了每个Trigger，Action和Transition可用。

  1. 使用“触发器”字段确定用户的哪些交互将触发原型从一个框架移动到另一个框架：
  2. 在“操作”部分中，你可以选择原型的进展方式。 如果你已在两个框架之间建立了连接，则此处将显示目标框架。 否则，你可以从提供的下拉列表中选择另一个选项：
  3. 从提供的按钮中选择操作类型。你可以选择“导航”，“交换”和“叠加”。
  4. 如果要保留滚动位置，请选中提供的框。这允许你在两个框架之间移动时保持相同的滚动位置/深度。
  5. 从选项中选择你要使用的转换。你将在下面看到一个预览，显示你的期望：

提示

你可以将鼠标悬停在“预览”窗口上以查看“过渡”的预览！

  1. 根据你选择的转换，你可能还有一些其他可用设置： a. 设置你希望框架输入的方向。 b. 将任何缓动应用于过渡。缓和会减慢转换，无论是在开始，结束，还是在开始和结束时。 c. 设置持续时间。最小值为1毫秒，最大值为10,000毫秒（10秒）。

然后，你可以针对你要模拟的任何其他交互重复上述过程。

删除和删除连接

在原型设计模式下，你可以使用以下任一方法删除（或删除）你创建的连接：

  1. 单击连接箭头并将其拖动到画布的空白部分：
  2. 选择箭头并使用键盘上的Delete键删除：
  3. 要删除所有连接，请右键单击画布中的空白区域，然后从菜单中选择“删除所有连接”：

2. 使用Scroll Overflow进行原型设计 #

如果你正在构建更复杂或完全开发的原型，那么你可能需要尝试使用Scrolling Overflow。

这允许你模拟更高级的用户交互，例如导航轮播，照片库或图书馆以及交互式地图; 使你的原型更加真实。

你可以将以下滚动溢出设置应用于原型中的框架：

  • 横
  • 垂直
  • 水平和垂直

查看我们的Scroll Overflow高级原型文章，了解如何使用它的详细说明和示例。

3. 自定义原型设置 #

为了使你的原型看起来像真正的交易，你可以自定义它的呈现方式。

在原型 Settings中，你可以设置：

  • 设备
  • 取向
  • 背景颜色
  • 起始框架

4. 查看你的原型 #

当你准备好查看，展示或共享原型时，你可以使用Presentation View向全世界展示它。 我们在Presentation View中的查看原型文章将引导你完成整个演示过程。

这包括你需要了解的有关共享设计的所有信息：

  • 使用“缩放”模式可确保你的原型很好地适合你的屏幕。
  • 使用全屏模式以获得干净，极简的界面。
  • 在作为一个团队展示时使用观察模式。
  • 如何通过桌面和移动共享原型。
  • 如何发布和管理原型评论。

使用叠加层