Figma 交互组件简介

最近，Figma 推出了最新交互式组件功能的测试版，允许将交互和动画直接定义到变体中，并将​​它们传播到每个组件实例。 这意味着现在可以创建具有状态（悬停、活动、单击、聚焦）的组件并使其具有交互性，以便组件的每个副本默认继承这些相同的交互，在原型设计阶段有很大帮助。

以下是工作流程将如何变化的比较示例：

正如您在上面的示例中所看到的，它需要四个屏幕和八个交互才能使原型作为真正的产品工作。 如果我想使用三个开关，我将不得不添加更多的屏幕和交互。

在下一个示例中，它只需要一个屏幕和一个具有两个变体的组件进行交互，并且开关是相同的，因此可以根据需要多次复制：

使用交互式组件不仅可以简化最终原型，还可以简化其背后的逻辑，从而更容易学习如何构建、维护和更新原型。

现在，在我们开始之前：

交互式组件（测试版访问）

您需要注册Interactive Components Beta 计划才能开始试验此新功能，因为它在当前稳定版本中尚不可用。 加入 Beta 版是免费的，一旦您提交表单，在您看到交互式组件出现在 Figma 设计工具中之前应该不会超过两三天。

赠品

我已经使用本文中的示例创建了一个 Figma 设计文件。 加入 Beta 版后，您可以复制我的设计并更轻松地跟进。

• 下载 Figma 设计文件 →

在开始之前

有必要了解我们将要使用的一些关键 Figma 元素，如果您已经熟悉它们，可以跳过这一部分并直接从第一个教程开始（部分：“创建您的第一个交互式组件”）。

成分

将这些视为项，当复制时，会与其副本（称为实例）创建连接，并且当组件发生更改时，实例会收到相同的更改。 您还可以将覆盖应用于实例（这基本上是对组件属性的样式更改，允许进行一些自定义）。

• 了解有关组件的更多信息 →
• 了解有关覆盖的更多信息 →

变体

这些是组件可以具有的不同样式，通常用于应用不同的属性，例如大小或状态。

• 了解有关变体的更多信息 →

交互详细信息面板

了解交互详细信息面板很重要，因为它允许我们为交互组件定义不同的交互和动画。 Figma 在他们的网站上有很多信息，所以我会为那些想要深入挖掘的人提供链接。

热点

即使它不在面板内，热点也是交互发生的元素，在我们的例子中，每个变体都是一个交互式热点，您可以为其定义触发器和操作。

触发器

这些在开发中被称为事件，是我们用户可以激活交互的不同方式。

• 点击时，
• 在拖动时，
• 悬停时，
• 按下时，
• 按键/游戏手柄，
• 鼠标输入，
• 鼠标离开，
• 鼠标按下，
• 鼠标向上，

• 延迟之后。

• 有关触发器的更多信息 →。

行动

在此设置中，您可以定义激活交互时会发生什么； 对于交互式组件，我们将使用Change To ，它允许交换组件内的变体。

• 改成，
• 导航，
• 打开覆盖，
• 滚动到，
• 交换（覆盖），
• 后退，
• 关闭覆盖，
• 打开网址。

目的地

这是行动的最终目标。 在我的示例中，我将使用一个变体作为目标，将其从 Switch OFF 切换到 Switch ON。

动画

Figma 带有一组预定义的过渡，在某些情况下可能有用（移入、推入、滑入），但我总是更喜欢使用Smart Animate并定义我自己的过渡，因为它真的很容易使用——基本上检查图层名称，如果所选帧和目标帧之间有变化，它将为这些图层设置动画。

• 有关 Figma过渡和智能动画的更多信息 →

缓和

缓动是指动画移动的方式，它基本上是元素如何加速和减速。 我将在本教程中使用两种设置：用于开关的Ease In 和 Out ，以及用于循环的Linear ，但请记住，也可以定义自定义缓动，因此您可能想了解有关Easing的更多信息。

创建您的第一个交互式组件

现在您已经掌握了所有信息，您可以开始制作您的第一个交互式组件。 我将通过创建一个具有两种状态（关闭和开启）的简单开关并使用变体来复制这些状态来向您展示一个非常常见的情况。

