sketch 将动图转换为json_开源 | Picasso:sketch设计稿智能解析工具
开源二期项目专题系列(一)
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解析过程的关键环节,我们通过提取图层的结构特征,如位置,尺寸,类型等因素,进行特征分析,寻找相似图层等方法,优化图层的结构及组合方式,来提升代码可用度。特征分组的主要流程如下:
我们来看下,在不同场景下经过特征分组处理后的解析效果:场景一.列表页
场景二. 大类页
![](/assets/blank.gif)
第五步. 结构简化
经历了去组、分层、结构重组、特征分组这四个环节,图层发生了多次聚合和重组,这个过程中会产生冗余的无用结构,需要对冗余结构进行优化。
结构优化规则: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同城 本地服务技术部 高级前端工程师 ; 主要负责微信生态前端相关工作。推荐阅读:深度学习在58商业排序的应用实践
多样性算法在58部落的实践和思考
58技术沙龙 | 第十五期 走进微前端
开源|qa_match更新啦——支持轻量级预训练、提高问答通用性
58技术沙龙|第十一期:基于深度学习的自动问答工具——qa_match开源项目解析
sketch 将动图转换为json_开源 | Picasso:sketch设计稿智能解析工具相关推荐
- sketch 将动图转换为json_UI设计师如何创建sketch设计样式、库和UI套件
使用Sketch来创建UI风格设计的样式,将受益匪浅.使用本教程构建UI套件,并同时创建自定义(可重复使用)库,以提高设计效率与质量. 无论是Sketch专家还是Sketch的新手,设计师都会发现:S ...
- 教你将GIF动图转换为JPG图片
在平时工作学习时,会遇到需要将gif动图转换为jpg格式图片的时候,jpg格式为静态图片,是不能动的,那么该如何操作呢?小编分享一个方法,感兴趣的一起来看看吧. 进入软件,在"文件批量重命名 ...
- 低代码开源, 一键设计稿生成代码,帮您解决生产痛点
作为一个前端或管理者,您是否遇到过以下场景 作为前端老鸟照样需要写页面布局,虽然你已经写了无数遍,但是效率和三年前的你差别不大 项目死亡线越来越近,而你还得出页面/组件, 无法专注于业务逻辑 你已经费 ...
- [开源]C#二维码生成解析工具,可添加自定义Logo
原文:[开源]C#二维码生成解析工具,可添加自定义Logo 二维码又称 QR Code,QR 全称 Quick Response,是一个近几年来移动设备上超流行的一种编码方式,它比传统的 Bar Co ...
- 使用python将动图转换为视频
使用到的库 import os import shutil from PIL import Image from moviepy.editor import * import requests imp ...
- 只需三行代码轻松实现酷炫gif动图转换为mp4视频
前两天有同学在群里发问如何把自己的gif动图转换成mp4视频格式,据她说转换软件太麻烦,我想万能的python或许可以一战,查了一番资料后发现只需三行代码即可实现,以下为具体方法. 安装第三方包mov ...
- 5页面如何切图_如何让你的设计稿做到95%还原?
视觉设计师作为展示产品最终形态的执行层,产品上线前走查视觉与交互还原是必经环节,而留给设计师走查修改的时间其实非常少.有时候为了配合产品上线时间,通常只能牺牲一些细节,在下一次迭代进行优化. 为了每一 ...
- 视频怎么做GIF表情包?教你一键生成gif动图
随着网络的普及,大家在网上聊天的时候都经常会使用表情包,其中很多表情包都是动态的,而且也都是我们熟悉的一些视频片段制作而成的,那么视频怎么做gif表情包呢?一般来说,制作gif动图都比较麻烦,需要使用 ...
- 怎么压缩动态图片?手机怎么压缩gif动图?
在平时的聊天当中为了增加聊天的趣味性我们经常会保存一些有趣的gif动图表情包,但是由于gif图一般是由多帧组成,因此有的gif动图就会非常大,无法添加到表情当中,这时候就需要将gif压缩变小,那么我们 ...
最新文章
- java jdbc 表存在_使用JDBC查询是否存在某表或视图,按月动态生成表
- mysql数据库使用
- Effective C++ 条款05
- php写一个轻量级的容器,PHP写的一个轻量级的DI容器类
- 简述数据字典的结构及其作用_数据结构——树基本概念及其遍历
- 8类网线利弊_超6类网线和7类网线有何区别?有何用途?家用电脑,看这
- Sersync+Rsync 增量实时同步
- html 微信发送给朋友,H5链接分享给微信好友,显示标题、描述、缩略图
- 一键安装zabbix percona mysql插件监控mysql
- 人类社会发明的第一台计算机是什么,第二周第一课概述计算机
- 【操作系统/OS笔记10】进程/线程的调度原则、调度算法、实时调度、多处理器调度、优先级反转
- Wi-FiR CC3000 模块
- 大连理工大学计算机视觉实验室,首个镜子分割网络问世,大连理工、鹏城实验室、香港城大出品 | ICCV 2019...
- 编译LibreELEC.tv,报错: ld -lz can not find -lz,原来是zlib-1.2.11没有交叉编译
- 工业相机测量仪毛管测量直径与长度值
- Science子刊: 类配对分析法揭示孤独症患者肠道菌群解毒功能受损
- IMU(Inertial measurement unit)
- 区块链论文8(ContractGuard分析写作手法)
- gitlab报错 fatal index-pack failed error RPC failed result
- 基于华为WAC双机VRRP热备份下旁挂三层组网隧道转发模式解决方案
热门文章
- linux执行python不打印_在Python中执行shell程序而不打印到屏幕
- Python 为啥不建议使用 thread模块?
- 深入String、StringBuilder、StringBuffer
- python polygon函数_Python 人脸识别就多简单,看这个就够了!
- todo已完成任务_uTools 插件介绍 | 「todo」!打工人必备
- Oracle原理:表分区
- sigmstar SSD201/SSD202 openwrt--应用支持分享
- 未来计算机的缺陷,新技术将计算机芯片缺陷变为优势
- java头像选择系统_Android+超高仿微信图片选择器(头像选择)
- python上传图片到服务器_Flask入门之上传文件到服务器的方法示例