静电说：交互式元件（Interactive Component）是Figma Beta版本中新增加的功能。通过它，你可以在各个元件状态之间进行切换（当然是通过某些手势），从而实现流畅平滑的过渡效果。
值得一提的是，你不仅可以为“单击时”动作准备互动，还可以为“拖动”，“按下时”，“悬停”，“键盘点击”以及通过“延迟”功能自动触发的事情准备交互 。这使您能够制作出逼真的解决方案的原型。
制作方式非常简单，接下来我们就来搞定它。
制作步骤：
首先我们必须将这个按钮的每个状态都做出来，如下图所示。
现在，选择这些元件，然后选择从组中创建“状态”（Creat Variants from the group）。交互式组件仅仅对有状态存在的元素有效。
当这些内容都创建好了后，转到Figma的Prototype面板（它们在页面右上角）。
选择第一个组件，然后点击右侧的小圈，将它拽到另一个组件上。这个时候我们就创建了一个动作。
当这两个组件建立链接后，你就可以来设置它们的交互动作了。在右侧的属性检查器中选择动作“On Click”，然后选择动画属性，此时，我们的第一个交互动作就完成了。
接下来预览一下吧！点击Figma顶部右边的“play”按钮即可。
需要注意的小细节
创建交互式元件很简单也很快捷。但是，如果我们要制作更专业的交互按钮效果，这里有一些很实用的小技巧值得注意。
01. 尝试使用不同的交互动作
交互动作不仅仅有点击一种，Figma允许我们使用不同的操作来实现交互。所以多多尝试使用不同的交互动作。
02.使用智能动画
设置过渡动画后，元素的状态改变会更加自然。Figma允许你使用Smart Animate功能为元素添加过渡动画。记住，使用Smart Animate的时候，要保证在组件中使用相同的图层名称，这样该功能就知道你要为哪个元素设置过渡动画了。
03.使用自定义的缓动效果
当您开始使用Smart Animate时，您肯定会注意到，为使过渡更加自然，您可以选择各种缓动类型进行动画处理。 当然，还有一个“自定义”的选项，我们可以在这里对动画曲线进行调整。通过自定义设定，动画效果会更逼真。
原文：https://blog.prototypr.io/practical-tips-for-figma-interactive-components
作者：Thalion
源文件下载
在这里我们特别为大家准备好了这个按钮交互效果的源文件，请注意，只有你加入了Figma的Beta计划后，才能预览这个效果。不妨先把这个文件保存起来，等Figma的新版上线后，再来试试吧！
关注静Design公众号，在公众号聊天窗口
回复关键词“交互按钮”
即可下载到Fig文件
本文分享自微信公众号 - 静Design（JingDesign91）。
如有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。