UI設計師效率指南，3分鐘學會Pixso「元件變體」！

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

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

1。

元件變體是什麼

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

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

無限數量：元件變體不受數量控制，可以無限新增元件數量，主需要全部選中，一口氣合併為變體。

一鍵切換：元件變體可以對新增的元件進行型別、顏色、功能等分類，實現一鍵切換狀態。

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

使用簡單：變體元件會建立一個元件集，新增元件只需要拖入元件集中即可使用。使用變體只需要從左側元件欄拖拽出來即可。

3. Pixso元件變體使用教程

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

第一步：將案例中的按鈕複製出來，建立三個不同的按鈕狀態：開啟-綠色、開啟-藍色、關閉。

第二步：分別選擇按鈕狀態，右鍵選擇建立元件按鈕，創建出三個按鈕元件。

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

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

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

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

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

當變體的屬性是兩個以上的時候，屬性狀態是下拉欄，以便於擴充套件更多的屬性。

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