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

扫一扫
官方手机版

扫一扫
AI创作程序

扫一扫
木子公众号

扫一扫
AI公众号

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

大厂组件：

有哪些组件值得学习？我梳理了8个大厂的设计组件！

设计组件作为设计系统里的组成部分，可以说是构成这个系统最基础也是最实用的部分了。

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

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

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

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

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

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

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

2. 自有组件库快速生成

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

3. 上传设计稿

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

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

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

团队与项目

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

项目文件管理

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

多方协作-编辑器

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

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

代码生成

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

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

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