* { box-sizing: border-box;} body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}。
我喜欢在Figma中创建平滑的过渡，无论是概念还是最终设计。但是，要想对缓和类型进行更精细的控制，您应该将Figma导出到Adobe After Effects中，并在那里完成工作--让我来告诉您吧
在 Figma 和 Adobe After Effects 中实现平滑过渡
应用程序和网站中的平滑过渡是动作设计真正可以发挥的地方。它们在增强交流的同时，也为用户的体验带来了一定程度的愉悦。
在一个典型的用户体验设计工作流程中，当我们接近交付阶段，准备将文件交给开发人员时，我们会在工作中完善和改进动作。Figma 会为我们做很多这样的工作，我们可以添加标签和评论，以传达我们的意图是什么。但是，为了创造真正流畅的过渡和高保真的原型，我们可以将Figma文件移到After Effects中。
界面过渡实例
上面的视频是本教程中动作设计的最佳示范，但这里也有一个快速的文字解释。
为了证明Figma和After Effects能给你带来更好的最终效果，我们将使用这个简单的UI模型。这是一个金融应用程序，它显示用户的余额，显示每月的活动，并有一个画布外的导航来寻找更多的选项。
我们想做的是将用户界面的每个元素逐一建立在屏幕上，以引导用户按顺序查看什么。我们还需要菜单块在屏幕上滑动，并在用户选择时滑出屏幕。
在Figma中进行原型设计
在 Figma 中完成这项工作的最佳方法是从终端屏幕开始倒退。所以你可以看到，我在这里将屏幕向左复制了一次，然后将月度活动块移出屏幕。然后我又复制了这个屏幕，并把欢迎块从那里移开。
然后，我们在 Figma 的右侧菜单中点击 Prototype，并开始拖动箭头，将每个屏幕连接起来。对于第一个链接，你会看到我选择在800ms的延迟后触发它。这是一个即时过渡，所以不需要任何用户互动就可以开始。
设置导航链接
我们创建的第一个过渡都是自动触发的，每个过渡都有一个延迟，以便一点一点地构建屏幕。
然而，导航块将在 "汉堡包 "按钮被点击时过渡到屏幕上。所以我们选择点击时，并选择打开叠加。
然后我们在关闭按钮上设置一个关闭叠加动作。
为我们的转场添加智能动画
如果您现在在Figma中运行这个原型，您会发现一切都按部就班地进行，但这些元素只是 "突然 "出现在屏幕上。没有方向，让用户感到很迷茫。用户并不清楚事情从何而来，完成后又将去往何处。
通过回到 Figma 原型设计器中的箭头，我们可以将它们从即时变为智能动画。
有了这个智能动作的加入，现在可以清楚地看到每个元素的来源。
智能动画对运动施加了缓和，使运动具有真实性。
通过指定缓和度更进一步
缓和描述了一个物体加速的速度，达到其最高速度，然后减速。在数字环境中，如果没有缓和，动画元素将以线性方式移动。它们会以最高速度开始，在整个动画中以同样的速度进行，然后简单地停止。缓和使移动的物体具有更真实的、现实世界的感觉。
这三张图表以图形的方式展示了你在UI设计中要使用的主要缓和类型。
进入缓和是你在把东西带到屏幕上时通常使用的方式。退出缓和是相反的，用于把东西从屏幕上拿下来。标准缓动是您可能用于保持在屏幕上的元素，但由于某种原因而移动。
虽然 Figma 的智能动画采用了默认的缓和方式（这对我们的需求来说很好），但我更喜欢用更多的细节来设计我的动作。通过自定义的贝塞尔曲线，我们可以准确地定义我们的运动加速的速度，以及它结束的速度。
总的来说，这使我们原型中的元素有了更真实的过渡。
Figma（不幸的是）还不允许自定义贝塞尔曲线用于打开和关闭叠加的过渡。
在 Adobe After Effects 中实现更好的过渡
Figma 在为我们构建交互式原型方面做得非常好，动作相当真实，但我们可以使用 After Effects 进一步完善。
例如，我们在 Figma 中还不能做的一件事是将延迟的元素重叠起来。我们必须等待一个过渡完成后才能触发另一个过渡。这很可惜，因为我们希望屏幕的构建感觉像一个协调运动的大块头，而不是单独的项目。
将设计从Figma导出到After Effects
虽然我们在 Figma 中没有这种水平的控制，但在 After Effects 中却有。因此，一个典型的 UI/UX 设计工作流程是，当设计接近完成时，将这种东西转移到 AE 中。
要把我们的工作转移到AE上，我们可以使用一个叫AEUX的Figma插件，你可以从开发者的网站上下载，然后通过插件>管理插件......菜单导入到Figma。它还不能通过 Figma 社区使用，所以安装后您可以在插件 > 开发中找到它。
点击几下，您就可以将 Figma 文件直接导入 After Effects，虽然您可能会注意到有些东西有点不合适（您可以通过调整有罪元素的位置来解决这个问题），但所有东西都会沿着时间线整齐地排列在各层。
在After Effects中制作动画
我们带入After Effects的元素都在自己的图层中，但我们在Figma中创建的动作却没有被带入。我们必须自己动手，在时间轴上为每个我们想做动画的对象添加关键帧。让我们把欢迎仪式和每月活动块做成动画。
- 选择你想做动画的图层/元素。
- 点击P代表位置，然后点击小的秒表图标，在播放头在时间线上的位置设置一个关键帧。
- 我在时间线的开头和几秒钟后添加一个关键帧。
- 在为每个区块设置了两个关键帧后，将播放头移回第一个关键帧，并将元素移出屏幕。
- 我们现在有了一些动画
不过你会注意到，我们的运动有点奇怪。默认情况下，AE已经添加了线性缓和，这看起来非常不自然，正如我们前面提到的。
轻松缓和关键帧
为了解决这个问题，选择第一个对象的两个关键帧，然后按F9键，把它们变成 "轻松缓解 "关键帧。
这将给我们的元素提供一个轻松的动作，但我们可以在此基础上进行改进。
分离尺寸
时间线左上方的小图表图标让我们可以访问定义缓和类型的曲线。但我们不能从这里编辑它，因为它同时引用了X和Y轴。因此，为了获得玩耍的机会，我们首先需要右键单击图层名称，然后进入分离尺寸。现在，当我们点击X位置时，我们可以根据自己的喜好编辑曲线。
作为最后的改进，错开月度活动块，使其在欢迎块之后（但在完成移动之前）进入屏幕，你将有更有效的动作设计传递给开发者。
提示：用于After Effects的Flow插件
为了更好地帮助你，我建议你看看After Effects的Flow插件（30美元）。来自开发者的网站。
"Flow为After Effects带来了一个简单的界面，用于定制动画曲线，而不需要冒险进入陈旧、混乱的图形编辑器。缓慢、沉重的表达方式，或与速度和影响作斗争的日子已经一去不复返了（这些都是什么意思？
有了Flow带来的额外工具，你可以更好地控制你的曲线，保存你最喜欢的运动曲线并将它们应用于多个元素。
总结
我希望这篇文章能帮助你理解，通过在Figma中开始工作，然后让After Effects将事情提升到一个新的水平，你可以给你的原型和运动设计带来额外的精细度。After Effects可以帮助我们在用户体验工作中获得更多的细节和精度。
