Безкоштовно · українською · 8 хв читання

Компоненти та варіанти у Figma: як створити і як ними користуватися

Як працюють компоненти у Figma: головний компонент та інстанси, перевизначення, варіанти, властивості компонента й вкладені компоненти. П'ять кроків з вправами.

  • Чим головний компонент відрізняється від інстансу
  • Як зробити кнопку з варіантами без сотні копій
  • Коли варіант, а коли властивість компонента
Показати компоненти на фідбек
  • Безкоштовно
  • 1504 учасники
  • Вхід за 1 клік

П'ять кроків, щоб опанувати компоненти

  1. 1

    Крок 1

    Створіть компонент і розставте інстанси

  2. 2

    Крок 2

    Перевизначення: що можна змінити в інстансі

  3. 3

    Крок 3

    Зберіть кнопку з варіантами

  4. 4

    Крок 4

    Додайте властивості компонента замість зайвих варіантів

  5. 5

    Крок 5

    Складіть більший компонент із менших

1504
учасники спільноти
8915
повідомлень із запитаннями з липня 2024
9
дизайн-ігор з вересня 2024
759
людей писали в чат

Цей гайд для вас, якщо ви

  • Копіюєте елементи через Ctrl + C

    Одна й та сама кнопка живе у файлі в 40 копіях, і змінити колір усіх одразу неможливо.

  • Створили перший компонент

    Але не розумієте, що можна міняти в інстансі, а що лише в головному компоненті.

  • Плутаєтеся у варіантах

    Кнопок стало забагато: окремо для кожного розміру, кольору, стану й іконки.

Коротко

  • Компонент — це елемент, який створюють один раз, а потім використовують як інстанси: змінили головний компонент — оновилися всі копії у файлі.
  • В інстансі можна змінити текст, заливку, обведення й розмір, не втрачаючи зв'язку з головним компонентом.
  • Додавати, видаляти й переставляти шари можна лише в головному компоненті.
  • Варіанти об'єднують схожі компоненти в один набір: тип, розмір, стан.
  • Властивості компонента (boolean, text, instance swap, slot) прибирають зайві варіанти.

П'ять кроків, щоб опанувати компоненти

  1. 1

    Крок 1

    Створіть компонент і розставте інстанси

    Зберіть кнопку на auto layout: фон, текст, padding. Виділіть її й натисніть Create component у правій панелі або Option + Cmd + K (Mac) / Ctrl + Alt + K (Windows). Тепер це головний компонент (main component): у панелі шарів біля нього з'явиться фіолетова іконка компонента. Створіть кілька інстансів (instances) — копій, пов'язаних із головним:

    • продублюйте головний компонент: Cmd + D (Mac) або Ctrl + D (Windows);
    • або перетягніть компонент на полотно з вкладки Assets (Option + 2 / Alt + 2);
    • або натисніть Shift + I, щоб швидко знайти й вставити компонент через меню дій.

    💡 Змініть у головному компоненті колір фону чи радіус кутів і подивіться, як оновилися всі інстанси. Це й є головна ідея компонентів.

  2. 2

    Крок 2

    Перевизначення: що можна змінити в інстансі

    Кнопки в макеті мають різні підписи, тож інстанси треба трохи змінювати. Такі зміни називаються перевизначеннями (overrides): в інстансі можна змінити текст, заливку, обведення й розмір, і зв'язок із головним компонентом зберігається. Але дещо змінити не вийде, бо воно належить до структури компонента:

    • додати, видалити чи переставити шари всередині інстансу;
    • змінити constraints вкладених шарів;
    • якщо зміна в інстансі вдалася й потрібна всюди, оберіть Push overrides to main component — це працює, коли головний компонент у тому самому файлі;
    • якщо перевизначення вже не потрібні, скиньте їх до вигляду головного компонента.

    💡 Detach instance (Option + Cmd + B / Ctrl + Alt + B) перетворює інстанс на звичайний фрейм. Він більше не отримуватиме оновлень, і назад до компонента його не під'єднати. Якщо відв'язали випадково, одразу натисніть Cmd / Ctrl + Z.

    Покажіть свій набір варіантів

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

    Показати компоненти на фідбек

    Безкоштовно. 1504 дизайнери вже в спільноті.

  3. 3

    Крок 3

    Зберіть кнопку з варіантами

    Замість окремих компонентів «синя кнопка», «сіра кнопка», «синя кнопка при наведенні» зробіть один набір компонентів (component set) з варіантами (variants). Створіть кілька компонентів кнопки й назвіть їх через слеш, наприклад Button/Primary/Default і Button/Primary/Hover, виділіть їх і натисніть Combine as variants. Figma створить властивості з назвами Variant, Property 2 тощо — перейменуйте їх на зрозумілі:

    • Type: Primary, Secondary;
    • State: Default, Hover, Pressed, Disabled;
    • Size: Large, Small.

    💡 Кожен варіант має бути унікальною комбінацією значень, інакше Figma покаже конфлікт. Не обов'язково малювати всі можливі комбінації — лише ті, що справді потрібні. Варіант у верхньому лівому куті набору стає варіантом за замовчуванням.

  4. 4

    Крок 4

    Додайте властивості компонента замість зайвих варіантів

    Якщо зробити окремий варіант для кнопки з іконкою й без неї, кількість варіантів подвоїться. Для таких випадків є властивості компонента (component properties). Їх створюють у розділі Properties правої панелі головного компонента чи набору, а потім прив'язують до вкладених шарів:

    • Boolean — показати чи сховати шар, наприклад іконку;
    • Text — підпис кнопки, який змінюють прямо в правій панелі інстансу;
    • Instance swap — вкладений компонент, який можна замінити, наприклад іконка «плюс» на «кошик»; можна вказати рекомендовані варіанти заміни;
    • Slot — гнучка область, куди в інстансі можна додавати й переставляти будь-який вміст без відв'язування.

    💡 Зважайте на прототипи: з'єднання в прототипі можливе лише між двома окремими об'єктами. Якщо стани, між якими має бути перехід, ви об'єднали в одну boolean-властивість, анімувати перехід між ними не вийде. Для інтерактивних станів залишайте варіанти.

    Інстанс не слухається? Спитайте в спільноті →
  5. 5

    Крок 5

    Складіть більший компонент із менших

    Тепер зберіть картку товару з вкладеними компонентами: фото, назва, ціна, ваша кнопка й бейдж. Саму картку теж зробіть компонентом із варіантами, наприклад Status=Available і Status=Sold out. Перевірте, як усе працює разом:

    • у кожному інстансі картки можна перемикати варіант кнопки, не відкриваючи головний компонент;
    • зміна головного компонента кнопки оновлює кнопки в усіх картках;
    • якщо вам постійно хочеться відв'язати картку, щоб щось додати, — можливо, потрібен slot.

    💡 Поділіться файлом у спільноті й попросіть перевірити компонент: «Чи зрозуміло з правої панелі, що в цій картці можна змінити?» Якщо людина без пояснень знаходить усі налаштування, компонент зроблено добре.

