是的！Figma也可以用时间轴做超级流畅的动画了

静电说：继昨天我们发布了Figma下的一款超神奇的抠图插件后，今天静电再次为大家带来一款Motion插件，它可以在Figma中做帧动画。在通常情况下，Figma中是没有时间轴的，因此只能使用Smart Animate做一些补间过渡动画，而要做一些更流畅且具有更多细节的动画，Figma则显得有点无奈。不过没关系，今天，我们为大家介绍使用Motion插件在Figma中来完成超流畅动画的案例。一起来看Pavel Babkin的这篇文章。

每个UX / UI设计师都需要时刻对其设计进行动画处理。我们应该选择哪些工具在UI中进行一些交互，添加一些令人惊叹的效果或为手机游戏设置一些角色的动画呢？

我将向您展示一个有趣的Figma插件来完成所有这些工作。它的名字叫Motion。我们将快速概述其界面，学习动画基础知识，甚至制作一些很酷的东西。

001.安装Motion插件

首先要安装插件，打开Figma的社区，并搜索Motion，当然也可以直接在我们的公众号 静Design的聊天窗口 输入关键字“Motion”获取下载地址。

搜索到后，只需点击安装按钮即可。

接下来我们添加一个新的Figma文件，从下拉菜单中选择Plugins / Motion。会打开如下的面板。

002. 如何使用？

接下我们看看如何使用它。这个界面是不是非常像Figma的UI？嗯，它对新用户非常友好。

在顶部有一个选项卡，它们是动画名称，下面是工具栏，左侧面板以及带有关键帧的时间轴。您可以为任何文件添加很多动画。

接下来让我们快速看看工具栏按钮。

工具列

自动更新关键帧

预览FPS：24或者60

重复：不重复/重复/重复和暂停

播放/停止

当前时间位置/总时间

在左侧面板中，我们可以按名称搜索图层和/或使用关键帧过滤图层。如果在Figma中未选择任何内容，则可以看到文件的图层，但是没有子图层。有时候图层比较多，只需搜索您需要的图层或在Figma中选择图层，列表就会显示所有子图层。

左面板

在时间轴面板中，我们会看到所选图层的所有关键帧。

时间轴面板

添加关键帧

在当前位置添加关键帧

导出：借助它，您可以将任何图层导出到GIF，Sprite，Frames或CSS。

导出到GIF，Sprite，Frames或CSS

如果您在团队中工作，则有权访问文件并运行Motion的每个人都会看到您的动画。与将在代码中实现动画的团队和开发人员进行交叉使用非常有用。

双击任何关键帧将打开关键帧面板，您可以在其中设置旋转点，值和缓动功能。

关键帧面板

3. 热身！制作第一个动画

让我们创建一个Frame和一个矩形，尺寸和颜色暂时不重要。将矩形放置在靠近Frame左角的位置，以便在右侧留出一些空间来移动它。

现在转到Motion，然后单击X属性上的“添加关键帧”按钮。

我们的动画将持续500毫秒。将粉红色的时间轴手柄移至500ms（0.5s）的位置。

将我们的矩形移到右侧，转到“运动”，然后再次单击“添加关键帧”按钮。

点击播放，然后就可以看到Figma中的矩形开始动啦！恭喜！

通过这种方式，您可以为看到的所有属性设置动画。随时更改Y，Width，Height，Corner半径，Rotation，Opacity和Fill属性。很简单，不是吗？

4. 进阶操作

4.1 旋转点

首先，我们应该了解什么是旋转点或锚点。假设我们内部有一个Frame和一个矩形。矩形：宽度= 100，高度= 100，x = 100，y = 100，旋转= 0°。接下来转到“Motion”面板，然后为X属性添加关键帧。

在新的关键帧上双击。现在，我们看到了具有某些属性的关键帧面板。在这里，您可以建立一个旋转点或锚点，一个属性值或渐隐特性。在Figma属性面板中，我们定义X等于100，但是在这里图上的却是150。为什么？

关键帧面板上X=150

属性面板中X=100

其原因是旋转点，该旋转点由X和Y轴设置为中心。因此，位置为：X +（宽度/ 2）= 100 +（100/2）= 150。如果要设置与Figma相同的值，则应选择旋转点的左上角。

让我们沿着X轴将其向右移动100像素，然后将其旋转-45°。

单击“播放”，看它是否在旋转。

但是，如果将旋转点更改为左上角如怎样呢？更改旋转点的关键帧无关紧要。对于该层的所有关键帧都是通用的。

我们将根据图层的左上角进行移动和旋转。

将旋转点改为左上角后的移动效果

通过下面的动图，大家可能看的更清楚一些。

中心旋转点

左上旋转点

右下旋转点

4.2缓动功能

缓动功能控制加减速。有4种缓动功能：

1. 线性的
2. 缓入—开始时加速
3. 缓和—最终减速
4. 缓入缓出—起点加速，终点减速

在这里还有一个选项-Steps。它将立即更改数值，而不会进行任何转换。让我们尝试一下，我们依然选择将矩形从Frame的左侧移动到右侧。选择最后一个关键帧并打开关键帧面板，然后更改缓动功能并查看结果。

线性运动

缓入，启动时加速

缓出，慢下来

缓入缓出。开始时加速，结束时减速。

瞬间移动

4.3复制粘贴关键帧

复制和粘贴关键帧也很容易。选择关键帧，按Ctrl / Cmd + C或从所选关键帧的下拉菜单中单击“复制”。之后，您可以将它们粘贴到任何层上。有时，以相同的方式为某些图层设置动画非常有用。

