把设计变成终端代码｜风火轮背后的故事和规划

01.契机

每一个伟大的项目背后总有一个必要的契机和一个有趣的故事，而我们的故事是这样开始的。

在我们团队设计师之间经常会听到这样一些问题：

1、这个项目是谁做的？有没有源文件？
2、这个产品是设计规范是什么？我这样做符合规范吗？
3、之前那谁谁离职了，文件谁能找到？

总体说来就是设计文件管理难，规范一致性统一难，设计师对接协同难

在技术同学之间也会存在一些问题：

1、这部分代码是谁写的，怎么这么乱？
2、技术框架已经落后了，我们现在不这么写了，再优化也没有价值，我们计划重构代码
3、大量重复的UI还原工作，研发变身”切图仔”
4、明明是按照设计稿还原，设计同学总说差1px

而在产品侧的问题却是这样的：
每次都做了很多重复的事，我们版本需求量太有限了，这些问题大大影响了产品节凑和业务扩展的要求。

我们在工作协同开发过程中，一直缺少一个连通器，导致产品、设计、技术沟通协作不便，设计和技术规范落地较难。同时因为缺少容器承载导致各种资源和文件共享不便。因此使得我们重复设计和重复开发内容较多，影响了我们版本需求的吞吐量。

对于一款成熟的产品来说，夯实设计与技术的框架基础地基，这样才能助力我们在上空盖更壮丽的楼阁，基于这种契机，我们希望做一次彻底的改变

02.故事

生逢乱世总有一些拯救世界的英雄出现。当我们带着想法和前端专家“存哥”一起聊的时候，没想到我们双方的想法不谋而合，甚至在细节和方向都出奇的一致。经过几次深度的协商沟通，我们快速制定了解决方案，同时招募研发团队，快速的开展项目，带着激情与理想，「58UXD」与「前端技术委员会」发起了共建项目「风火轮」。

主要通过两方面来解决问题：

设计插件提效：通过Sketch插件进入设计师的工作流程，聚合设计资产，解决设计规范落地、设计资产可视化承载，提升设计规范和设计资产的使用率，增强资源共享避免重复设计。

设计协同管理：通过风火轮协作平台进行团队资产、项目管理，实现设计稿在线标注解析，供研发同学在线查看研发。

在这里有的同学就会说，这不就是做了一个蓝湖吗？

那可就想简单了，我们的终极目标是：“把设计稿变成终端代码”。通过智能解析，将设计稿自动化解析生成代码，提升产研效率。

那么背后的逻辑和我们的思路又是什么呢？

03.代码生成

在我们集团设计师Sketch的使用率高达90%，因此我们选择了Sketch作为UI自动生成代码的设计源，通过Picasso解析工具进行智能解析，高精度还原设计稿，支持多种代码格式，满足各种场景需求。

设计稿生成代码的主要流程如下图：

设计稿生成代码的实际效果展示：

为了提升操作效率，我们将Picasso工具在风火轮协作平台直接内置，这样设计师上传设计稿交付需求的同时，风火轮自动将设计稿转换成代码。代码生成的UI界面与设计稿几乎完全一致，并且代码的可用度高，生成代码的结构布局合理、可维护性高，提供了两种模式: 专注于高精度解析的运营版和专注于代码可用度的普通版，并且支持多种格式、尺寸的切图，导出来满足不同平台、不同尺寸屏幕的需求。

为了保证智能解析代码的还原度，我们通过以下几个方式来处理解析问题：

1、还原度计算—感知哈希算法

我们将自动生成的UI页面通过puppeteer进行截图，通过感知哈希算法与原图进行像素对比，计算出生成页面的真实还原度。

2、样式解析-渐变解析方案

在渐变处理方面，首先根据渐变类型分为线性渐变、径向渐变、环形渐变三种，然后根据渐变值、位置等信息计算渐变方向距离及渐变节点之间的比例，最终生成渐变样式代码。

3、图片处理—精准切图方案

为了精准还原图片，我们通过调用sketch API进行图层截图的方式，计算不规则图形的精准位置及大小，精准切图是保证我们的高精度还原页面的关键；

为了保证智能解析代码的可用度，我们通过以下三个方式来处理可用度问题：

1、结构重组

由于设计同学输出设计稿是以视觉为主，不太关注分组结构的合理性，因此我们需要将原有的分组去掉，按照符合开发习惯的方式进行重新分组。

2、特征分组

针对列表这种重复结构的场景，我们通过特征分组算法识别相似结构，减少代码重复，提升生成代码的合理性

3、样式优化-样式精简、样式排序

样式精简及排序，使得生成代码更贴近工程师”手写代码”，代码可维护性更高。

04.能力与规划

我们做一下回顾，20年12月30日成功将「风火轮」研发上线以来，历经7个月的时间，用户覆盖了集团85%的产研团队，并且覆盖了大多数的子公司。Sketch Plugin以容器的形式承载了6000+的设计资产和14调业务的设计规范，智能生成了1500+代码。

风火轮上线7个多月的时间，经历的3次版本迭代，上线核心功能点20+；风火轮插件发布了2个大版本，20多个小版本迭代，快速解决了100+的线上BUG，不断完善功能和优化体验。并且建立了完善的用户反馈机制，以最快的的方式解决用户诉求。

目前为止我们生成代码覆盖了常见终端代码格式：Web、Mini Programs、React Native、Flutter、iOS、Android等。代码解析还原精度达99.8%，生成终端代码可用度85%（目前行业顶级）

在未来我们要以解放生产力为目标，继续深耕从设计到代码的路线，以风火轮为媒介，将产品、设计、开发紧密的连接起来，为我们内部协同发光发热。同时也欢迎更多的设计师和研发工程师加入我们，共同构建风火轮生态，编写故事的下一篇章。