https://zhuanlan.zhihu.com/p/62623169

插件安装

如何将 Sketch 文件导 入AE
Sketch 凭借这轻量、高效、易于上手、海量脚本等特点，现在已是UI设计师使用频率最高的软件之一。平时使用 Sketch 做好设计稿之后，除了无缝导入 Principle 、Flinto做交互动效之外，有时候还需要导入 AE 做一些复杂的动效设计。
那么，接下来我们一起看下如何将 Sketch 文件导入 AE。
首先，我们需要安装一个插件，来自 Google 团队开发并维护的 AEUX(更名之前叫Sketch2Ae)
可以在脚本官网自行下载来获取脚本：https://aeux.io/下载解压之后你会得到两个文件，即“AEUX.sketchplugin” 和 “AEUX.zxp”。
image.png
“AEUX.sketchplugin”是Sketch插件，双击即可直接安装，比较简单。“AEUX.zxp”文件是 AE 扩展文件，安装方法略微麻烦一点，需要借助一个扩展安装器才能完成。
我们 AE 里用到的其他扩展都可以使用该安装器来安装，例如用来动效落地&交接的 Bodymovin、Flow，安装方法是一样的，这里以 AEUX 做为演示案例。
AE 扩展安装器可以通过这个网址下载：https://aescripts.com/learn/zxp-installer/
可以在官网看到两个系统的版本都有，大家按照自己的系统来下载即可。
image.png
安装完成 ZXP Installer 这个扩展安装器之后，打开，然后将“AEUX.zxp”文件拖进安装器窗口即可自动安装，或者使用快捷键“Cmd + O”打开扩展文件。
image.png
如上图，安装器打开之后有个提示窗口，这里无需理会，可以点一下“CLOSE”按钮，完成之后会出现以下提示框，即表示安装成功。
image.png
然后，可以在 AE 的“窗口”菜单栏的“扩展”选项里找到名称为“AEUX”的扩展，Sketch的插件可以从“插件(Plugins)”里调出来。
image.png

文件导入

这里有两种方法导入，第一种是点击“Send selection to Ae”，即可直接将选中的图层&画板内容导入到 AE ，该过程在幕后传输，比旧版本速度更快也更稳定。
第二种方法是点击“Export AEUX.json”，此时会在电脑生成一个名为“AEUX.json”的文件，此时将“AEUX.json”文件拖入 AE 内的 AEUX 面板上方红色区域，或者在面板中点击“曲别针”按钮载入“AEUX.json”文件即可。
image.png
二种方法并没有太大的区别，第二种方法多了一个用途，例如将导出的文件发给没有Sketch 的电脑使用。
接下来将对 AEUX 面板中其他的功能做个介绍

Sketch 插件 AEUX 面板

1. Detach symbols
Symbol(组件) 导入到 AE 里会以预合成的形式存在，如果出现错位&变形的情况，可以使用该按钮，将 symbol(组件) 解除之后再导入。
2. Flatten shapes
AEUX 支持布尔运算的导入，但是在一个组中混合不同的运算符（如添加然后减去 ），AE 并不一定能够正确还原，所以较为复杂的布尔运算图形，可以先点击 Flatten shapes 合并布尔运算图形，然后再导入 AE 。
3. Images to symbols
如果发现导入到 AE 的文件出现了裁剪&位移的情况，需要在 Sketch 导出前点击 Images to symbols，AEUX 只能导出它在画板上看到的内容，如果在 sketch 内图像的一部分超出画板边界，将会被裁剪。

AE 扩展 AEUX 面板
image.png
可以看到，上图中我导入了一个首页的设计稿，图层数量多达168个，如此多的图层是不方便我做动效设计的，所以接下来我们一起看看这个“AEUX”面板里的参数，调整到适合做动效的样子。

1. New Comp
“New Comp”选项是会使用 Sketch 的文件创建一个新的合成，选择该选项之后会自动按照 “Come size multiplier”设置的几倍图参数，导入在 Sketch 内选择的内容并创建新合成。

2. Current
而“Current”是在当前的合成内导入文件 Sketch，如果已有合成或者已经导入一次，后续再需要导入选“Current”会更便捷。

3. Options
该选项下有三个参数：
“Detect parametric shapes” 检测形状参数，勾选之后导入的形状会保留圆角跟大小属性，在AE内展开形状图层的“内容”即可看到。
image.png
不勾选导入的形状会已路径的形式存在，不能更改圆角属性，两者各有各的好处，这个再后续的 AE 章节会讲到。
image.png
“Precomp groups” 将群组创建成预合成，经过测试发现，勾选之后跟没有勾选没什么区别，都不能自动把sketch内的群组建立成预合成，可能是这个版本存在的BUG，只有它跟下一个选项“Auto build artboards”关联使用才有效果。
image.png

“Auto build artboards”自动创建画板，勾选之后在 Sketch 里点击 “Send to Ae”，AE 内容会自动创建预合成，不勾选在 AE 的“AEUX”面板顶部拖入框内有一段文本提示，如上图会显示你本次导入的图层个数。

此时，“Precomp groups”这个选项就起作用了，勾选之后点击顶部的 “BUILD COMP”按钮，则会把 Sketch 内的群组创建到预合成内，不勾选则图层是展开的列表。

4. Groups
“Groups”版块有四个选项：
“Convert to precomp”：创建合成
这个功能不是说随便选中某一个图层，只要一点击就可以将它们建立一个新的合成，而是要选中图层列表里已经变成参考线图层的父级图层，就是下图中图层名称前面带蓝色“＃”的图层。
image.png

如果你是对整个合成里面的所有图层都做创建预合成操作，也不用在这100多个图层列表里一个个去找，只需要“Cmd + A”全选，然后点击“Convert to precomp”即可全部搞定。
“Un-Precomp group”：将合成解除，变成图层列表
跟上一个功能刚好相反，有时可能对一些合成内部内容单独编辑，不使用预合成会更方便，即可选中合成，让它变回图层列表。

“Toggle Visibility”：可以一键隐藏和显示所有的父级图层
image.png
可以看到上图中的父级图层前面的眼睛被点亮了，再次点击“Toggle Visibility”这个功能就可以关闭，这个功能的好处在于如果给父级图层做动画，开启显示后选中父级图层画面上会有范围框，方便做动画。

因为这里的父级图层前面都有蓝色的“＃”，也就是参考线图层，即使是显示了，最终也不会被渲染导出，所以开启也不影响最终的效果。
“Delete group layers”：删除父级图层
该功能是可以一键将合成中 Sketch 导入的父级图层删除，因为前面好几个功能都是基于父级图层，这里请谨慎操作。

常见问题

1.圆角不一致

因为ae内形状的四个圆角都是一样，不能分别设置不同的圆角，所以，sketch文件内的形状如果几个圆角不一样，需要在导入之前先合并一下，导出之后才不会出问题
image.png

2.填充显示“？”

image.png
可以点击图层，添加填充属性
image.png