01
当下环境
大多数成规模的设计团队都有一套自己的设计规范，用规范来解决设计产出的一致性，提升设计效率。多年来58一直处于快速增长的状态，整个平台的设计一致性没有得到很好地统一，并且在长期的协作过程中因规范标准执行地不彻底，导致各种问题凸显。
“组件库”这一名词在大多数互联网行业中已流行起来，而且它的价值也越来越明显：通过组件能够快速搭建前端页面、降低沟通成本、也能更好地统一设计规范等。
另外面对58庞大的产品量级、快速的产品迭代以及技术的变革，要求我们有集视觉规范、交互模式、开发组件等于一体的设计语言，而且可以进行庞大的团队项目管理。因此我们需要有一个载体，承载我们的设计规范、交互模式、开发组件、团队项目管理等，来应对当下环境。因此我们的风火轮插件（Sketch Plugin）和风火轮平台应运而生。
02
为什么叫风火轮
神话中：风火轮一风一火，状如太极，周转不已，二轮运转时风火齐至，故其威力可追风逐火，灼热无穷，飞天入海，行空千里万里，速度极快。传说是由青鸾火凤所化而成，一蹬九万里，双足十八万里。
并且它是哪吒的提效工具，而我们正是要打造一个一站式提效工作台，因此用风火轮命名恰到好处。
03
设计侧痛点
Sketch原生组件库可视化程度比较低，层级比较深，搜索和查找不便利，组件库更新同步效率低。
复用率较高的设计场景缺少共享工具承载，设计师之间沟通成本较高，重复设计导致人力资源浪费。
3、由于蓝湖协作平台收费成本较高，导致我们变更为原始的协作流程
协作流程比较复杂，造成协作和共享不便，耗费大量的时间成本。
1、组件代码缺乏一致性，存在重复开发情况，质量也参差不齐。
2、使用第三方组件库，在此基础上进行修改，费时费力，并且扩展和适配成本较高。
1、重复的设计和开发组件使版本需求量不能满足业务扩展需求，同时也降低了版本需求的吞吐量。
基于上述痛点，58UXD联合58前端技术委员会打造了一款连接设计规范、设计稿、前端代码的一站式工作台——风火轮。从风火轮Sketch插件下发设计规范，设计师可通过风火轮Sketch插件获得最新设计规范与设计组件、制作设计稿并上传至风火轮协作平台，同时将上传的设计稿链接分享至产品和开发。开发可通过风火轮协作平台的标注模式查看设计稿标注，也可通过代码模式直接获取设计稿的前端代码。有效的减少沟通成本，提升了交付质量、也保证了设计和开发的一致性、同时也提升了设计和开发的工作效率。
接下来重点介绍下「风火轮」
组件库资源目前分为icon、色彩、组件、场景四部分（此外，插画、运营以及其他项目在规划中）
Icon库：容纳3000+icon资源，其中包含58平台规范icon和通用icon两部分，支持按类查找、搜索、修改颜色、选择大小。
色彩库：覆盖58各业务品牌色，不再因色值而纠缠，同时也可以用颜色一键填充和描边。
组件库：58平台规范的主要承载库，其中容纳1000+的平台设计规范组件，可视化快速查找，轻松拖拽使用，方便修改与替换。
场景库：容纳58各业务常用场景，主要针对于复用率高且较为常规的场景界面，减少重复设计而造成的资源浪费。
如果自己负责的业务有独立的规范，可制作自己的规范组件Library，导入风火轮Sketch插件。导入的组件Library需遵循《本地Library资源制作规范》，否则无法解析识别。导入成功后可在组件库面板-我的组件中查看、选择、使用。插件支持导入并管理多个本地组件库。可点击“导入”进行本地组件库管理。如需更新本地Library，可以删除后再次上传。
目前我们可以通过风火轮Sketch插件上传设计稿到风火轮协作平台，以便分享给产品和开发同学。上传完成后，可查看设计稿，也可直接复制项目链接，或者生成邮件模板发给项目成员，查看者通过链接可以查看、下载设计稿，开发同学也可以通过设计稿查看标注、代码。
风火轮插件集设计系统资源同步、本地设计资源导入、设计文件上传等于一体，让设计产出更轻松。
风火轮协作平台主要进行团队式资源管理，标注/代码双重查看模式，系统Library展示管理，Code UGC共享。
以团队为组织形式，支持查看/管理从风火轮Sketch插件上传的设计稿，目前团队采用邀请制，暂不能主动申请加入，可以找团队管理员，请求加入团队。每个团队有三种角色：超级管理员、管理员和普通成员，三者拥有不同的权限，通过权限分配管理项目成员和项目文件。项目文件可多级文件夹清晰分类，同时也具有项目操作可溯源的功能，追溯高危操作，保障设计资产安全。
用于展示和管理平台规范系统组件库，使用《本地Library资源制作规范》制作的Llibrary文件通过Sketch插件上传到Llibrary库，统一进行管理。
是一个UGC社区，支持技术同学上传/查看/调用具体的系统组件代码。
编辑器是通过交互式标注查看，点击画板元素/组件，即可查看标注信息。设计图/切图可一键下载，并且支持多种格式。提供三种自动代码，毕加索自动代码、组件预置代码、UGC代码。开发同学可以通过分享链接直接进入到编辑器，让开发过程更省心、省力。
总结
风火轮Sketch插件解决了设计侧设计规范系统的落地，可视化的使用场景让组件场景查找更便利，复用率高的场景或组件设计师可通过插件直接使用，也可以自定义个人使用场景。避免了复用性高的场景/组件重复设计，提升了设计效率。Sketch插件与协作平台的打通，降低了团队资源管理成本和沟通成本。
协作平台解决了产品、设计、开发之间协作沟通成本，也为组件代码化打好了基础，我们也规划在下个阶段将我们设计规范组件实现代码化。降低开发和测试成本，同时提升产品需求的吞吐量，让我们可以有时间做更多好玩的事。
最后
风火轮项目历经两期的开发，已经实现了我们项目拟定的核心功能。从设计规范系统的下发，到设计稿的上传，再到标注代码的生成，我们有效地提升了58设计开发之间的协作效率，后面也会升级为全面提升产研效率的媒介。我们也会逐步纳入更多的功能，实现从设计到代码的一站式服务，让我们日常工作变得更轻松。
我们保持一颗匠人的心态，不忘初心，致力将风火轮打造成为集团内 “产品——设计——开发一站式工作台”。在追求极致提效的同时，也会探索更多的可落地方案。汇集并沉淀更优质的设计服务能力，未来也可以开放给外界。「让协作更简单」这是我们终极目标。
最后，大家在使用风火轮的过程中，有好的点子或者想法欢迎来撩，也欢迎想一起搞事情的朋友加入我们！
本篇文章来源于微信公众号:58UXD
