一站式设计开发工作台「风火轮」正式免费开放啦～

01

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

风火轮经过58集团产研团队一年的沉淀和打磨，今天正式对外开放。这款由58产研团队共同创造的产研提效工具，可以帮助更多的中小型企业及个人设计师和开发者提效，体现让“生活简单美好”的企业价值观。

02

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

那么我们具体了解下插件和平台都是什么？

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

1、组件资源-icon/色彩/组件/场景/插画
主要承载集团全部的设计规范和设计资产，供全体设计师共享使用。

2、自有组件库快速生成
可自己制作组件Library，导入风火轮Sketch插件。导入的组件Library需遵循《本地Library资源制作规范》。

3、上传设计稿
可通过风火轮Sketch插件上传设计稿到风火轮协作平台，实现标注和代码解析，可直接链接分享给产品和开发同学。

二、协作平台

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

1、团队与项目
1）风火轮协作平台的团队项目，采用团队—（文件夹）—项目—分组—画板的层级进行设计稿的管理。

2）项目是从属于团队的。想使用项目相关功能，需要先创建/加入一个团队。为便于管理，一个团队下可建立多个项目。

2、项目文件管理
项目可存在于任何一级文件夹下。团队成员均可进行项目管理。项目文件中承载了项目中的全部内容（设计稿、切图、源文件、代码等）。

3、多方协作-编辑器
编辑器页面可进行设计稿画板标注/代码信息查看、设计图/切图下载。每个画板提供了标注模式和代码模式两种视图。

1）在标注模式下，可以查看图层的尺寸、位置、字体、文本内容、样式等信息，可以复制并使用标注样式代码；如果是切图，则可以下载对应的不同尺寸、格式的图片。

2）在代码模式下可查看平台解析当前画板，所生成的全部代码，可一键复制使用。

4、代码生成
在上传设计稿时选择生成代码，在协作过程中，平台会展示，整个设计项目的全部代码，供研发同学使用。我们目前生成的代码，高精度的还原了设计稿。

03

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

「风火轮」上线的一年时间里，我们快速响应迭代，通过多个版本的更新优化，使其达到了一个稳定且持续更新的状态。

目前「风火轮」插件在公司内部承载了8000多个可复用的设计资产，解决了大多数重复设计、开发的状态，累计节省设计时长30000+小时。通过自动化解析生成代码量超过5000+，生成图片量200W+，累计节省研发时长6000+小时，提升整体协同效率30%。

04

网址：https://fhl.58.com，这是我们风火轮协作平台的网址，大家可以下载插件进行使用。同时我们也开放了部分设计资产，为广大设计师提效。

未来我们会开放更多的功能和资源来为大家服务，请大家多多关注。

如有想要合作的团队，欢迎来撩，有兴趣通过https://fhl.58.com官网扫码联系我们，我们可以进行深入的探讨。

? 一起聊设计 ?‍♂️

高质量，学知识的设计行业群

设计行业一手资料

设计大厂最直接内推

定期大咖直播

0门槛扫码进群！

期待与更多优秀设计师一起成长?

本篇文章来源于微信公众号:58UXD