前一天關於Component的功能認識中有提到，透過「/」命名方式能將物件分類，並快速置換Instance的組成。後來，在2020年底，Figma推出一個新功能叫Variant，方便讓設計容易達成一致性並提升效率。

那麼就開始介紹吧！

確認按鈕的類型(type)與狀態(state)

　　我們在使用APP或網站的過程中，介面中的按鈕或輸入欄等等可以跟使用者互動，所以在進行variant之前，要先整理預計製作的物件類型與狀態，如圖：

　　按鈕的狀態可能有很多種，但基本都不會脫離Normal、Disabled和Hover的概念，其中Hover是指裝置與使用者之間的互動，比如滑鼠移到按鈕上變色、懸浮、變大或出現文字提示。

Component + Variant 操作

將按鈕圈選後點選工具列中央的「Create component set」：

1. 將整個Component命名為Button
2. 分別新增Type和State的Variant Properties
3. 更改圖層區的命名方式

　　接著就可以Assets裡面找到剛才建好的按鈕，直接拉出來instance進行variant切換：

　　當然，如果main component有進行修改的話，那拉出來的按鈕也會跟著連動。

一些廢話

為了找按鈕有甚麼狀態花了一段時間，然而原本還想同時做input，結果做到一半卡住，可能明天再戰 ( º﹃º )

參考資料

1. UI UX design-按鈕設計有6個狀態須知
2. Figma - Components 入門：打造自己的設計系統，快速提升設計效率！
3. Figma Component/Variant怎麼設計才有效率？
4. Figma Variants 的架構與用法