fbpx
figma-variants

Разбираемся с Figma Variants + Auto Layout на примере создания кнопок

В начале этого года я опубликовал статью о создании компонентов кнопок в Figma с помощью функции Auto Layout. За последние несколько месяцев Figma значительно улучшила Auto LayoutДА! Наконец-то они позволяют индивидуально настраивать интервал!! Для меня это была самая большая проблема этой функции.

Они также представили новейшую функцию – Variants, которая поможет вам привести в порядок ваши компоненты.

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

1. Определите свойства

Профессия «UX-дизайнер»
7 дней дизайн-перезагрузки
Мощнейние спикеры, самое дружелюбное дизайн-комьнити и желание делать клевый дизайн.
Скидка 10% по промокоду UXPUB
Присоединиться

Кнопка – один из самых сложных компонентов дизайн-системы. У нее так много разных вариантов. Теперь с темной темой нужно удвоить количество компонентов. Число комбинаций может быстро перевалить за 100. Определение всех свойств и их порядка очень важно, и, прежде чем предпринять следующий шаг, вы должны четко понимать, как вы хотите их структурировать.

В этом примере у меня есть следующие свойства:

Разбираемся с Figma Variants + Auto Layout на примере создания кнопок
Список свойств и вариантов

Когда все свойства внесены в список, я начинаю думать об организации этого компонента в Figma, чтобы он был управляемым и масштабируемым.

Моя идея – разбить его на несколько таблиц:

  • Один тип кнопки на таблицу
  • Строки таблицы соответствуют разным состояниям и размерам кнопок.
  • Столбцы таблицы соответствуют разным формам и стилям.

Затем сгруппируйте таблицы по разным темам. Макет будет похож на изображение ниже 👇

Разбираемся с Figma Variants + Auto Layout на примере создания кнопок

Почему темы не включены в таблицу?

По моему опыту могу сказать, что в процессе проектирования свойства одного компонента редко меняются. Обычно эти свойства были определены на более ранней стадии (то есть в начале проекта), поэтому исключение их из таблицы может уменьшить ее размер.

2. Настройте таблицу

После определения всех свойств начните с нового фрейма, создайте таблицы и заполните все свойства заголовков строк и столбцов таблицы.

Совет: примените auto layout к фрейму, чтобы расширить его при добавлении дополнительных свойств.

3. Наконец-то создайте компонент!

Наконец, мы можем начать заполнять пустые ячейки вариантами 😅.

Но сначала убедитесь, что у нас готовы все цвета.

Разбираемся с Figma Variants + Auto Layout на примере создания кнопок

Затем начните с пустого фрейма, назовем его «Button template».

Разбираемся с Figma Variants + Auto Layout на примере создания кнопок

Затем добавьте метку-плейсхолдер и используйте функцию auto-layout, чтобы сохранить внутренние отступы кнопки.

Разбираемся с Figma Variants + Auto Layout на примере создания кнопок
Пример стиля текста метки кнопки

Затем мы можем начать применять к нему несколько цветов:

Разбираемся с Figma Variants + Auto Layout на примере создания кнопок

На данный момент мы закончили первый вариант кнопки. Прежде чем превратить его в компонент, мы должны проверить, работает ли он так, как мы ожидали:

Разбираемся с Figma Variants + Auto Layout на примере создания кнопок

Выглядит хорошо! Давайте продублируем его и сделаем еще несколько шаблонов для разных размеров и типов кнопок.

Разбираемся с Figma Variants + Auto Layout на примере создания кнопок
Шаблоны кнопок разных типов и размеров
Разбираемся с Figma Variants + Auto Layout на примере создания кнопок

После копирования и заполнения всех вариантов в таблице мы можем изменить цвета вариантов в соответствии с состоянием.

Через время все варианты для различных состояний стиля «Прямоугольник» готовы.

Разбираемся с Figma Variants + Auto Layout на примере создания кнопок

Теперь мы можем, наконец, создать компоненты для нашей кнопки. Перед преобразованием фрейма в компонент убедитесь, что в названии слоя есть все варианты, разделенные «/».

Разбираемся с Figma Variants + Auto Layout на примере создания кнопок

Затем используйте плагин Batch Create Component, чтобы создать все компоненты сразу.

Разбираемся с Figma Variants + Auto Layout на примере создания кнопок

Затем объедините все компоненты, как варианты,

Разбираемся с Figma Variants + Auto Layout на примере создания кнопок

Погодите. Что?!

После того, как мы объединили компоненты в виде вариантов, Figma перемещает все компоненты в новый фрейм, что разбивает нашу таблицу.

Мой обходной путь – аккуратно накладывать вариант поверх таблицы. Помните, когда вы это сделаете, заблокируйте фрейм таблицы. В противном случае варианты попадут во фрейм таблицы!

Разбираемся с Figma Variants + Auto Layout на примере создания кнопок

4. Назовите свойства и значения варианта

Прежде чем создавать дополнительные варианты для разных стилей, давайте удостоверимся в правильности свойств и значений.

От этого:

Разбираемся с Figma Variants + Auto Layout на примере создания кнопок
Перед переименованием

К этому:

Разбираемся с Figma Variants + Auto Layout на примере создания кнопок
После переименования

Давай проверим, выглядит отлично!

Разбираемся с Figma Variants + Auto Layout на примере создания кнопок

Затем нужно создать больше компонентов для разных форм и типов. Выберите все компоненты и нажмите «+» в правом углу кнопки. Затем Figma продублирует все выбранные компоненты, и нам нужно переименовать значение свойства.

Разбираемся с Figma Variants + Auto Layout на примере создания кнопок
Разбираемся с Figma Variants + Auto Layout на примере создания кнопок

Очень быстро мы сможем получить полный набор вариантов для типа «Первичный».

Разбираемся с Figma Variants + Auto Layout на примере создания кнопок

После еще нескольких операций копирования и вставки мы сможем завершить все варианты!

Разбираемся с Figma Variants + Auto Layout на примере создания кнопок

И да, мы только что создали компонент с 1134 вариантами. 😅

Разбираемся с Figma Variants + Auto Layout на примере создания кнопок

Смело берите мой файл Figma и экспериментируйте с ним.

Спасибо за прочтение!

3 Комментариев
Старые
Новые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии
Похожие статьи
Представляем Figma Mirror для Android
Подробнее

Представляем Figma Mirror для Android

Сегодня мы рады сообщить, что приложение Mirror от Figma стало доступно для Android. Если вы хотите проверить, как выглядят ваши проекты в действии, вы можете отображать их в режиме реального времени на устройствах Android.
Total
9
Share