4.4 撤销/重做

当然，您可以撤消和重做动画中的任何更改。Ctrl / Cmd + Z代表撤消，Ctrl / Cmd + Y代表重做。

4.5 自动更新关键帧按钮

如果此按钮处于活动状态，则在对Motion面板进行聚焦之后，关键帧值将在当前时间位置自动更新。将插件窗口聚焦后将其延迟1秒钟，或按“播放”按钮将窗口聚焦后，会有1秒钟的延迟。

因此，你可以添加关键帧后，选择适当的时间位置，然后在Figma中对其中的图层做任何更改，Motion面板会自动记录这种更改。

4.6 预览FPS

您可以设置在Figma中实时看到的帧数：24或60。如果动画太慢，可以将其从60更改为24。不用担心，这不会影响导出效果。

4.7 重复

这里有3种效果：

1. 不再重复

2. 重复

3. 重复并暂停

最后一个“重复并暂停”很有趣。它将在动画结束时暂停1秒，然后重复播放。有时，当您设置重复时，您将看不到动画的最终结果。您希望在开始新的动画圈之前有一个延迟。您可以根据需要添加额外的关键帧。但是Motion为您提供了这样的工具-重复和暂停。

005.实例演示

接下来我们来使用Motion插件做3个动画，他们非常简单，但是学习基础知识是一个很好的习惯。

5.1 加载动画

创建一个新的Figma文档。然后再创建一个Frame，宽高为：300*300。创建一个矩形，宽高为200*20，X=50，Y=50。

选择这个矩形，然后打开“Motion”面板，然后为0ms时间的位置的宽度添加关键帧，然后在500ms处再添加一个关键帧。

确保自动更新关键帧处于活动状态。转到0ms时间位置，然后在Figma中将矩形宽度更改为0。您会注意到它将被设置为1。最小值为0.01，但是1足够了。转到Motion，然后在1秒内它将通知您1个关键帧已更新。

如果将缓动功能设置为缓出，动画将看起来更加自然。选择结束关键帧，双击它以打开关键帧面板。您将看到“线性”缓动功能。将其更改为“缓出”。

点击播放按钮

现在到500ms的位置上。此时，我们的矩形比较宽，因此。可以轻松地与其进行交互。将矩形复制，然后旋转-90°，将其放在Frame内。

点击播放。

为什么第二个矩形没有动画？原始图层的关键帧不会自动复制到新的关键帧。因此，我们必须复制第一个矩形关键帧并将其粘贴到第二个矩形关键帧。

选择我们的第一个矩形，转到“Motion”，选择我们的关键帧，然后单击Ctrl / Cmd + C或从任意关键帧的下拉菜单中选择“复制”。

现在，选择我们的第二个矩形，转到“Motion”，然后单击Ctrl / Cmd + V或从时间轴上任何位置的下拉菜单中选择“粘贴”。此时会粘贴两个关键帧。

只需单击几下，您就会搞定这个矩形动画。很简单。

让我们复制第二个矩形，旋转它，从上一个复制关键帧，然后将其粘贴到新的矩形中。之后，对最后一个矩形重复相同的步骤。此时，一个完整的动画就制作完成了。

5.2 弹跳球

现在我们来做一个弹跳球的动画。创建一个新的Figma文件，并创建一个Frame，宽高为300*300。创建一个圆，宽高为100*100，X=100，Y=100。

转到“Motion”，然后在0ms和500ms时间位置上为Y和Height添加两个关键帧。

选择结束的Y关键帧并将其值更改为275，对“高度”重复相同的操作，将其值设置为50。单击“播放”。

看起来不太自然。因此，我们的圆圈应向下移动，然后触摸底部，然后再更改其高度。

在700ms时间位置上为高度再添加一个关键帧，值为50。将先前的高度关键帧更改为100。

看起来好了那么一点，但还不够完美。在700ms时间位置为275添加Y的另一个关键帧，并将上一个关键帧更改为250。

点击播放。

现在，我们应该将Y和Height缓动函数的最后一个关键帧从Linear更改为Ease-out。

点击播放。

看起来好了一点，但是太慢了。让我们提高速度。将关键帧移近起点。动画将运行得更快。您可以使用向左/向右键移动关键帧100ms。如果按住Shift键，关键帧将移动500毫秒，而Ctrl / Cmd将移动10毫秒。

点击播放。

现在，让我们将圆移到其原始位置。加上宽度为500ms的时间位置的关键帧（Y值），高度值150，和缓动消失动画。

点击播放。

相当不错的小球。为了让其更加自然，我们可以再为其加更多的细节。自己尝试一下吧！

5.3 信息弹层

接下来做一个信息弹层。首先创建一个框架，一个矩形和一个文本。尺寸不重要。为了使他们全部动起来，我们必须把矩形和文本放置在新的框架中。

但为什么不是组呢？我们会在下文说明。

转到“Motion”面板，在0ms和500ms上添加Y和不透明度的关键帧。

移至0ms，将帧下移30并将其不透明度更改为0％。确保自动更新关键帧处于活动状态。转到Motion并等待1秒钟，直到更新关键帧。现在转到500ms，并将关键帧缓动功能更改为缓出。

点击播放，赞！不错的弹出消息层。

006 .结论

今天，我们在这里学到了很多有关Figma中动画的知识。现在，您有时间练习并制作出色的动画。下次，我们将学习如何将动画导出到GIF，Sprite，Frames或CSS。请期待我们下次的推文。