Эта фишка появилась в фигме где-то примерно пол года назад и упростила жизнь тысячам дизайнеров.
⠀
📍Для начала, напомню что такое обычные компоненты. Это тип элементов, у которых есть «главный компонент» - родительский, есть его копии и у всех у них есть взаимосвязанные настройки.
⠀
Например у вас по сайту везде встречаются одинаковые кнопки и чтобы не настраивать каждую из них по отдельности, вы создаете компонент главной кнопки, потом копируйте ее и во все остальные места на сайте вставляете «дочерние». И если вам вздумается поменять шрифт/цвет/форму кнопки, вы просто делаете это в главной, а во всех остальных это меняется автоматически.
⠀
При этом вы можете независимо изменить настройки дочернего компонента, а потом применить эти свойства ко всем.
⠀
Таким образом сильно упрощается работа в больших проектах, ведь компонентом может быть не только кнопка, но и карточка товара в каталоге, меню footer или вообще любой блок дизайна.
⠀
📍Вариативные компоненты - когда у вас есть не только 1 главный элемент, а несколько зависимых и вы можете переключаться между ними при необходимости.
⠀
На примере тех же кнопок, у них может быть несколько состояний: кнопка обычная, кнопка по ховеру, кнопка не активная, кнопка по клику. И вместо того, чтобы создавать компонент для каждой кнопки, вы объединяете их между собой в одну систему и легко переключаетесь между состояниями.
⠀
При этом у них сохраняются свойства обычных компонентов, т.е. если вы измените какие-то параметры (например цвет или кнопку) у главного, у зависимых от него компонентов тоже эти настройки изменятся). И это очень удобно.
⠀
Не нужно больше отрисовывать по 10 раз карточки с разными состояниями, можно создать вариативные компоненты и переключаться между ними одним кликом мышки.
⠀
Точно так же это может работать например в чек-боксах или слайдерах. Очень удобно!