无花果原型：有用的模型的快速，逐步指南

Figma原型设计：将静态模型转化为动态交互式体验

核心要点:

• Figma原型设计将静态模型转化为动态、交互式原型，帮助开发者理解设计的用户流程、功能和感受。
• 创建Figma原型的步骤包括：创建水平滚动框架、创建画板过渡、创建返回上一画板的功能以及创建复杂的定时动画。每一步都涉及特定的设置和交互，以确保平滑的过渡和动画效果。
• Figma原型具有交互性，可以与他人共享以进行预览和收集反馈。此功能增强了协作性，并允许根据收到的反馈进行改进。Figma还通过LottieFiles等插件支持更复杂的动画。

原型设计是将静态模型转化为交互式和动态模型（更广为人知的是原型）的过程。将静态模型变为现实无疑是设计工作流程中最激动人心（如果不是最激动人心）的步骤之一。

对于开发者而言，理解设计的用户流程、感受和功能至关重要。还有什么比使用Figma（根据2020年设计工具调查，它是世界上最好的设计工具）更好的方法呢？

一旦掌握了Figma原型设计的方法，就会发现它简单易用且令人愉快。首先复制此静态模型（点击“一系列交互”，然后点击“复制到我的草稿”），然后在整个教程中，我们将添加越来越多的功能保真度。您的本地副本应如下所示：

注意：我假设您至少对现代UI设计工具（如Figma或Sketch）有一定的了解。

步骤1：创建水平滚动框架

让我们从画板1开始，使超出视口的卡片选择能够水平滚动。这是使我们的模型动态化的一种方法，无需创建Figma所谓的“连接”。连接将我们引导到新的画板，但这并非我们在步骤1中要做的。

首先从图层面板（左侧边栏）中选择“卡片”，然后从设计面板（这次是右侧边栏）中使用下拉菜单将“组”选项更改为“框架”。

我不会深入探讨这一点，但是组和框架的主要区别在于，组紧密地包裹其子元素，而框架可以是任何大小。这意味着：

• 组的子元素会随组一起缩放，而框架的子元素则比较顽固（这是一个特性，而不是错误）
• 框架的子元素相对于其框架对齐，而组的子元素仍然相对于其画板对齐
• 框架可以包含可以水平或垂直滚动的溢出内容（这就是我们要尝试的）

等等，这是否意味着画板实际上是框架？ 的确：其他UI设计工具称之为画板，Figma称之为框架。这可能是因为在Figma中，框架可以嵌套在其他框架中，这与Sketch、Adobe XD等其他工具中的画板略有不同。

切换到原型模式（⌥ 9），现在可以使用“溢出行为”设置，然后将下拉选项从“无滚动”更改为“水平滚动”。

现在，您会注意到阴影被新转换的框架奇怪地切断了，但这实际上是溢出内容的标准行为，它可以相对容易地修复。

由于阴影的模糊变量为30，并且框架可以是任何大小，因此我们需要调整框架大小，以便在其边缘周围留出额外的30个间距。调整大小（shift ⌘ ↑↓←→）和微调（shift ↑↓←→）对象应该很容易。

顺便说一句，您可能会注意到（如果您点击框架），卡片及其间距可以很容易地重新排列。这与本教程本身无关，但仍然很棒。

步骤2：创建画板过渡

对于下一步，让我们尝试一个将一个画板连接到另一个画板的交互，也称为“连接”。

选择“卡片”框架（是的，整个框架，因为现在哪个卡片被点击并不重要）。然后，假设您仍然处于原型模式，将连接器（即悬停时显示 的带边框的圆圈）拖动到画板2。这些画板现在已连接。

将连接器放到画板2上后，“连接”设置（现在应该显示出来）应如下所示：

• 交互细节
  • “点击时”（交互将由点击触发）
  • “导航到” / “画板2”（点击将导致用户导航到画板2）
• 动画
  • “推动” / “←”（“画板2”将从右侧推动到屏幕上）
  • “缓出” / “300毫秒”（在300毫秒内，动画将快速开始，然后逐渐减慢）
  • 选中“智能动画匹配图层”复选框（如果保持不变，则后退按钮和导航等常用元素将不会动画）

