几个月前，我才刚开始全面使用 Figma。我进入赛道比较晚了。即使比赛迟到也没有阻止我继续参加。

像许多其他产品设计师一样，我过去几年是 Sketch 用户。它易于学习和理解，我喜欢与 InVision 集成以构建原型，并且通过 Anima 自动堆栈等功能可以轻松处理更多动态内容。

然后我加入了 Y Media Labs 的工作人员团队，该团队已经完全迁移到 Figma。我已经涉猎了一点，但从未将它用作主要工具。对我来说这是溺水还是游泳。从那时起，我意识到 Figma 变得简单，容易且功能强大。在短短的几周内，我发现自己不仅了解如何像以前一样进行设计，而且发现了一些“ Figma 技巧”，使我的原型真正栩栩如生。以下都是我的探索：

使其可实现

在YML，我们的口头禅是“原型在展示之上（prototypes over presentations）”。遍历原型可以使你的设计方案更真实，并且与静态设计相比，可以与客户或利益相关者进行更多的交流。它还可以帮助身为设计师的你，避免陷入设计的“Dribbble 陷阱”（也许在一些屏幕截图中看起来不错，但是它实际上是如何工作的？）。制作可实现的按钮是使原型成为真正实物的一小步。值得我们深入探讨。

简单的按钮

上面的示例就是我所说的“简单按钮”。只是一个默认按钮，一个悬停状态（Hover State）和一个按下状态（Pressed State）。这有助于理解 Figma 中原型按钮的工作原理。

一些基本的规则：

• 你的按钮必须是唯一的组件实例（Instance）或框架（Frame）。 因此，如果你的原型中有4个按钮，你希望它们都是交互式的，则总共需要12个按钮才能正常工作（每个按钮1个默认状态，1个悬停状态和1个按下状态）。到目前为止，我还不知道如何在主组件页面中链接原型序列，并使其适用于该组件的所有实例。 （如果我错了，请留言中让我知道！）

• 你必须将悬停状态和按下状态放置在原型框架的外面，以使其成为“覆盖层”（Overlay）。 这就是 Figma 的“覆盖”功能运作方式。

• 保持 智能动画（Smart Animate） 的图层名称一致。 稍后，我们将使用 Figma 的“智能动画”特性进行一些有趣的操作，因此最好在各个按钮状态之间保持命名一致的做法。 （如果你像我一样，那你的图层通常看起来像“Frame 1104”，“image 32”或“Vector 200”。在此处使用清晰的图层名称是值得的）。

  
  

这是一个简单的两步过程。

步骤1—悬停时（While Hovering）

1.触发“悬停时”状态

该原型的关键技巧在于你实际上并未更改初始的“默认状态”按钮。取而代之的是，你直接在默认状态按钮的上面打开“悬停状态”按钮的覆盖层（Overlay）。这是通过创建一个原型交互“悬停时”（While Hovering）来完成的，该交互会通过你的悬停状态按钮的“打开覆盖层（Open Overlay）”来完成。

如果你从“覆盖（Overlay）”部分的第一个下拉菜单中选择“手动（Manual）”，它将自动将新的悬停状态按钮直接放在默认状态按钮的上面，但是请仔细检查以确保将覆盖层放置在你的初始按钮上面，以确保视觉上是一致的。

步骤2 —按下时（While Pressing）

2. “按下时”切换状态

Now that your hover-state is open, we’ll create the second step of our interaction. To do this, create a prototype interaction on the hover-state button “While Pressing” that triggers the “Swap With” command with our pressed-state button. (I think you could technically open up another overlay instead, but then we won’t be able to use any of our fun Smart Animate features.)

现在你的悬停状态已打开，我们将创建交互的第二步。为此，请在悬停状态按钮“按下时（While Pressing）”上创建原型交互，该交互将通过我们的按下状态按钮触发“切换（Swap With）”命令。 （我认为你也可以新建覆盖层（Overlay）作为另一种方法，但是那样我们将无法使用任何有趣的智能动画（Smart Animate） 这个特性了。）

步骤3 —单击（On Click）

3. 让你的按钮运作起来（可选）

好吧，如果你希望按钮实际运作起来，则需要3个步骤。为了使你的按钮能正常工作，只需在按下状态的按钮上添加“单击（On Click）”的交互，即可导航到新页面，或者打开一个模态或者其他你所能想到的东西。

就是这样！下面是我在 Figma 项目中录制的关于教程开始时的简单示例动画的录像，展示了我列出的基本规则：

• 按钮必须是唯一的组件实例（Instance）或框架（Frame）。

• 悬停状态（Hovered）和按下状态（Pressed）必须位于原型框架（Frame）之外才能用作为覆盖层（overlay）。

• 保持智能动画（Smart Animate） 的图层名称一致。

下次，我们将介绍一些更复杂的交互式按钮。敬请关注…

干杯！迈克。