imgcook 是专注以各种图像(Sketch/PSD/静态图片)為原材料烹饪的匠心大厨通过智能化手段将各种视觉稿一键生成可维护的 UI 视图代码,期望此 imgcook (图像大厨) 成为一位 P5 的重构工程师能切实提高前端的开发效率,并助力前端、设计师、测试的高效协作我们期望做到:
- 100% 还原【设计师再也不用还原走查了】
- 100% 兼容【测试再也不用适配样式了】
- 一键上线【前端再也不用切图写样式了】
愿景:对设计稿少约束的前提下,高度还原设计稿释放 UI 开发生产力,让你关注更具挑战性的事情!
- 在下载 Sketch 版插件解压文件后会得到 imgcook.sketchplugin 插件以及试验田试玩文件,双击安装 Sketch 插件点击“OK”即可。需要注意的是以往 Sketch 官方升级會有一些不兼容旧版本设计稿的情况出现相应部分 API 也会发生变化,imgcook 一般只支持最新版本的 Sketch请确保你的 Sketch
-
阿里内部用户登录后可直接使用 alicdn 圖片空间。
-
打开要还原的 Sketch 设计稿如果无设计稿,可以在 下载试用文件
2.2 一般前端都是模块化方式开发,强烈推荐 一个模块一个模块 进行還原生成代码所以期望要还原的模块在一个分组内即可,对分组名没有要求更多设计稿注意点请看。
- 前端判断如果实现代码中有多图層需要合并成一个图片的在分组名后添加 '合并' 即可。比如 这里的 “GOOD” 、 “!”、“—”、“专属美味” 虽然设计上是 多个目录的图层,但前端实现上可以直接合成一张图片
ps: 内部用户请使用域账号登录,好处是生成的图片可直接上 alicdn
在下载 PS 版插件解压文件后会得到对应操作系统的插件安装器文件以及试验田试玩 PSD 文件。安装器安装流程如下:
如果上述安装器安装流程出现异常(比如 Windows 安装过程卡住时间很久)可尝试手动安装。
- 打开注册表(运行 regedit)
- 选中刚新建的字符串值注册表-鼠标右键-修改-数值名称:PlayerDebugMode 数值数据:1
1. 插件导出后会自动打开浏览器
等待平台处理数据最后可看到导出的模块还原成功
在编辑平台->快速设置->快捷绑定中,可以快速进行数据绑定
平台默认会猜测一个字段,比如这里的商品图片猜测成了 data.item_pic 字段,不满足需要直接改即可数据默认是 data 对象,如需修改可针对生成后代码的修改
3.2 不需要绑定动態数据
比如这里的静态图标(定位和五角星)
如果确定不需要绑定,则点前面的“禁用绑定”图标即可
保存模块数据后,点击右上角 代碼 -> 复制 按钮可以一个个文件复制。如果觉得一个个文件复制麻烦或者对文件有加工的诉求,推荐使用方式二 imgcook-cli
注意:代码中的该域名( )下的图片,只能在特定域名下使用如果将此图片链接 copy 到本地, 发现图片无法打开是正常的,阿里内部用户建议登录 sketch 插件再导出外部鼡户建议使用“导出”功能,可将图片引用变为相对地址
点击“导出” 整个模块的源文件包,解压后如下:
此方式可以将整个模块代码攵件下载到任意目录并且可以二次加工模块代码(如:css的单位转化、上传图片到自己的图片空间、目录结构转化),直接使用 工具即可如需自定义加工,请参考