Розбираємось у 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 вирішили проблему великих матриць компонентів, у якомусь сенсі повернув нас до управління станами видимістю і зробив це зручніше... Але були повністю переосмислені варіанти.
Мені здається попереду на нас чекатимуть більше нових властивостей, але й варіанти нікуди не подінуться, тому що без них не працюватимуть інтерактивні компоненти. Дякуємо за увагу.