Розробка UI-кита мобільного додатка
UI-кит — це бібліотека компонентів у Figma, з яких дизайнер збирає екрани як з деталей конструктора. Без нього кожен новий екран починається з нуля: копіпасте кнопок зі старих файлів, ручна синхронізація кольорів, розходження в відступах між екранами одного додатка. З UI-китом — екран збирається з готових компонентів за годину, а не за день.
Що входить у UI-кит для мобільного додатка
Базовий шар — дизайн-токени: кольори (primary, secondary, surface, error, on-surface та інші за Material Design 3 або за кастомною системою), типографіка (шрифти, розміри, line-height, letter-spacing для кожного стилю), тені, border-radius, spacing grid (4pt або 8pt базовий крок).
Поверх токенів — атомарні компоненти:
- Кнопки — Primary, Secondary, Tertiary, Destructive; розміри Large/Medium/Small; стани Default/Hover/Pressed/Disabled/Loading
- Input fields — з лейблом, placeholder, helper text, error state, success state; з іконками ліворуч/праворуч; single-line та multiline
- Navigation — Tab Bar (iOS-стиль та Material Bottom Nav), Top App Bar з варіантами (з пошуком, з action-іконками), Drawer
- Cards — базова карточка з кількома layout-варіантами (горизонтальна, вертикальна, з медіа)
- Lists / List Items — з іконкою, з аватаром, з trailing element, divider-варіанти
- Badges та Tags — статусні, числові, текстові
- Bottom Sheet / Modal — базовий контейнер з handle
- Toasts та Snackbars — success, error, warning, info
- Empty States — з ілюстрацією та CTA
- Loading States — skeleton screens для карточок, списків, тексту
Як будуємо компоненти в Figma
Кожен компонент — Auto Layout на всіх рівнях. Критично: компоненти повинні тягтися під контент, а не мати фіксовані розміри. Input field з коротким та довгим хелпер-текстом — один компонент, а не два.
Variants та Component Properties — для управління станами та конфігураціями без дублювання. Кнопка з 4 типами × 3 розмірами × 5 станів = 60 варіантів в одному мастер-компоненті. Дизайнер вибирає потрібну конфігурацію через панель Properties, не копіює компоненти.
Називання — строге: ComponentName/Variant=Value, State=Value. Важливо не тільки для порядку, але й для Figma Variables прив'язки та для розробника, який читає спеку.
Тьмяна тема — якщо в проекті передбачена — реалізується через Figma Variables (Mode switching). Один набір компонентів, два кольорові схеми. Не дублювання файла.
Документація всередину кита
Кожен компонент — окремий фрейм з документаційним шаром: коли використовувати, коли не використовувати, анатомія компонента. Це не «красиво», це функціонально: новий дизайнер у команді або розробник відкривають кит та розумівають правила без созвона.
Зв'язок з розробкою
UI-кит у Figma — це джерело правди для коду. Для React Native — компоненти кита відповідають компонентам у StyleSheet або Styled Components / NativeWind. Для Flutter — віджетам у ThemeData та кастомній widget-бібліотеці.
Токени з Figma можна експортувати через Tokens Studio (плагін) у JSON та синхронізувати з кодовою базою через Style Dictionary. Це убирає ручну синхронізацію кольорів та типографіки між дизайном та кодом.
Строки
Базовий UI-кит для мобільного додатка (без дизайн-токен пайплайну) — 3–5 робочих днів. Залежить від числа компонентів, складності варіантів та наявності тьмяної теми.
Вартість розраховується індивідуально після оцінки обсягу.