Variants в Figma: как вывести ваши компоненты на новый уровень
Пошаговая инструкция перевода существующих компонентов на variants (плюс почему variants — это не страшно и очень удобно)/
Итак, предположим, что у вас есть набор компонентов для кнопки:
В зависимости от области использования, кнопка может быть в виде пиктограммы (на панелях инструментов), в виде текста в рамке (для второстепенных действий) и в виде текста на залитой основным цветом плашке (для главного действия на странице). Независимо от типа, кнопка может находиться в разных состояниях:
- Обычное (default),
- С наведенным на кнопку курсором мыши (hover),
- В фокусе (focus),
- Нажатое состояние (pressed),
- Недоступное для нажатия (disabled).
Так вот до появления variants нужно было создавать отдельный компонент для каждой комбинации вида и состояния элемента (в нашем случае 15 компонентов — 3 вида и 5 состояний). А для централизованного управления свойствами (например, отступами содержания до края, размерами иконки) в основе каждого компонента лежал исходный базовый компонент (на скриншоте это base), в котором мы скрывали / показывали составные части — пиктограмму и текст.
Посмотрите скришот ниже: слева видим структуру компонента, а справа на панели свойств видим меню “Swap instance” — навигация по компонентам в зависимости от их наименования. Напомню, слэш в названии компонента как бы образует “папку”, и с помощью этого можно создавать вложенность — в нашем случае кнопки называются “тип кнопки/состояние”, например, “second/default” — благодаря этому мы можем быстро менять состояние кнопки в панели свойств справа или в контекстном меню: например, переключить default на hover для все той же кнопки second.
Но 15 компонентов — это как-то многовато для простой кнопки. Хочется более изящного решения для создания и использования компонентов. И вот Figma предлагает нам превратить кучку компонентов в варианты (variants):
Нажимаем “Combine as Variants” и видим что-то близкое к чуду: вся эта кучка превратилась в один компонент, а внутри него мы можем назвать его свойства (сейчас это Property 1 и Property 2 на панели свойств).
Переименуем сам компонент и его свойства:
- Property 1 — это тип кнопки = type,
- Property 2 — это состояние кнопки = state.
И смотрите, как теперь удобно переключаться между разными типами и состояниями кнопки: экземпляр всего один, а внутри можем переключаться по двум свойствам — type и state. Красота!
Благодаря вариантам для централизованного управления свойствами компонента больше не нужно создавать базовый объект (в нашем случае это “base” для настройки отступов, размера иконки, управления текстом). То есть не будет вот этой матрешки компонентов: “button/base”, а будет только “button”.
Важный момент: чтобы добавить экземпляр компонента с variants на страницу, нельзя просто скопировать и вставить мастер-компонент — это не сработает (получится новый мастер-компонент). Нужно идти на вкладку Assets и тащить экзмпляр оттуда. А потом можно копировать уже созданные экземпляры прямо на странице.
Полезные ссылки от Figma (их инструкции и Playgrounds очень качественные, рекомендую):
- Супер-подробная инструкция по variants — https://help.figma.com/hc/en-us/articles/360056440594
- Как подготовить существующие компоненты для использования variants — https://help.figma.com/hc/en-us/articles/360055471353-Prepare-for-Variants
