最近在使用Figma感覺是個好上手也很適合協作的UI工具，Figma在近期加入一新功能- Vibrate也帶來一波討論，提高設計師在規畫UI時的效率，且能更貼近工程師的邏輯來定義GUI system，以下就來看看使用方式。

[主要概念]
Vibrate 主要用意就是可以把原本獨立的Component，將所有型態變化集合為一體，成為一整組Component集合，以按鈕為例裡面可能會包含各種 Variant (如 顏色、類型、有/無 icon ) ，在所以只要控制一組Component即可，在前陣子 Figma設計中，還需要分別創造很多不同狀態的元件來達到一樣的效果，這也讓整個專案面板看起來非常複雜。現在加入 Vibrate可以將 Component 更容易在Asset中找到、且更加符合程式邏輯實作。

[主要實作]
1.首先，要先了解2個命名的規則:
a.在Figma中，組件命名需要用到「/」符號，舉例來說，下圖4個按鈕，分別代表同一個按鈕但有不同狀態，用 「/」 來區分不同的屬性，代表意思為:物件名稱/屬性1/ 屬性2/屬性3 ，其命名須為:
Button/Primary/Standard/No Icon、 Button/Primary/Hover/No Icon 、 Button/Primary/Press/No Icon 、Button/Primary/Disable/No Icon 、
b.同一組 Component集合 ，命名不可以相同。

2.把元素都命名完成後，需先把所有元素都創建為組件(右鍵>Create component)，當成功轉成 component ，會看到圖層上的物件變為紫色

3.接著就要開始創建 component 集合:
首先先一次選取要集合的 component ，於右邊欄位按下Combine as Variants，此時可以看到外面產生一個虛線框，表示已經創造一個 component 集合， 剛被選取的的組件都被合併成這個組件集合裡。

4.這時，在右邊的欄位Variants，就會產生一系列的 Variants 屬性，且可以直接在欄位中將屬性名稱更改。也可以直接從右上方的點點符號，直接新增另一組Variants或屬性。

這邊所產生的屬性，就與一開始的命名有很大的關係，Figma通常會將第一個群組的名稱視為一個組件集合，之後的群組則判斷為新的屬性，而且每一個值，都會填進相同層級的唯一名稱，這也就是為什麼設定名稱不可以重複了， 在下圖更可以了解命名與屬性架構的規則性。

5.接著至左邊欄位切換至Assets的部分，搜尋剛所命名Component集合名稱Button Component， 拖曳進畫面，在 Assets 搜尋顯示只會顯示單一的縮圖是正常的。

6.至右方屬性欄中，就可以看到我們所設置的 Button Component 屬性欄位，可以分別從所定義的屬性Type、Status、Icon 下拉選單選取要的按鈕型態。

以上就完成一組 Component 集合的步驟，在這邊補充另一個 Vibrate 特點 Boolean Value ，我們可以把剛才ButtonIcon的屬性改寫成True、False，再回到Assets選出按鈕，就可以看到Icon變數的選項變成toggle形式。

[小結]
Figma 加入Variants的功能，讓Component更具系統化，就不需要像在之前使用時要在場景中無止境的控制圖層分類，且可以依照自己的設計來定義屬性名稱、項目樣式等，讓在GUI的新增與維護上更能符合不同的設計需求，或許一開始要先習慣命名的規則，但上手後，就可以一步驟的整理Component是個非常實用方便的功能。

參考資料:
https://www.youtube.com/watch?v=y29Xwt9dET0