編輯導讀：隨著網際網路行業的發展，產品體驗的一致性和開發的效率越來越被重視，設計系統的出現就是為了解決這樣的問題。但在國內，設計系統這一塊還處於初級階段。如果做好了設計系統這塊的工作，是設計師體現自身價值的一個很重要的機會。本文作者詳盡地分享了她們公司是如何一步一步的構建設計系統的，供大家一起參考學習。
設計系統現在是常用的設計手段，你可能經常能看到這個詞。我在之前做的一個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。可以使用交互式HTML代碼段和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；
本文由 @彩雲Sky 翻譯發布於人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基於CC0協議