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 是深灰色。
實際操作起來:
- 建立一個 Color Collection
- 新增
bg-primary、text-primary、border-default等變數 - 新增「Dark」Mode(預設已經有一個 Mode)
- 在 Dark Mode 下設定每個變數的深色值
- 在 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 讓設計跟開發的同步變得更自然。
目前比較常見的工作流程:
- 在 Figma 建立 Variables(作為 Single Source of Truth)
- 使用 Tokens Studio 或 Variables API 匯出成 JSON
- 透過 Style Dictionary 轉換成各平台的格式(CSS Variables、Swift、Kotlin)
- 前端直接引用,確保設計跟程式碼一致
我自己目前用的是 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 ModeSemantic - 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 會讓你的工作流程順暢很多。建議先從一個小專案開始練習,等熟悉了再逐步導入到正式的設計系統裡。
繼續閱讀
Figma Atomic Design 元件庫建立完整教學:從原子設計到團隊共用設計系統
用 Atomic Design 方法論在 Figma 中逐層搭建設計系統,從 Atoms、Molecules 到 Organisms,打造團隊共用元件庫。
相關文章
你可能也喜歡
探索其他領域的精選好文