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 插件可以承載 icon 庫、組件庫、場景庫、插畫庫、基礎運營庫資源。大家可以通過我們的制作要求，上傳自己的規范。

1. 組件資源-icon/色彩/組件/場景/插畫

主要承載 58 集團「LOCO Design System」的設計規范和設計資產，供全體設計師共享使用。

2. 自有組件庫快速生成

可自己制作組件 Library，導入風火輪 Sketch 插件。導入的組件 Library 需遵循《本地 Library 資源制作規范》。

3. 上傳設計稿

可通過風火輪 Sketch 插件上傳設計稿到風火輪協作平臺，實現標注和代碼解析，可直接鏈接分享給產品和開發同學。

設計師、產品、研發多角色一站式協同平臺，設計稿在線可視化

通過風火輪協作平臺進行團隊管理，團隊資產、項目管理，實現設計稿在線標注解析，供研發同學在線查看研發。同時還生成各種前端代碼，供前端同學復制使用，縮短研發同學的工作路徑，提升工作效率的同時順應市場潮流，實現從設計到代碼的愿景。

團隊與項目

1. 風火輪協作平臺的團隊項目，采用團隊—（文件夾）—項目—分組—畫板的層級進行設計稿的管理。
2. 項目是從屬于團隊的。想使用項目相關功能，需要先創建/加入一個團隊。為便于管理，一個團隊下可建立多個項目。

項目文件管理

項目可存在于任何一級文件夾下。團隊成員均可進行項目管理。項目文件中承載了項目中的全部內容（設計稿、切圖、源文件、代碼等）。

多方協作-編輯器

編輯器頁面可進行設計稿畫板標注/代碼信息查看、設計圖/切圖下載。每個畫板提供了標注模式和代碼模式兩種視圖。

1. 在標注模式下，可以查看圖層的尺寸、位置、字體、文本內容、樣式等信息，可以復制并使用標注樣式代碼；如果是切圖，則可以下載對應的不同尺寸、格式的圖片。
2. 在代碼模式下可查看平臺解析當前畫板，所生成的全部代碼，可一鍵復制使用。

代碼生成

在上傳設計稿時選擇生成代碼，在協作過程中，平臺會展示，整個設計項目的全部代碼，供研發同學使用。我們目前生成的代碼，高精度的還原了設計稿。

對于不同規模的產研團隊，風火輪都沒有任何的費用。良心的免費設計神器，大家快來解鎖吧！

風火輪官網： https://fhl.58.com ，下載插件，獲取 LOCO Design 的源文件