Ви не самі з цими питаннями

Ми порахували, про що найчастіше питають у нашій спільноті. Figma — у трійці лідерів, і компоненти з варіантами — одна з тем, де практичні питання не закінчуються.

Ви не самі з цими питаннями
Навчання й курси938
Портфоліо та кейси705
Figma647
AI-інструменти380
Робота й вакансії314
UX-дослідження131

Повідомлення за темами в Spaceberry Community, липень 2024 — листопад 2026. Пошук за ключовими словами.

Практика з дедлайном і живим фідбеком

Найкраще вчить задача з терміном, яку бачать інші люди. Тому в спільноті регулярно проходять дизайн-ігри: однакове завдання для всіх, дедлайн і голосування.

  • Дизайн-гра · січень 2026

    Редизайн сайту НАОМА

    Головна сторінка академії очима абітурієнта, студента й викладача. Три роботи у фіналі, переможця обрала спільнота.

  • AI-челендж · травень 2025

    Лендинг, створений AI

    Логотип, тексти й візуали — тільки AI-інструментами. Чотири роботи, анонімне голосування, учасники поділилися промптами.

  • Воркшоп · квітень 2026

    Figmosha: AI у Figma

    Автор інструмента показав, як генерувати інтерфейси у Figma й аналізувати дизайн-систему.

Показати компоненти на фідбек

Безкоштовно. 1504 дизайнери вже в спільноті.

Як приєднатися — 1 хвилина

  1. 1

    Натисніть кнопку

    Відкриється Telegram зі спільнотою Spaceberry.

  2. 2

    Приєднайтеся

    Це безкоштовно: достатньо акаунта в Telegram.

  3. 3

    Представтеся

    Напишіть, з чого починаєте, і поставте перше питання.

Часті питання

Не знайшли відповіді? Поставте питання в спільноті — там відповідають.

Чим компонент відрізняється від групи чи фрейму?

Група чи фрейм — це просто контейнер для шарів. Компонент — особливий фрейм, копії якого (інстанси) пов'язані з ним: зміни в головному компоненті автоматично переходять у всі інстанси у файлі. Тому все, що повторюється в макеті більше одного разу, варто робити компонентом.

Коли робити варіант, а коли властивість компонента?

Варіанти потрібні для різних станів, типів і розмірів, тобто коли компонент помітно змінює вигляд. Властивості — для дрібних налаштувань: показати чи сховати іконку, змінити підпис, замінити вкладену іконку, додати вміст у гнучку область. Так набір лишається компактним. Просте правило: якщо змінюється вигляд чи поведінка всього компонента — це варіант, якщо вмикається чи замінюється одна частина — властивість.

Чи можна користуватися компонентами на безкоштовному тарифі?

Так. Компоненти, інстанси, варіанти й властивості компонентів доступні на всіх тарифах, зокрема на безкоштовному Starter. Платний тариф потрібен, щоб опублікувати компоненти як бібліотеку й використовувати їх в інших файлах. Для навчання й перших проєктів цього не треба: тримайте компоненти на окремій сторінці того самого файлу.

Як зробити компоненти інтерактивними в прототипі?

Для цього з'єднують варіанти одного набору між собою, наприклад Default і Hover, і тоді кожен інстанс у прототипі поводиться однаково. Наприклад, з'єднайте варіант Default з варіантом Hover, оберіть тригер While hovering і дію Change to, і всі кнопки в макеті реагуватимуть на наведення без окремих з'єднань. Детально про прототипи — у гайді [Прототип у Figma](/guides/figma-prototype).

Чи платна спільнота Spaceberry?

Ні, Spaceberry Community безкоштовна. Її підтримує громадська організація Spaceberry Foundation, що працює не для прибутку. Щоб приєднатися, достатньо акаунта в Telegram. У чаті можна поставити питання, показати свою роботу на фідбек і взяти участь у дизайн-іграх: однакове завдання для всіх, дедлайн і голосування спільноти.

Ваші компоненти — на перевірку

Приєднуйтеся до 1504 дизайнерів, які вчаться, діляться макетами й грають у дизайн-ігри. Покажіть свої компоненти і дізнайтеся, що в них покращити.

Приєднатися безкоштовно
  • Безкоштовно
  • 1504 учасники
  • Вхід за 1 клік

Оновлено · Spaceberry Foundation

Джерела: