开源 | Picasso：sketch设计稿智能解析工具
source link: http://mp.weixin.qq.com/s?__biz=MzI1NDc5MzIxMw%3D%3D&%3Bmid=2247489529&%3Bidx=1&%3Bsn=9a00e49919dc9efa80028e294c7181b9
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
开源二期项目专题系列
（一）
1. 开源项目名称：Picasso
2. github地址：
https://github.com/wuba/Picasso
3. 简介：Picasso是58同城推出的一款sketch设计稿智能解析工具，可将sketch设计稿自动解析成还原精准，可用度高的前端代码；从而提高前端开发效率，助力业务快速发展。
Picasso于2020年9月份开源，具备以下特点：
-
UI还原度高，设计稿还原精准。
-
生成代码可用度高，可维护性好。
-
解析工具使用方便、操作简单，完全自动化解析。
-
针对不同的应用场景，提供运营版和普通版两种模式。
-
支持导出多种尺寸(1倍 1.5倍 2倍 3倍)图片，满足不同屏幕尺寸适配需求。
项目背景
UI自动化已经成为当前行业研究的趋势，各大公司都在进行相关方向的研究，sketch设计稿存储的是结构化数据，这给我们进行UI自动化解析生成代码提供了契机；为了提升前端开发效率，减少页面重构的工作，甚至某些场景下完全自动化生成代码，Picasso智能解析工具应运而生。
核心设计
Picasso的核心解析流程主要包括Symbol解析、图层重构、属性解析、布局处理。
1. Symbol解析
1). Symbol模块整合
-
设计稿源文件中包含以下两个json文件：Page页面json和Symbol模块json。
-
我们通过SymbolID的引用关系来推导出模块之间的依赖关系，将symbol模块json整合到各个Page页面json中，便于后续的解析。
2). Symbol模块传参
-
参数只作用于其子Symbol模块。
-
相同参数传值：外层(父父级)参数值的权重高于内层(父级)。
3). Symbol模块缩放
-
根据SymbolInstance和SymbolMaster的尺寸比例，等比例转换symbolMaster的坐标尺寸，作为实例SymbolInstance的坐标尺寸。
通过对Symbol的解析，我们得了一个包含页面重构所需的完整信息的json。
2. 图层重构
图层重构主要包含五个步骤，如下图 ：
第一步. 去掉分组
由于UI设计师并不了解前端的布局习惯，他们对图层进行的分组，往往和前端期望的结果差别较大，几乎不可用；看下这张设计稿：
该设计稿的原始分组如下：
前端开发期望的分组如下：
因此，我们需要去掉设计稿中已有的分组，在后续的流程中进行重新分组。
第二步. 分层
UI设计稿中经常会出现多层重叠的结构，例如弹层,吸底栏等；这时候需要我们进行分层处理，然后再对每层进行单独处理。
第三步. 重新排序和组合
UI设计稿主要专注于视觉效果，对设计稿中图层的顺序没有特别的要求，这就造成我们拿到的设计稿中图层的顺序是混乱的。
通过我们的排序算法，将图层的按照从左上到右下的顺序排列，如此同时处理图层之间的父子关系,优化后的顺序如下：
第四步. 特征分组
特征分组是Picasso解析过程的关键环节，我们通过提取图层的结构特征，如位置，尺寸，类型等因素，进行特征分析，寻找相似图层等方法，优化图层的结构及组合方式，来提升代码可用度。
特征分组的主要流程如下：
我们来看下，在不同场景下经过特征分组处理后的解析效果：
场景一.列表页
场景二. 大类页
第五步. 结构简化
经历了去组、分层、结构重组、特征分组这四个环节，图层发生了多次聚合和重组，这个过程中会产生冗余的无用结构，需要对冗余结构进行优化。
结构优化规则:
a. 容器:子元素属于无意义元素 => 删除子元素；
b. 容器:子元素有意义，父元素无意义 => 删除父元素；
c. 图片:父元素无背景及边框 => 删除父元素；
d. 图片:子元素与父元素位置大小完全相同 => 删除父元素；
e. 画板:父元素为画板的情况 => 不处理父元素，只处理子元素。
3. 属性解析
属性解析主要是将sketch源文件中的属性一一对应成CSS样式，这样就得到了细节的视觉效果。
解析规则
4. 布局
在结构和样式解析完成之后，接下来就是布局处理，如下图：
布局完成之后，会进行相应的代码生成；至此，解析工作全部完成，我们得到了前端开发需要的UI代码。
总结
Picasso经过模块解析、图层重构、属性解析、布局流程，完成了sketch源文件到代码的自动化解析，同时保证了生成的代码还原精准、可用度高。
未来规划
Picasso拥抱开源之后，会继续进行UI自动化探索，未来规划如下：
-
持续优化解析算法，提升解析还原度和代码可用度。
-
支持自定义DSL，便于生成小程序、RN、客户端等多端代码。
-
扩展解析源，例如PS设计稿的解析。
如何贡献&问题反馈
感谢对 Picasso 的支持，可以在 https://github.com/wuba/Picasso 了解我们的项目，欢迎大家提交PR或Issue，向我们提建议或者反馈问题。
作者简介：
黄文存：58同城 本地服务技术部 前端资深工程师 ；主要负责UI自动化、前端工程化相关工作。
张志华：58同城 本地服务技术部 高级前端架构师；技术委员会委员 、负责本地服务前端团队管理工作。
鞠美玉：58同城 本地服务技术部 高级前端工程师 ; 主要负责微信生态前端相关工作。
推荐阅读：
开源｜qa_match更新啦——支持轻量级预训练、提高问答通用性
58技术沙龙｜第十一期：基于深度学习的自动问答工具——qa_match开源项目解析
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK