如何開始建立 UI Design System
Design system 的包含項目與建立方式（使用Figma）
在產品設計初期，設計團隊需要透過建立一套完善的 design system以確保產品設計的一致性，不僅讓接下來的設計更為容易，也易於產品日後的迭代。若是在大公司擔任設計師，這些公司大多早已建立了一套完善的design system（如Google’s Material Design、Apple Human Interfaces Guidelines），設計師需要遵循指引，並在推出的多項產品中維持一致的設計樣式，讓大眾能夠輕易辨識這是哪間公司推出的產品，另一方面，設計師亦需要用系統性的設計與其他團隊溝通，因此 design system 是UI設計中不可或缺的一個項目。
基本的 design system 包含文字樣式（typography）、色彩（color palettes）、物件（components）、網格（grid definition）等。
文字樣式
在設計時，我們必須規劃一套完整的文字系統，以不同的文字樣式應用在標題、副標題、按鈕、超連結等部分，讓介面能夠透過視覺效果，向使用者有條理地說明內容。
選擇字型大小時，我們通常根據經驗安排不同字型大小。若是不確定該如何適當安排，可以先建立一個基本字型大小，再以該大小乘以一個數字以得出其他標題等字型大小，這個數字並沒有固定的數值，可以根據 the musical ratio 或是 the golden ratio等為基底制定。以上敘述較為抽象，舉例來說，設基本數為16 px，將16*2後我們會得到32 px，然而16和32之間間隔太大，那麼我們可以在中間加入20 px（16 * ³√2）和25 px（16 * (³√2)²），以上變數皆可自行調整。
在 The Typographic Scale 這篇文章中有詳細說明，並且只要於該網頁欄位輸入基本字型大小，即可計算出不同數值下的延伸數據，在此算出來的值多半有小數，在設計時取接近的整數即可。
除了字型大小，我們也能透過改變字體粗細及顏色增加區別。在確立一套系統性的字型樣式後，點擊Figma右邊Text 旁的icon，按下加號，即可新增文字樣式，快速套用到日後的設計中。
色彩
根據想呈現的風格，設計師會選出一套色彩搭配作為貫穿產品的色彩搭配。
顏色的選擇上可參照色彩心理學，例如紅色代表熱情、大膽、力量，藍色代表專業、信任、寧靜，更可以進一步搭配品牌性格，適合的顏色選擇能夠讓品牌在眾多競爭者中脫穎而出，並向消費者傳遞不同的視覺感受。
在顏色搭配部分，有一項著名的60–30–10法則，以佔比60%的主色、30%的輔助色、10%的強調色組成，使顏色搭配有主從之分，能更有效安排視覺重點。
另外，在色彩搭配上除了注重美觀，尚須考量可達性/無障礙性（accessibility）。選擇色彩時，根據不同產品類別，設計師還會需要考慮到不同族群的使用者，因為不是所有使用者都能夠辨識對比度較低的介面，或是正確分辨顏色，例如色盲與色弱族群，近年來網路上有許多色盲友善配色能讓設計師參考，專門製作資訊圖表的軟體Tableau也在色票選擇上提供色盲友善配色。
若要確認自己選擇的配色對比是否能讓大部分族群辨識，我們可以在檢驗網站如Contrast Checker — WebAIM輸入色票，快速查看對比度是否通過標準，字形可大致分為大字（大於等於14 pt bold/ 18 pt regular）與小字（小於14 pt bold/ 18 pt regular），大字和背景的顏色對比度最低標準是3:1，小字和背景的顏色對比度最低標準是4.5:1。
在Figma上，當我們確立配色及變化後，可以透過和文字樣式一樣的方法來儲存設定。
物件
物件通常包含icons、按鈕、欄位，其中除了原始樣貌，也包含了不同的狀態（states），像是hovering、pressing、scrolling等，這些微小互動除了為使用流程增添樂趣，也讓使用者更容易明白目前的操作。
網格
編排時，物件與周圍的間隔距離也是需要被定義的，針對整體版面的間距，我們可以使用Figma中的網格系統，建立網格或是條紋，在這裡建立的網格並不會顯示於prototype。
對於物體之間的距離，例如標題與內文、icon與文字，也需要系統化地設置。
結語
也許有些人會有和我以前有同樣的疑問：若是我們在後續設計途中，發現有些部分需要調整，可以修改design system嗎？答案是可以的，一開始的設計多少會有缺陷，design system正需要透過日後的迭代使其更加完善。這是一個強大的系統，能夠代表整體品牌樣貌，在使用者心中留下印象，因此完善地建立是相當重要的。
參考資料：Build it in Figma: Create a Design System — Foundations
