Оптимизируем работу с Figma Variants

Привет! Меня зовут Евгений Шевцов, я руковожу UX-направлением в Usetech и на досуге веду телеграм канал "Мамкин Дизайнер", где рассказываю о жизни дизайнера и о фишечках в Figma.

Мы в компании ценим быстроту и оптимизацию процессов. Когда для продукта необходимо разработать UI Kit в Figma со всеми ее возможностями – работа может превратиться в рутину.

Сегодня расскажу, как с помощью стилей и дублирования компонентов создать 120 вариантов кнопок за минимальное количество времени.

Я не претендую на открытие года, наверняка, вы уже и сами все знаете, просто делюсь своим методом.

Я ожидаю, что вы уже знакомы с функционалом Variants, если нет, то самое время узнать.

Документация и плейграунд:

https://help.figma.com/hc/en-us/articles/360056440594-Create-and-use-variants

Если вы не хотите читать и вам проще посмотреть, то держите сразу небольшое видео, а если текстовый формат для вас – ниже подробный разбор.

Надеюсь, что вы подготовили цветовые стили для своих макетов и компонентов. Если нет, то сделайте это. Далее с их помощью мы будем красить варианты.

Также выпишите атрибуты кнопки, ее состояния и размеры, которые она будет у вас принимать. Таким образом вы ничего не упустите, а если упустите не беда, добавим позже.

Если грядет создание большого количества вариантов, то я всегда создаю самый главный компонент, который в последствии я оборачиваю в еще один компонент и создаю из него Variants.

Теперь необходимо сделать дубликат главного компонента и обернуть его еще раз в компонент. Называем компонент как нам необходимо и получаем вложенность.

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

У нас должно получится так же, как на рис.2

Далее, с компонентом, в который мы вложили .master, необходимо создать варианты. Справа, в панели Variants, тыкаем в «+» и видим, как к компоненту добавился второй вариант, а вложенность слоев должна получится как на рис.3

Делаем 5 дублей кнопок. В слоях раскрываем каждый компонент и отключаем ненужное.

Я отталкивался от атрибутов кнопок, в моем случае это иконки:

• просто текст
• текст + иконка слева
• текст + иконка справа
• текст + иконки с двух сторон
• просто иконка

Итого 5 вариантов типа Primary.

Далее, я создаю все свойства кнопок:

• Тип;
• Состояние;
• Размер;
• Иконка

И по умолчанию выставляю значения этих свойств для только что созданных пяти вариантов кнопок.

Мы собрали базу, с помощью которой дальше мы будем действовать путем копипасты, замены цвета в инспекторе Selection Colors и настройки свойств Variants.

Далее нам надо просто дублировать варианты, добавлять свойства и изменять стили.

Нам необходимо определиться в какую сторону идем, я предлагаю в сторону состояний.

Выделяем пять вариантов, дублируем их, в настройках Variants в поле State добавляем «Hover». Другие свойства нам пока не нужны, они дублируются от первых пяти.

Далее, чтобы начать управлять стилями, можем выделить скопированные варианты и управлять панелью Selection Colors, которая находится справа внизу.

Если необходимо управлять стилями более точно, например отдельно покрасить заливку или обводку, то выделите необходимые варианты, нажмите горячую клавишу Enter. В слоях вы провалитесь на следующий уровень во всех вариантах, к инстансу главного компонента.

Окей, со стилями понятно. Дублирование компонентов друг за другом и перекрашивание стилями – работает.

В нашей конфигурации у нас должно выйти 60 вариантов (без учета второго размера кнопки).

Теперь нам необходимо создать размеры. Выделяем все 60 вариантов, дублируем, кладем где-то рядом и нажимаем горячую клавишу Enter, проваливаясь к инстансу нашего главного компонента.

Здесь необходимо манипулировать настройками Auto Layout, просто массово заменить у всех верхний и нижний padding. В моем случае – по 4px с каждой из сторон, чтобы высота кнопки стала 32px. (рис. 10)

Выделяем вновь варианты с измененными размерами и в настройках Variants меняем Size на S – 32px.

Все это делается гораздо быстрее, чем читается, а если довести до автоматизма – то не заметите, как будете щелкать такие задачки как орешки.

В следующих обзорах расскажу про сложные компоненты и замену инстансов в Variants.

Если в текстовой версии что-то не понятно – посмотрите видео в самом начале этого поста, там всего 12 минут.

Ну и приходите в тг-канал поболтаем