2019 年年末,58UXD 重新整理了 58 同城的设计规范,在原有基础上将组件扩展到了 20 种,覆盖了 532 种组件状态以及接近 1000 枚的图标。在 2020 年将其正式更名为「LOCO Design System」,从此开始,这套设计系统支撑了 58 同城各业务线的日常迭代,成为协同各业务线设计部提升设计一致性的重要纽带,无缝链接用户、设备、场景的载体和触点,为用户提供完美的生活服务体验。

大厂组件:

「LOCO Design System」包含了大量的可复用资源,如 icon、全局样式、基础组件、布局、导航、输入等,可用来快速搭建的界面设计,大大提升 UXD 设计师的效率。

目前,「LOCO Design System」已集成到 58 自研的产品风火轮上,大家可以下载风火轮的 Sketch 插件即可拖拽设计资源到画板上进行编辑。

正式上线!58UXD 设计组件 LOCO Design 开源啦!

正式上线!58UXD 设计组件 LOCO Design 开源啦!

风火轮除了承载设计资产以外,还可以可通过 Sketch 插件上传设计稿到风火轮协作平台,实现标注和代码解析,可直接链接分享给产品和开发。下面我就来介绍下这款神器。

为设计者提升工作效率的 Sketch 插件,轻松调用「LOCO Design System」

通过 Sketch 插件进入设计师的工作流程,聚合设计资产,解决设计规范落地、设计资产可视化承载,提升设计规范和设计资产的使用率,增强资源共享避免重复设计。目前为止 sketch 插件可以承载 icon 库、组件库、场景库、插画库、基础运营库资源。大家可以通过我们的制作要求,上传自己的规范。

1. 组件资源-icon/色彩/组件/场景/插画

主要承载 58 集团「LOCO Design System」的设计规范和设计资产,供全体设计师共享使用。

正式上线!58UXD 设计组件 LOCO Design 开源啦!

正式上线!58UXD 设计组件 LOCO Design 开源啦!

2. 自有组件库快速生成

可自己制作组件 Library,导入风火轮 Sketch 插件。导入的组件 Library 需遵循《本地 Library 资源制作规范》。

正式上线!58UXD 设计组件 LOCO Design 开源啦!

3. 上传设计稿

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

正式上线!58UXD 设计组件 LOCO Design 开源啦!

设计师、产品、研发多角色一站式协同平台,设计稿在线可视化

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

正式上线!58UXD 设计组件 LOCO Design 开源啦!

团队与项目

  1. 风火轮协作平台的团队项目,采用团队—(文件夹)—项目—分组—画板的层级进行设计稿的管理。
  2. 项目是从属于团队的。想使用项目相关功能,需要先创建/加入一个团队。为便于管理,一个团队下可建立多个项目。

正式上线!58UXD 设计组件 LOCO Design 开源啦!

项目文件管理

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

正式上线!58UXD 设计组件 LOCO Design 开源啦!

多方协作-编辑器

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

  1. 在标注模式下,可以查看图层的尺寸、位置、字体、文本内容、样式等信息,可以复制并使用标注样式代码;如果是切图,则可以下载对应的不同尺寸、格式的图片。
  2. 在代码模式下可查看平台解析当前画板,所生成的全部代码,可一键复制使用。

正式上线!58UXD 设计组件 LOCO Design 开源啦!

代码生成

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

正式上线!58UXD 设计组件 LOCO Design 开源啦!

对于不同规模的产研团队,风火轮都没有任何的费用。良心的免费设计神器,大家快来解锁吧!

正式上线!58UXD 设计组件 LOCO Design 开源啦!

风火轮官网: https://fhl.58.com ,下载插件,获取 LOCO Design 的源文件

收藏 19
点赞 15

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。