設計人員現在可以為單一元件定義多個樣式選項,例如具有實心和輪廓樣式的按鈕,或具有水平和垂直變體的卡片。
我們今年在 Webflow Conf 上宣布了Component style variants,並很高興地告訴大家,它現在可供所有客戶使用。
元件是網站的可重複使用的構建塊,讓您可以自訂內容,同時保持網站的設計。過去,當元件針對不同上下文有不同設計時,需要您建立和管理相同元件的多個版本,或使用涉及可見性屬性或自訂類別屬性的複雜解決方法。
元件樣式變體極大地簡化了此過程,讓您可以為單個元件定義多個樣式選項 - 例如具有實心和輪廓樣式的按鈕,或具有水平和垂直佈局的卡片。除了更有效率地尋找和建置這些元件之外,變體還有助於確保設計一致性,因為它們繼承了對基礎的任何變更。
變體甚至可以組合並應用於嵌套組件 - 允許您在各種場景中混合和匹配它們。例如,您可以有一個部分,其中標題具有排版變體、具有佈局變體的卡片以及具有不同顏色變體的這些卡片內的按鈕。
這意味著設計人員需要維護的組件更少,團隊其他成員需要篩選的組件更少,每個人都擁有更大的靈活性 - 但不要只是從我們這裡奪走它。以下是一些參與測試的合作夥伴的評價:
元件樣式變體對我們的團隊來說是一個遊戲規則改變者,使我們能夠設計和部署強大的設計系統,讓我們的客戶和合作夥伴可以輕鬆管理。 —Ilya Kroogman,數位熊貓創辦人
透過元件樣式變體,我現在可以在使用元件建立頁面時為客戶提供更大的靈活性。以前,我必須為每個細微差別建立多個元件,或者在自訂元素上使用類別屬性,這對我的客戶來說太複雜了。現在,他們可以使用簡單的選擇元素輕鬆更改元件的樣式或佈局。 —Kyle Craven,設計師兼 Webflow 開發人員