Variants 是 Figma 在 2020 年底推出的新功能，可以讓我們設計時快速將 Component 切換成其他狀態。以下我以 Figma 官方說明為主軸，加上我自己的使用心得與小技巧分享。
原文來自於 https://www.figma.com/best-practices/creating-and-organizing-variants/
建立 Variants 初期會花較多時間在整理，比如最基礎的：一個按鈕我需要做多少種狀態等等，一旦整理出基礎後就能快速地運用這些整理好的元件。
尤其多位設計師共同開發產品時，有一個共同的 library 並共用同一份 variant 會讓設計更一致、有效率，不再需要從一大堆 Component 中挑選。相較於先前從 asset 切換 Component 的作法，variant 相較更順手。
小技巧：初期建議 Component 已經建立好的產品再來嘗試 Variants，否則會花太多時間來在來回調整 Component。如果你正在做一個全新的產品，先用 Component 就好，等整體的設計有了雛形再著手進行 Variant 的設定會更有效率！
Variant 的特點
找 component 更輕鬆
設計師不再需要從 Asset panel 找同一元件的不同狀態了！
以 Checkbox 舉例，通常我們要準備四種不同狀態的 Checkbox:
Uncheck / Checked / Uncheck all / Disable
以往這些是各自獨立的四個 Component，我們會用命名讓我們更好找:
ex: Checkbox/Uncheck, Checkbox/Checked …
但這依然是四個獨立的 Component。
如果將這四個 Component 做成一組 Variant，不管在哪種狀態，他就是一個 Variants 了。每次在使用 Checkbox 時，就可以自行切換狀態，不用一直從一大堆 Component 中尋找其他狀態的 Checkbox 了！
降低 Instance 的複雜度
因為四種狀態都屬於 Checkbox 這個 Variant ，因此整個 Instance 會變得更單純，而不是到處充滿了不同狀態的同一個 Icon，也更符合實際開發的架構。
切換 Variants 時保留 Overrides
在設計 Button 時需要想到很多種樣式：
依照重要程度來分的 Primary / Secondary …
依照 State 來分的 Default / Hover / Pressed / Disable …
而在 Variant 切換不同樣式的時候，Button 裡面顯示的文字 (Overrides) 都會保留，讓我們在示意不同狀態時省事很多！
與 Component 相容
製作 Variants 時可用現有的 Component 來製作，設計稿也會立即修改，不需要另外調整可以無痛轉換！
有效率的使用 Variant
在開始建立 Variants 時，我們需要先知道如何使用他，以及應該要避免哪些狀況，不是所有的內容都要使用 Variants，你依然可以使用原本的作法繼續進行設計。
Variants 使用時機
- 共用相似樣式的 Components 如：尺寸、Layout …
- 可以在兩種狀態間 toggle 的 Components 如：on/off, yes/no…
- 依照一些常用的前端框架 (如 React, Vue…) 的 prop/value 設計的 Component
不需使用 Variants
- 加上 Variants 時會產生大量的組合，這時可用 nesting instances 或基本的 Components 即可
- 在顏色或 theme 上會產生大量的組合，並且需要各自微調
Nesting instances
Nesting instances 是一個很好用的技巧，他可以和 Variants 一起使用時限更複雜的設計。
從 Button 開始，你可能需要多種屬性，如：類型 (primary /secondary), state (active / hover), 或者有沒有 Icon 等等。
你可能會想要幫每個使用不同 Icon 的 Button 定義一個 Variant，但這樣做並不好管理。更好的做法是使用各種 Icon 的 Instance，就像是用原本 Component 的做法，只需要切換不同的 Icon 即可。
基礎的 Components
另外一個使用 Nested instances 的方法是在共用同一個基礎的 Components 下延伸出各種不同的設計。這也是一個將 Component 保持設計一致性的做法，並且同時能藉由改變基礎的 Component 做到大規模的調整。
基礎的 Components 不需要成為 Component set 的一部份，他可以放在附近就好。並且在檔名前面加上 . 或者 _ 可避免他一起被 published 成為 design system 的一部分。
以上是 Variants 的分享，如果你對上述 Variants 的有興趣，也可以再看看這篇 Prepare for Variants 。文中以建立 Button 作為例子，清楚地說明了整個 Variants 的設定方法。
關於 Miss A
以 UI/UX Designer 身份工作了六年多，目前使用 Figma 跨部門與 PM, Engineer 合作。目前正在準備 Figma 一對一客製化教學課程，不管是初學者、跨領域或者想轉換跑道的人都可以和我聊聊 :)
📮 missa.designer@gmail.com
看完文章如果有任何想法或想更進一步討論的主題，歡迎留言給我 📝如果你覺得文章還不錯，請給我一些拍手 👏
如果你覺得文章有幫你更理解一些事情，請長按給我 10 個以上的拍手 😍
