如何将 Sketch 文件导 入AE

    首先,我们需要安装一个插件,来自 Google 团队开发并维护的 AEUX(更名之前叫Sketch2Ae),可以在脚本官网自行下载来获取脚本:https://aeux.io/

    下载解压之后你会得到两个文件,即“AEUX.sketchplugin” 和 “AEUX.zxp”。

    2.Skech&Figma - 图1

    “AEUX.sketchplugin”是Sketch插件,双击即可直接安装,比较简单。“AEUX.zxp”文件是 AE 扩展文件,安装方法略微麻烦一点,需要借助一个扩展安装器才能完成。

    我们 AE 里用到的其他扩展都可以使用该安装器来安装,例如用来动效落地&交接的 Bodymovin、Flow,安装方法是一样的,这里以 AEUX 做为演示案例。

    AE 扩展安装器可以通过这个网址下载:https://aescripts.com/learn/zxp-installer/
    可以在官网看到两个系统的版本都有,大家按照自己的系统来下载即可。

    2.Skech&Figma - 图2

    安装完成 ZXP Installer 这个扩展安装器之后,打开,然后将“AEUX.zxp”文件拖进安装器窗口即可自动安装,或者使用快捷键“Cmd + O”打开扩展文件。

    2.Skech&Figma - 图3

    如上图,安装器打开之后有个提示窗口,这里无需理会,可以点一下“CLOSE”按钮,完成之后会出现以下提示框,即表示安装成功。

    2.Skech&Figma - 图4

    然后,可以在 AE 的“窗口”菜单栏的“扩展”选项里找到名称为“AEUX”的扩展,Sketch的插件可以从“插件(Plugins)”里调出来。

    2.Skech&Figma - 图5

    这里有两种方法导入,第一种是点击“Send selection to Ae”,即可直接将选中的图层&画板内容导入到 AE ,该过程在幕后传输,比旧版本速度更快也更稳定。

    第二种方法是点击“Export AEUX.json”,此时会在电脑生成一个名为“AEUX.json”的文件,此时将“AEUX.json”文件拖入 AE 内的 AEUX 面板上方红色区域,或者在面板中点击“曲别针”按钮载入“AEUX.json”文件即可。

    2.Skech&Figma - 图6

    二种方法并没有太大的区别,第二种方法多了一个用途,例如将导出的文件发给没有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 面板
    **

    2.Skech&Figma - 图7

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

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

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

    3. Options
    该选项下有三个参数:
    “Detect parametric shapes” 检测形状参数,勾选之后导入的形状会保留圆角跟大小属性,在AE内展开形状图层的“内容”即可看到。

    2.Skech&Figma - 图8

    不勾选导入的形状会已路径的形式存在,不能更改圆角属性,两者各有各的好处,这个再后续的 AE 章节会讲到。

    2.Skech&Figma - 图9

    “Precomp groups” 将群组创建成预合成,经过测试发现,勾选之后跟没有勾选没什么区别,都不能自动把sketch内的群组建立成预合成,可能是这个版本存在的BUG,只有它跟下一个选项“Auto build artboards”关联使用才有效果。

    2.Skech&Figma - 图10
    **

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

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

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

    2.Skech&Figma - 图11

    如果你是对整个合成里面的所有图层都做创建预合成操作,也不用在这100多个图层列表里一个个去找,只需要“Cmd + A”全选,然后点击“Convert to precomp”即可全部搞定。

    “Un-Precomp group”:将合成解除,变成图层列表
    跟上一个功能刚好相反,有时可能对一些合成内部内容单独编辑,不使用预合成会更方便,即可选中合成,让它变回图层列表。

    “Toggle Visibility”:可以一键隐藏和显示所有的父级图层
    2.Skech&Figma - 图12

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

    因为这里的父级图层前面都有蓝色的“#”,也就是参考线图层,即使是显示了,最终也不会被渲染导出,所以开启也不影响最终的效果。

    “Delete group layers”:删除父级图层
    该功能是可以一键将合成中 Sketch 导入的父级图层删除,因为前面好几个功能都是基于父级图层,这里请谨慎操作。