1. 图片合并【必须】
- 描述：合并协议可以在导出的时候将 Sketch 中的一个 Group 导出为一张图片，等同于 Sketch 中的 选中导出项功能。
- 使用方法：在图层（编组等）的标题后添加 “#merge#”
示例1： Icon、标签等路径图层的合并
下图的设计稿中，GO 按钮设计师是使用路径形状等设计而成，如果直接导出，如左图所示生成的是一个 View 内包含一张图片，通过设置 View 的 border 来实现。如果导出时在图层后面添加“#merge#”，如右图所示生成 DOM 树中就是一个 Picture。
示例2：多图合并
下图中的设计稿，设计师设计的时候商品图由两张图片组成，并且与实际大小也不相同，不过设计师已经通过 Mask 标记了图片的大小和位置，我们只需要在商品图图层添加 “#merge#”就可以导出一张正确大小的图片。多图合并的情况常见于背景图，氛围图等场景。
示例3：包含 Mask 图层的合并
设计师可以使用 Mask 标注了商品图片的大小和位置，代码生成时就会按照 Mask 的尺寸大小生成一个大小位置正确的图片节点。可参见设计师注意事项中的示例。
2. 图层成组【可选】
- 描述：成组协议可以将标记了“成组”的图层下面的所有元素，在导出的时候组成一个 DOM 节点。成组之后，最终生成的 DOM 节点中不会包含其他不在成组图层内的元素，也不会丢失任一在成组图层内的元素。
- 使用方法：在图层名称后面追加 #group#，需要注意 这里的成组和 group 需要用左右两个 # 号包裹。
例如：将元素成组到一个容器里，下图中的设计稿里，标签信息和商品信息是并列的节点，所以使用成组功能将这三个图层各自设定到一个分组，这样生成的代码会按照 group 的标记对元素进行成组，并且生成容器包裹这些成组的元素。
3. 添加模块 classname 前缀【可忽略】
- 使用方法：在即将导出的模块根元素的文件夹名字上加上“#对应字段名称#”，此字段名称将作为生成代码 classname 前缀，当前端想要强制控制模块 classname 前缀时使用。
生成代码后的 classname：
小结：**
- 1图片合并【必须】，可能直接影响模块的布局实现方式；2图层成组推荐适当使用，如果设计师没有进行任何视觉稿的规范化处理，以上两项要自行处理，其余更多的规范和操作指引，可以参考下面的参考文档。
若有收获，就点个赞吧
0 人点赞
