sunilwang

V1

2022/07/26阅读:10主题:绿意

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

作者简介

王澍:一个会写Node.js的全栈工程师!58本地服务FE公众号小编;Picasso 开源项目负责人;

风火轮是什么

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

风火轮的诞生记

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

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

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

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

iWiki 规范
iWiki 规范

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

Sketch自带的控件功能
Sketch自带的控件功能

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

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

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

友商插件
友商插件

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

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

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

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

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

风火轮有什么能力?

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

插件

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

插件
插件

协作平台

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

协作平台
协作平台

风火轮在58集团的使用情况

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


LBG开源项目推广:

还在手写 HTML 和 CSS 吗?
还在写布局吗?
快用 Picasso 吧,Picasso 一键生成高可用的前端代码,让你有更多的时间去沉淀和成长,欢迎Star

开源项目地址:https://github.com/wuba/Picasso
官网地址:https://picassoui.58.com

分类:

前端

标签:

工具介绍

作者介绍

sunilwang
V1