Як робити варіанти елементів інтерфейсу у Figma

Щоразу робити різні стани однієї і тієї ж кнопки довго. Варіанти у Figma допоможуть уникнути цієї нудної роботи.

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

Розповідаємо, як зробити варіанти для кнопок та скористатися ними у макеті.

Підготовка компонентів

Щоб варіанти працювали, спочатку потрібно правильно назвати компоненти для них. Для цього у Figma є система зі слішами / :

Назва елемента/Значення першої властивості/Значення другої властивості/…/Значення десятої властивості

Рекомендуємо описувати варіанти англійською мовою. Наприклад, зазначений чекбокс великого розміру можна назвати так:

checkbox/large/true

Система назв підтримує і кирилицю, але майте на увазі, що якщо ваш макет потрапить до закордонних дизайнерів, вони не зможуть зрозуміти, що в ньому написано:

чекбокс/великий/відзначений

Як зробити кнопки із системою назв у Figma

Зробіть кнопку через Auto Layout та вкажіть для неї контрастне тло.
Двічі клацніть назву елемента і напишіть Button/Primary . Це буде стиль кнопки за замовчуванням.
Зробіть копію кнопки, додайте на неї чорне обведення та заберіть фон. При необхідності перефарбуйте колір тексту на чорний, щоб він читався. Назвіть кнопку Button/Secondary – це буде додатковий стиль.
Зробіть з кожної кнопки самостійні компоненти — натисніть на кожну правою кнопкою миші і в меню виберіть Create component

Тепер у вас є два готові компоненти, які можна перетворювати на варіанти.

Створення варіантів

Щоб створити варіанти з ваших компонентів, виділіть їх на панелі налаштувань, у блоці Variants натисніть Combine as variants . Ваші компоненти об'єднаються у спільну групу з варіантами – він називається комбайном.

Зверніть увагу, що додати до фрейму варіантів можна лише компоненти. Якщо разом з ними виділити групи, кадри або копії компонентів, Figma не дасть вам зробити варіанти.

Як скористатися варіантом

Перейдіть на панелі шарів у вкладку Assets та перетягніть кнопку на макет.
Виділіть кнопку, що з'явилася, і на панелі інструментів у блоці Button вкажіть значення Property 1 — Secondary .

Ваша контрастна кнопка перефарбується в сірий:

Додавання нових станів

У кожного об'єкта може бути скільки завгодно станів, але їх важливо правильно назвати, щоб потім ви не загубилися у своєму ж макеті. Зараз стани Primary і Secondary відносяться до якості Property 1 – вашому арт-директору буде незрозуміло, що це означає.

Щоб перейменувати Property 1 , виділіть весь комбайн з варіантами і на панелі налаштувань у блоці Variants замість Property 1 напишіть Type . Тепер навіть через десять років будь-кому буде зрозуміло, що в цьому меню потрібно вибрати тип елемента:

Як додати нову властивість

Виділіть фрейм із варіантами.
На панелі налаштувань у блоці Variants натисніть іконку, потім — Add new property .
У полі введення, що з'явилося, напишіть State (стан).
Знову виділіть комбайн із компонентами та натисніть на плюсик у правому нижньому кутку.
На панелі налаштувань у блоці Variants напроти слова State напишіть Disable . Перевірте значення Property 1 – має бути Primary .
Вкажіть непрозорість тла вашої кнопки – 50%.

Тепер у стилю Primary з'явився новий стан Disable . Щоб його активувати, виберіть кнопку на макеті та на панелі налаштувань у блоці Button вкажіть значення State — Disable :

Те саме можна зробити і з додатковим стилем кнопки, щоб ви могли швидко показати її відключеною.

За допомогою варіантів можна змінювати будь-що, наприклад колір, розмір, і додавати іконки.

Коли варіантів стає занадто багато, корисно привести весь фрейм варінатів до ладу, щоб ви могли швидко знайти будь-який стан. Рекомендуємо розташовувати вертикально і групувати за типом кнопок:

Не забувайте, що варіанти це ті ж компоненти. Якщо ви бажаєте змінити кольори або форму кнопок по всьому макету, це можна зробити через комбайн.

Плагін Button Buddy

Створити варіанти кнопок нескладно, але малювати кожну окремо довго і нудно. Вирішити проблему допоможе плагін Button Buddy , який автоматично створює всі основні стани за вказаними вами параметрами.

Як користуватися плагіном:

Завантажте плагін за посиланням .
Зайдіть у Figma, натисніть правою кнопкою миші на макет, у меню, що випадає, перейдіть в пункт Plugins і натисніть на Button Buddy .
У меню виберіть колір і радіус заокруглення кнопок, а потім натисніть на кнопку Create .

У вас на макеті з'явиться готовий фрейм варінатів із базовими станами кнопки: