速来围观 | 58集团踩着风火轮来了！

王澍——Node.js 技术专家/58集团LBG Node.js 架构师/资深全栈工程师。3年Java开发经验，7年Node.js开发经验。曾为转转集团搭建整个Node.js生态环境、基建服务等。目前是五八集团风火轮项目负责人、Picasso（毕加索）开源项目负责人、LBG 低代码平台 Node.js 负责人。

▼

— 1 —

风火轮是什么？

风火轮是前端技术委员会联合58UXD打造的一站式设计、产品、研发协作平台。它包含Sketch插件和协作平台两部分。可实时协同设计规范、承载多种类型设计资产、sketch设计稿在线可视化、自动标注及前端代码的自动解析和生成，是一款产研协同的提效工具。

— 2 —

风火轮诞生记

起初为什么要做这个风火轮呢？

• 设计规范的统一性和重复性问题

众所周知58集团有很多业务，这些业务都基本上都集中在58 APP上，在没有风火轮时候，所这些业务线都会出现不统一和重复的性的问题，比如设计规范，很多业务线都有各自的一套设计规范，而且这里面很多东西都是重复的。

起初集团也试着使用内部系统iWiki上创建规范专区，收集了非常多的规范库，花费的人力物力非常大，但是收益非常小。因为iWiki文档天然脱离了作图的一个路径，平时查找起来也非常不方便。比如UXD开始作图的时候需要去iWiki查一查有哪些规范，非常的不方便，所以最终效果也不是很好。

iWiki 规范

后来我们又尝试使用Sketch自带的控件功能，虽然在UXD的画图的流程里面，但是预览是非常不方便的，我们收集了非常多的规范，查找起来也非常的不方便。

Sketch自带的控件功能

在业界很多友商也做了一些软件比如某某萝，它是Sketch一个插件，可以把本地的组件库上传上去，但是它会有一些问题

• 不能实现同步更新问题：我们58集团有上百个UXD人员，不能在同一时间获得同一组件的相同的信息，必须需要手动的更新。组件的不同步，就会导致非常多的问题。

• 设计资产安全问题：我们如果使用友商的软件，就会把集团内部自己的设计资产放到别人的网站上，会存在一定的安全风险。

友商插件

最总得出一个结论：我们需要的是一个既要处在UXD画图的过程中，又要保证组件能同步跟新，还要方便好用一款软件。

• 设计过程中存在大量重复内容

UXD在设计的时候，经常会出现大量重复的内容，而且有些内容没有必要再重复画一遍的，有的UXD同学也会做一些常用的控件库，用的时候直接一拖。

所以我们就在想，我们能不能把这些控件库收集起来，分门别类，给大家共享呢？

基于这两点原因策划了风火轮这个项目，核心就是把“规范”和“组件”结合起来。

— 3 —

风火轮有什么能力

58集团设计师Sketch的使用率高达90%，因此我们选择了Sketch作为我们整体链路的基础。设计师使用「风火轮」插件上传设计稿到协作平台，平台通过Picasso这款自研的解析工具进行智能解析，不仅仅输出了设计标注，还同时生成了终端代码，高度还原设计稿的同时，满足各种场景需求。

• 插件

Sketch插件：通过Sketch插件进入设计师的工作流程，聚合设计资产，解决设计规范落地、设计资产可视化承载，提升设计规范和设计资产的使用率，增强资源共享避免重复设计。目前为止sketch插件可以承载icon库、组件库、场景库、插画库、基础运营库资源。大家可以通过我们的制作要求，上传自己的规范。可帮助设计团队提升设计师的工作效率，也避免了大多数的重复设计，同时我们会将部分58集团设计资产进行开源。

插件

• 协作平台

通过风火轮协作平台进行团队管理，团队资产、项目管理，实现设计稿在线标注解析，供研发同学在线查看研发。同时还生成各种前端代码，供前端同学复制使用，缩短研发同学的工作路径，提升工作效率的同时顺应市场潮流，实现从设计到代码的愿景。

协作平台

— 4 —

风火轮在58集团的应用

「风火轮」自从2020年12月30日上线以来，逐步覆盖了全公司所有的产研团队，包括安居客、驾校一点通、58数科等公司，成功地替代了「某某湖」，成为集团产研提效的协作平台，并且得到内部团队较高的评价。

UI自动化已经成为当前行业研究的趋势，sketch设计稿存储的是结构化数据，这给我们进行UI自动化解析生成代码提供了契机，智能解析工具应运而生。8月19-20日，即将于深圳举办的2022K+全球软件研发行业创新峰会上，王澍将带来《UI自动化智能解析之路》主题分享，为研发人员提供一套完整的UI自动化解析实现方案。

感兴趣的同学可以扫描下方海报二维码，或点击下方“阅读原文”了解更多峰会详情！

点这里↓↓↓记得关注标星哦~

人才培养、版权课程设计与输出、人才培养体系设计与开发等一系列的人力资本专业服务。本平台致力于为企业提供人才培养方面的内容分享。" data-from="2" has-insert-preloading="1" data-filtered="filtered" wah-hotarea="click" style="margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important;">
中智凯灵
中智凯灵是国内领先的专业人力资本服务供应商，为企业提供从人力测评、关键岗位人才培养、版权课程设计与输出、人才培养体系设计与开发等一系列的人力资本专业服务。本平台致力于为企业提供人才培养方面的内容分享。
72篇原创内容
公众号