动画可以通过引导导航、指示任务进度以及对用户操作提供反馈，从而提高网页或移动界面的可用性。特别是对UI组件进行动画处理是改善用户体验的一种重要而微妙的方式。例如，当单击心形图标使其脉动并变红，或者悬停在按钮上会导致其改变颜色时，用户会立即得到提示，提示他们转移到下一个任务。

在我六年的UI/UX设计工作中，我创建了各种动画，从动画微交互到复杂的滚动效果。我发现在Figma中进行动画处理是有益的，因为它允许将元素组合成组件。 为了在多个项目中重复使用和修改，我创建了一个Figma按钮组件 (opens new window)，并且我还依赖Figma的“智能动画 (opens new window)”功能，这是一个简单的工具，可以自动化过渡。

在这个逐步教程中，我向其他设计师 (opens new window)展示如何在Figma中创建三个动态UI组件：一个收藏图标，一个呼吁行动（CTA）按钮和一个产品卡。 动画“收藏”图标

收藏图标允许用户将项目标记为重要或喜欢的东西，通常作为保存以便以后查看的一种方式。例如，Gmail有一个星形图标，用户可以单击以标记他们重要的电子邮件。本教程演示了如何创建类似的星形图标，以便用户可以单击或轻击以标记他们喜欢的项目。最终的动画将非常简单——从白色渐变到蓝色，但正是这些小细节让产品更具吸引力。

首先，在Figma主页右上角单击“设计文件”以打开一个新项目。 在Figma主页上打开一个新的设计文件，开始您的动画制作。 (Anna Muratova)

步骤1：创建默认的星形图案

在屏幕顶部的工具栏（我们将其称为顶部工具栏）上，点击左侧的形状工具—一个方形图标—以打开下拉菜单。从菜单中选择星形，然后点击在画布上绘制形状。现在，您的画布上应该有一个灰色的星形。

创建形状后，会打开一个面板，您可以在右侧边栏上自定义元素的角度、大小、颜色和效果。调整设置：点击填充字段中的减号以删除灰色填充，选择您想要用于形状轮廓的描边颜色（我在本教程中将其设置为蓝色）。您还可以通过更改汉堡图标旁边的数字来调整线条的粗细（我将其设置为2）。

您已经创建了星形的默认外观。 利用形状工具创建您喜爱的图标的默认外观，并调整颜色和线条设置。 （安娜·穆拉托娃）

步骤2：将星形图标转换为组件并添加一个变体

点击星形图标，然后点击顶部工具栏上的创建组件（钻石图标）将星形图标转换为组件。 将星号转换为组件，方法是点击星号并选择“创建组件”。接下来，添加一个变体，或者一个您可以修改的组件副本。在顶部工具栏中，点击添加变体图标（一个带有加号的菱形）。现在您有一个包含两个星号变体的组件集。双击第二个变体。点击添加变体图标创建一个变体。 点击右侧边栏中的属性（Property）图标（一个小星形图标），然后使用匹配工具或复制颜色代码来将填充颜色匹配为描边颜色。用户点击后，星星会变成第二种变体。

两种星星的变体显示了用户点击前（顶部）和点击后（底部）的外观。

接下来，让我们为这两种变体命名。选择第一个星星。在右侧边栏上，检查属性1字段是否显示为默认。然后点击第二个星星，将属性1字段更改为填充。 使用右侧边栏的设置为每个星级命名变体。 （安娜·穆拉托娃）

步骤 3：使用 Figma 的智能动画功能创建过渡

在右侧边栏的顶部，从设计模式切换到原型模式。选择默认变体，然后将鼠标悬停在其上，直到您看到一个包含加号的小蓝色圆圈在变体的边缘上。

单击蓝色圆圈，将其拖动到填充变体以创建连接。两个星级之间会出现箭头，并且会弹出一个带有交互设置的面板。

在弹出设置中设置以下属性：

• 点击时：第一个设置处 在这里，弹出窗口是动画的触发器。我们希望用户点击时星星会发生变化，因此请确保从下拉菜单中选择点击时。

• 变更为**：** 接下来是触发的动作。在这种情况下，默认星星将变更为填充星星。
• 填充**：** 第三个是目的地，或者星星将变成什么。第二个变体应已设置为目的地，但请确认属性1旁边是否标有填充。
• 智能动画**：** 第四个设置是动画。选项是瞬时、溶解和智能动画。选择智能动画以自动实现无缝过渡。
• 减速**：** 选择星星从默认状态变为填充状态时的过渡类型。选择减速让过渡起步快、结束慢

