如果你正在管理一套尚未導入 Semantic tokens(語意權杖) 的設計系統，就等於錯過了提升可擴充性與效率的關鍵工具。

是什麼

Semantic tokens 能讓你建立一套結構化且靈活的系統，其中的設計決策是依用途而非原始數值來定義。與其為按鈕或文字指定固定的色碼，不如使用像是 primary-button-bg 或 warning-text 這類的權杖。

這表示你的主要按鈕背景色將不再是 blue/500，而是 primary-button-bg，它的值指向 blue/500（而 blue/500 則對應到 HEX 色碼 #5A8DD7）。

讓我們透過一個視覺範例來說明，但請記住，在實際看到運作情形之前，很難體會它到底有多實用。

通常，你會這樣將變數套用到元素上：

現在，假設你想將 component-2 中的框線改為 #0D0D0D，你就必須這樣做：

雖然看起來沒什麼，但當你開始擴大這套系統的規模時，很快就會難以分辨哪個 HEX 色值該套用到哪個元件或元素上。

相反地，你該做的是套用 Semantic tokens，讓每個元素該套用哪個變數一目了然。

這會讓更新變得更輕鬆——只要修改一次權杖，就能套用到所有地方！讓我來示範做法……

為什麼

可擴充性

隨著設計系統不斷成長，在多個元件中手動更新樣式會變得難以管理。Semantic tokens 讓你只需在一個地方進行修改，就能在整個系統中保持一致的套用。

假設你決定要更改主要色彩，但只針對 page-title 元件。如果你已正確套用 Semantic tokens，就不需要直接修改元件本身，只需在變數視窗中更改與其關聯的權杖即可。

或者，你發現 #black/600 作為設計系統中的背景色效果不佳。這時，你只需前往變數設定，將 surface-alt 替換為另一個原始權杖即可。

一致性與可維護性

透過聚焦於功能而非具體數值，Semantic tokens 能確保產品在整體視覺上更一致、更協調。你不再需要猜測或記憶該使用哪個數值——只需選擇名稱相符的 Semantic tokens 即可。

想不起來主要邊框該用哪個顏色嗎？很簡單，就是 stroke-primary。

主題化與客製化

無論是要導入深色模式、品牌客製化，還是對不同樣式進行 A/B 測試，Semantic tokens 都能簡化流程。你不需要全面修改原始色值，只需在更高層級置換權杖即可。

面向未來的設計系統

透過在設計與實作之間建立清晰的抽象層，Semantic tokens 讓你的系統能隨著時間輕鬆演進，而不會破壞現有設計。

需要發布全新的配色方案來配合公司更新後的品牌識別嗎？只需修改你的原始數值即可。

如何實作

定義核心設計權杖

首先，為色彩、排版、間距及其他關鍵設計屬性建立基礎權杖。

通常，我會將這些原始數值建立在一個名為 primitives 的獨立集合中。

專業小技巧：使用 Tailwind CSS Color Generator 快速載入主要色票，並使用 Export/Import Variables 外掛在不同檔案之間匯入與匯出設定。

將核心權杖對應至語意權杖

接下來，定義描述這些數值如何在介面中被使用的 Semantic tokens。這些權杖作為抽象層，讓你在不影響底層結構的情況下更輕鬆地更新樣式。

建立 Semantic tokens 需要時間，過程中也可能需要不斷調整做法。然而，一旦完成，它們能大幅提升可擴充性與可維護性，減少不一致的情況並加速開發。這是一項值得的投資。

限制變數的作用範圍

最後，限制特定變數可套用的元素範圍。要這麼做，請先前往你的 primitives，並將它們全部停用。

接著，逐一檢視你的權杖並定義其作用範圍。在下方的範例中，我將 border 相關的權杖限制為僅能套用於框線元素。

現在，當我想為框線套用變數時，只會顯示適用的變數，讓你超輕鬆就能選到正確的選項！

這不是完整教學

如果你想進一步了解如何在設計系統中套用 Semantic tokens，建議先從 這支來自 Figma 的教學影片開始。之後，最能理解你想如何運用 Semantic tokens 的方法，就是實際動手嘗試，將它們套用到你的設計系統中。

是的，建立 Semantic tokens 的過程可能漫長而繁瑣，但帶來的好處非常可觀。如果你的設計系統還沒使用 Semantic tokens，不妨試試看！

記住：重點在於成果而非產出。專注於團隊真正的需求，而不是追求完美的文件。