Tag: design token

Design Tokens 在設計系統中，扮演關鍵的角色，它們可以確保設計元素一致、提高協作效率以及簡化跨平台設計和開發之間的溝通。了解如何使用 Design Tokens，了解它們有不同類型以及命名方式，對於建立強大的設計系統來說至關重要。 一、Design Tokens 是什麼 Design tokens 其實是系統內對於重複性的視覺元素的「代稱」，我們給予不同顏色、字型、間距、圓角、等視覺元素，一個工程師和設計師都可以輕易理解的名稱，取代原先的靜態值（如：hex 色碼、數值），而這樣的名稱，可以在程式碼、設計、團隊溝通、平台保持一致性，同時保有擴充性。 二、為什麼需要 Design tokens 跨團隊、跨平台設計風格一致性：使用 Design Token 在設計開發中帶來了許多優點。首先，它確保了設計系統中使用的樣式值（例如顏色、字型、間距等）在不同平台和專案中保持一致，從而創造出統一的視覺風格，提升品牌識別度。同時，Design Token 可在不同專案和平台中應用，確保了跨領域和跨團隊的一致性，減少了不同部門間風格差異。 提升效率與溝通協作：透過使用有意義的名稱來表示設計元素，Design Token 讓團隊成員更容易理解和應用相關的樣式，從而減少誤解和溝通障礙，並促進更好的協作和溝通。 更新與管理便利：開發人員可以直接使用設計元素，從而減少重複的設計和開發工作，節省寶貴的時間和資源。同時，Design Token 讓所有樣式值都能夠集中管理，只需在一處進行修改即可同步應用到各個專案中，減少手動更改的煩惱。 具擴充性和降低風險：隨著產品的成長，Design Token 可輕鬆擴展和套用新的樣式需求，無需重新建立整個設計系統。同時，它支援不同主題或變體的樣式，從而應用於不同的使用情境，增加了客製化的彈性，並減少減少人為錯誤和不一致性。 容易測試與評估：使用 Design Token 讓測試不同樣式變化變得更為容易，同時也能更有效地測量和評估設計系統的效果，從而優化設計。 三、哪些元素可以設為 Design token 顏色、字體（字型、字級、字體粗細、字距、行高、大小寫、裝飾線、對齊）、間距、尺寸、邊角、陰影、邊框粗細、透明度、轉場效果等為常見的視覺元素，皆可以設為 Design token。 然而，在 Figma 當中，目前在 Styles 和 Variables 中支援顏色，Variables 中支援間距、尺寸、邊角，字體和陰影在 Styles 中支援。然而常見的透明度，以及字體底下各種可以分開設定的樣式，皆不支援。 四、Design tokens 階層 當我們在談論 Design tokens 的時候，依過去的經驗，大家沒意識到有不同階層層級，或是因階層的名稱過多，導致大家常常溝通有落差，雞同鴨講。Design token 常見的階層主要有三種階層，包含「…