视觉设计 » 用Figma做动态交互按钮

用Figma做动态交互按钮

发表于: 视觉设计. 评论
Sponsor

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

用Figma做动态交互按钮

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

用Figma做动态交互按钮

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

用Figma做动态交互按钮

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

用Figma做动态交互按钮

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

用Figma做动态交互按钮

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

用Figma做动态交互按钮

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

用Figma做动态交互按钮

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

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

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:为设计新人提供的设计交流群,请加入UI设计交流群,分享经验、接单、求职、聊设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

{ 发表评论 }