谷歌设计团队发布了一款动效神器，让 UI 和动效无缝打通！

编者按：Google 设团队了好推 UI 动效设，自己发过不少新的具，打通 Sketch2AE 其中之一，如今的 AEUX 也了相似的目的存的一全新升级的动效具~

动效在设计要性是毋庸疑，它可以提供背景信息，可以指引用户进交互和操作，提供有效导航线索。是，想要将个全新领域和信息合到既定、已有 UX 设计流程来，并不是那么容易。

在 Lottie 这的动效渲染工诞生之前，哪怕是距离现在近的 2016 年，现在来觉依然像是一个UX动效的黑暗代，即便那个候已经有多新的计模式。为 AE 准备视觉素材通常味着要用 AI 来先制作相应的素材，经过复杂的导入和转换，经过大量不可避免的重计、调整，这种不可预期的情况多了，以至于计经常因此超出 Deadline 。

为了尽可能地消除动效制作过程中可能存在的无用的步骤，在 2016 年中期开始在 Google 内部构建一个名为 Sketch2AE 的内部工，它本质上是第一个在不同应用中间传输图层息的工。但是它并不仅仅是一个文件导入器，它还是一个将间重新还给动效计的工。2017 年，它对外公开发布，并且帮助了多计进行 UX 的动效计，以及借助 AE 进行视觉计的计。

Sketch2AE 中复古的图层传输过程

其从 Sketch2AE 个时开始，UX动效设计领域已经逐渐开始成熟。现在，许设计团在设计的时，已经开始思考，信息是随着时间推进，验上有哪改变。自从 Sketch2AE 诞生以来，动效设计师大和视设计师一同协，在不断迭代程中，寻找成功的决方案，而也不断推进着工具的展，新的工具当中逐渐集成设计师所需要的功能。

现在，我非兴够同大分享 AEUX 这款工具。这是一个更强大的设计系统，来在 After Effect 中进行 UX 效设计。

Guide to Material Motion in After Effects

欢迎使用 AEUX

系统的目标之一是支持更多流应，方在团队各个成员之间的协作的灵性。如今在 Adobe 的生态系统中，XD 和 AI 已经可很好地进行数据上的共享和交换，但是在生态之外数据的共通性就没那么好了。但是，如果借助 AEUX，你可从 Sketch 和 Figma 来导入图层，并且支持 Sketch 最的功。除此之外它还有这些特色：

• 创建复画板的速度提升93%
• 支持符号嵌套和本的符号嵌套。可更效地定位 symbol masters。
• 通过绘制原的AE渐变以及减少冗余图，减少图输出。
• 过位控制、跟踪、引导、大小写覆盖、旋转、翻转等功能加入，极大地提升于文本图层精度控制。
• 能够像 AE Precomps（再成） 那来动创建群组。即使你不实用 AEUX 导入器，也可以通过击来执行再成相关的操作。
• 包含其他的新功能，比嵌套尔、图和群组蒙板、形状模糊、路径和参数形状等选项。

戳这下载 AEUX

AEUX + Figma

虽然如今 Sketch 已经被广泛地运用，但是越来越多的视觉计开始使用 Figma了。AEUX 旨在帮助更多的队进行无缝地作。

Figma 的核心功能是在协，因此导图数据是通一个接 Figma API 的 web 应用来完成。截至目前，Figma 的插件还无法在设计境中运行，意味着图的导导出还是只能以更为传统的方式来进行。使用在运行的程序，最大的问题始终是关安的因素。

在验证过 AEUX 的导 APP 之后，系统会要求你输入 Figma 的档 url，这个 APP 会随即搜集好每一帧（画）中有的数据，每一帧都可单独载。任何需要的图片将被处和压缩，将的 AEUX.json 件拖放到到 AE 中的 AEUX 面中，然后图层就会构建起来。

注意：AEUX 应会跟踪户数据，会任何方式来查看或者存储你的设计。它会在本地帮你将浏览器中的设计转换为 AEUX JSON 的格式。件数据的访问权限是归数据的有者拥有。

我所学到的经验

基于自己对于他设计师的工作方式的想象，来构建一款设计工具可是很困难的事情。有时候，你的意图和想法可并具备真正的值，又或者你精心考虑的设计路径并没有别人勾画的好。实际上，我在构建 Sketch2AE 过程中到的东西，开发 Overlord （一款商插件）过程中的更多。

我这些项目中所获得的重的教训，限制智模型切换的数。如果人试图设，就让他们设下去，不强迫他们去阅读使用手册教程。

远离复杂的复制/粘贴模式

以的机制不同，新具中，我们选择使用后台传输图层数据，以避免混淆。它们并不完全实时的，但当从 Sketch 切换到 AE 的时候，图层面板会显示准备构建新的图层，这种机制简化了传输过程，让加专注于设本身。

更优的交互性

对我来说，整个设计过程中最令我印象深刻的地方，是最为神的地方，就是试图到哪些东西是有的，哪些是无效的。这和件导入本身是截然同的，通件导入的时候如果了差错，就必须重导入全容。但是 Overlord 的核心念非同，户在需要的时候才传输必要的数据和容。我希望这种念够成为 AEUX 的核心念，户彻远离复杂菜单和插件面之类的东西，户够享和预期中 AE 相匹配的体验。

告知户正在发生的事情

在之前的版本中，数据的同步和导仅仅是在成之后推送通知，并且是在 Sketch 的口显示，很容易错过。这导致很多户在导入数据的过程中，需要一直盯着，害怕错过信息。（这个设计确实非糟糕，对此我很抱歉）

 Sketch 中新的悬浮面板导入通知提供了专门的置，并且这种设也都延续到 AE 当中。从内新、度条显示到无法绘制元素的提醒，一应俱全，都会清晰明呈。

继续向前进发

UX 动效设不断发展，我们仍试图寻找合理的设，确哪些方法技效的、哪些无效的，确如何找到好的设方法。我希望我们所创造的 AEUX 能够帮推动效设，拥加顺畅的设流程。