起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識8個實用步驟，教你執行與落地一套設計系統，提升設計價值
編輯導讀：隨著互聯網行業的發展，產品體驗的一致性和開發的效率越來越被重視，設計系統的出現就是為了解決這樣的問題。但在國內，設計系統這一塊還處于初級階段。如果做好了設計系統這塊的工作，是設計師體現自身價值的一個很重要的機會。
本文作者詳盡地分享了她們公司是如何一步一步的構建設計系統的，供大家一起參考學習。
設計系統現在是常用的設計手段，你可能經常能看到這個詞。我在之前做的一個web設計項目中，第一次接觸到“設計系統”。在 99.co 項目中中我僅與另外一位產品設計師合作，資源實在有限。不過我們認為設計系統非常重要，因為它能消除設計不一致、改善設計師和開發未來的工作流程。為了推動這個項目，我們必須要做更多的努力。
為了更好地理解，我在這里定義一下什么是設計系統——具有清晰的使用規范、可重復使用的組件庫，并在設計師和開發者之間共享。它需要標明組件應何時使用，包括隨時可調用的代碼。
我們的設計系統仍在迭代中，但我仍希望通過這篇文章，能把我們的經驗以及一些有用的技巧和工具分享給你。
步驟：
- 檢查現有組件
- 學習參考優秀的設計系統
- 列出組件表
- 計劃時間
- 完善組件
- 創建控件
- “設計”設計系統
- 設計系統落地
步驟1：檢查現有組件
為了全面了解我們要做的事，對產品中現有組件進行檢查非常重要。包括每個頁面上的每個元素。這是至關重要的一步，盡管很繁瑣乏味。為此，我們截了一些圖，并使用 Trello(https://trello.com) 對其進行整理。
Trello面板，每一列都是帶有標簽的卡片
每一列(從上到下) 代表我們網站上的一個頁面，例如主頁。每一列的頁面都被截圖，并組織成卡片。每張卡片都有標簽標記（右側的面板），這些標簽表示頁面中存在的每個組件。不同顏色的標簽代表不同組件。例如復選框、單選按鈕等是數據輸入的形式，它們用綠色標記。
通過顏色分類可以過濾出相同類型的組件
通過這種方式進行組織，我們可以輕松地搜索特定頁面，或者使用右側面板按組件進行過濾，并查看所有頁面上當前的用例。它還有助于發現設計不一致之處。
步驟2：學習參考優秀的設計系統
以下是一些標桿級的設計系統，我們將它們作為參考：
- [Atlassian](https://atlassian.design/)
- [Ant Design](https://ant.design/)
- [IBM](https://www.carbondesignsystem.com/)
- [Zendesk](https://garden.zendesk.com/)
- [Workday](https://design.workday.com/)
- [HubSpot](https://canvas.hubspot.co)
- [Salesforce](https://www.lightningdesignsystem.com/)
- [Shopify](https://polaris.shopify.com/)
- [Bootstrap](https://getbootstrap.com/)
- [QuickBooks](https://designsystem.quickbooks.com/)
我們想汲取這些出色的設計系統中的精華，看看它們是如何做的。下面介紹幾個我最喜歡的——Atlassian 和 Ant Design
Atlassian 設計系統
Altassian將其設計系統分為“品牌”，“營銷”和“產品”。由于不同方面的設計需要不同的準則，所以要滿足各方面的需求以確保公司的設計語言一致。例如，與“產品”相比，“營銷”在設計漂亮的搭配時需要更多的顏色，而”產品” 我們一般只需要一組固定的顏色來展示不同的組件狀態。Altassian還為每個組件標注了非常清楚的使用指引，包括不同的樣式和變化，還有使用案例。
Ant 設計系統
Ant Design 將其組件分為不同的部分，例如數據顯示，數據輸入，導航等等。這確實有助于組織和查找組件。它們在右上角展示這些錨點（譯者注：類似于組件的標簽），這樣用戶無需滾動到底就可以知道每個頁面的組件內容。每個組件的樣式和變化都預先展示，并且每個組件都是可交互的。代碼的提供也使開發人員可以快速獲得代碼，這是非常棒的用戶體驗！
步驟3：列出組件表
在學習了其他的設計系統后，我根據我們在Trello上的研究和篩選標簽，圈出了需要的模式和組件。這樣一來，我們就可以對需要走查的內容有一個大致了解，以便我們能夠時刻跟進并安排時間。
Google Docs上的跟進概述
我根據功能將組件分為以下幾個部分：按鈕、數據輸入、數據顯示、反饋和導航。我們會不斷修訂這個表，討論完一個就勾掉一個。
步驟4：安排時間
接下來，我們根據每個人的任務分工制定了每周時間表。這有助于使參與設計系統的每個人都了解最新的進度，并有助于資源分配。我們從Trello用例中最常用的組件開始。版式，顏色和布局是首要的，因為它們為后面要做的事奠定了基礎。
Google Sheet 上的時間表
日常工作之外的時間有限，我們爭取每周有兩到三次對設計系統的討論，每次大約兩小時。當然這是理想的情況。很多時候，產品設計師都被工作淹沒了，無法抽出時間。在少數情況下，我們能夠投入更多的時間來討論，并盡量彌補失去的時間。
除了每周討論之外，我們還在sketch上把組件作成控件，制作了設計系統的頁面，并讓前端人員來構建這些頁面。我們將根據我們的進展每周不斷更新時間表。
步驟5：完善組件
研究和討論的最終目的是完善組件，設計它們的屬性和狀態，并建立準則。每個組件我們都在Trello上回顧了它的使用案例，并研究最佳用法。
起初，我們在開會時研究組件。但是后來我們意識到研究并不需要兩個設計師都在場。事先各自用自己的時間研究，保證開會時的討論時間，這樣會更好。
Google Drive 里關于討論的文件
我們用Google Docs做了會議記錄，以便跟進決策，也能回顧我們是如何做出這些決策的。有了這些筆記，我們就會想起過去的思考過程和決策，以便更好地進行后續的決策。
步驟6：創建控件
隨著討論的深入，我們開始構建樣式規范。我創建了文本和圖層樣式庫，并在滿足其狀態和變化時對Sketch上的每個組件進行控件化。
Sketch上的文本和圖層樣式庫
Sketch上的組件庫
我們再一次梳理了內容，并參考其他的UI Kits，以比較命名方式。我意識到，實際上不存在完美的命名方式，我們應當找到適合我們的。隨著工具的不斷更新，我們還可能要相應地調整工作流程。
舉個例子，最近的sketch60更新，更新了組件面板和彈窗。我們之前的樣式庫命名方式是根據大小、字重、顏色、對齊方式和線條高度劃分多個層。在新版本的彈窗中，我們必須點擊很多次才能找到特定的樣式。
更新過的命名方式
為了適應這次更新，我拉平了命名結構，現在可以通過[size] [weight] 來搜索那些帶有或不帶默認行高的字體顏色，或通過[colour]來查看按大小和字重排序的此顏色的字體。我們的中性色色板的命名也從[Dark], [Mid] 和 [Light] 縮短為 [D]，[M],和 [L]，因為彈出框的空間有限。在未來，我預計將會有更多的變化，但總體來說，這些更新肯定會提高我們的效率。
下面是一些有用的文章：
- 釋放SKETCH控件的全部潛能[Unleashing The Full Potential Of Symbols In Sketch](https://medium.com/sketch-app-sources/sketch-symbols-b36f7355414a)
- 我們都在等待SKETCH更新[The Sketch Update We’ve All Been Waiting For](https://medium.com/ux-power-tools/the-sketch-update-weve-all-been-waiting-for-plus-a-brand-new-ux-power-tools-72c405fd490d)
- Sketch58 智能布局[Sketch 58 — Smart Layout!](https://medium.com/sketch-app-sources/sketch-58-smart)
- 在SKETCH中使用智能布局[Using smart layout in Sketch](https://uxdesign.cc/sketch-smart-layout-bfc8ceeda44c)
- sketch60 新組件面板使用指南[Sketch 60 & New Components Panel — How to Use It?](https://medium.com/sketch-app-sources/sketch-60-new-components-p)
- 如何在組件中使用樣式和控件[How to work with Styles & Symbols in Sketch Components Panel](
還有好用的sketch插件：
- Find and Replace : 快速在圖層和控件中更改文本
- [Find and Replace](https://github.com/mscodemonkey/Sketch-Find-And-Replace)
- ?Shared Style Finder : 共享圖層或文本樣式搜索器
- [Shared Style Finder](https://github.com/sonburn/shared-style-finder)
- Sketch Runner : 用鍵盤更快的執行 sketch action(宏命令)
- [Sketch Runner](https://sketchrunner.com/)
- Symbol Organizer : 按字母順序排序控件，并按控件名分組
- [Symbol Organizer](https://github.com/sonburn/symbol-organizer)
步驟7：“設計”設計系統
如上所述，我們希望將其他設計系統的精華納入我們的設計系統。在每個頁面的組件控件化之后，我為每個頁面設計了模型，然后給前端人員來實現這些頁面。
Sketch上的設計系統模型
我們很快就發現這并不理想。我們花了大力氣去做這些頁面，但資源實在有限。因此得有個工具來減少我們的工作量。以便可以將資源更好地分配給必要的事——那就是制作組件并在產品中實現它們。
找到一個可以集成到現有工作流程中的工具至關重要，版本控制、品牌定制等功能也很好。我們在 uxtools.co 看到了設計工具功能比較的表格。經過考量，我們決定使用Zeroheight.
Zeroheight設計系統
我在每個頁面中為不同的組件和其變化都設立了使用指南，并且通過插件將sketch控件直接導入zeroheight?？梢允褂媒换ナ紿TML代碼段和storybook組件向觀看者顯示實時組件示例，開發人員還能調用API輕松與設計保持同步。
步驟8：設計系統落地
與工程師、產品經理和其他利益相關者的溝通在整個流程中都非常重要，尤其是設計的執行。為了實現設計系統，我們構建新的組件，將他們鏈到zeroheight，并替換現有的舊組件。
Google Sheets上的計劃表
我向數據分析師核對了最常訪問頁面的情況。由于這些頁面的流量最高，因此我們決定在不同階段更新這些頁面的組件。最初的計劃是每兩周進行一次更新。
然而作為一個初創公司，必須優先考慮做功能上的工作，我們無法按計劃堅持下去，而是做了妥協。我們正在做哪個頁面，就將新的組件替換到這個頁面上。
Zeplin上的整體風格指南
Zeplin上的連接組件
我們用于提高設計師和開發人員之間協作的另一個工具是Zeplin,它有 整體風格指南 和 連接組件 。正如上圖所示 ，我們將所有新的組件直接上傳到風格指南中，開發人員就能夠將他們的代碼庫和文檔來源（storybook或 github）鏈接到這些組件。這么做后，每當開發人員在Zeplin上檢查設計時，他們都可以查看這些組件的概述，并可以重復使用它們。
以上就是我們從0開始設計系統的方式。我們仍有許多工作要做，但是進展緩慢總比沒有要好。這是一個持續的挑戰，我們將不斷總結，以更好地完成需求的需求。萬事開頭難，一步一步來！
原文鏈接：https://uxdesign.cc/starting-a-design-system-in-a-start-up-3359f2d4784b
原作者：Ruiwen Tay；
翻譯：Scott；公眾號：彩云譯設計
本文由 @彩云Sky 翻譯發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
厲害