# Component style variants 現已可用 (11-19-2024)

[我們今年在 Webflow Conf 上宣布了Component style variants](https://www.youtube.com/watch?v=u7zm19YgQBA\&t=1353s)，並很高興地告訴大家，它現在可供所有客戶使用。 

元件是網站的可重複使用的構建塊，讓您可以自訂內容，同時保持網站的設計。過去，當元件針對不同上下文有不同設計時，需要您建立和管理相同元件的多個版本，或使用涉及可見性屬性或自訂類別屬性的複雜解決方法。

元件樣式變體極大地簡化了此過程，讓您可以為單個元件定義多個樣式選項 - 例如具有實心和輪廓樣式的按鈕，或具有水平和垂直佈局的卡片。除了更有效率地尋找和建置這些元件之外，變體還有助於確保設計一致性，因為它們繼承了對基礎的任何變更。

{% embed url="<https://player.vimeo.com/video/1030889813?h=67d7fc17c7>" %}

變體甚至可以組合並應用於嵌套組件 - 允許您在各種場景中混合和匹配它們。例如，您可以有一個部分，其中標題具有排版變體、具有佈局變體的卡片以及具有不同顏色變體的這些卡片內的按鈕。&#x20;

這意味著設計人員需要維護的組件更少，團隊其他成員需要篩選的組件更少，每個人都擁有更大的靈活性 - 但不要只是從我們這裡奪走它。以下是一些參與測試的合作夥伴的評價：

* *元件樣式變體對我們的團隊來說是一個遊戲規則改變者，使我們能夠設計和部署強大的設計系統，讓我們的客戶和合作夥伴可以輕鬆管理。 —Ilya Kroogman，*[*數位熊貓*](https://www.thedigitalpanda.com/)*創辦人*
* *透過元件樣式變體，我現在可以在使用元件建立頁面時為客戶提供更大的靈活性。以前，我必須為每個細微差別建立多個元件，或者在自訂元素上使用類別屬性，這對我的客戶來說太複雜了。現在，他們可以使用簡單的選擇元素輕鬆更改元件的樣式或佈局。 —Kyle Craven，*[*設計師兼 Webflow 開發人員*](https://kylecraven.design/)

請造訪[我們的幫助中心，以了解如何立即開始使用組件樣式變體進行設計](https://help.webflow.com/hc/en-us/articles/33961303934611-Components-overview#create-component-style-variants)。