sketch设计稿转代码插件imgcook

imgcook是阿里的程序员提供的一款开源sketch插件，这款插件可以帮助设计师们将自己的设计稿一键生成可维护的 UI 视图代码。这款插件的诞生真的让很多前端都没活路了，imgcook能切实提高开发的开发效率，并助力开发、设计师、测试的高效协作。

插件介绍：

使用图像生成代码的时候，我们关心的不仅仅是生成 UI 的还原度，也关心生成的代码是否合理、可维护，如果生成的代码属于不可读不可维护的快餐代码，开发使用上再对其进行二次开发就会显得极为艰难，而往往后者的难度相比前者更甚，如果需要在生产环境中使用，这个问题就无法避免。

对此，imgcook 的定位就在于解决 UI 还原以及生成可维护代码的问题。

对于可维护性代码的问题，imgcook 会对还原后的 UI 在代码层面上生成目前使用比较广泛的 Flexbox 布局以及相对定位布局，在一些自定义的命名上（比如样式命名），imgcook 也会根据开发者的习惯生成更加人性化的命名。

imgcook特色：

所见即所得

一键还原，上手即用，只有妙不可言

智能化

全链路采用计算机视觉、深度学习等智能化手段依次去除对设计稿的约束，智能生成代码。

精度还原

一键智能还原与丰富的操作面板

实时保证代码和视觉的高度还原

DSL多样

自定义编写代码模板支持小程序、React、H5、Weex Rax 等，外部暂时不支持自定义代码模板。

高可维护性

DOM 嵌套合理、相对定位布局、文本自适应

ClassName语义化、循环可自动识别

使用流程：

1. 下载并安装 Sketch 插件

在网站首页下载 Sketch 版插件，解压文件后会得到 imgcook.sketchplugin 插件以及试验田试玩文件，双击安装 Sketch 插件，点击“OK”即可。需要注意的是以往 Sketch 软件官方的升级会有一些不兼容旧版本设计稿的情况出现，相应得部分API也会发生变化，imgcook 也会只支持最新版本的 Sketch，请确保你的 Sketch 版本是最新的。

阿里内部用户登录后可直接使用 alicdn 图片空间。

2. 导出数据

2.1 打开要还原的 Sketch 设计稿，如果无设计稿，可以在 网站首页 下载试用文件。

2.2 一般前端都是模块化方式开发，强烈推荐 一个模块一个模块 进行还原生成代码，所以期望要还原的模块在一个分组内即可，对分组名没有要求。更多设计稿注意点请看这里。

2.3  前端判断如果实现代码中有多图层需要合并成一个图片的，在分组名后添加 '合并' 即可。比如 这里的 “GOOD” 、 “！”、“—”、“专属美味”， 虽然设计上是 多个目录的图层，但前端实现上可以直接合成一张图片。

2.4  选中某分组 -> sketch 的 Plugins -> imgcook -> 导出数据 ；或者 选中某分组 + 快捷键 ⇧⌘C

ps: 内部用户请使用域账号登录，好处是生成的图片可直接上 alicdn

2.5 然后出现弹窗，点击“去粘贴” -> 自动打开浏览器 -> command + V 粘贴即可。

更新日志：

2019-03-08

Sketch 插件 v1.6.8

修复图层坐标溢出截图不准问题

修复部分情况 Mask 图层规则失效问题

修复部分情况下图层 Rect 精度问题