Deco 是凹凸的一个创新型研究项目，旨在将设计稿智能转化为代码，提高开发能效。以下是 Deco 基础流程中图层处理层的一个介绍。

图层处理层主要将设计稿中的图层进行分离、合并、提取元信息，同时结合组件识别层智能成组、分类，导出第一份 Deco DSL。Deco 工作流就像软件工程里的管道与过滤器设计模式，设计稿就是管道的入参，管道中的流就是每一阶段生成的 DSL，管道的输出是一份语义化代码。

图层处理层通过组件识别层借助了 AI 的能力，智能识别设计稿每个区块，将区块内的图层信息合成一个组，再通过区块匹配算法自动匹配区块与图层，实现了设计稿的自动成组，成组数据有利于布局算法判断区块的层级信息和父子关系。

一份 sketch 文稿是由若干图层信息（分为 document 和 pages 等）和资源文件（主要是图片）组成的一个压缩文档（文件后缀为.sketch），通过对图层元信息进行加工处理后得到一份供布局算法服务处理的 DSL。

通过开发 sketch 插件，使用 sketch 提供的 API 能够帮助我们去操作 sketch 里的文稿，拿到图层信息后，对这些数据加工、筛选等处理。图层信息的处理主要是分为两层：

一是设计稿加工层：

1. 复制出一份原样的设计稿，在这份复制的设计稿上进行各种加工的操作；
2. symbol 解耦，将文稿中的 symbol 解耦为实际的图层组；
3. 筛选不可见图层，过滤掉设计师隐藏的图层以及空图层组；
4. 图层合并，将一些特殊的图层或图层组合并并转为图片；
5. 蒙层处理，蒙层下的图片如果超出蒙层范围需要裁剪，同时蒙层下的图层位置和宽高信息需要重置。

二是图层信息处理层：

1. 提取图层中有用的信息，比如样式处理、文字拆分、图层层级等；
2. 图层信息的转化，比如将图片的 base64 位字符串数据转为 CDN 图片地址；
3. 无用图层检测，将一些无样式或透明样式的图层去除；
4. 图层打平处理，将图层数据由树状的层级打平为一维的结构；
5. 成组信息筛选，将未成组的数据通过比对位置和大小将其归类到已成组的数据中。

下图是对图层信息的处理流程：

除了对图层信息的基础处理之外，我们建立了一系列的数据导出的优化规则，用于增加布局以及语义的合理性。比如在一些大促设计稿上，复杂背景图的设计可能是在一个图层组下若干个矢量图形组成，如果原封不动地将这些图层导出，会给布局带来很多复杂度和不确定性。

在合图的这一流程中，针对一个图层组下所有图层都是矢量图形的情况，我们会将它合成为一张图片，这样会大大减轻布局的困难度。最终合图效果如下图：

当然，上面提到的这些优化规则并不能满足所有的情况，毕竟设计师是自由的。为了提高布局和语义的合理性，我们对入参的设计稿提了一些规范协议供设计师以及开发者使用。