Picasso
A tool automatically convert sketch to code.
简介
Picasso是58同城推出的一款sketch设计稿智能解析工具,可将sketch设计稿自动解析成还原精准,可用度高的前端代码。
前提
- Mac >= 10.15.1
- Sketch >= 60 下载Sketch
- Node >= 8.9.3
使用方法
- 注意:仅仅支持Mac环境(由于Sketch软件只支持Mac环境,而解析需要依赖Sketch软件),并且需要安装Sketch软件,下载Sketch
第一步. picassoImg插件安装(辅助解析的sketch插件,必须安装)
下载picassoImg插件 => 解压,双击安装即可
命令行使用
全局安装
npm install -g @wubafe/picasso
使用
# 查看帮助
picasso --help
# 查看版本
picasso --version
# 解析sketch设计稿
picasso -s test/index.sketch
# 或者
picasso -s test/index.sketch -d test -t 1 -p tt
# 参数介绍
Options:
-v, --version picasso版本
-s, --src [path] sketch设计稿源文件路径
-d, --dest [string] 解析生成的代码存放路径
-s, --imgScale [number] 图片尺寸(1:1倍图 1.5:1.5倍图 2:2倍图 3:3倍图) (default: 1)
-t, --pageType [number] 解析类型: 1-普通版 2-运营版 (default: 1)
-p, --classPrefix [string] 生成样式className前缀 (default: "")
项目中使用
本地安装
npm install @wubafe/picasso -S
使用
const picasso = require('@wubafe/picasso');
// 解析sketch
(async () => {
await picasso({
src: 'test/index.sketch', // sketch源文件路径
dest: 'test', // 生成代码存放路径
imgScale: 1, // 导出图片尺寸(1 1.5 2 3) 默认 1
pageType: 1, // 1 普通版 2 运营版 默认 1
classPrefix: '', // 生成样式className前缀 默认 ''
});
})()
启动项目
# 安装依赖
npm install
# 运行项目,即可进行解析
npm run dev
运行 Sample
- sample/demo.sketch sketch源文件,可用sketch软件打开进行查看
- sample/demo/1_page/* 解析生成代码,用浏览器打开sample/demo/1_page/index.html文件,即可预览生成的页面。
贡献
欢迎参与picasso项目的开发建设和讨论。
提交 pull request 之前请先提 [Issue 讨论].