Figma原型:一个快速，一步一步的指南，有用的模型

原型是将静态模型转换为交互式和动态模型的过程原型)．毫无疑问，将静态模型带入生活是最重要的的设计工作流程中最令人兴奋的一步。

同样重要的是，开发人员要理解设计的用户流程，以及它的感觉和功能。还有什么比使用更好的方法呢Figma，世界上最好的设计工具根据2020年设计工具调查?

一旦了解了Figma的工作原理，使用它创建原型就变得简单而愉快。从复制这个开始静态模型(点击一系列互动然后复印到我的汇票上)，然后在整个教程中，我们将添加越来越多的功能保真度。你的本地副本应该是这样的:

注意:我假设你至少有少量使用现代UI设计工具(如Figma或Sketch)的经验。

步骤1:创建一个水平滚动框架

让我们从画板1，使溢出视口的卡的选择水平滚动。这是一个例子，我们可以使我们的模型动态，而不必创建Figma所谓的“连接”。连接引导我们到新的画板，但这不是我们在步骤1中要做的。

首先选择卡片从层面板(左侧侧边栏)，然后从设计面板(这次是右侧侧栏)更改集团选项框架使用下拉菜单。

我不会深入讨论这个问题，但Group和Frame之间的主要区别在于，Group紧密地包裹它们的子帧，而Frame可以是任何大小。这意味着:

• 分组的孩子与组的比例，而框架的孩子有点固执(一个功能，不是一个bug)
• 框架子节点相对于框架对齐，而分组子节点仍然相对于画板对齐
• 帧可以有溢出的内容，可以水平或垂直滚动(这是我们将尝试的)

等等，这是否意味着画板实际上是框架?事实上:其他UI设计工具所称的画板，Figma所称帧．这可能是因为，在Figma中，框架可以嵌套在其他框架中，这与画板在其他工具(如Sketch、Adobe XD等)中的功能略有不同。

切换到原型模式(⌥+9)溢出行为设置将现在可用，然后更改下拉选项从没有滚动来水平滚动．

现在，您将注意到阴影被新转换的Frame奇怪地截断，但这实际上是溢出内容的标准行为，并且可以相对容易地修复。

由于阴影的模糊变量是30，帧可以是任何大小，我们需要调整帧的大小，以允许在它的边缘周围有额外的30个间距。它应该很容易调整大小(转变+⌘+↑↓←→)和轻推(转变+↑↓←→)相应的对象。

顺便说一下，你可能会注意到(如果你点击Frame)卡片和它们的间距可以很容易地重新排列。这与教程无关，但仍然很棒。

步骤2:创建画板过渡

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

选择卡片帧(是的，整个帧，因为现在点击哪张卡并不重要)。那么，假设你还在原型模式下，拖动Connector(即显示+悬停时)进入画板2．这些画板现在连接起来了。

将连接器放入画板2，连接设置(现在应该显示)，应该看起来像这样:

• 交互细节
  • “点击”(点击会触发交互)
  • “导航到”/“画板2”(点击将导致用户导航到画板2)
• 动画
  • “推送”/“←”(“画板2”将推本身从屏幕右侧显示)
  • “Ease Out”/“300ms”(在300ms的过程中，动画将快速开始，并在结束时减速)
  • 选中“智能动画匹配图层”复选框(如果保持不变，返回按钮和导航等常见元素将不会动画)

想看看我们到目前为止都做了什么吗?点击“现在”按钮(即玩图标)在右上角。如果您在web浏览器中使用Figma，则会打开一个新选项卡。

提示:点击R重新加载原型。

第三步:撤退!

在继续深入更复杂的连接之前，让我们确保可以返回到画板1(或者不管我们来自哪个画板)。创建另一个连接，这次从后退按钮发起，设置如下:

• 交互细节
  • “龙头”
  • “返回”

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

步骤4:创建一个(相对)复杂的定时动画

在接下来的最后一步中，我们将创建一个单独的动画，它实际上跨越了几个画板，并单独动画几个对象，而不是整个画板。具体来说，我们将在单击按钮时将扩展的卡旋转到左侧，然后设置计时器将其旋转到右侧，然后返回到原始状态。

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

选择按钮对象画板2并建立连接到的连接器画板3．使用这些设置:

• 交互细节
  • “龙头”
  • “导航到”/“画板3”
• 动画
  • “智能动画”
  • " Ease Out " / " 300ms "

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

在“设计”面板中，你应该可以看到我已经完成了按钮的背景# FF0000然后把卡片向左旋转。

但是，在300毫秒的“向左旋转动画”结束后，我们如何向右旋转它呢?这就是需要定时动画的地方。重复上面的步骤，这次是连接画板3来画板4“延迟后”/“300ms”是唯一的区别。为了完成交互，重复一次连接画板4来画板5．

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

使用Figma创建原型很有趣，对吧?

我们现在已经到了本教程的末尾。Figma文件看起来不应该有什么不同(除了使用Prototype模式时一些可见的连接器)。然而，在当前模式下，它的功能应该非常不同。如果您没有按照本教程进行操作，请查看“动态”版本，您可以在其中测试最终结果。

很酷，对吧?

虽然我们可以可视化更复杂的动画风格和交互类型，但我们在这里看到的应该涵盖了你需要知道的99%的内容。当涉及到交互时，简单总是更好的!

对于需要更复杂的动画，有一个整洁的Figma插件叫做LottieFiles这绝对值得一看。

更多关于Figma的信息，你也可以阅读用Figma绘制线框图．