Що таке компоненти у Figma?

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

Ця стаття створена в межах курсу «Компоненти у Figma». Компоненти у Figma — це базовий елемент дизайну, що допомагає створювати уніфіковані й повторювані елементи інтерфейсу. У цій статті ви дізнаєтесь, що таке компоненти, як вони працюють, і чому їх використання є ключем до ефективного та структурованого дизайну. Розглянемо основні принципи створення компонентів.

Розпочнемо з розуміння сутності компонентів.

Що ж таке компоненти у Figma? 

Уявіть, що ви працюєте над великим проєктом — наприклад, дизайном застосунку для доставлення їжі. У вас є кнопки, картки страв, іконки, форми введення та багато інших елементів, які повторюються на різних екранах. Якщо ви не використовуєте компоненти, то вам доводиться:

  • Створювати кожен елемент заново для кожного екрану або шукати його по дизайну та копіювати
  • Вручну оновлювати всі копії при зміні дизайну
  • Постійно перевіряти консистентність елементів по всьому проєкту
  • Витрачати години на рутинні завдання замість творчої роботи

З компонентами ж — ви можете елегантно розв'язувати ці проблеми. Створюєте один головний компонент, а потім використовуєте його копії скрізь, де потрібно. Таким чином компоненти у Figma — це динамічні елементи дизайну, які можна створити один раз і перевикористовувати в різних місцях дизайн-проєкту чи проєктів безліч разів.

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

Копій материнського компонента називають його дочірніми екземплярами. Ці копії можна розміщувати будь-де у ваших макетах та навіть в інших файлах дизайн-проєкту. Всі дочірні екземпляри залишаються «пов'язаними» з материнським компонентом. Це означає, що усі зміни в оригіналі автоматично застосовуються до всіх копій.

Це дозволяє підтримувати консистентність дизайну та економити час на оновленнях. Тож тепер оновлення кольору або радіусу заокруглення для кнопки вже не є такою великою проблемою і звучить як задача на 5 секунд!

Компонентом може стати практично будь-який елемент дизайну: від простої іконки, одного текстового шару, групи чи монтажної ділянки до складної навігаційної панелі з багатьма вкладеними елементами чи навіть іншими компонентами. Створити ж компонент можна різними способами. Найпростіший з них — виділити будь-який об'єкт чи групу об'єктів, яку хочете перетворити на материнський компонент та натиснути функцію «Створити компонент» (Create component) біля назви шару у правій бічній панелі. Іконка цієї функції схожа на поєднання чотирьох ромбів в один великий ромб.

Компонентом може стати:

Аналогічна іконка зʼявляється на палітрі шарів у лівій бічній панелі, коли ви перетворюєте той чи інший елемент у компонент. Додатково усі шари материнських та дочірніх елементів фарбуються фіолетовим кольором замість чорного.

Щоб створити дочірній екземпляр достатньо просто скопіювати материнський елемент та вставити у порожнє місце на екрані. Зверніть увагу, що коли ви дублюєте материнський екземпляр ви створюєте дочірній, а не інший материнський. Водночас коли ви копіюєте дочірній екземпляр — ви теж створюєте дочірній екземпляр, просто інший.

Погляньмо на ліву бічну панель! Відрізнити материнські та дочірні елементи ви зможете за іконками: дочірні ж мають форму простого великого незаповненого ромба, а материнські — ви ж самій знаєте яку… Ця візуальна система допомагає легко орієнтуватися у структурі вашого дизайну та швидко розуміти, де знаходяться оригінали компонентів.

Якщо ж ви полюбляєте ще більше економити час, то для створення компонентів можете використовувати швидкодії. Функція створення компонента захована в поєднанні клавіш Ctrl/Cmd + Alt/Option + K. А для створення компонентів можете просто тримати затиснутим Alt/Option та перетягувати елемент в довільне місце екрана. Материнський компонент також можна створити. використовуючи контекстне меню. Там знаходиться та ж сама функція «Створити компонент».

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

Саме для цього у Figma є функція «Перейти до материнського компонента» (Go to Main Component). Вона миттєво покаже вам, де знаходиться оригінал будь-якого компонента. Просто викличте контекстне меню на дочірньому екземплярі й за мить ви опинитесь біля потрібного материнського компонента. Так само ви можете перенестись, натиснувши на відповідну кнопку у правій бічні панелі зверху.

А ж що робити, якщо ви випадково видалите материнський компонент? У панелі шарів раптом зникає той самий важливий оригінал, від якого залежать десятки інших елементів у вашому макеті. Без паніки! Доки у вашому проєкті залишається хоча б один дочірній екземпляр, ви можете відновити материнський компонент. Просто виберіть будь-яку копію компонента і натисніть «Відновити материнський компонент» (Restore Main Component) у правій панелі — і ваш оригінальний компонент повернеться до життя з усіма налаштуваннями.

Але разом із цією магічною синхронізацією змін приходять і певні правила, про які важливо знати з самого початку. Усі їх ми будемо розглядати протягом курсу, проте одне з ключових — коли ви створюєте компонент, його внутрішня структура стає фіксованою. Це означає, що ви не можете просто так змінювати порядок елементів всередині дочірніх компонентів, додавати чи видаляти нові шари, що існують чи змінювати їхню ієрархію. Така «суворість» допомагає підтримувати консистентність дизайну, але що робити, коли вам все-таки потрібно вийти за ці обмеження?

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

Перше, що спадає на думку — просто видалити компонент і створити новий. Друге, що спадає на думку — повернутись до головного компонента та розмірковувати як перепланувати усі створенні компоненти. Але якщо ця змінна потрібна лише одноразово, або ви розумієте, що хочете на основі нього створити інший компонент, то може не поспішати й розглянути ще й третій варіант! Для таких випадків у Figma є спеціальна функція — «Відкріплення компонента» (Detach Instance). Натискаючи її у контекстному меню в палітрі компонентів праворуч або використовуючи комбінацію клавіш Ctrl/Cmd + Alt/Option + B, ви можете перетворити дочірній екземпляр на незалежний об'єкт, що зберігає наявну структуру та абсолютно усі останні зміни. Після цього — його можна модифікувати без впливу на інші копії та створити з нього окремий компонент, якщо це потрібно.

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

А от видалення компонента — це зовсім інша операція. При видаленні ви повністю прибираєте елемент з вашого дизайну. Якщо ви видаляєте дочірній екземпляр, це не впливає на материнський компонент та інші копії — видаляється тільки конкретний екземпляр. Але якщо ви видалите материнський компонент, всі дочірні екземпляри залишаться на місці й навіть збережуть свій зв'язок з материнським компонентом — просто цей зв'язок буде «неактивним» доки ви не відновите материнський компонент.

До речі, компоненти можуть мати складну внутрішню структуру. Всередині компонента можуть бути будь-які інші елементи:

  • Звичайні шари (тексти, фігури, зображення)
  • Групи з іншими елементами
  • Авторозмітки для гнучкого позиціювання
  • Інші компоненти (вкладені компоненти)
  • Маски та ефекти
  • Обмеження та правила адаптивності

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

656
Events
Community
Videos
About Us