动画可以通过引导导航、指示任务进度以及对用户操作提供反馈，从而提高网页或移动界面的可用性。特别是对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旁边是否标有填充。
• 智能动画**：** 第四个设置是动画。选项是瞬时、溶解和智能动画。选择智能动画以自动实现无缝过渡。
• 减速**：** 选择星星从默认状态变为填充状态时的过渡类型。选择减速让过渡[起步快、结束慢](https://help.figma.com/hc/en-us/articles/360051748654-Prototype-easing-and-spring-animations#:~:text=can%20feel%20sluggish.-,Ease%20Out,well% * 速度：最后一个设置是过渡的速度，以毫秒为单位。将速度设置为200毫秒（0.2秒）。这可能看起来很快，但这个节奏符合用户的期望。没有人希望在每次UI交互后都要看到冗长或繁琐的动画。

After you create a connection from the default to the filled variant, adjust the animation settings.（Anna Muratova）

从默认到填充的过渡已经完成——但是如果用户想要取消收藏一个项目或取消标记一封电子邮件，接下来该怎么办呢？ 将星标还原为默认版本？

要启用此操作，请创建另一个转换，这次是从填充到默认。选择并悬停在填充变体上，然后单击并拖动带有加号的蓝色圆圈到默认变体。在弹出设置中，保持与上一个动画相同的属性，只需将属性 1 更改为默认。

要使用户可以取消收藏项目，请从填充到默认变体创建连接，然后调整动画设置。 (Anna Muratova)

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

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

以下是动画图标的预览:

用于引导用户的呼吁按钮

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

步骤1：创建默认按钮

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

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

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

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

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

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

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

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

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

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

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

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

第四步：预览动画

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

这是按钮动画的预览：

吸引眼球的产品卡

在最后的UI动画教程中，我们创建并动画显示一个产品卡。卡片 (opens new window)是流行的UI组件，显示信息快照并链接到页面。我们在本教程中创建的产品卡。 ial incorporates the Favorite and Read More buttons to demonstrate how components can be reused across projects. We also add a simple animation to the card that helps entice clicks.

In this tutorial, we animate a product card and incorporate the Favorite icon and CTA button. (Anna Muratova)

Step 1: Create the Default Card

Working in the same design file that contains the two buttons, switch back to design mode. Click the shape tool located on the left side of the top toolbar and select the rectangle from the drop-down menu, then draw a rectangle in your canvas.

We use an image for the background of this 点击形状工具，再次选择菜单中的放置图像/视频，并上传您想要的图像。点击您绘制的矩形，图像将出现在形状内部。

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

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

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

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

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

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

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

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

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

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

收藏图标和阅读更多按钮将保留您已经为它们创建的动画效果，因此在此步骤中无需进一步调整。 第二个变体（悬停时）的动画设置。 （Anna Muratova）

步骤4：预览动画

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

这是卡片动画的预览： 提升用户体验与 Figma 动画

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

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

理解基础知识

• 如何在Figma中创建动画？

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

• Figma动画是免费的吗？

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