January 18, 2023

Розбираємось у Components Properties Figma за 5 хвилин

1. Три параметри

Boolean – дозволяє змінювати видимість шару компонента та має два значення true/false.
Застосовується для всіх шарів компонента.

Text – дозволяє міняти текст через панель properties.
Використовує лише текстові шари.

Instance Swap – дозволяє замінювати вкладені компоненти.
Використовується тільки для вкладених компонентів.

2. Як додати

Виберіть компонент, натисніть + на панелі Properties і виберіть властивість, введіть назву — параметр створено. Тепер оберіть шар і прив'яжіть його до потрібної властивості.

Виберіть потрібний шар, натисніть на іконку властивості та виберіть Create property, введіть назву, яка з'явиться на панелі Property.


3. Boolean

Приховує не лише шари, а й пов'язані з ним параметри з панелі properties.

4. Instant swap

Чутливий до ієрархії. Він пропонує замінити компоненти що з ним одному рівні (file, page, artboard). Якщо ви хочете обмежити список пропонованих instanс'ів, об'єднайте їх в один artboard.

Тут криється перше обмеження – через properties ви не можете перемикати варіанти вкладеного компонента. Для того щоб працювати Instant swap це повинні бути самостійні компоненти не об'єднані як variants.

Bonus

При виборі шару всередині компонента з варіантами figma запропонує вибрати подібні (іконка прицілу).

Що це нам все дає?

- Найочевидніше застосування - скорочення великих матриць варіантів. Іконки на кнопках, нотифікації на табах/аватарах та багато іншого можна тепер зробити boolean props без дублювання.
- Зміна тексту знадобиться якщо з макетом взаємодіють менеджери, коли потрібно буде поміняти назву кнопки, наприклад, на вимогу комплаєнсу. Менше ризик, що вони щось зможуть пошкодити.
- З Instant Swap не потрібно буде постійно провалюватися в шари компонента, щоб щось змінити (логотип компанії, іконку тощо).
але...

Що таке Components Properties насправді?
Як на мене це скоріше концептуальний розворот, ніж банальне оновлення.

Як еволюціонувала робота з компонентами:

  • На самому початку кожен стан елемента потрібно було робити окремим компонентом, артборди були обмежені в адаптиві, не можна було використовувати вкладені компоненти - бібліотеки були перевантажені компонентами під кожен стан і розмір інтерфейсу.
  • Auto layout дозволив скоротити кількість компонентів зав'язаних на різниці в розмірах, адаптивність так само дозволила скоротити деякі стани приховуючи якісь елементи ... Але - всередині стала з'являтися велика кількість прихованих шарів.
  • Variants привнесли ієрархію, прибрали необхідність провалюватися всередину компонента щоб увімкнути чи вимкнути якийсь елемент… Але – повернули великі матриці компонентів.
  • Components Props вирішили проблему великих матриць компонентів, у якомусь сенсі повернув нас до управління станами видимістю і зробив це зручніше... Але були повністю переосмислені варіанти.

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