Компоненти у Figma

   Давайте розберемо структуру компонентів. Як ви вже знаєте структура в Figma виглядає приблизно так:

   Основний елемент (назва файлу) і всередині нього - сторінки: Page 1 та Page 2. Цих сторінок може бути дуже багато. Все залежить від того, на якому тарифі ви перебуваєте. Всередині кожної сторінки ми можемо створювати величезну кількість кадрів.

   В Figma є дуже класна функція, використовуючи яку ми можемо замінювати копію компонента на інший компонент.

   Головне розуміти, що замінювати ми можемо тільки копію компонента. Сам же майстер-компонент на інший компонент поміняти неможливо. І абсолютно не важливо, де буде знаходитись компонент (всередині іншої копії, або взагалі якась самостійна структура).

   Кожного разу, коли в Figma ми вибираємо копію компонента, праворуч з'являється меню. Давайте розберемо це меню:

   Ну, по-перше, з цього меню ми можемо відправитися до майстер-компонента цього елемента, просто клікнувши по значку компонента праворуч "Go to main component".

   По-друге, у випадаючому списку ми маємо деякі можливості роботи:

• Detach instance (перетворити цей дочірній елемент на звичайний фрейм, тобто перервати всі його зв'язки з його майстер-компонентом).
• Push changes to main component (можливість відправити всі оверайди до майстер-компонента).

Що це означає?

   Кожного разу, коли ви робите будь-які зміни в копії компонента, це називається "додати оверайд". Коли ви клацнете на "Push changes to main component" всі зміни в копії компонента будуть ухвалені в майстер-компоненті, і відповідно і в інших копіях компонента.

• Reset all changes (скинути всі оверайди). Тобто скинути у копії компонента всі його зміни, він стане точною копією батька.
• Reset name (скинути назву імені копії компонента до початкового, якщо ми його перейменовували).
• Reset size (прибрати всі зміни, які стосуються розміру цього елемента). Розмір копії компонента стане таким самим, як і у його батька.

   І тепер найцікавіший і найважливіший момент. Що у нас ховається за списком "v", що випадає, там де назва компонента справа.

   А за ним ховаються абсолютно всі компоненти, які є в даному документі.

Наприклад, у нас є дві сторінки: 

Page 1 та Page 2

   Переходячи на кожну сторінку, ми "опускаємося" все нижче і нижче по ієрархії, поки не дійдемо до місця розташування наших компонентів.

   Щоб замінити копію компонента іншим компонентом, потрібно виділити цей компонент і вибрати потрібний об'єкт зі списку на сторінках.

   Це дуже зручна функція, особливо якщо ви користуєтесь бібліотеками. Це значно прискорює процес роботи.

   Але є один невеликий нюанс. Буває таке, що коли ми хочемо замінити одну іконку на якусь іншу, то Figma бачить папку "icons" всередині якої знаходяться ще папки, наприклад "right< /strong>", "left", "house" і т.д. Як нам зрозуміти, яка іконка нам потрібна?

   Все просто, потрібно лише називати наші іконки правильно. Якщо це іконка "будиночка", то й назва має бути логічною - "house".

   За такою ж логікою в Figma у нас працюють і стилі і вони так само пакуються в папку. Стаття Створення стилів у Figma.

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