跨越設計與程式的鴻溝 — Design Tokens

我覺得這個顏色太淺了，可能需要調整一下～ 好的，沒問題！

Design token 是什麼？

Design token 的中文有很多種說法，可以翻譯成設計令牌、設計權杖、或是設計變量，但我們覺得上述用語不是很容易理解，最終我們選擇了設計標籤來稱呼。

設計標籤是一種幫助設計師和開發人員能進行有效溝通的代碼化語言，透過將數值（例如色碼、字體、間距等）編寫至設計標籤中，建立統一的代碼化語言，讓組件和設計系統可以被快速的管理，並有效的運用至 UI 設計中。

舉例來說，為了保持統一性，一個顏色可能會被用在品牌旗下的許多產品中，當我們需要去更改這個顏色時，如果沒有使用設計標籤，就會需要一個一個去整，在溝通上也會比較不方便（因為你不會在講話的時候用十六進位來表示顏色：”給我來點#E8DEF8”……）。

但如果你使用了設計標籤，就只需要更改對應的標籤內容即可。以Figma工具為例，在建立與更改完設計標籤之後，可以直接輸出成JSON檔案，就能更新至設計系統，並應用在各個產品、裝置上。

設計標籤的使用也能有效的幫助開發人員，利用設計標籤來取代數值，不僅可以減少錯誤輸入色碼，開發時也能夠使用 IDE 的自動提示來選擇現有的設計標籤，輸入錯誤時也能更有效率的除錯。

如何建立 Design token?

目前設計標籤還沒有一個統一的格式能夠遵循，日前 W3C Design Token Community Group 在 2022 Figma schema 中便提出了初步的命名架構建議，另外 Google 在 Material Design 3 中也有提供他們對於設計標籤的建立指南。

Design token 的架構

想要建立一套比較完整的設計標籤，就必須包含他的名稱、數值、還有他的類別。

當然你也可以加上關於這個標籤的描述，以便其他夥伴（協同作業者）更好的理解與使用。

同樣的名字可能會被用在很多的物件上，這個時候我們就能將設計標籤分組，可以依據品牌、類別、使用方式等等來進行分組。

隨著群組的不同，每個標籤的路徑也會不同，這樣的架構能為設計標籤產生出一個獨一無二的名字。

在設計標籤中還有一個很重要的概念，那就是 Aliases（別名）。同樣的數值可能會被用在許多不同的元件上，使用別名可以幫助你在需要更改單一元件的內容時，不會更動到其他也使用這個內容的元件，如下圖所示，你只需要調整箭頭所指的方向就好了。

這樣的架構在設計不同模式的時候非常好用，舉例來說，當你想設計夜間模式的時候，只需要改變元件設計標籤所指的參考標籤，除了能讓設計開發流程變得更簡單，也能夠更有效的管理整個設計系統。

在Google的Material Design當中，是將設計標籤分為 Reference、System、和 Component 三種類型，並對三個類型之間的層級關係提供近一步說明。

我們也可以將不同的設計標籤組合為一個排版組合，因為同樣的數值可能會被運用在多種元件之中。舉例來說，標題一和標題二使用相同的字型，當我們想要更改字型的時候，只需要修改標籤內容即可。

Design token 的命名步驟（以 Material Design 為例）

Step 1. 將數值轉換為最基礎的 token — Reference tokens Reference token 包含了設計系統中可用的所有樣式選項，有時候會稱作 global token。將數值轉換為 Reference token 能夠幫助我們更好的去管理設計系統中所使用到的樣式與數值。

Step 2. 定義 token 的實際屬性 — System tokens System token 是語意化的 token，他定義了設計標籤的實際屬性，通過語意化的命名，定義了設計標籤的使用場景。在命名的時候，可以避免使用會和程式碼互相衝突的文字，舉例來說 type 在技術端能夠被解釋為很多意思，所以在命名的時候應該盡量避免使用。

Step 3. 將 token 指定給元件 — Component tokens 以元件為單位去限定設計標籤的使用。一個 System token 可以應用在很多個元件上，但是當我們想要更改其中一個元件的顏色時該怎麼辦？Component token 將語意化的 System tokens 劃分為更細的群組，方便大家能夠更靈活的使用設計標籤。

Figma plugin工具 — Figma tokens

Figma tokens這個插件能夠協助設計師管理顏色、文本樣式以及其他屬性；你可以利用這個插件來進行簡單的顏色、文本樣式管理，也可以用他來搭建多個設計系統，包含參考、比例數值。

這邊我們用間距來舉例，你可以在 Figma token 中定義間距的數值，並將他應用在使用 auto-layout 的群組中。

也可以使用參考設計標籤，在數值輸入的部分 Figma token 支援數學式，所以你可以將間距設定為 {spacing.base}*2

在建立好設計標籤之後，可以直接將他應用至設計稿中。

我們也可以在插件中直接預覽 json 格式下的設計標籤。

另外，Figma token 這個插件也能夠直接導出 JSON 檔案，方便我們在不同的 Figma 檔案中快速地進行沿用，因為有時候一個專案中會有很多不同的平台分別使用不同的檔案，這個功能便能夠幫助我們維持設計的一致性，真的非常的方便！（來自同事 Mila 的推薦）

結論 雖然建立 Design token 是一個浩大的工程，但是當我們建立好設計標籤時，他便能夠幫助我們更有效的運用與管理設計系統，除了能在 Figma 的檔案之間快速地沿用之外，在開發端也只需要下指令便能快速地更新至整個專案，大大的提升開發流程，也能夠讓設計與開發端的溝通更為順利。 我們認為，一個具有競爭力的UI設計師，不僅僅只專注在美學設計，更是要在開始設計的Day 1 就進行設計元件的系統化、模組化。因此，我們非常鼓勵設計師們都動手試試看，親身體驗 Design token的先苦後甘。 附註 本文參考以下文章與介紹影片： Figma Tokens | Figma Community Figma Community plugin - Gives you the ability to use Design Tokens that can be used for a whole range of design…www.figma.com Design Tokens Design tokens are the visual design atoms of the design system - specifically, they are named entities that store…www.lightningdesignsystem.com Design tokens - Material Design 3 Tokens store style values like colors and fonts so the same values are used across designs, code, tools, and platforms.m3.material.io UI 设计 Design Token 系列教学 02：Token 的 3 个层级 新像素_哔哩哔哩_bilibili 本期视频文档：https://www.yuque.com/docs/share/d61b026a-8981-4909-a5b0-bda0bf0b35e0?#Design Token…www.bilibili.com 註：本文為Able實習生 Cheryl Fang 撰寫， Steven Yeh 編輯。