设计师居然用 imgcook 和前端协作开发1100+页面?

阿里巴巴 前端委员会智能化小组 @ 阿里巴巴

文/ 优品街 - 墨仔、阿里淘系 F(x) Team - 苏川

优品街是一款以区域化城市生活服务类 app,为用户提供商户信息、消费点评、拍摄短视频及消费优惠等信息服务。 ​

设计师使用了设计物料管理、设计稿图层标记、图层解析等能力,与前端高效协作,减少了很多跟前端不必要的沟通时间。 ​

从 2020-05-25 到 2021-06-03,在 imgcook 创建模块数量达 1100+,覆盖 20+ 前端项目。

使用效果

  • 时间:从 2020-05-25 到 2021-06-03
  • 使用情况:在 imgcook 创建模块数量达 1100+,覆盖 20+ 前端项目。
  • 使用人群:设计师主导,前端使用
  • 使用人数:1 位设计师,对接 4 个前端
  • 页面示例:


为什么用 imgcook?

imgcook 可以帮助前端高度还原设计稿,减少设计师与前端不必要的沟通,例如字体大小、颜色、模块之间行间距高度等,自动生成代码也能提高前端生产力。

设计步骤

第 1 步:加工设计物料

设计师可以在 imgcook 后台中上传设计物料,在上传设计物料所在团队的设计同学可以使用 imgcook sketch 插件共享一套设计物料,方便设计规范统一。 ​

在将设计稿生成代码时,统一和规范的设计稿可以让生成代码的可维护性更好。

1、根据目录命名

按照设计物料官方文档,做好命名,在 Sketch 中会按照命名拆分目录。


2、调整设计稿

用 Sketch 编组 & 用 imgcook 插件成组

这里用到了成组协议,会先把文件编组好,然后再加上成组协议,这样生成代码时,会按照 #group# 生成嵌套结构,生成的代码结构就是自己定义的嵌套结构,但用 imgcook 也可以自动生成比较合理的嵌套结构。 ​

因为设计师比较熟悉 Sketch 了, 这个操作设计师来做的话就比较熟练了,但是有个问题是需要懂点前端代码的层级结构。这个操作用的不多,如果没有一些冗余的图层,自动生成的结构也比较合理,所以一般也用不到。 ​


用 imgcook 插件合并图片

我们在设计视觉稿时,一张图会用很多图层来组成,但在前端代码中是要求用一张图的,比如下载这个图标。imgcook 提供了一个设计稿协议,可以给这多个图层组成的文件夹添加一个#merge#合并图片标记,这样导出时就会生成一张图片。 ​


3、 设置类名

这个是应开发要求添加的,给图层添加个语义名称,前端可以用来做 class 类名,这个设计师比较好理解,我们这个组件基本都添加了类名,这样在使用这些物料设计时就不用再添加了。 ​

另外也可以添加类名前缀等等。


4、设置导出图片格式

按照 设计稿高级标记规范 设置图片导出格式,这个我们设计师用的比较多,对线上页面的图像格式有要求。


第 2 步:上传设计物料

在 imgcook 中创建一个设计组,按照文档上传 sketch 文件就好。


第 3 步:使用设计物料设计页面

物料上传之后,需要在 设置 里面切换到自己的设计组,然后就可以直接拖入使用了。如果没有更新,可以右键重载下。 ​

在设计页面时,也会按照上面加工设计物料的方式加工下设计稿。


第 4 步:使用 imgcook sketch 插件生成模块

设计好了之后,可以解析设计稿然后生成链接,把链接发给前端。



第 5 步:将模块交付给前端使用

前端打开连接,可以查看代码了。


研发步骤

在 imgcook 编辑器中复制或导出代码到本地的工程项目中。 ​

官方推荐可以使用 imgcook cli 和 plugin 将生成的代码用命令行的方式直接导入工程项目。


使用了哪些 imgcook 能力?

Sketch 插件设计物料管理能力

imgcook 支持用户上传自己的设计物料, 对于有自己设计规范和设计组件的团队很适合,一方面方便设计协同,另一方面可以规范统一团队的设计规范。 ​

在生成代码方面,可以在物料设计时就统一添加开发同学需要的图层标记,比如类名前缀、图像格式等,团队内多个设计师在设计 UI 时就不需要再关心这些,UI 设计完成后,导出生成的代码就具有统一规范的类名前缀和期望的图像格式。 ​

也就是说,设计物料的管理能力更加规范了代码生成的设计输入,同时对于生成代码有定制需求比如类名前端、图像格式等,可以以最小的成本统一在物料设计时就做好图层标注。

Sketch 插件设计稿标记能力

