Figma 可交互组件

一、什么是可交互组件

可交互式组件允许您定义组件集中变体之间的交互，使得组件实例在原型设计模式下可以触发各种交互状态。
现在，您可以像处理静态组件一样重复使用和共享交互式元素，无需在每个文件中重新连接实例。

通过可交互组件可以用更少的时间和精力将界面中的交互状态进行展示，为原型添加交互效果可以带来更好的探索、学习和交流。同时也可以使用可交互组件来简化复杂的原型或构建您的设计系统。

二、如何创建可交互组件

首先，交互组件是建立在组件集 Components Variants 基础上，如果您还不知道什么是组件集的话，建议可以先学习一下官方的组件集教程：Figma Variants Playground

1、创建基础可交互组件

以最基础的按钮组件创建一个悬停状态为例：

1、切换到原型模式，将默认状态按钮拖一根连接线到悬停状态。

2、将交互类型从单击时更改为【悬停时】。

接下来点击原型演示，将鼠标悬停到做复制出来的组件实例上，就可以看到悬停的交互状态就已经做好了。

2、使用交互式组件

像任何其他组件一样，将可交互式组件的实例添加到您的设计中。实例已经将交互应用于原型设计。
现在让我们让按钮在点击时打开一个模态弹窗。

1、切换到原型模式并向按钮添加一个单击操作，以将模态作为叠加层打开。

2、如果您在前一帧上创建了悬停动作，您现在应该会看到按钮上的点击动作和悬停交互状态。

3、向模态弹窗中的按钮添加关闭操作。

点击原型演示，就可以一个点击按钮触发模态弹窗的交互时间就做好啦

3、嵌套可交互组件

在这个案例中，我们添加了一个带有选中/未选中变体的简单复选框组件。
交互式组件的实例可以嵌套在其他组件中。在此示例中，我们将复选框项放置在列表组件中，然后在模态框架中使用该复选列表组件。

1、将复选框的默认态和选中态建立交互链接

2、将复选框复制4个，制作组件，并将组件实例复制到应用到界面上，可自定义文本内容

点击原型播放，一个复选可交互组件就做好啦

3、使用不同的可交互组件集组合

向具有不同内容的变体添加交互状态可能需要不同的操作或根据所需的行为调整内容。
让我们构建一个在悬停时应该保持打开状态的菜单。

1、切换到原型模式并向更改为打开菜单的按钮添加悬停操作。

2、使用【悬停】操作不会使菜单保持打开状态，因此请修改为【鼠标进入】操作。

3、将【鼠标离开】操作添加到打开的菜单中。

点击原型播放，不同的可交互组件集组合就做好啦

三、案例实操

1、基础控件

按钮

从默认状态连接到悬停状态，交互类型设置为【当悬停时】，从悬停状态连接到按下状态，交互类型设置为【当按下时】

菜单

交互类型【单击】，动画【智能动画】，动画曲线【Ease in and out】（缓入缓出），延时【400ms】，如图所示调整曲线锚点

开关

交互类型【单击】

复选框

交互类型依次设置为【按下鼠标】、【释放鼠标】、【延迟触发】；动画【智能动画】

4个小控件对交互状态就设置好了，播放看下效果吧～

2、菜单和工具提示

1、气泡提示。默认组件建立连接到显示气泡的组件，交互状态【当悬停时】，动画设置为【智能动画】，延时【300ms】

2、选择器。默认到展开，交互状态【鼠标进入】，展开会默认，交互状态【鼠标离开】

播放原型，气泡提醒和选择器的可交互组件便做好了

3、跑马灯组件

在这个案例中，有两种触发方式均可以实现图片的切换，一是点击导航点触发，二是拖拽图片触发，这两种触发方式均可以通过可交互组件实现。

1、导航点触发：选择对应的导航点，设置交互状态【点击】连接至对应的图片

2、拖拽触发：选择对应的图片，交互状态【拖拽】，这里Figma可以自动识别左右拖拽跳转至邻近的图片，不需要自行设置左右拖拽方式。

播放效果～

3、闪烁灯效果

这次，我们反过来，先看一下最终的效果，思考一下可以通过什么样的交互进行设置

实现方式：一共拆解出4中颜色，给第一个组件上添加交互方式【鼠标进入】，其他的交互状态设置为【延迟触发】，这样就可以实现上面的效果了。

4、游戏效果

在这个案例中，游戏板上有多个相同的交互式组件实例——它们展示了每个方格的进展和独特的状态。
您可以将鼠标悬停在灰色方块上，单击“X”或“O”，然后通过单击生成的形状来重置组件。最后一次交互在重置回第一次交互之前有一个自动延迟。