如何通过3个步骤在 Figma 中制作复杂的交互式按钮（翻译）
Figma 按钮原型的进阶操作。零基础的建议先看上一篇的。其实搞懂原理就觉得很简单。建议先看一遍思考一下再自己动手做一遍。
如何通过3个步骤在 Figma 中制作复杂的交互式按钮
发现一些“技巧”，将你的Figma原型带入到一个新阶段。
这是我之前关于创建简单交互式按钮的 Figma 教程的后续内容。如果你尚未阅读，请前往查看！在其中，你将学习如何在下面创建简单的交互式按钮：
本教程的第1部分（译者注：看我上一篇）
现在，你已经掌握了基础知识，让我们深入研究如何在 Figma 中制作一些更复杂的交互式按钮！许多步骤都是相同的，但让我们进入一个新的阶段来制作以下几个按钮：
首先，为什么原型很重要？
为了说服自己..……
遍历原型可以使你的设计解决方案更真实，并且与静态设计相比，可以与客户或利益相关者进行更多的交流。它还可以帮助作为设计师的你，避免陷入设计的“Dribbble 陷阱”（也许在一些屏幕截图中看起来不错，但是它实际上是如何工作的？）。制作可实现的按钮是使原型成为真正实物的一小步。——迈克·格罗尔（Mike Gorrell），2020年
与组织中的其他人或客户分享设计时，重要的是要透视设计并展示用户流。作为设计师，你可能对一个页面如何过渡到另一个页面有一个想法，但是你能表达这一想法吗？不要以为你的利益相关者可以理解你的想法，也不要以为他们拥有与你相同的想法。如果他们这样做了，那么他们就不需要雇用你了！通过在原型中创建更复杂的交互式按钮，可以使你的设计栩栩如生，并讲述你的方案所需的故事。
其次，为什么我原来的教程不起作用了？
我的“简单2步”教程不起作用的原因是因为 Figma 处理覆盖层（Overlays）、图层（Layers）和智能动画（Smart Animation）的方式。假设你要在悬停按钮上添加箭头。你也许会遵循我之前概述的“简单2步”过程：
“悬停时（While Hovering）”打开覆盖层（Open Overlay）（手动把覆盖层放在按钮上面）
（译者注：Overlay下面选择Manual就是了，也就是“手动”，后面不赘述了）
“按下时（While Pressing）设置切换（Swap）”
然而，你可以在上方看到为什么该方案行不通。箭头的添加和按钮的扩展令人讨厌且不自然。我们希望按钮在进入和退出悬停状态时能够缓慢地伸长和收缩。那么我们如何从“简单2步”转到“简易3步”？嗯，顾名思义，这实际上很容易。
“悬停时（While Hovering）”打开覆盖层（Open Overlay）（手动把覆盖层放在按钮上面）
“悬停时（While Hovering）”设置切换（Swap）（这就是我们的额外步骤！）
“按下时（While Pressing）”设置切换（Swap）
你所要做的就是添加一个额外的相同的悬停状态（跟默认状态一样），然后立即触发你的正常悬停状态。实际上，这里发生的事情是你将鼠标悬停在默认状态的按钮，然后立即变成了将鼠标悬停在复制的按钮上。然后，当切换状态时，将以更复杂的方式“解锁”使用智能动画（Smart Animate）。如果我们不这样做，那么我们的背景就不会像动画那样收缩和伸长，而是像我们上面“问题示例”中看到的那样看起来像是一种溶解效果（Dissolve）。
假设你的图层从一种状态到另一种状态都是一致的命名，我们可以使用 Figma 的智能动画（Smart Animate）平滑地从一种状态过渡到另一种状态。对于简单的按钮，这是不必要的步骤，但是对于更复杂的交互式按钮，此步骤对于确保“默认”>“悬停”>“按下”按钮体验平滑动画至关重要。
还请记住，你可以通过在按下状态的按钮上添加“点击（On Click）”原型交互功能来导航到新页面，打开一个模态或执行你希望按钮执行的任何操作。
让我们回顾一下我们的基本规则
你的按钮状态必须是唯一的组件实例（Instance）或框架（Frame）。 对于你要设置动画效果的每个复杂按钮，你需要4种独立的按钮状态（1种默认状态（Default），1种我称之为“开始（Start）”的其他默认状态，1种悬停状态（Hover）和1种按下状态（Pressed））
必须将悬停状态（Hover）和按下状态（Pressed）放置在原型框架的外面，以使其处于覆盖层（Overlay）。 这就是 Figma 中“覆盖（Overlay）”功能的运作方式。
保持智能动画（Smart Animate）的图层名称一致。 为了使 Figma 的智能动画（Smart Animate） 正常工作，你需要在各状态之间都保持图层名称的一致性。避免使用“Rectangle 58”，而是要花上一分钟时间去正确命名图层，例如“ button-background”或“ button-label”。
创建“物理”按钮的交互
让我们看一下本教程顶部的示例动画中的“按我（Press Me）”按钮。这是一个很好的示例，它说明了如果你想做一些更复杂的交互，则需要如何意识到每个按钮状态在其各自框架中的布局。
你会发现按钮在悬停时会上升，在按下时会下压。为了使此效果正确发挥作用，你可以保持框架（Frame）尺寸一致，但在“剪切内容（Clip Content）”关闭的情况下，将框架的“上升（Raised）”和“按下（Pressed）”状态调整为框架外。这样，你就可以像我们之前的示例中那样轻松调整按钮覆盖层的位置，同时仍将该移动作为按钮序列的一部分。
默认（Default）→开始（Start）→悬停（Hover）→按下（Pressed）
跟随我们的步骤
现在我们已经设计好了状态，让我们按照正常步骤链接原型。为了清晰起见，我在括号中加上了我使用的框架（Frame）名称。
“悬停时（While Hovering）”打开覆盖层（Open Overlay）（上升（Raised）/开始（Start））
“悬停时（While Hovering）”设置切换（Swap）（上升（Raised）/悬停（Hover））
“按下时（While Pressing）”设置切换（Swap）（上升（Raised）/按下（Pressed））
还是很困惑？
这是相同的按钮动画序列，每个状态都设置为不同的颜色，复制默认按钮并且故意不对齐，以便更好地了解在典型情况下步骤1如何无缝过渡到步骤2。通常情况下，蓝色按钮置于绿色按钮的顶部，你可以通过悬停在绿色按钮上来触发蓝色按钮，然后随即触发了紫色按钮。如果还是让你困惑，请观看下面的内容，希望可以清除你的困惑：
为了清晰可见，我们把状态颜色更改并且故意不对齐
看着图中的蓝色按钮，你就会明白如何让智能动画（Smart Animate）能够运作
如果我们希望它们变得更加复杂。
让我们看看我是如何按照类似的规则进行稍许修改后做出“下载（Download）”按钮动画序列的…
Figma 动画“下载（Download）”按钮原型
为了创建此按钮，我使用了下面显示的4种状态。在每种状态下，你会注意到名称都是一致的，以确保智能动画（Smart Animate）正常运行。
你可能会注意到的另一件事是，每个状态都有一个名为“箭头组（Arrow Group）”的组，该组中有两个箭头。为什么我们只看到一个箭头？这是一个巧妙的循环技巧。在每种状态下，实际上有两个箭头，但是其中一个箭头被裁剪出框架外。但是，动画播放时，第二个箭头出现的位置与第一个箭头的位置相同，形成一个完美的循环。这是我们打开和关闭“剪切内容（Clip content）”时每一图层的外观：
打开“剪切内容（Clip content）”
关闭“剪切内容（Clip content）”。看到框架外的箭头吗？
制作更复杂的按钮时，你可能会遇到的另一个困难是如何配置交互细节。回顾一下，对于我们的“简单按钮”，我们始终有两个步骤：
“悬停时（While Hovering）”打开覆盖层（Open Overlay）
“按下时（While Pressing）”设置切换（Swap）
然后，在本教程开始的“添加箭头”示例中，我们轻松地又增加了一个步骤：
“悬停时（While Hovering）”打开覆盖层（Open Overlay）（手动在按钮上放置）
“悬停时（While Hovering）”设置切换（Swap）
“按下时（While Pressing）”设置切换（Swap）
但是…对于我们的下载按钮动画来说，这是行不通的。对于上面的“下载”按钮示例，我不得不采用其他方法。
为什么“简易3步”不起作用了
你将在上方看到为什么“简易3步”行不通了。“按下时（While Pressing）”如它的名字一般，只有在你点击（Clicking）/按下（Pressing）时，该交互才起作用。当你停止点击时，动画将恢复为按下之前的状态。但是，我们希望我们的点击触发动画。我们如何做到这一点？当然，将我们的步骤更改为“点击（On Click）”！我的原型序列最终看起来像这样：
“悬停时（While Hovering）”打开覆盖层（Open Overlay）
“悬停时（While Hovering）”设置切换（Swap）
“点击（On Click）”设置切换（Swap）
延迟（After Delay）“关闭覆盖层（Close Overlay）”
你会注意到，我必须添加最后一步，即延迟（After Delay）之后的“关闭覆盖层（Close Overlay）”。如果我们不这样做，该按钮将停留在最终的绿色状态。如果这是你想要的，那就太好了。对我而言，我希望按钮的动画是这样的：完成后从绿色恢复成紫色。
以上步骤的可视化
我认为现在这些可能就足够了。请在评论中让我知道你的想法！本教程对你有帮助吗？清晰？令人困惑？另外，请分享你最终创建的按钮杰作！
干杯， 迈克。