想看看我们到目前为止所做的工作吗？点击右上角的“演示”按钮（即播放图标）。如果您在网络浏览器中使用Figma，这将打开一个新标签页。

提示：按R重新加载原型。

步骤3：后退！

在我们继续并深入研究更复杂的连接之前，让我们确保我们可以返回到画板1（或我们来自的任何画板）。创建另一个连接，这次从后退按钮开始，设置如下：

• 交互细节
  • “点击时”
  • “后退”

这次将无法使用动画设置，因为选项是固定的。具体来说，过渡将反向动画。例如，如果我们使用“推动←”过渡到画板，那么我们将使用“推动→”过渡回来。

步骤4：创建（相对）复杂的定时动画

在接下来的最后一步中，我们将创建一个跨越多个画板并分别为多个对象而不是整个画板制作动画的单个动画。具体来说，我们将点击按钮后将展开的卡片向左旋转，然后设置计时器使其向右旋转，然后再返回其原始状态。

本质上，这是一个摆动动画。

选择画板2上的“按钮”对象，并建立一个连接到画板3的连接器。使用以下设置：

• 交互细节
  • “点击时”
  • “导航到” / “画板3”
• 动画
  • “智能动画”
  • “缓出” / “300毫秒”

注意：由于我们选择了“智能动画”作为动画类型，因此同时存在于两个画板中但视觉上不同的图层将平滑过渡，但前提是相关的图层结构和图层名称保持一致。如果它们不保持一致，Figma将无法理解这些图层是同一个图层，它们将无法正确动画。

在“设计”面板中，您应该看到我已经将按钮的背景设置为#FF0000并将卡片向左旋转。

但是，如何在300毫秒的“向左旋转动画”运行完毕后将其向右旋转呢？好吧，这就是需要定时动画的地方。重复上述步骤，这次将画板3连接到画板4，“延迟后” / “300毫秒”是唯一的区别。要完成交互，请再次重复将画板4连接到画板5。

这就是我们连续运行动画的方式。在我们的例子中，初始点击交互激活了“向左旋转动画”，然后后续动画会自动按计时器进行。

Figma原型设计很有趣，对吧？

我们现在已经完成了本教程。Figma文件实际上看起来没有什么不同（除了在使用原型模式时有一些可见的连接器）。但是，它在演示模式下的功能将大相径庭。如果您没有按照教程进行操作，请查看“动态”版本，您可以在其中测试最终结果。

很酷，对吧？

虽然我们当然可以设想更复杂的动画风格和交互类型，但我们在这里看到的应该涵盖了您需要知道的约99％的内容。在交互方面，简单总是更好！

对于需要更多复杂性的动画，有一个名为LottieFiles的简洁Figma插件绝对值得一试。

有关Figma的更多信息，您还可以阅读有关使用Figma进行线框图设计的内容。

关于Figma原型的常见问题

什么是Figma原型？Figma原型是使用Figma（一种协作设计工具）创建的设计的交互式表示。它允许设计师展示和测试其设计的功效，提供更动态和以用户为中心体验。

如何在Figma中创建原型？要在Figma中创建原型，请设计屏幕或框架，然后使用“原型”模式将这些框架链接在一起，定义交互、过渡和动画以模拟用户体验。

在共享之前，我可以预览我的Figma原型吗？是的，Figma允许您直接在Figma编辑器中预览您的原型。只需进入原型模式并点击“演示”按钮即可体验您的设计交互。

如何与他人共享我的Figma原型？您可以通过生成可共享链接来共享您的Figma原型。转到“共享”菜单，调整共享设置，然后复制链接。任何拥有该链接的人都可以查看和交互您的原型。

有没有办法收集有关我的Figma原型的反馈？是的，Figma支持对设计和原型进行评论。共享您的原型链接，查看者可以直接在设计的特定元素或区域上留下评论，从而促进协作和反馈收集。

以上是无花果原型：有用的模型的快速，逐步指南的详细内容。更多信息请关注PHP中文网其他相关文章！