Компоненти - це багаторазові будівельні блоки вашого сайту, що дозволяють вам налаштовувати контент, зберігаючи при цьому вірність дизайну вашого сайту. Раніше, коли компонент мав різний дизайн для різних контекстів, вам доводилося створювати і керувати кількома версіями одного і того ж компонента або використовувати складні обхідні шляхи, пов'язані з пропсами видимості або спеціальними атрибутами класів.

Варіанти стилів компонентів значно спрощують цей процес, дозволяючи вам визначати кілька варіантів стилів для одного компонента - наприклад, для кнопки із суцільним і контурним стилями, або для картки з горизонтальним і вертикальним макетами. Крім того, що ці варіанти роблять пошук і створення компонентів ефективнішим, вони допомагають забезпечити узгодженість дизайну, оскільки успадковують будь-яку зміну в основі.

Варіанти можна навіть комбінувати і застосовувати до вкладених компонентів, що дає змогу змішувати і поєднувати їх для широкого спектру сценаріїв. Наприклад, ви можете мати розділ, де заголовок має варіанти типографіки, картки з варіантами макета, а кнопка всередині цих карток з різними варіантами кольору.

Це означає менше компонентів для підтримки дизайнерами, менше компонентів для решти команди, які потрібно просіювати, і більше гнучкості для всіх - але не забирайте це тільки у нас. Ось що сказали деякі з наших партнерів, які брали участь у бета-тестуванні:

• Варіанти стилів компонентів змінили правила гри для нашої команди, давши нам можливість розробляти та впроваджувати надійні системи дизайну, якими наші клієнти та партнери можуть легко керувати —Ilya Kroogman, Founder, The Digital Panda
• Завдяки варіантам стилів компонентів я можу запропонувати своїм клієнтам більшу гнучкість при створенні сторінок з компонентами. Раніше мені доводилося створювати кілька компонентів для кожної незначної відмінності або використовувати атрибут class для кастомних елементів, що було занадто складно для моїх клієнтів. Тепер вони можуть легко змінити стиль або макет компонента за допомогою простого елемента вибору. —Kyle Craven, Designer & Webflow Developer

Відвідайте довідковий центр Webflow, щоб дізнатися, як почати проектування з варіантами стилів компонентів вже сьогодні.