Чекліст дій які треба провернути з іконками в вашому UI Kit щоб усе було тіпітоп

1. Перетворіть іконку у векторну форму (flatten).

2. Збережіть вихідний файл, щоб у майбутньому не перемальовувати іконку при необхідності змін.

3. Назвіть шар Vector — це стандартне ім’я для таких шарів. Можна стерти поточну назву і натиснути Enter, тоді Figma автоматично підставить слово Vector.

4. Іноді шар називають Shape, щоб назва краще відображала зміст.

5. Щоб кольори не збивалися при зміні іконок у компонентах: створіть копію шару Vector, об’єднайте обидва шари (union), з’явиться шар із назвою Union. Після цього видаліть копію Vector і задавайте колір шару Union. Іноді цей шар називають Color, щоб відобразити його призначення.

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

7. Краще використовувати звичайний чорний (#000000), а не колірний токен. Так легше відстежити в макетах та компонентах, які іконки ще не зафарбовані.

8. Можна вибрати незвичний, але не надто яскравий колір (наприклад, коричневий), щоб він кидався в очі, але не заважав перегляду бібліотеки іконок.

9. Векторний шар іконки має коректно масштабується (scalable).

10. Розмістіть його всередині квадратного контейнера (наприклад, 24×24 px).

11. Компоненти іконок краще називати за тим, що зображено (наприклад, magnifying_glass), без префіксу icon чи зазначення розміру.

12. У полі Description можна додавати синоніми, за якими користувачі зможуть знайти іконку в ассетах (наприклад, search).

13. Вставляйте іконки в компоненти та створюйте властивість Swap instance з назвою icon, а у Preferred values обирайте свої іконки.

@berestux