如果是第一次接觸「Design System」的捧油，可能會很陌生甚至一頭霧水，來～別怕，讓我們從頭開始。

Design System 是什麼 ？

理論解：
Design System（設計系統）是一套有系統、有規範的設計資源，目的是確保整個產品在視覺設計、互動體驗和工程實做的一致性，並且要持續維護，確保使用者（設計師、工程師）能同步更新。

白話解：
Design System 就像一個一個照規範做好的積木或樂高零件，可以把它們自由組合、組裝，做出想要的 UI。

Design System 的重要性：

1. 一致性：確保設計團隊和開發團隊在不同的產品和平台上維持一致的外觀和體驗。
2. 效率性：提供規範中的設計資源（元件、組件），減少重工，加快設計和開發過程。
3. 擴展性：因應新功能的增加，可不斷增修元件、組件，同步產品迭代成長和變化。
4. 維護性：統一維護設計資源，減少工程技術和 UI 設計的差異或各自發揮的亂象。

Design System 包含的內容：

1. 設計原則：
   保持設計決策的核心理念和價值，定義品牌調性、UI 風格，產品易用性、可訪問性、永續設計等。
2. 基礎元素：
   • 色彩系統（color)：包含品牌主色、輔助色、中性色、功能色，以及它們的使用規範。
   • 字型系統（typography)：包含字體、字體大小、行距、字重，以及它們的使用時機。
   • 網格和間距（grid / spacing)：定義頁面布局規則，例如邊距、內距、對齊方式。
   • UI 元件庫（UI library)：button、input、select、icons⋯⋯等可重複使用的 UI 元件及其 Variants 和 States。
3. 基本模組（layout)：設計基本模組，描述常見 UI 問題的解決方案，例如頁籤切換、表單驗證、彈窗訊息、錯誤處理等等，以供設計師、工程師調用。
4. 可訪問性（RWD)：確保所有元件都符合可訪問性標準（RWD、WCAG），讓不同的介面環境，不同的使用者都能完整操作產品，達到目的。
5. 交付文件（spec)：描述元件使用規範、樣式說明、工程交付說明等，以及工程端的最佳實現方法。

好啦！前面兩天已經把一些理論做了疏理及統整，接下來就要進入實作狀態了，想知道後續的發展嗎？讓我們繼續看下去～去～去⋯⋯