本文帶你從零搞懂 Figma Variants（變數元件）：Variant 是什麼、Component 和 Variant 差在哪、如何建立 Variant、以及打造系統化元件庫的最佳實踐。
一、Figma Variant 是什麼？
Variant 是 Figma 在 2021 年推出的功能，讓設計師能將多個相似的 Component（元件）整合到同一個群組中，透過屬性切換快速套用不同狀態或樣式，而不需要建立幾十個獨立元件。
最簡單的理解方式：
- Component（元件）：一個可重複使用的設計物件，例如一顆按鈕
- Variant（變數）：同一顆按鈕的不同「版本」，例如主要按鈕、次要按鈕、停用狀態、載入中狀態
有了 Variant，你不再需要在 Assets 面板裡找到四顆不同的按鈕元件——只要拖入一個「按鈕」元件，再從右側面板切換 Variant 屬性即可。
二、Component 和 Variant 有什麼差別？
| 比較項目 | Component | Variant |
|---|---|---|
| 定義 | 單一可重複使用的元件 | 多個 Component 的集合 |
| 使用場景 | 只有一種狀態的元素 | 有多種狀態/樣式的元素 |
| 切換方式 | 需手動替換元件 | 右側面板直接下拉切換 |
| Assets 管理 | 每個狀態獨立列出 | 同一組名稱集中顯示 |
| 適合 | 圖示、分隔線、固定元素 | 按鈕、表單、卡片、導航列 |
三、Variant 屬性怎麼設計？先想清楚再動手
建立 Variant 前，最重要的一步是定義清楚所有屬性（Property）與狀態（State）。很多新手跳過這一步直接開始建元件，最後元件庫越建越亂。
以「按鈕」元件為例，常見的屬性組合：
- Type：Primary / Secondary / Destructive
- State：Default / Hover / Focused / Disabled / Loading
- Size：Large / Medium / Small
- Icon：None / Left / Right / Only
3 種 Type × 5 種 State × 3 種 Size × 4 種 Icon = 180 個組合，全部打包在同一個 Variant 元件中。這正是 Variant 強大的地方——只要管理好屬性，Figma 自動幫你組合。
四、如何在 Figma 建立 Variant？step by step
步驟 1：建立基本 Component
- 在畫布新增一個 Frame，放入你的設計元素（文字、圖示等）
- 選取 Frame，右鍵 → Create component（或按 ⌥⌘K）
- 這是你的第一個 Component，也是 Variant 的基礎
步驟 2：新增 Variant
- 選取剛建立的 Component
- 在右側 Design 面板中找到 Properties
- 點擊「＋」→ 選擇 Variant
- Figma 會自動建立第二個 Variant，出現在紫色虛線框（Component Set）中
步驟 3：設定屬性名稱
- 選取紫色虛線框（Component Set）
- 在右側 Properties 中，將預設的
Property 1重新命名，例如改為State - 每個 Variant 的屬性值（如 Default、Hover、Disabled）也逐一命名
- 命名規則建議使用
屬性=值的格式，例如：State=Default, Type=Primary
步驟 4：調整各 Variant 的外觀
- 點擊 Component Set 內各個 Variant
- 分別調整顏色、字體、圖示等設計差異
- 保持相同的圖層命名，方便 Figma 自動對應結構
五、如何在設計中使用 Variant？
- 在左側 Assets 面板找到你的元件
- 將元件拖拉到畫布
- 選取元件後，右側 Design 面板會出現 Current variant 下拉選單
- 點擊屬性值即可即時切換不同 Variant，無需替換元件
六、Variant 最佳實踐：讓元件庫保持乾淨
- 先規劃再動手：把所有屬性和值列在白板上確認後再開始建元件，修改元件庫的成本遠大於規劃
- 命名要一致：使用英文、採用 CamelCase 或 kebab-case，同一類屬性保持相同命名格式
- 圖層結構保持一致：每個 Variant 的圖層命名和層級順序要相同，才能讓 Swap 功能正確運作
- 不要過度拆分：不是每個微小差異都需要成為 Variant，過多屬性會讓切換介面變得難用
- 善用 Auto Layout：搭配 Auto Layout 讓 Variant 在尺寸上能自動適應內容
七、常見問題 FAQ
Figma Variant 是什麼？
Variant 是 Figma 的元件功能，讓你能將多個相似的 Component 整合成一組，透過屬性切換（如 State=Default / Hover / Disabled）快速套用不同狀態，不需要建立大量獨立元件，讓設計系統更系統化、更易於維護。
Component 和 Variant 有什麼不同？
Component 是單一可重複使用的設計元件；Variant 是多個 Component 的集合，用屬性來管理不同狀態或樣式。例如：一顆「按鈕」元件有 Default、Hover、Disabled 三種狀態，這三種狀態組合在一起就是 Variant，而不需要建立三個獨立的按鈕元件。
Figma Variant 有數量限制嗎？
Figma 本身對 Variant 數量沒有硬性上限，但實務上建議每個 Component Set 不超過 1000 個 Variant，否則 Figma 在載入和切換時會出現效能問題。屬性越多，組合爆炸成長越快，建議在設計階段仔細評估哪些屬性真的需要用 Variant 管理。
如何讓不同頁面的同一個元件一起更新？
使用 Figma 的 Main Component（主元件）和 Instance（實體）機制：修改 Main Component，所有拖入畫布的 Instance 會自動更新。Variant 同樣遵循這個邏輯——修改 Component Set 裡的 Variant，所有頁面上的實體都會同步更新，這正是元件庫最大的價值所在。
八、結語
Figma Variant 是打造設計系統不可或缺的功能。掌握 Variant，你的元件庫才能真正達到「改一處、更全局」的效果，讓設計師和工程師之間的協作更流暢，也讓設計稿的維護成本大幅降低。
如果你正在為企業官網或產品規劃設計系統，或是需要專業的 UI/UX 設計支援，歡迎聯絡鵠崙設計，我們從設計到開發一手包辦。