Variant是什麼？Figma新手必須知道！輕鬆打造系統化的元件庫

內容目錄

相信剛踏入Figma的每位設計師，對於Component的功能感到非常喜愛，能夠在編輯圖版時省去不少時間，讓你不需在更改元件時逐一替換它。而後推出的Variant功能，讓設計師在建立元件庫有了全新的方式。

定義清楚屬性/狀態

Variant（變數）是由 Component（元件）下細分出來的屬性，你可以為它命名並迅速組合，假設你有2種背景主題、2種顏色款式、4種icon文字排法、4種狀態，你會有2*2*4*4=64的變化，因此有超過1000種組合是正常的。首先，請不要急者構建元件庫，先定義清楚所有屬性及狀態，讓之後的應用更加順暢。

定義清楚屬性狀態｜Variant是什麼？Figma新手必須知道！輕鬆打造系統化的元件庫｜鵠崙設計02

建立基本元件、新增變數：以「按鈕」為例

請先新增文字欄位並右鍵點擊Frame selection → 在右側視窗點擊Auto layout設定上下、左右間距 → 編輯文字、底色的填色 → 右鍵點擊Create component即新增為一個按鈕的基本元件。接下來在右側視窗設定Properties → 點擊「＋」號新增Variant，改變按鈕的樣式 → 最後使用「,」分隔來新增更多變數，例如：將預設「Property 1=Default」改為「state=Default, icon=Text only, type=Primary」，你可透過重新命名的方式，讓元件庫更符合你的產品或設計需求。

建立基本元件、新增變數｜Variant是什麼？Figma新手必須知道！輕鬆打造系統化的元件庫｜鵠崙設計03

實際應用及測試

在左側視窗的Assets，將Local components裡的元件拖拉至面板，並根據頁面設計的情況，於右側視窗點擊Current variant下拉切換變數。在這過程中，你必須檢視元件庫裡的層級與命名是否保持乾淨、清楚閱讀，並確保將來更改的易用性。

Variant是什麼？Figma新手必須知道！輕鬆打造系統化的元件庫｜鵠崙設計04

結語

Variant能夠讓你的元件庫保持設計一致性，並且可以非常輕鬆就做到大規模的調整，因此越早了解並學會如何妥善使用它會讓你的設計更加系統化。想讓設計變得更有效率嗎？趕緊來玩看看吧！
那這次的分享就到這裡結束了~我們的官網將會不定期發佈有關行銷或是網頁設計上的文章，如果喜歡文章內容歡迎定期注意鵠崙設計的官網也可以到鵠學苑看更多教學文章，我們下次再見～