figma：按组导出

---

最近发现达芬奇能读取psd的图层信息，以往要拿图层做MG动画，都要将分层单独导出，为了省去调整坐标和宽高的大小，导出的png都是1920x1080（视频是这个尺寸），这些工作都想在Figma里完成。

---

Round One

以往的经验是将整个画板（Frame）转成组件（Component），然后复制这个组件以生成画板实例（Instance），在实例中选中要屏蔽的图层 按⌘+X（Windows是Ctrl+X）隐藏掉不需要导出的图层，然后选中实例进行导出。实际操作中倒是有些不方便。首先需要做分层的画板不能太多，不然画板排列会乱，尤其实例的名字在缩放情况下基本看不到。再者如果一个画板的元素太多，一个元素对应一个实例，此时就会有很多个实例，由于实例的背景是透明的，在figma里找东西会有点不方便，尤其是你的元素是白色的，最麻烦的是，如果如果原画板（组件），有新增图层、解组、打组后，所有相关实例都会显示这部分多出来的内容，就有点麻烦了。

---

Round Two

俗话说“大巧不工”，为啥老自作聪明，直接放到画板（Frame）不就好了，复制粘贴也挺快的。

这样确实也能解决问题，不过这样一期视频下来，画板的数量就增加了不少。

---

Round Three

最近一期的视频，画板数量特别多，很想要解决按层导出需求，尽可能减少一些画板数量。

于是尝试 先将画板导出pdf，然后用ai导入pdf，最后导出psd，这样在达芬奇里就有分层信息了，图片数量也减少了，也是个不错的选择，但是ai导入pdf后，原来图层名称都丢失了，而且由于分层数量太多，导入达芬奇后里面的元素数量超级多，其实也只是想把要调整的那部分变成一个分层，或许有些方法能让达芬奇将几个分层识别成一个图层。就没办法做后期了。这里要表扬下ai，由于我的图片素材特殊，是像素风格的图片，大多数软件在显示缩放时位图是模糊的，采用邻近缩放采样后，才能保证图像质量，ai在导入pdf和psd都能正确识别，画面并没有模糊。

所以还是在Figma上想办法，导出png是最合适自己的，怎么导出宽高一致的png的同时，又能尽可能地不额外创建画板？🤔

---

按组导出

想起在Sketch里，导出一个切片时，可以选择只导出同组内的元素，勾上对应选项后，导出图像时 同组之外的在它的上方的图像会忽略。下图所示，切片和椭圆是在一个组内，粉绿色的多边形虽然和圆形有重叠，但是勾选“Export group contents only”（仅导出组内容）后，导出预览里没有出现多边形的画面。

令人欣慰的是Figma也有同样的选项，而且默认是选中状态。

于是将要单独导出的元素打组，给这个组下面放一个和画板尺寸相同的切片，就能按层导出，实现自己的需求了。为了尽可能快地导出，最后选择选择组进行导出，而不是选择切片，由于切片大小和画板一样，选择组导出和选择切片导出都是一样的，而且在Figma里，你无法直接在场景（Scene）上直接选中切片，最终还得在图层列表（Layers）区域选择切片，而且有时新增内容后切片位置可能不在顶层，选择组反倒是比较方便的。

除了在组下面放一个和舞台大小一致切片外，放置相同大小的矩形（Rectangle）也能实现相同的效果，创建矩形后将填充和描边等隐藏，这样视觉上便不可见，也不会影响导出。

---

插件

最近尝试写Figma插件，为了方便在自用的插件面板上，加了点功能。

划分切片，按钮上方的行列数默认都是1，选中元素后直接点击划分切片，会得到一个和元素宽高一致的切片，切片的名字会自动命名成选中元素的名字。

按组切片，选中组之后点击此按钮，会在组的最底层新建一个名为“bg”的矩形，矩形的尺寸就是画板的尺寸，而且矩形会拷贝画板的一些属性，比如填充色，虚线设置等，并将这个组设置为可导出。

如果你跟我一样，想要在Figma上裁切精灵图（Sprite），划分切片功能可能会比较有用。

---

最后

按组导出弄明白后，画板数量减少了，场景看上去更加整洁。有意思的是，在Figma里 单个场景也是有填充色的（Background属性），可以改成其他颜色，或者将其隐藏让舞台变成透明的画格子。场景也支持导出_{这就有点不可思议了}。