imgcook 在导出设计稿时默认是 png 图像,我们期望是 svg 格式;另外前端同学期望导出的代码类名有业务相关前缀;在有一些场景下 imgcook 还不能解决的问题比如多个图层组成的背景图,需要将这这个图层用 imgcook 提供的 #merge# 协议手动标记一下,就可以导出为一张图像等等。 ​

总的来说,就是一些 imgcook 在自动生成代码时一些不能满足我们需求的场景,都可以用 设计稿高级标记规范 人工标记设计稿的方式来解决,这样在这些场景也能生成可维护性很高的代码。 ​

用的比较多的标记协议有:

  • 标记图片导出格式
  • 标记类名
  • 合并图片,一些由多个图层设计而成的氛围图、背景图、大图标建议可以合并下
  • 成组

imgcook 代码导出能力

从 imgcook 编辑器中复制或导出代码。

向团队介绍 imgcook

如果希望团队用上 imgcook D2C 能力,但又不知道如何介绍 imgcook,我们帮你准备好了介绍文案和 PPT,快来自取吧~ ​

1、组织一个分享会

我们可以将团队同学们召集在一起,组织一个团队内部的分享会,介绍下研发提效利器 imgcook。

2、播放 imgcook 的产品介绍视频

可以播放一下 imgcook 的产品介绍视频,让大家对 imgcook 的功能有一个全方位的了解。视频链接:

或者您也可以直接在 imgcook 网站现场演示。 ​

介绍文案:

imgcook 是阿里巴巴对外开放的一个设计稿智能生成代码平台,可以将 Sketch、PSD、Figma、图片等类型的设计稿一键生成可维护的前端代码,例如 React、Vue、小程序等,还可以自定义生成的代码。 ​

我们可以安装 Sketch、Photoshop、Figma 插件使用插件导出图层数据到 imgcook 或者直接在 imgcook 编辑器中上传设计稿文件解析,然后在imgcook 编辑器中查看生成的代码。

3、详细介绍 imgcook 使用动线

介绍文案:

  • 1、导入设计稿,支持从 imgcook 插件导出生成代码或上传设计稿文件解析生成代码两种方式。
  • 2、提供设计稿协议支持用户人工标记图层来生成代码(对于目前imgcook处理不是很好的场景都可以用这种方式解决)
  • 3、imgcook 智能生成的原理是将描述设计稿文件的 JSON Schema 经过设计稿协议、程序算法和机器学习算法的分析、计算和识别,转换成一个具有合理的 Flex 布局嵌套结构和代码语义的 imgcook JSON Schema,然后再将这个 Schema 用各种不同 DSL 转换函数转换成各种不同类型的前端代码。
  • 4、imgcook JSON Schema 可以在 imgcook 编辑器中查看,我们可以在可视化编辑器中修改视图、样式等,本质是修改这个 JSON Schema。
  • 5、查看代码,本质是将最终的 imgcook JSON Schema 输入给自定义的 DSL 转换函数,函数的输出就是前端代码。

4、可以举例说说哪些团队是如何使用的

本文档有一些用户使用案例,可以给大家看一下,包括 imgcook 开放的能力。后续用户案例会在 imgcook 官网透出。

5、了解 imgcook 的小缺陷,可以帮助更好的使用

imgcook 虽然能够自动生成可维护性较高的代码,但设计稿图层千变万化,有一些场景目前还没有覆盖到。例如:

  • 设计稿关联图层合并问题:氛围、背景、图标等在设计稿中由多个图层组成,生成代码是需要合并导出成一张图片
  • 布局合理性问题:imgcook 生成的布局嵌套结构不合理或不符合预期
  • UI 逻辑代码生成问题:设计稿中的数据是静态的,实际线上数据是动态的,会带来一些 UI 的变化,但这些 UI 变化在设计稿转代码时无法获知

对于这些问题,imgcook 提供了设计稿协议支持用户手动干预图层的方式来解决,也可以在生成之后在 imgcook 编辑器中可视化调整。

6、了解更多

imgcook 有钉钉用户群,如果使用上有问题可以在群里提问。可以关注 imgcook 官网和掘金账号关注进展。

用户案例征集

如果您的团队接入了 imgcook 提供的 D2C 服务或者您自己有使用 imgcook 的心得,欢迎在本文评论区留言或直接贴上文章链接(ATA、掘金、知乎等技术分享网站均可)。

将有机会获得 imgcook 定制礼品。 ​




淘系前端-F-x-Team 开通微博 啦!(微博登录后可见)
除文章外还有更多的团队内容等你解锁🔓

文章分类
阅读
文章标签