超实用的Figma交互按钮实例.Fig来啦，附教程及源文件。

静电说：交互式元件（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