Figma Variables 與 Design Tokens 設計系統實戰教學（2026 完整指南）

我從 2023 年 Figma Variables 剛推出就開始用了，到現在也三年了。坦白講，一開始我覺得這東西很雞肋——不就是把 Style 換個名字嗎？但當我真正用它建了一套完整的 Design Token 系統之後，我才體會到它的威力。今天就來分享我這幾年摸索出來的實戰流程。

Design Tokens 到底是什麼？為什麼你應該在意？

簡單來說，Design Tokens 就是設計決策的最小單位。一個顏色值、一個間距數字、一個圓角大小，這些都是 token。但重點不是這些值本身，而是它們的命名跟結構。

舉個例子，你可以把按鈕背景色寫成 #2563EB，也可以寫成 color.action.primary.default。前者只是一個顏色，後者是一個帶有語意的設計決策。當你要換主題、換品牌、或是做 Dark Mode 的時候，有語意的 token 讓你只需要改一個地方，全部的元件就跟著變了。

如果你正在建設計系統（像 Design System 元件指南 裡講的那樣），Design Tokens 是讓設計跟開發保持同步的關鍵。沒有 token，你的設計系統就只是一堆漂亮的 Figma 檔案，工程師拿到還是要猜。

Figma Variables 四大類型詳解

Figma Variables 支援四種型別，每種都有它的用途：

• Color：最直覺的一種，存顏色值。支援 RGBA，可以設定透明度。
• Number：存數字，可以用在間距（padding、gap）、圓角（border-radius）、字型大小等等。
• String：存文字，最常用在 font family 名稱。不過說實話這個型別我用得比較少。
• Boolean：存 true/false，可以用來控制 layer 的顯示隱藏。用在 component 的 variant 切換超好用。

其中 Color 跟 Number 大概佔了日常使用的 90%。我建議先從這兩個開始建，String 跟 Boolean 等到有需要再加就好，不用一次全部做完。

三層 Token 架構：Base / Alias / Component

這是整個 Design Token 系統的核心概念，也是很多人搞不清楚的地方。我用三層架構來組織 token，這個方法是業界普遍認同的最佳實踐：

第一層：Base Tokens（又叫 Primitive / Global）

這一層放的是最原始的設計值，命名用的是描述性的名稱。例如：

blue-500: #2563EB
blue-600: #1D4ED8
gray-100: #F3F4F6
spacing-4: 16
spacing-6: 24
radius-md: 8

在 Figma 裡，我會建一個叫 _Base 的 Variable Collection，前面加底線是因為這一層通常不會直接被元件引用，加底線可以讓它排在最前面方便管理。

第二層：Alias Tokens（又叫 Semantic）

這一層是語意層，token 的命名反映的是「用途」而不是「外觀」。而且這一層的值不是直接寫死的，而是指向 Base Token。例如：

color/action/primary: → blue-500
color/bg/surface: → gray-100
color/text/primary: → gray-900
spacing/component/padding: → spacing-4

這一層就是 Dark Mode 切換的關鍵。在 Figma 裡，你可以對同一個 Alias Token 設定不同 Mode 的值。Light Mode 下 color/bg/surface 指向 gray-100，Dark Mode 下改指向 gray-900。切換 Mode 的時候，所有引用這個 token 的元件自動變色。

第三層：Component Tokens

最後這一層是元件專屬的 token，命名會帶元件名稱。例如：

button/primary/bg: → color/action/primary
button/primary/text: → color/text/on-action
card/padding: → spacing/component/padding

這一層不是必要的，對小團隊來說可能太過 over-engineering。但如果你的設計系統規模夠大、元件夠多，這層可以讓你更精細地控制每個元件的設計，而不影響到其他元件。

Light / Dark Mode 實作

在 Figma 裡切換 Light/Dark Mode 出奇地簡單，前提是你的 token 架構有做好。步驟是這樣的：

• 在 Alias Token 的 Collection 裡新增一個 Mode，命名為 Dark
• 把每個 Alias Token 的 Dark Mode 值指向對應的 Base Token
• 在 Frame 上選擇要套用哪個 Mode

一個常見的錯誤是直接在 Dark Mode 裡寫死色碼，而不是指向 Base Token。這樣做短期內看起來沒差，但等到你要調整色板的時候就會很痛苦，因為你要改兩個地方。永遠讓 Alias Token 指向 Base Token，這是鐵律。

如果你想看更多 Figma 實作技巧，Figma Auto Layout 教學 裡有很多跟 Variables 搭配使用的範例。

Tokens Studio 外掛：進階玩家的好朋友

Figma 原生的 Variables 功能已經很不錯了，但如果你需要更進階的功能，Tokens Studio（以前叫 Figma Tokens）是必裝的外掛。它能做到的事情包括：

• 支援 W3C Design Tokens Community Group 的標準格式（DTCG）
• token 值可以用數學運算，例如 {spacing.base} * 2
• 支援 composition token（把多個 token 組合成一個 typography 或 shadow token）
• 直接跟 GitHub/GitLab 同步，token 的變更有版本控制
• 輸出成 JSON 格式，餵給 Style Dictionary 轉成各平台的程式碼

W3C DTCG 的規格在 2025 年底已經趨於穩定了，2026 年可以放心地跟著這個標準來。用標準格式的好處是，不管你之後工具鏈怎麼換，token 檔案都是通用的。

用 Style Dictionary 同步到程式碼

Design Token 最終的目標是讓設計跟開發用同一套語言。Style Dictionary（Amazon 開源的工具）是目前最成熟的方案，它可以把你的 token JSON 轉換成各種格式：

• CSS Custom Properties（--color-action-primary: #2563EB;）
• SCSS Variables
• JavaScript/TypeScript 常數
• iOS Swift 或 Android Kotlin 的程式碼

實際的 workflow 大概是這樣：設計師在 Figma 改 token → Tokens Studio 推到 GitHub → CI 跑 Style Dictionary 轉檔 → 自動產生 PR → 工程師 review 後合併。整個過程設計師不用碰程式碼，工程師不用手動對色碼。

如果你的設計系統還需要做成網站展示，Figma Sites 教學 有教你怎麼把 Figma 的設計直接發佈成網頁，token 的文件化也可以用這個方式處理。

我的實戰 Workflow 建議

最後分享幾個我踩過坑之後得出的建議：

• 不要一開始就追求完美——先從 Color 跟 Spacing 的 Base + Alias 兩層開始，用了一陣子再看要不要加 Component 層
• 命名規則先統一——用 / 還是 . 還是 - 當分隔符號，團隊要先講好。我個人偏好 /，因為 Figma 會自動把它變成資料夾結構
• 建一個 Token 展示頁——在 Figma 裡做一頁專門展示所有 token 的值跟用法，新人 onboarding 的時候超有用
• 定期清理沒在用的 token——token 一多就容易長草，每季清理一次是好習慣
• Mode 不要濫用——除了 Light/Dark，有些人會拿來做品牌主題切換，但 Mode 太多會讓管理變得很複雜

總結

Figma Variables 配合三層 Token 架構，真的可以讓設計系統的維護效率提升一個層級。從 Base Token 定義基礎值、Alias Token 賦予語意、到 Component Token 精細控制，每一層都有它的意義。再搭配 Tokens Studio 跟 Style Dictionary，設計跟開發之間的隔閡可以大幅縮小。這不是一天就能建完的，但只要你願意花時間把地基打好，後面的維護跟擴展都會輕鬆很多。開始動手吧。