提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
58同城用户体验设计中心的设计规范「LOCO Design System」正式对外开源啦
2019年年末,58UXD重新整理了58同城的设计规范,在原有基础上将组件扩展到了20种,覆盖了532种组件状态以及接近1000枚的图标。在2020年将其正式更名为「LOCO Design System」,从此开始,这套设计系统支撑了58同城各业务线的日常迭代,成为协同各业务线设计部提升设计一致性的重要纽带,无缝链接用户、设备、场景的载体和触点,为用户提供完美的生活服务体验。
「 LOCO Design System」包含了大量的可复用资源,如icon、全局样式、基础组件、布局、导航、输入等,可用来快速搭建的界面设计,大大提升UXD设计师的效率。
目前,「 LOCO Design System」已集成到58自研的产品风火轮上,大家可以下载风火轮的Sketch插件即可拖拽设计资源到画板上进行编辑。
风火轮除了承载设计资产以外,还可以可通过Sketch插件上传设计稿到风火轮协作平台,实现标注和代码解析,可直接链接分享给产品和开发。下面我就来介绍下这款神器。
一款为设计者提升工作效率的 Sketch 插件,轻松调用「 LOCO Design System」
Sketch插件:通过Sketch插件进入设计师的工作流程,聚合设计资产,解决设计规范落地、设计资产可视化承载,提升设计规范和设计资产的使用率,增强资源共享避免重复设计。目前为止sketch插件可以承载icon库、组件库、场景库、插画库、基础运营库资源。大家可以通过我们的制作要求,上传自己的规范。
1、组件资源-icon/色彩/组件/场景/插画
主要承载58集团「 LOCO Design System」的设计规范和设计资产,供全体设计师共享使用。
2、自有组件库快速生成
可自己制作组件Library,导入风火轮Sketch插件。导入的组件Library需遵循《本地Library资源制作规范》。
3、上传设计稿
可通过风火轮Sketch插件上传设计稿到风火轮协作平台,实现标注和代码解析,可直接链接分享给产品和开发同学。
设计师、产品、研发多角色一站式协同平台,设计稿在线可视化
通过风火轮协作平台进行团队管理,团队资产、项目管理,实现设计稿在线标注解析,供研发同学在线查看研发。同时还生成各种前端代码,供前端同学复制使用,缩短研发同学的工作路径,提升工作效率的同时顺应市场潮流,实现从设计到代码的愿景。
1、团队与项目
1)风火轮协作平台的团队项目,采用团队—(文件夹)—项目—分组—画板的层级进行设计稿的管理。
2)项目是从属于团队的。想使用项目相关功能,需要先创建/加入一个团队。为便于管理,一个团队下可建立多个项目。
2、项目文件管理
项目可存在于任何一级文件夹下。团队成员均可进行项目管理。项目文件中承载了项目中的全部内容(设计稿、切图、源文件、代码等)。
3、多方协作-编辑器
编辑器页面可进行设计稿画板标注/代码信息查看、设计图/切图下载。每个画板提供了标注模式和代码模式两种视图。
1)在标注模式下,可以查看图层的尺寸、位置、字体、文本内容、样式等信息,可以复制并使用标注样式代码;如果是切图,则可以下载对应的不同尺寸、格式的图片。
2)在代码模式下可查看平台解析当前画板,所生成的全部代码,可一键复制使用。
4、代码生成
在上传设计稿时选择生成代码,在协作过程中,平台会展示,整个设计项目的全部代码,供研发同学使用。我们目前生成的代码,高精度的还原了设计稿。
对于不同规模的产研团队,风火轮都没有任何的费用。良心的免费设计神器,大家快来解锁吧!
风火轮官网:https://fhl.58.com,下载风火轮插件,即可获取LOCO Design的源文件哦!
Powered by Froala Editor
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册