我們將逐步介紹如何為您的產品建立設計系統。
選擇 UI 框架
如果您不想花費大量資金從頭開始建立設計系統，則應該選擇技術堆疊中現有的 UI 框架之一。
從頭開始建立一個真正優秀的設計系統非常困難。
定義你的主題
每個現有的 UI 框架都會為您提供一個預設主題，您可以根據您的產品顏色和要求進行自訂。
避免過多的定制以避免複雜性。
定義淺色和深色主題。
為您的設計系統建立一個包
在 Woovi，我們使用@woovi/ui作為我們的設計系統。
如果您使用我們推薦的 monorepo，您只需在 monorepo 中建立一個新套件並僅匯出供您擁有的產品使用的公共元件。
按照這種方法，所有產品始終使用最新版本的設計系統。
如果您使用的是 Poly repo 方法，您需要建立一個新的儲存庫來包含設計系統並將其發佈到 npm。
按照這種方法，您每次修改設計系統時都需要發布新版本。您還需要更新使用它的所有產品。
故事書
將設計系統中的所有公共元件加入到故事書中，該故事書也應該部署在每個設計系統變更上。
對於在產品中使用設計系統的團隊來說，故事書是最好的文件。
避免在產品程式碼上使用自訂 CSS 和自訂元件
避免在產品程式碼中使用自訂 CSS 和自訂元件。
大多陣列件或也許所有元件都應該來自設計系統。
如果一個元件不存在於設計系統中，那麼它也可能不存在於設計原型中，或者我們應該將其加入到現有的設計系統中。
每次在設計系統中加入更多元件或值時，都會增加複雜性並增加維護成本。
回歸 UI 測試
您可以將回歸 UI 測試新增至設計系統中，以確保每次變更都不會意外破壞產品程式碼。
綜上所述
為您的產品建立設計系統聽起來工作量很大，但這是一項巨大的投資。
您將需要做更多的前期工作，但建立新前端頁面的邊際成本將會降低。
如果您需要更多理由來擁有設計系統，請查看這篇文章每個產品都需要一個設計系統
Woovi是一家讓購物者能夠按照自己喜歡的方式付款的新創公司。 Woovi 為商家接受訂單提供即時支付解決方案，使其成為可能。
如果您想與我們合作，我們正在招募！
原文出處：https://dev.to/woovi/practical-guide-to-creating-a-design-system-1b3p
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式