UI設計師在日常工作中經常會用到組件，通過複制組件可以獲得實例組件，當主組件修改時，其他實例組件也會發生改變。在實際工作中使用組件變體功能，可以讓設計師減少大量的重複工作，快速提高工作效率，但是光有組件還是不夠，如果遇到按鈕切換、改變顔色等情況時，還是需要手動開啟，非常麻煩。

這時候Pixso就為我們提供了一個升級版的組件形式——組件變體。

1. 組件變體是什麼

組件變體是把多個引用組件（Symbol）合并為一個整體，隻需要設置好屬性就可以随意切換組件的不同狀态的超級組件，我們将它稱為組件變體。在一些場景中，組件需要基于實際的情況衍生出不同的形态，在使用了組件變體之後，設計過程中所有的組件替換都會變得像操作 App 一樣簡單！

2. 組件變體為什麼這麼好用

無限數量：組件變體不受數量控制，可以無限添加組件數量，主需要全部選中，一口氣合并為變體。

一鍵切換：組件變體可以對添加的組件進行類型、顔色、功能等分類，實現一鍵切換狀态。

化零為整：無論組件庫中有多少組件，最終隻需要用到一個組件，剩下的都通過右側面闆進行切換即可，再也不用手動替換了。

使用簡單：變體組件會創建一個組件集，添加組件隻需要拖入組件集中即可使用。使用變體隻需要從左側組件欄拖拽出來即可。

3. Pixso組件變體使用教程

這麼好用的變體在Pixso中創建起來卻非常簡單，主需要簡單五步即可創建一個組件變體。下面通過一個案例中的按鈕狀态，來學習下變體組件的制作。

第一步：将案例中的按鈕複制出來，創建三個不同的按鈕狀态：開啟-綠色、開啟-藍色、關閉。

第二步：分别選擇按鈕狀态，右鍵選擇創建組件按鈕，創建出三個按鈕組件。

第三步：選擇三個組件，點擊右側的創建變體組件按鈕，創建變體組件後會形成一個組件集，然後對組件集中的組件命名成它們對應的狀态。

第四步：選擇組件集，在右側的變體欄中找到右面的三個點（更多）按鈕，點擊後選擇新增屬性，創建新的變體屬性。然後選中按鈕組件，修改它們的屬性狀态，我這裡創建了兩個屬性狀态，分别是開啟和關閉。

第五步：從左側組件欄中将剛剛創建的組件集拖拽到界面中對應位置上，一個變體組件就創建完畢了。選擇變體，可以在右側欄中看到對應的組件屬性和組件狀态。

變體屬性的顯示方式根據屬性數量的不同，會出現兩種顯示模式。

當變體的屬性是兩個的時候，屬性狀态是開關按鈕顯示的，非常方便。

當變體的屬性是兩個以上的時候，屬性狀态是下拉欄，以便于擴展更多的屬性。

以上通過Pixso創建的變體組件，隻需要簡單五步即可輕松創建，是不是非常簡單方便。當然這是非常基礎的組件變體的創建方法，如果想要深入學習可以進入Pixso資源社區，其中有專門的UI組件集分類，裡面有大量優質的UI組件集，而且都是免費使用的，歡迎小夥伴們前往學習研究。Figma中文版Pixso，是一款在線協同設計工具Pixso，不需要下載本地，打開Web就能在線設計，打破了設備限制，基于雲上儲存，走到哪兒都可以随時獲取文稿進行修改。

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!