阅读 435

什么神仙操作?能让imgcook生成代码准确率100%!

imgcook.com 是个设计稿智能生成代码平台,可以帮您自动生成高质量的前端代码。

2020年天猫双11 90.4% 前端模块是由 imgcook 自动生成的!欢迎来体验~


设计师给的设计稿图层太混乱?

你知道 imgcook 插件有“合并”和 “成组”这两种骚操作么?

什么?不知道?让我来给你演示一通!

什么是“成组”?

就是在 Sketch 插件中通过“成组”可以指定生成代码的嵌套结构

下面是我想要的嵌套结构

image.png

👇👇👇 将要放在一起的图层 选中、编组、成组

1.gif

👇👇👇 生成的DOM树 100% 符合您的预期

image.png

什么是“合并”?

就是在 Sketch 插件中通过“合并”可以将多个图层合并成一张图片

这个功能你肯定用得到!

比如将多个图层组成的 ICON 合并成一张图片

image.png

👇👇👇 将要放在一起的图层 选中、合并图片

2.gif

比如将多个图层组成的 氛围 合并成一张图片

👇👇👇 将要放在一起的图层 选中、合并图片

image.png

👇👇👇 将要放在一起的图层 选中、合并图片

3.gif

组合拳“合并” + “成组”

👇👇👇 “合并” + “成组” 一起用

4.gif

👇👇👇 可以生成 100% 准确的代码

image.png

👇👇👇 查看生成的代码

5.gif

你,学废了吗?

😇 😇 😇

学废了就来用 imgcook.com 帮您自动生成代码吧~~ 让您告别简单重复又繁杂的工作~

PS:

imgcook 支持自动合并和成组 不用人工“合并” + “成组” 操作 也能自动生成可维护性较高的代码哦~

如果你的设计稿特别混乱,可以用这俩操作试试。

我们一直在努力提升生成代码可维护性。 如果您有建议,欢迎来我们的用户群反馈。

image.png

文章分类
前端
文章标签