创建一个组件

第一步是创建一个组件。

• 使用矩形工具 ( R )，创建一个大小为56x32像素的灰色矩形 (#A7A9BC)，并应用16像素的角半径。
• 使用椭圆工具 ( O ) 创建一个大小为24x24像素的白色圆圈 ( #FFF )，并将其放在左侧的矩形上，留出4像素的间距。 它应该是这样的：

• 使用Ctrl/Cmd + Alt + K （或使用 Figma 顶部栏中的组件图标）将这两个元素组合成一个组件：

注意：这里和其他地方，我将使用 Windows/Mac 通用键表示法，其中 Windows 中的Ctrl键对应 Mac 上的Cmd键； Windows中的Alt相当于Mac上的Alt/Option ，所以我就简称Alt ， Shift在两个平台上都是一样的。

添加变体

• 选择您刚刚创建的组件，然后在右侧面板中（在 Design 选项卡内），单击Variants附近的加号按钮：

它将生成一个带有虚线边框的紫色框架，代表您拥有的一组变体。

您现在应该有两个变体，第一个用于Off状态，第二个用于On状态。

• 对On状态应用不同的样式以使其成为活动选项，我建议使用蓝色背景 (#0B5FFF) 并将圆圈向右移动。

当用户点击开关时，这些开关的状态将从关闭变为开启（反之亦然）。

有用的提示：对于这种情况，没有必要，但如果您需要添加更多变体，您可以在框中选择一个组件并单击紫色加号按钮，它将添加所选组件的副本并自动调整框大小。 （也可以手动调整框的大小，就像它是一个框架一样，并自由复制和排列其中的变体。）

替代方法

如您所见，我们通过在变体组中复制它们来创建这些组件，但也可以单独创建它们并将它们组合为变体，最终结果将完全相同。 如果您想尝试这种方法，只需创建并选择两个组件，然后右侧面板将有另一个名为“组合为变体”的操作，单击它并完成 - 您现在将拥有相同的两个变体。

当您已经拥有不同的组件并且只需要定义变体时，此替代方案非常有用，如果您正在处理库，它将帮助您更新它，而无需从头开始重新创建所有内容。

命名您的变体

命名变体不会对最终结果产生直接影响（除非您多次使用相同的名称） ，但定义名称和层次结构将帮助您更好地组织和理解可能需要使用的其他同事的所有内容其他项目的原型。

默认情况下，主要变体组命名为“Property 1”，您可以在选择整个组时从侧边栏中更改它。 我建议将其重命名为“State”，因为我们将使用 Off 和 On 状态。

使用相同的过程重命名单个变体，但您需要选择组内的单个变体，并且在同一面板中，您会找到可以覆盖的名称“默认”和“变体 2”，作为开关名称这些应该是“关”和“开”。

因此，变体的图层名称将自动更改为“State=Off”和“State=On”。

有趣的事实：如果您的组件只有两个变体并且您使用名称“Off”和“On”，它将在目的地显示一个开关而不是下拉列表！

让它互动！

现在您已经有了组件和变体，是时候应用交互了。

• 单击“原型”选项卡（位于屏幕右上角）以打开“原型”面板并激活其功能。
• 选择Off变体（它应该有一个蓝点）并将其拖到On变体上以连接它。

• 仔细检查您是否选择了整个变体，而不仅仅是背景层，即使用户单击圆形元素，这也会使交互工作。
• 在 Interaction Details 面板中，将触发器设置为On Click 。
• 确保操作设置为Change To 。
• 将动画更改为Smart Animate并使用 Ease In And Out 以获得自然的感觉。

我将把这些设置翻译成一句话来解释会发生什么：当用户点击关闭状态然后使用智能动画以300 毫秒的时间轻松进入和退出时更改为打开状态。

• 将相同的设置应用于On State变体，以便再次单击它时，将关闭开关。 （注意： Figma 会记住应用于组内元素的交互设置，并在拖动新交互时应用相同的设置，因此在这种情况下，您只需要仔细检查。）

完毕！ 如果您想检查它是否有效，您需要将其中一个变体包含到框架中，选择框架，然后单击放置在选项卡上的演示按钮（由播放图标表示）。

它应该允许您单独打开/关闭每个开关。

但是，如果您想了解此功能的真正威力，请多次复制框架中的组件（至少三个或更多）并在演示文稿中单独激活它们。

使用两个以上的变体

当您添加多个变体并将它们单独连接以制作逼真的组件时，此功能变得非常强大。 这是一个示例，其中我连接了总共六个变体，对背景颜色进行了微小的更改，以重新创建按钮的多种状态，这是当今网页设计行业的经典之作。

组件状态

这是该组件的不同状态的列表，还包括我们将用于从一种变体更改为另一种变体的触发器。

1. 默认 - 默认，
2. 悬停 - 悬停时，
3. 按下 - 鼠标按下，
4. Active — MouseUp（可以使用 On Click 来获得相同的结果），
5. 活动时悬停 - WhileHover,
6. 活动时按下 - MouseDown。

有用的提示：可以使用MouseDown来模拟按钮被按下但未释放，然后使用MouseUp来激活过渡，这是一个很好的交互细节，使按钮感觉更真实。

嵌套交互组件

至于常规组件，您也可以创建嵌套交互组件。

使用下拉列表的相同示例，可以创建一个名为Dropdown的单个交互式组件，其中包含两个交互式组件：下拉按钮和下拉菜单。 这将帮助您控制按钮和菜单之间的交互方式，允许您定义按钮的哪个变体将触发菜单的打开。

注意：可以为下拉菜单选项创建另一个嵌套组件并使用覆盖来更改不同的文本。

使用嵌套交互组件的主要好处是它为原型提供了新级别的模块化，您可以单独定义交互并将它们混合成无限的交互组件。 下拉菜单可以包含在其他组件（例如卡片）中，而不必每次都对其工作方式进行原型设计。

导航

我们可以走得更远，也可以从变体导航到外部框架，您可以使用On Click触发器和Navigate To操作将单个变体连接到框架。 在此示例中，我已将下拉菜单组件中的每个操作连接到外部框架，该框架具有与菜单相同位置的灰色矩形（右、上、左、下）。

当单击其中一个操作时，它将导航到连接的框架，就像使用常规原型一样，当您需要为另一个组件重用下拉菜单时，真正的魔法发生了，它内部的所有交互都已经完成，所以你不必一遍又一遍地连接它。

这种工作流程和嵌套组件的功能对于需要连接大量框架的产品设计案例来说是惊人的，因为它们将减少创建用于测试的高保真原型所需的工作量，或者即使您想创建一个原型的组件库。

特殊效果

以上就是对 Figma交互组件的介绍。 如您所见，使用此功能在原型中创建和连接交互非常容易。 但也可以使用变体创建各种特殊效果。

在接下来的部分中，我将仔细研究这些！

循环

终于可以在 Figma 中轻松创建无限循环，您还可以创建各种微调器和加载指示器。

要创建循环，请使用设置为1 ms 的After Delay触发器自动交换变量并连接至少两个变量。

注意： 1毫秒是我们可以在 Figma 中设置的从一个变体更改为另一个变体并使其几乎是瞬时变化的最短时间； 并且，由于 AfterDelay 触发器，它会自动发生。 如果您需要循环看起来像是变体之间有暂停，则可以使用更高的延迟时间。

回转

让我从关于 Figma 处理旋转的奇怪方式的注释开始本文的下一部分。

Figma 有一种奇怪的方式来旋转元素，它似乎被限制在-179到最大180之间，并且不允许超过这些值。 此外，没有办法定义旋转方向，因此如果您尝试从0旋转到180 ，反之亦然，而不是进行360旋转，它会先旋转到180然后回到0度（就像秋千一样） ）。

因此，要让系统正确识别旋转，您至少需要使用三个变体。

以下是您的操作方法：

• 创建一个具有三个变体的组件：VariantA、VariantB、VariantC（在本例中，我修改了一个椭圆来制作三角形）。
• 将以下旋转应用于变体内部的元素（而不是变体本身）。
  • VariantA：将元素设置为0并将变体连接到VariantB 。
  • VariantB：将元素设置为-120并将变体连接到VariantC 。
  • VariantC：将元素设置为120并将变量连接到VariantA以完成循环。
• 所有交互都应具有延迟后（1ms）作为触发器和线性缓动。

结果将是一个中性的微调器，由于变体交换，每个1毫秒的小停顿，并不完美，但速度很快，对于原型来说，这已经足够好了——无论如何，你可能是唯一会注意到停顿的人.

有用的提示：您可以为每个变体使用相同的动画时间来制作线性循环，或者您可以对某些变体使用更快的时间而对其他变体使用更慢的时间来播放动画，这将模拟曲线缓动。

复杂的微调器

我不建议将 Figma 交互式组件用于复杂的微调器，在这种情况下，使用专用动画应用程序（例如 After Effects）创建微调器并将其作为 GIF 导入原型可能会更好。

微交互

交互式组件允许您在原型中包含更多令人愉悦的细节。 我将回到 switch 示例，向您展示如何使用MouseDown和On Click向该组件添加微交互。

零件

要重新创建此示例，您需要对交换机的结构进行一些更改：

• 复制您已经创建的关闭状态开关。
• 创建另一个16*24像素的椭圆形状，将其放在前一个椭圆（圆形）上。

• 使用Union将两个椭圆统一为一个布尔组。

• 了解有关布尔组的更多信息 →。

• 将32 px 的边界半径应用到联合层，这将创建您在示例中看到的扭曲效果。
• 创建组件（ Ctrl/Cmd + Alt + K ）。

变体和原型

您总共需要四个变体来完成这项工作： OffState 、 OffStatePressed 、 OnState和OnStatePressed 。

• 使用Mouse Down触发器来模拟鼠标被按下并通过将较大的椭圆8 px 移动到另一侧来激活失真。
• 使用On Click触发器将状态从 Off 更改为 On。

带有一系列图像的 3D 动画

在我们继续之前，我要感谢Andrea Cau ，我将使用这个很酷的 3D 序列作为示例。

这更像是一种将 3D 动画集成到 Figma 原型中的技巧，您也可以使用 GIF，但这样您就可以完全控制图像，而不仅仅是播放/停止，从而允许您创建一个原型来模拟旋转对象的界面，常见于汽车网站，您可以在其中旋转汽车。

在这种情况下，我使用了九张图像（您可以使用更多或更少，具体取决于您需要的旋转），重现此交互的重要步骤是：

• 为每个图像创建一个变体（在这种情况下将需要 9 个变体）并按照序列顺序在每个图像中包含一个图像。
• 创建箭头按钮，它将成为热点。
• 将右箭头连接到下一个变体（对每个变体重复）。
• 将左箭头连接到前一个变体（对每个变体重复）。
• 使用即时动画而不是智能动画来避免淡入/淡出效果并产生运动错觉。

结论

我使用此功能的次数越多，我就越认为它将改变在网络和产品设计领域工作的公司的游戏规则。 掌握交互式组件和变体将使设计师能够以更少的努力制作出更好、更先进和更逼真的原型，让您可以自由地进行实际设计，而不必过多关注设计工具本身。

如前所述，我使用本文中的示例创建了一个 Figma 社区文件（以及我在测试新功能期间所做的一些实验）。 加入 Beta 版后，请随意复制我的设计，跟随或开始试验，并分享您的结果！ 玩转动画时间，改变缓动，尝试旋转，缩放元素，尝试嵌套不同的交互组件。

• 下载 Figma 设计文件 →

如果您有任何问题或不清楚的地方，请在下面的评论部分留下问题，或在 Twitter (@emi_cicero) 上联系我 — 我很乐意提供帮助！ :)

延伸阅读

• 成分
• 覆盖
• 变体
• 触发器
• 智能动画
• 缓和
• Figma 交互式组件游乐场
• Figma 中的交互式组件（@mds 提供的视频）
• Figma 中的高级交互组件（@mds 提供的视频）
• SketchTogether 交互式组件视频