Figma Variables 完全攻略：設計系統變數管理從入門到精通（2026 實戰教學）

為什麼你應該認真學 Figma Variables？

說真的，在 Figma Variables 出現之前，管理設計系統是一件讓人頭痛的事。你可能跟我一樣，靠著一堆 Color Styles 和 Text Styles 硬撐，但遇到深色模式切換或多品牌需求的時候，整個系統就開始崩潰。

Figma Variables 從根本上解決了這個問題。它讓你用「變數」的概念來管理設計決策，不只是顏色，連間距、圓角、字級、甚至布林值（顯示/隱藏）都能用變數控制。如果你正在維護一個設計系統，或是想讓設計跟開發之間的交接更順暢，Variables 是你必須掌握的工具。

四種變數類型一次搞懂

Figma 目前支援四種變數類型，各有不同的用途：

• Color（顏色）：最常用的類型，管理品牌色、語意色（如 primary、error、surface）
• Number（數值）：控制間距（spacing）、圓角（border-radius）、字級大小等數值
• String（字串）：管理文字內容，適合用在多語系或動態文案
• Boolean（布林）：控制元件的顯示/隱藏狀態，搭配 Component Properties 超好用

我的建議是從顏色變數開始，因為效果最明顯，然後再慢慢加入間距和圓角的變數。一次全部做完反而容易搞混。

Variable Collections 與 Modes：多主題切換的關鍵

這是 Variables 最強大的功能，也是很多人一開始最搞不懂的部分。讓我用最白話的方式解釋：

Collection 就像一個資料夾，把相關的變數分在一起。比如你可以建立「Colors」、「Spacing」、「Typography」三個 Collection。

Mode 則是每個 Collection 下的「狀態切換」。以顏色為例，你可以設定兩個 Mode：Light 和 Dark。同一個變數 bg-primary 在 Light Mode 是白色，在 Dark Mode 是深灰色。

實際操作起來：

1. 建立一個 Color Collection
2. 新增 bg-primary、text-primary、border-default 等變數
3. 新增「Dark」Mode（預設已經有一個 Mode）
4. 在 Dark Mode 下設定每個變數的深色值
5. 在 Frame 上套用不同的 Mode，設計就會自動切換

這比以前用兩套 Style 來做深色模式方便太多了。如果你想進一步了解怎麼把這些變數跟程式碼同步，可以參考 Design Tokens 從 Figma 到程式碼同步教學。

變數 Scoping：控制變數的適用範圍

Scoping 是很多人忽略但超重要的功能。簡單說，它讓你決定一個變數可以用在哪些屬性上。

比如一個顏色變數 brand-blue，你可以設定它只能用在「Fill」和「Stroke」，不能用在「Text」上。這樣設計師在選色的時候，就不會不小心把背景色套用到文字上。

常見的 Scoping 設定建議：

• 背景色：只勾選 Frame Fill
• 文字色：只勾選 Text Fill
• 邊框色：只勾選 Stroke
• 間距：勾選 Gap、Padding
• 圓角：勾選 Corner Radius

養成設定 Scoping 的習慣，能大幅減少設計系統被誤用的機會。

串接 Design Tokens：設計到開發的橋樑

Figma Variables 的另一個殺手級功能是跟 Design Tokens 的天然整合。如果你有在用 Figma Make AI 元件系統，你會發現 Variables 讓設計跟開發的同步變得更自然。

目前比較常見的工作流程：

1. 在 Figma 建立 Variables（作為 Single Source of Truth）
2. 使用 Tokens Studio 或 Variables API 匯出成 JSON
3. 透過 Style Dictionary 轉換成各平台的格式（CSS Variables、Swift、Kotlin）
4. 前端直接引用，確保設計跟程式碼一致

我自己目前用的是 Tokens Studio，它跟 Figma Variables 的整合已經相當成熟，而且支援 Git 同步，設計師改了變數，開發端可以直接收到 PR。

實戰工作流：從零建立一套 Variable 系統

來分享一下我在專案中實際使用的流程：

Step 1：定義語意層級

不要直接用 blue-500 這種色票名稱。建立兩層架構：

• Primitive（原始值）：blue-500、gray-100、red-600
• Semantic（語意值）：bg-primary、text-error、border-focus

語意變數引用原始變數（Variable Alias），這樣換主題的時候只需要改語意層的對應關係。

Step 2：建立 Collection 結構

• Primitives：所有基礎色票和數值
• Semantic - Color：語意顏色，設定 Light/Dark Mode
• Semantic - Spacing：間距系統（4px base）
• Semantic - Radius：圓角系統

Step 3：套用到元件

把 Variables 套用到你的 Component Library 中的每個元件。按鈕的背景色用 bg-interactive，hover 狀態用 bg-interactive-hover，以此類推。

跟舊版 Styles 比較：該不該遷移？

很多團隊會問：「我們已經用 Styles 建了一整套系統，值得遷移到 Variables 嗎？」

我的答案是：如果你有多主題需求，絕對值得。Variables 能做到 Styles 做不到的事情（Mode 切換、數值變數、Scoping），而且 Figma 明顯把未來的發展重心放在 Variables 上。

但如果你的設計系統很簡單，沒有深色模式也沒有多品牌需求，現有的 Styles 其實也夠用。不用為了「跟上潮流」而強制遷移。想了解更多 AI 輔助的設計系統建立方式，可以看看 Figma AI 自動生成 UI 原型教學。

五個實用小技巧

• 命名規範：用 / 分層（如 color/bg/primary），Figma 會自動分群顯示
• 善用 Alias：語意變數永遠引用原始變數，不要直接填色碼
• Description 要寫：每個變數加上說明，團隊新成員才知道怎麼用
• Group by Mode：在 Variables 面板切換成 Mode 檢視，一次核對所有主題
• 定期審計：每月檢查有沒有未使用或重複的變數，保持系統乾淨

結語

Figma Variables 確實是設計系統管理的一大進步。雖然學習曲線比 Styles 稍陡，但投資的時間絕對值得。特別是對於需要維護多主題、多品牌的團隊來說，Variables 會讓你的工作流程順暢很多。建議先從一個小專案開始練習，等熟悉了再逐步導入到正式的設計系統裡。