Figma越来越受欢迎的同时，Figma插件开发者也越来越棒，插件层出不穷！于是各种功能也都在Figma中能实现了，能帮助设计师更好更快的完成任务，今天给大家带来的教程就是关于在Figma中制作平滑动画的教程。
每个UX / UI设计师都需要做一些交互动画动效，今天向您展示一个有趣的Figma插件来完成所有这些工作。它的名字叫Motion。全篇教程是关于插件界面及其使用基础知识！
一、效果展示
我也是今天第一次用这个插件，于是照着该插件作者的教程做了下面简单地demo
二、插件安装及界面简介
1.社区搜索：“Motion”，然后安装它！
2.添加一个新的Figma文件，然后打开插件
3.运行界面
三、教程实践
接下来这部分我就直接照搬插件作者的教程了，尽量给大家翻译的能读顺畅点！
从理论到实践。
让我们创建一个Frame和一个矩形。尺寸和颜色暂时不重要。将矩形放置在靠近框架左上角的位置，以便在右侧留出一些空间来移动它。
现在转到Motion，然后单击X属性上的“添加关键帧”按钮。
我们的动画将持续500毫秒。将粉红色的时间轴手柄移至500ms（0.5s）的位置。
将我们的矩形向右移动，转到“Motion ”，然后再次单击“添加关键帧”按钮。就这样。
单击播放，然后查看您的第一个动画。恭喜你！
使用这些技术，您可以为看到的所有属性设置动画。随时更改Y，Width，Height，Corner半径，Rotation，Opacity和Fill属性。很简单，不是吗？
四.基础
4.1。旋转点
首先，我们应该了解什么是旋转点或锚点。假设我们内部有一个框架和一个矩形。矩形：宽度= 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°。
单击“播放”，看它是否在旋转。
但是，如果将旋转点更改为左上角怎么办？更改旋转点的关键帧无关紧要。这对于该层的所有关键帧都是通用的。
我们将根据图层的左上角进行移动和旋转。
使用左上旋转角移动和旋转
一些更多的例子。
中心旋转点
左上旋转点
右下旋转点
你的figma节目X和Ÿ根据数值左上方层的旋转点的角落，但旋转根据-价值中心点。设置动画时，请记住这一点。但是在大多数情况下，您无需从Motion的中心点更改它。
4.2。缓动功能
缓动功能控制加减速。有4种缓动功能：
- 线性的
- 缓入—开始时加速
- 缓和—最终减速
- 缓入缓出—起点加速，终点减速
这里还有一个选项-步骤。它将立即更改值，而无需任何转换。
让我们尝试一下。我们仍然有矩形从框架的左侧移动到右侧。选择结束关键帧并打开关键帧面板。更改缓动功能并查看结果。
线性的
缓入。启动时加速。
缓和。慢下来。
缓入缓出。开始时加速，结束时减速。
脚步。立即更改。
4.3。复制粘贴
复制和粘贴关键帧也很容易。选择关键帧，按Ctrl / Cmd + C或从所选关键帧的下拉菜单中单击“复制”。之后，您可以将它们粘贴在任何层上。有时，以相同的方式为某些图层设置动画非常有用。
4.4。撤销重做
当然，您可以撤消和重做动画中的任何更改。Ctrl / Cmd + Z代表撤消，Ctrl / Cmd + Y代表重做将为您提供帮助。
4.5。自动更新关键帧
如果此按钮处于活动状态，则在对Motion进行聚焦之后，关键帧值将在当前时间位置自动更新。将插件窗口聚焦后将其延迟1秒，然后按“播放”按钮将窗口聚焦。
因此，您可以添加关键帧，转到其时间位置，对Figma中的图层进行一些更改，然后仅关注插件窗口。运动将做一切。
4.6。预览fps
您可以设置在Figma中实时看到的帧数：24或60。如果动画太慢，可以将其从60更改为24。不用担心这不会影响出口。
4.7。重复
这里有3种能力：
- 不再重复
- 重复
- 重复并暂停
最后一个很有趣。它将在动画结束时暂停1秒，然后重复播放。有时，当您设置重复时，您将看不到动画的最终结果。您希望在开始新的动画圈之前有一个延迟。您可以根据需要添加额外的关键帧。但是Motion提供了这样的工具-重复和暂停。
五、插件制作3个简单的动画
让我们用这个插件制作3个动画。它们很简单，但学习基础知识是一个很好的做法。
5.1. 装载机
添加新的 Figma 文件。创建帧：宽度= 300，高度= 300。创建矩形：宽度= 200，高度= 20，x = 50，y = 50。
选择我们的矩形。转到”Motion “，在 0ms 时间位置添加“宽度”关键帧，在 500ms 时间位置添加一个”宽度”关键帧。
确保自动更新关键帧处于活动状态。转到 0ms 时间位置，并在 Figma中将矩形宽度更改为 0。您会注意到，它将设置为 1。最小值为 0.01，但 1 现在就足够了。转到 Motion，在 1s 中，它会通知您 1 个关键帧已更新。
如果将缓动函数设置为缓动，动画看起来会更加自然。选择结束关键帧，双击它以打开关键帧面板。你会看到 “线性“缓动函数。将更改为”轻松”。
单击”播放“。
现在转到 500ms 。此时位置我们的矩形是宽的，因此我们可以轻松地与它交互。我们必须复制我们的矩形，旋转它 -90°，并像把它放在图像上。
单击”播放“。
为什么第二个矩形没有动画？原始图层的关键帧不会自动复制到新图层。因此，我们必须复制第一个矩形关键帧并将其粘贴到第二个矩形关键帧。
选择我们的第一个矩形，转到”运动”，选择我们的关键帧，然后单击Ctrl/Cmd+C，或从任何关键帧的下拉菜单中选择”复制”。
现在选择我们的第二个矩形，转到”运动”，然后单击 Ctrl/Cmd+V，或从时间线上任何位置的下拉菜单中选择”粘贴”。将粘贴两个关键帧。
只是一些点击，你有2个动画矩形。很简单
让我们复制第二个矩形，旋转它，从上一个矩形复制关键帧并将其粘贴到新的矩形。之后，对最后一个矩形重复相同的步骤。你应该有类似的东西：
我们使用了一些棘手的技巧。当然，你可以做矩形。对于水平的，你可以动画宽度和垂直 +高度。但是我们让事情更快、更容易。
5.2. 跳跃圈
现在，我们将做一个简单的动画跳跃圈。添加新的 Figma 文件。创建帧：宽度= 300，高度= 300。创建一个圆圈：宽度 = 100，高度= 100，x = 100，y = 100。
转到”运动”，在0ms和 500ms时间位置为 Y 和高度添加两个关键帧。
选择结束Y 关键帧并将其值更改为 275，对”高度”与值_50 重复相同的”单击”播放“。
看起来没那么自然因此，我们的圆圈应该向下移动，然后触摸底部，只有在之后才能改变其高度。
在 700ms时间位置为”高度”再添加一个关键帧，值为 50。将”高度”的上一个关键帧_更改为 100。
看起来更好， 但不好。在 700ms时间位置上添加一个 Y 的关键帧，使用 275，并将前一个帧更改为 250。
单击”播放“。
现在，我们应该将 Y 和高度缓动函数的最后一个关键帧从线性更改为缓动。
单击”播放“。
看起来好多了， 但是太慢了。让我们提高速度。将关键帧移近起点。动画将运行得更快。您可以使用左键/右键将关键帧移动 100 毫秒。如果持有Shift 关键帧，则移动 500 毫秒，Ctrl/Cmd移动 10 毫秒。
单击”播放“。
现在，让我们将圆移动到其原始位置。在 Y 和 Height 的 500ms时间位置添加关键帧，值为 150 和 100，使用缓动缓动功能。
单击”播放“。
相当不错的跳跃圈。随意让它更自然。您可以添加几个跳跃，从底部淡出距离。自己试试吧
5.3. 消息
让我们为弹出消息设置动画。创建框架、矩形和文本。大小现在并不重要。为了将它们设置动画，我们必须将矩形和文本分组，或将它们放入新框架中。
如果把它们放在一个新的框架里，这很好。在本文的下一部分中，我们将了解为什么最好使用框架而不是组。
转到”运动”，在 0ms 和 500ms上添加Y和不透明度的关键帧。
转到 0ms，将帧向下移动 30，并将其不透明度更改为 0%。确保自动更新关键帧处于活动状态。转到 Motion 并等待 1，直到关键帧更新。现在转到 500ms，将关键帧缓动功能更改为缓出功能。
单击”播放“。
不错的弹出消息。
六. 结论
在这里，我们学到了很多关于动画在菲格玛。现在，你有时间练习，使你的酷动画。下次我们将学习如何与社区和开发人员共享。我们将学习如何将动画导出到 GIF、雪碧、帧或 CSS。当然，我会告诉你一些新技术，并解释为什么你应该使用框架，而不是组。
七、写在最后
个人总结就是：此插件做一些基础的动效还是比较不错的，插件需要靠自己多次实践，光看教程也不一定会；
如果您觉得此文章对您有帮助，请帮忙点下面的赞！感谢！
更多关于Figma的相关文章教程请关注我看到最新文章推送！
若有收获，就点个赞吧
0 人点赞
