用Figma做动态交互按钮

一月 16, 2021 发表于: 视觉设计. 评论

前言：Figma 现在是越来越流行了，其实归根到底，一件新事物是否能满足设计师的需求，是否能让设计师用的足够爽，这才是关键。反观之前火热的Sketch，为什么越来越卡，设置一个属性都要卡个半天，删除一个图层都要卡半天，这样谁还能用呢？连最底层的流畅度都做不到，不能总怪用户的电脑差吧？好吧，这是静电的吐槽。两者都是优秀的工具，还是希望“老牌工具”Sketch能加油，不过今天咱们先看一篇Figma做交互按钮的教程，嗯，估计大家没有用Sketch做交互吧，毕竟Sketch的交互太难用了。

这是一篇高级产品设计师Mike Gorrell的教程，我们将在Figma中通过简单的几步来完成下图这样的简单按钮。

这个按钮有三个状态，分别是默认按钮，悬停状态和按下状态。这有助于理解Figma中按钮原型工作原理的概念。

首先要了解一些基本规则：第一，按钮必须是唯一的组件实例或框架。因此，如果原型中有4个按钮，并且都希望它们都是交互式的，那么总共需要12个按钮才能正常工作（每个按钮1个默认状态，1个悬停状态和1个按下状态）。第二，必须将悬停状态和按下状态放置在原型框架的外面，一遍可以随时调用它们。（这也是Figma中的“Overlays”功能的实现方式）第三，保持Smart Animate图层名称一致。随后我们将使用Figma的“ Smart Animate”功能执行一些很酷的操作，因此最好在实践过程中保持按钮状态之间的命名一致。（你可以像我一样，将图层命名为像“ Frame 1104”，“ image 32”或“ Vector 200”诸如此类，使用规范命名的图层是必须的）。悬停状态

第1步-悬停状态第一步：设置“While Hovering（触发）”状态这步操作的关键在于，你实际上并没有更改初始的“默认状态”按钮。取而代之的是，直接在默认状态按钮的上方显示“悬停状态”按钮的图片。这是通过创建“While Hovering”效果来完成的，随后，将下方的展示效果设置为“Open Overlay”即可。另外，记得把属性下方的“Instant（立刻）”，改为“溶解（Dissolve）”，这样鼠标放上去时才能有过渡效果。但是如果你使用了“Manual（手动）”选项，系统会自动把你的悬停状态按钮覆盖到默认状态按钮的上方。但是，我们务必要仔细检查，确保这两种状态的坐标是完全一致的。这样才能让悬停态按钮完美显示。

第2步-按下时第二步：设置“While Pressing（按下）”状态在第一步中，我们已经设置好了悬停状态，接下来创建交互的第二步。这一步，需要在悬停状态“While Pressing”上创建交互，进而实现我们在按下状态按钮上触发“Swap With（以…交换）”命令。(作者注：也许可以通过其它技术可以实现叠加层的操作，但是那样我们就无法使用有趣的Smart Animate功能了。)

第3步-单击状态第三步：制作按钮链接（可选步骤）为了让你的按钮点击后真正有效果，我们可以在按下状态的按钮上添加一个“On Click（单击时）”交互效果，以便可以跳转到新的页面，或者打开一个弹层以及你想要的其它效果。下面是整个过程的完整演示动画，请看下面的GIF动画：

最后总结一下，过程中需要注意以下三点：第一.按钮必须是唯一的组件实例或者Frame第二.悬停状态和按下状态必须位于原型框架之外才能起作用第三.保持Smart Animate图层名称一致。

原文 | https://medium.com/swlh/how-to-make-simple-interactive-buttons-in-figma-in-2-steps
翻译 | 静电
来源 | 电Design (id:JingDesign91)

赞助商链接