我想说的(以下内容摘选至 imgcook官网)
imgcook 是专注以各种图像(Sketch/PSD/静态图片)为原材料烹饪的匠心大厨,通过智能化手段将各种视觉稿一键生成可维护的 UI 视图代码,期望此 imgcook (图像大厨) 未来成为一位 P5 的重构工程师,能切实提高前端的开发效率,并助力前端、设计师、测试的高效协作,我们期望做到:
- 100% 还原【设计师再也不用还原走查了】
- 100% 兼容【测试再也不用适配样式了】
- 一键上线【前端再也不用切图写样式了】
愿景:对设计稿无约束的前提下,高度还原设计稿,释放 UI 开发生产力,让你关注更具挑战性的事情!
1.下载 Sketch
2. 下载 imgcook.sketchplugin 插件
下载 Sketch 版插件,解压文件后会得到 imgcook.sketchplugin 插件以及试验田试玩文件,双击安装 Sketch 插件,点击“OK”即可。需要注意的是以往 Sketch 软件官方的升级会有一些不兼容旧版本设计稿的情况出现,相应得部分API也会发生变化,imgcook 也会只支持最新版本的 Sketch,请确保你的 Sketch 版本是最新的
3.把下载的(或者设计师的) .sketch文件 在Sketch打开
3.1 打开要还原的 Sketch 设计稿,如果无设计稿,可以在 网站首页 下载试用文件。
3.2 一般前端都是模块化方式开发,强烈推荐 一个模块一个模块 进行还原生成代码,所以期望要还原的模块在一个分组内即可,对分组名没有要求。更多设计稿注意点请看这里。
4. 打开 Sketch ->Plugins->imgcook->导出数据

5.点击去粘贴

6.此时会打开 imgcook的 页面 , 按键盘 (command+v)进行粘贴

7.点击右上角的保存,创建目录
8.点击右上角的代码(微信小程序,React,H5,Rax)

更多介绍请参考 imgcook官网
据说能做到100%的还原,我正在和UI设计师进行测试,晚点会发布结果。