十月的時候Figma推出了新功能Variant（型態），讓搭建元件庫有了全新的方式。關於Variant是什麼，可以先看看Figma的官方說明（繁體中文 by Rei）：
Variant是在原本Component的結構下再去細分同一個元件下的不同性質，這些性質被稱為「property」。每一個Variant在不同property都會有一個值，且這些值的配置組合必須要是獨一無二、每個Variant不同的。如果用人來比喻的話，人有「年齡」「身高」「性格」等等property，而在數千個不同property中每一個人都有自己的值，這些值組合起來形成完全不同的人的樣貌(Variant），但還是在人類（Component）這個概念之下。
Variant推出的時候，我剛好也在搭建我的第一個元件庫，在完全不知道先前大家都是怎麼用Sketch或是純用Figma Component建立元件的情況下，摸索出自己用起來比較順手、Component + Variant的搭建方法。
這邊選了三個我認為搭配Variant製作能大幅提升搜尋效率與分類整齊度的Component：按鈕、表格、輸入欄。一起來看看吧！
按鈕
按鈕其實相較單純，以過去「/」的命名方式整理並用swap instance替換也不會有太大困難。然而，使用Variant好處是能直接用下拉選單選擇需要的型態，而不是像過去一樣從樹狀的資料夾或是要搜尋component名稱來尋找。
在設計按鈕的Variant時，可以用兩個property【Type】與【State】。Type指的是不同大小、用途的按鈕，State指的是按鈕在不同互動下的狀態，用這兩軸就可以設計出所有你需要的按鈕Variant！
輸入欄
輸入欄的話建議可以用三種property組成：State、Type、Alignment。如同按鈕，輸入欄也有一般、有填寫、正在填寫等狀態【State】，而類型【Type】又可以分為基本款與在表格裡面的款式（字體可能較小、欄位高度也較低）。由於需要放進表格內，因此也要考量不同的欄位對齊方式【Alignment】 。
只要在輸入欄的Variant加上暗示可以展開的倒V（或倒三角），就可以根據需要隱藏或展示倒V，隨心所欲的在輸入欄（隱藏倒V）跟下拉式選單（顯示倒V）之間切換囉！
輸入欄基本款Variant做好之後，就可以拿基本款搭配table header（見下個主題），製作出帶標題的輸入欄，讓之後製作表單更容易。這種nesting的做法（一個Component中有另外一個Component的instance）仍會保留原本的Variant設定，所以如果今天你要模擬一個正在填寫的表單的話，只要點選基本輸入欄這個物件，就可以用Variant的介面去切換狀態（超方便！）。
表格
表格我們拆解到最小單位——欄位層級，其中根據用途不同又分為6個【Type】 ：標題、內容、輸入欄、按鈕、帶icon的標題與帶icon的內容。由於表格每個欄位的對齊方式因資料類型有所不同（如數字，因此我們還需要第二個property 【Alignment】。如果在設計時會常常使用到不同狀態的表格欄位，則可以加上第三個property【State】，把hover、selected等狀態一併規劃進去。
在製作欄位時，記得運用其他地方製作的component，例如底線使用divider的component、輸入欄欄位使用輸入欄的component，這樣才能事半功倍地維持一致性。
等欄位的variant都製作好之後，就可以運用Auto Layout像拼樂高一樣將表格做出來。先用水平Auto Layout拼出header列與content列做出來，並將content列也做成元件（這樣之後修改才方便），接者就可以用垂直的Auto Layout把表格完成。表格的組成方式可以參考下圖：
礙於篇幅關係，這次只跟大家分享了三種元件/型態的製作方式，但其實大部分介面裡面的東西都可以元件化或用元件拼裝出來，善用Constraint設定、Auto Layout與隱藏，你的人生會快樂很多。
最後一定要忠告大家，Component真的越早做越好，就算你還沒想到每個狀態或是每個大小的Variant應該長什麼樣，也至少先用default的component預留他的位置，等到有時間再來一次改他們的樣式，不然到最後你一定會套版套到哭！（我就哭了）
如果有任何對Component/Variant整理方式的心得，歡迎與我分享，我們下次見！
