Figma Variables 和 Styles 的差異

在 Variables 推出前，Figma 的 Styles（樣式系統）已經支援顏色、文字、效果的重複使用。Variables 和 Styles 的主要差異：

Styles（樣式）：存儲外觀的設定值，例如「品牌主色是這個深海軍藍」。適合命名和重複使用具體的外觀值。

Variables（變數）：存儲原始的值或對其他變數的參照，支援多個模式（Mode）。適合主題切換（淺/深色模式）、設計 token 系統（semantic color tokens），以及數值類型的設計規格（間距、尺寸）。

簡單理解：Variables 比 Styles 更靈活，特別是在需要管理「設計 token」和「主題系統」時。

顏色變數的分層設計

好的顏色設計系統通常分兩層：

這是顏色的原始定義層，不帶語意，只定義調色盤中有哪些顏色：

例如：navy-900: #1a2744, navy-800: #243352, warm-50: #faf9f7, accent-600: #c9a84c

這是語意層，把原始顏色賦予設計的用途意義，並引用 Primitive Colors 的值：

例如：

為什麼要分兩層？因為如果你直接在元件中引用原始顏色，主題切換（淺/深色）很麻煩——你需要逐一改每個元件。

有了語意層，深色模式只需要把 color/background/primary 從 warm-50 改成 navy-950，所有引用這個語意變數的元件自動更新。

Figma Variables 的 Modes 功能讓你定義同一個變數在不同情境下的不同值。

常見的 modes：

Light / Dark：同一個語意顏色在淺色和深色模式下有不同的原始顏色值。

品牌主題切換：如果你的設計系統服務多個品牌，不同品牌的 accent color 可以是不同值，但設計稿引用同一個語意變數 color/brand/accent。

除了顏色，Variables 也支援數值類型，讓你統一管理間距、圓角、陰影距離等設計規格。

定義一組間距 token，例如：

在元件中套用這些間距 token，確保整個設計系統的間距一致，而不是各元件各自設定任意數值。

如果你的開發環境使用 Tailwind CSS，把 Figma Variables 的命名和 Tailwind 的 design token 對齊是很大的效率提升：

Figma Variables 中的 color/text/default → Tailwind 中的 text-navy-900

spacing/lg: 24 → p-6（24px = 6 × 4px Tailwind base）

當設計和開發使用相同的命名系統，設計師說「這裡用 spacing/lg 的間距」，開發者知道是 p-6，不需要反覆確認數值。

在 Figma 中開啟 Variables panel（Assets → Variables）
建立 Primitive Colors 集合：把品牌調色盤中的所有顏色一一定義
建立 Semantic Colors 集合，設定 Light 和 Dark 兩個 mode：每個語意名稱在 Light mode 引用對應的 Primitive Color
建立 Spacing 和 Radius 集合：定義你的尺寸 token
把 Variables 套用到元件庫的元件：在 Figma 的顏色填充中，不直接輸入顏色值，而是選擇對應的 Variable

建立過程需要前期投入時間，但建立後每次調整品牌色或主題，只需要修改 Primitive Color 的值，整個設計文件自動更新——這讓品牌視覺維護的效率大幅提升。