步骤 4：预览动画 要预览动画，首先需要创建一个帧。首先点击顶部工具栏左侧的区域工具，然后从下拉菜单中选择帧。在画布上，点击并拖动以打开帧，然后将默认变体复制并粘贴到帧中。

在顶部工具栏的右侧，点击原型视图工具，打开一个带有演示和预览选项的下拉菜单。要在新窗口中查看动画，请选择演示；要在当前窗口中查看，请选择预览。一旦预览打开，点击星形图标以测试动画从默认状态到填充状态的变化。 使用原型视图工具检查预览模式中的动画。(Anna Muratova)

以下是动画图标的预览:

用于引导用户的呼吁按钮

接下来，我们将继续利用我们刚刚学到的过程来为呼吁按钮添加动画。再次强调，动画将会很微妙，但我们会添加另一个变体，以创建一个具有三种状态（默认、悬停和按下）的矩形按钮。

步骤1：创建默认按钮

在包含您的收藏图标的相同设计文件中，切换回设计模式。点击顶部工具栏中的形状工具，选择矩形。 在画布中单击并拖动以绘制一个矩形。在右侧边栏中，将填充颜色更改为您喜欢的颜色。

在顶部工具栏上单击“文本工具”，然后在矩形内添加一个文本框。在框中键入“阅读更多”或您想要的文本。在右侧边栏上，根据需要调整文本的大小、字体和颜色。您还可以自定义按钮，例如，调整圆角设置以使按钮具有圆角。

使用选择工具选择矩形和文本框。单击顶部工具栏中的“创建组件”将其转换为组件。接下来，单击“添加变体”，将在原始按钮下方出现一个重复按钮。

然后，选择第二个变体，单击出现的紫色加号。第三个变体将出现在第二个下方。您现在有一个包含三个变体的组件集。

更改第二和 第三个变体。我建议使颜色逐渐加深。我将我的第二个变体改为深蓝色，将第三个变体改为黑色。

在我们继续之前，让我们给这三个变体命名。点击第一个变体，在右侧边栏确认旁边的属性1字段读取默认。选择第二个变体并将属性1更改为悬停。最后，选择第三个变体并将属性1更改为按下。

重复按钮两次，创建三个变体：默认，悬停和按下。 （安娜·穆拉托娃）

第3步：使用智能动画创建过渡 现在我们来创建从默认状态到悬停状态的过渡。在右侧边栏，切换到原型模式。选择默认变体，并将鼠标悬停在其上，直到出现一个带加号标志的蓝色圆圈。将蓝色圆圈拖动到悬停变体上以创建连接。两个变体之间将出现箭头，并弹出一个带有交互设置的面板。

在弹出设置中设置以下属性：

• 悬停时： 我们希望用户悬停在按钮上时按钮变色，所以在第一个下拉菜单中将触发器设置为悬停时。
• 切换至： 动作应设置为切换至。
• 悬停状态： 第二个变体应已设置为目的地，但请确认在属性1旁边是否显示悬停。
• 智能动画： 从动画选项中选择智能动画以自动创建无缝过渡。
• 缓出： 将过渡设置为缓出。 速度: 将过渡速度设置为200毫秒。

重复这些步骤以进行第三个变体。找到悬停变体上的加号，并将其拖动到按下变体上。将触发器设置为按下时，并检查属性1是否为pressed。保持属性智能动画、缓出和200毫秒不变。

设置第二个变体（悬停时）和第三个变体（按下时）的动画设置。（Anna Muratova）

第四步：预览动画

要预览动画，请在画布中创建一个帧。Co 复制默认变体到框架中。在顶部工具栏的右上角，单击原型视图工具，然后选择预览以在同一窗口中查看动画，或选择展示以在新窗口中查看。这将打开一个预览窗口，以便您可以检查按钮从默认状态变为悬停状态再到按下状态。

这是按钮动画的预览：

吸引眼球的产品卡

在最后的 UI 动画教程中，我们将创建并实现一个产品卡片组件的动态效果。卡片（Cards） (opens new window)是非常流行的 UI 组件，用于展示内容摘要并引导用户点击查看详情。我们在本教程中创建的产品卡片，集成了前面制作的“收藏”和“阅读更多”按钮，以演示组件跨项目复用的能力。同时，我们还将为卡片添加悬停动画，以提升视觉吸引力并引导点击。

在本小节中，我们将为产品卡片添加动画，并融合收藏图标与 CTA 行动按钮。

步骤 1：创建默认卡片

在包含这两个按钮的同一个设计文件中，切换回设计模式。点击顶部工具栏左侧的形状工具，从下拉菜单中选择矩形，然后在画布上绘制一个矩形卡片。

