Що таке компоненти у Figma, і як вони допоможуть пришвидшити роботу

Figma – графічний редактор для спільного проектування сайтів, програм та інших дизайнерських продуктів. Вона з'явилася в 2016 році як аналог Sketch та Adobe XD, але через пару років стала одним з найпопулярніших інструментів у дизайнерів. Програма дозволяє зібрати великі проекти в одному місці та з легкістю перемикатися між екранами.

Що таке компоненти у Figma, і як вони прискорюють робочий процес?

Компонент є елементом або блоком, який можна редагувати комплексно. Задавши його вигляд один раз, автоматично змінені копії компонента можна використовувати у різних частинах проекту.

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

Найпростіший компонент – кнопка. Важливо пам'ятати, що її вигляд не повинен змінюватися від переходу до екрану.

Більш складні компоненти – це шапка та футер на сайті, меню навігації у додатку, а також хедери чи модальні вікна.

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

Поведінка компонентів: майстер-компонент та екземпляр-компонент (instance)

Перед тим як перейти до рекомендацій щодо роботи з компонентами, треба ознайомитися з поняттями мастер-компонент (master components) та екземпляр-компонент (component instances).

Мастер-компонент створюється при перетворенні елемента інтерфейсу на компонент і визначає його властивості.

Екземпляр-компонент – це копія мастер-компонента, який може повторно використовуватись у різних проектах. Щоб відрізнити мастер-компонент від екземпляра, подивіться на панель шарів. Мастер-компонент позначений іконкою із чотирма зафарбованими ромбами, екземпляр – іконкою з одним контурним.

Примірники безпосередньо пов'язані з майстер-компонентом, тому при внесенні змін до мастер-компонента екземпляри змінюються разом з ним.

Важливо враховувати, що екземпляр успадковує всі зміни, внесені в майстер-компонент крім перевизначення якості та наповнення екземпляра. Зв'язок цих властивостей та наповнення буде розірвано, відновити його можна в панелі властивостей екземпляра.

Компоненти Figma – це одна з головних переваг програми. Щоб не перемальовувати кожен елемент окремо, використовуйте компоненти. Редагуючи лише одну іконку або кнопку, можна вносити комплексні зміни у весь проект. Наступний крок після роботи з компонентами – створення бібліотеки компонентів Figma, де можна зберігати основні заготовки для інтерфейсів. Вона позбавляє подвійної роботи і дозволяє використовувати загальні елементи повторно.

Вибудувати якісну систему компонентів – це складне завдання для новачка. Але як тільки її буде вирішено, у вас з'явиться час, щоб випити не одну, а дві чашки кави.