Як зробити UI kit у Figma: покроково для початківців

Крок 1

Визначте, для чого кит і що в нього входить

UI kit завжди роблять під щось конкретне: мобільний застосунок, сайт, особистий кабінет. Оберіть навчальний продукт — наприклад, застосунок для запису до барбера чи трекер звичок — і намалюйте два-три ключові екрани чорнетками. Потім випишіть усі елементи, які на них повторюються. Це й буде список для кита:

• •основа: кольори, шрифти, відступи, радіуси кутів, тіні;
• •базові елементи: кнопки, поля введення, чекбокси, перемикачі, іконки;
• •складніші блоки: картка, елемент списку, верхня панель, нижня навігація, модальне вікно.

💡 Не додавайте компоненти «про запас». Невеликий кит, де кожен компонент справді використовується, корисніший за великий, половина якого лежить без діла.

Крок 2

Сплануйте структуру файлу

Охайний кит легко читати навіть людині, яка відкрила його вперше. Розкладіть файл на сторінки: Cover (обкладинка з назвою й версією), Foundations (кольори, текст, відступи), Components (усі компоненти) і Examples (екрани, зібрані з кита). Для назв компонентів використовуйте слеш: у Figma кожен символ «/» створює новий рівень у панелі Assets і в меню заміни інстансів.

• •приклад назв: Icon/Arrow, Icon/Close, Navigation/Top bar, Navigation/Tab bar;
• •одна мова й один стиль назв у всьому файлі — англійською, як прийнято в командах;
• •біля кожного компонента — короткий текстовий підпис: що це і де використовувати.

Крок 3

Зробіть основу: стилі та змінні

Перш ніж малювати кнопки, зафіксуйте базові значення. У Figma є п'ять типів стилів: кольору, тексту, ефектів, layout guide і анімації. Для кита вистачить перших трьох плюс змінних для відступів. Покажіть усе на сторінці Foundations: зразки кольорів із назвами, приклади кожного текстового стилю, шкалу відступів.

• •кольори: основний, акцентний, для помилки, успіху й попередження, нейтральні для тексту, ліній і фону;
• •текстові стилі: два-три рівні заголовків, основний текст, підпис, текст кнопки;
• •ефекти: одна-дві тіні для карток і модальних вікон;
• •відступи й радіуси: невелика шкала, наприклад 4, 8, 12, 16, 24 px.

💡 Перевірте контраст тексту на фоні вже на цьому етапі: у палітрі кольорів Figma є кнопка Check color contrast. Виправити колір у стилі зараз дешевше, ніж потім у кожному компоненті.

Крок 4

Зберіть компоненти з варіантами й властивостями

Виділіть шари й створіть компонент: Create component у правій панелі або Option + Cmd + K (Mac) / Ctrl + Alt + K (Windows). Стани й типи оформлюйте варіантами: у Figma назва варіанта має вигляд Property=value, наприклад State=Hover, Size=Large. Дрібні налаштування робіть властивостями компонента, щоб не множити варіанти:

• •Boolean — показати чи сховати шар, наприклад іконку в кнопці;
• •Text — текст, який можна змінити прямо в правій панелі;
• •Instance swap — вкладений компонент, який можна замінити, наприклад іконку;
• •Slot — гнучка область, куди в інстансі можна додавати свій вміст, наприклад тіло модального вікна чи елементи списку.

💡 Figma радить не об'єднувати різні іконки у варіанти одного компонента. Кожна іконка — окремий компонент, а в кнопці її міняють через Instance swap.

Крок 5

Перевірте кит на екранах і поділіться ним

На сторінці Examples зберіть два-три нові екрани, користуючись лише інстансами з кита. Змініть тексти на довші, перемкніть стани, приберіть іконки. Якщо щось ламається або доводиться відв'язувати інстанс (detach), повертайтеся до компонента й виправляйте його. Щоб використовувати кит в інших файлах, його публікують як бібліотеку: це доступно на платних тарифах і на тарифі Education. На безкоштовному тарифі Starter тримайте кит і робочі екрани в одному файлі.

💡 Поділіться посиланням на файл у спільноті й попросіть когось зібрати з вашого кита один екран. Те, де людина застрягне, — найкращий список правок.