前言
近期執行的專案在進行翻新包含了整體的視覺設計，因此前端也面臨要如何同步管理產品視覺的問題。工具是使用 Figma 而前端是使用 Tailwind 這套 utility-first CSS 的框架，不過以上都只是工具，主要想要談的還是更抽象的：數位產品可以如何管理 UI 上的變數。
先說痛點，先前專案並沒有具體的規範應該如何定義 UI 當中的數值，導致魔法數字（沒有規範與描述的值）流竄於整個產品當中，造成了非常大的的困擾。
我會解釋得盡量具體明白如果要重新設計一款數位產品會怎麼管理其中的數值，這些想法很大程度啟發自 Figma 關於 Design Token 相關文件。
什麼是 UI 變數
UI 變數就是存在於使用者介面上的變數，有的地方叫它設計令牌（Design Tokens），有的地方則稱呼變數（Variables），總之就是一個名稱指向一個值，可以想像一個箱子裝載某種應用於 UI 的數值。
UI 數值有很多種，可以是代表顏色、大小尺度、圓角尺度、透明度、特效尺度……等，具體的例子如下：
gray-500=#333spacing-1=4pxopacity-50=50%
不同環境多少會有差異，通常變數也具備指向另一個變數的能力，例如：
primary-500=gray-500
如何管理 UI 變數
你一定用或多或少採用過變數的概念去管理數值，但卻沒有特定的命名或規則，因此第一步要做的就是找出數值的規律，並且給予一個統一明確的名稱。接下來會以顏色為主要案例解釋。
第一步：原始值 Primitive Variable
目的：達成全局通用且可被管理的「數值」
既然被稱呼為原始值，這個階段的命名應當直白單純的描述「值」本身，例如：它是黃色的、綠色的、洋紅色的，並且與其他顏色的明暗關係是介於百分之三十，未來整套系統只會也只需要有這樣一種顏色避免混亂：yellow-300。
透過建立一系列變數來代表某種色階區段的顏色：
yellow-100=#fef9c3yellow-200=#fef08a- …
yellow-1000=#713f12
如此一來就可以清晰的定義整個產品「黃色」涵蓋的範圍與階層，而不是讓顏色散亂、毫無秩序可言的分散在各地。可依據喜好去定義命名前後綴或變數量，重點是一致性。
第二步：語意化 Semantic Variable
目的：達成全局通用且可被管理的「意義」
語意化就代表在這個階段應當賦予值一個具體的意義，例如先前提到的黃色系列顏色本身並沒有具體的意涵，可以在任何地方被使用，可能會導致讓特定的顏色與意義綁定在一起，在中大型系統中我們必然會需要將重複的 Pattern 給抽離出來管理，例如：
accent-100=yellow-100accent-200=yellow-200accent-1000=yellow-1000
這樣就創建了一個具備意涵的顏色：accent（強調色），未來只要產品中有需要強調顏色的時候，由於先前已經定義好整套現成可用的強調顏色，任何會需要強調顏色的 UI 都能受益，增進了設計的一致性與維護性。
同時製作語意化變數也能動態的的替換特定語意化變數背後的數值，最好的例子就是深色模式，舉例情境……
- 未來強調色要微調，只要重新指向語意化數值就能一次搞定。（我不喜歡強調色是黃色，所以改指向紅色）
- 要製作不同風格系統，只要重新指向語意化數值就能一次搞定。（我要製作一套深色風格介面，所以改指向深色系列的原始值）
等到某種意涵在 UI 當中被重複使用時就代表你應該盡量將它抽離為語意化變數，不只是方便未來維護，也能讓每次繪製全新 UI 時能夠從約定好的基礎上開始。可以參考成熟的設計系統通常具備哪些語意化變數開始，例如：primary、secondary、success、warning、danger、info。
第三步：元件變數 Component Variable
現今 UI 多少具備某種性質的可重複擴充性，就像積木一樣，而元件變數就是針對這些元件的數值所打造的語意化變數，例如 button-hover、button-active、button-disabled，定義好這些元件變數就像是在為元件建立可替換的介面，透過指定不同數值給元件變數以達成相同元件但不同的外貌，舉例情境……
- 相同的元件但在橫跨不同產品時，由於每個產品對應品牌顏色皆不相同，因此可以透過指定顏色給事先定義好的元件變數達成相同元件但不同產品品牌的外貌。
- 定義元件變數將會讓我們強制思考元件對外的關係，要求公開接口的描述必須清晰。
總結
以上都是用最具體的方式描述如何管理 UI 變數的大概念
實際上你可以根據自己的喜好去制定細節，像是統一常見的元件接口名稱、語意化變數的命名規則、原始值的階度……等，重點是要讓整個系統具備一致性與可維護性。