我们将使用一张图片作为卡片背景。再次点击形状工具，选择菜单中的置入图像/视频，上传你喜欢的图片并点击绘制的矩形，图片就会自动填充到矩形内部。

然后，添加一个文本框并输入您想要的文本（在本例中，我写了“UI动画课程”）。调整文本的字体、大小和位置，复制我们在前面步骤中创建的默认变体的“收藏”和“阅读更多”按钮，并将它们粘贴到矩形上。在我的卡片中，我将文本框放在左上角，将收藏图标放在右上角，将“阅读更多”按钮放在右下角。

作为一种风格选择，当用户悬停在卡片上时，我希望一条线出现在左下角。为了创建这个效果，使用形状工具，选择线，在矩形旁边的“阅读更多”按钮上绘制一条短水平线。使用右侧边栏自定义线条；我将线条宽度调整为5像素，并将图层不透明度调整为0%，这样线条就不会在页面中显示。

步骤 2：将卡片转化为组件并添加变体

选择所有元素，并使用顶部工具栏上的创建组件图标将它们转化为组件。接下来，点击添加变体。第二个变体将出现在第一个下方。现在您拥有包含两个变体的组件集。

双击第二个变体，然后在顶部工具栏上点击裁剪。您现在可以将图像移动到矩形内，以便卡片中显示不同部分的图像。您也可以使图像变大或变小。其中任何选项都会在动画中创建移动的错觉。

点击水平线。在右侧边栏上，将其不透明度更改为100%，然后拉长该线。

通过选择第二个变体，并在右侧边栏上的属性1旁键入悬停来命名第二个变体。 产品卡片的两个变体展示了其默认外观（顶部）和用户悬停后的外观（底部）。 （Anna Muratova）

步骤 3：使用智能动画功能创建过渡

在右侧边栏中，切换到原型模式。 选择默认变体，并将光标悬停在卡片上，直到出现带加号标志的蓝色圆圈。 将蓝色圆圈拖动到悬停变体上以创建连接。 两个变体之间将出现箭头，并且会弹出一个带有交互设置的面板。

在弹出设置中设置以下属性：

• 悬停时： 当用户悬停在卡片上时，我们希望卡片发生变化，因此从第一个下拉菜单中将触发器更改为悬停时。
• 更改至： 操作应设置为“更改至（Change to）”。
• Hovered: 第二个变体应该已经设置为目标状态，请确认在属性1旁边是否显示 hovered。
• 智能动画: 从动画选项中选择智能动画，以实现无缝过渡。
• 减速: 将转换设置为减速（Ease Out）。
• 速度: 由于这是一个涉及多个组件的较复杂动画，请将速度设置为600毫秒。这样可以使过渡更加平滑，并给用户更多时间来感知动态。

收藏图标和阅读更多按钮将保留您已经为它们创建的动画效果，因此在此步骤中无需进一步调整。

步骤 4：预览动画

要预览动画，请在画布中创建一个帧，并将默认变体复制到帧中。 在顶部工具栏的右上角，单击原型视图工具，然后选择预览以在同一窗口中查看动画，或选择呈现以在新窗口中查看动画。 这将打开一个预览，以便您可以检查卡片是否按预期工作。 通过悬停在卡片上观察线条和背景的变化来测试动画。 单击按钮组件以查看预设动画。

提升用户体验与 Figma 动画

一旦设计师掌握了基本 UI 组件的动画，他们就可以轻松地转移到更复杂的动画，比如滚动触发的动画和动态数据可视化。Figma 的... 动画功能最适合简单图形和UI组件；对于更复杂的动画，比如视频中的动态图形或3D动画，我建议使用Adobe的After Effects或苹果的Motion。

本教程涵盖的UI动画是改善产品可用性的绝佳起点。即使我擅长创建更多复杂的动画，我经常在工作中使用这些简单的效果，因为它们既有效又高效。有时，优雅的简约会产生巨大的影响。

理解基础知识

• 如何在Figma中创建动画？

  要在Figma中为UI元素添加动画，可以利用智能动画等功能来自动化过渡。创建动画后，可以在Figma中预览设计。 * Figma可以用于制作简单的动画图形。设计师可以在Figma中创建过渡效果和交互元素，模拟动画效果。然而，对于更复杂的动画图形，最好使用像Adobe After Effects这样的专业工具。

• Figma动画是免费的吗？

  Figma提供四种订阅级别。基本级别是免费的，允许您在无限的草稿中工作，并同时保存三个文件。免费和付费订阅都使用户能够创建、原型和协作设计和动画。