Розроблення UI-кита веб-додатків
UI-кит — це бібліотека візуальних компонентів: кнопки, інпути, карточки, таблиці, іконки, типографіка, колірна палітра — все зібране в одному місці з консистентною візуальною мовою. Не дизайн-система (це ширше), а набір готових блоків для збірки інтерфейсу.
Практична цінність UI-кита в тому, що дизайнер перестає малювати одну й ту саму кнопку в кожному макеті заново, а розробник перестає переспрашувати «а якої у неї hover-колір».
Що входить в UI-кит
Повнофункціональний UI-кит для веб-додатків включає:
Foundations (основи)
- Колірна палітра: primary, secondary, neutral + семантичні кольори (success, warning, error, info) з оттінками 50–950 за аналогією з Tailwind
- Типографічна шкала: заголовки H1–H6, body-тексти (lg/md/sm/xs), підписи, code-блоки — з вказанням font-family, font-size, line-height, letter-spacing
- Сітка: кількість колонок, gutters, margins для кожної breakpoint'а
- Радіуси скруглень, система тіней (elevation system), іконографіка (розміри, бібліотека)
Компоненти (atoms)
- Кнопки: primary/secondary/ghost/destructive × default/hover/active/disabled/loading
- Інпути: text, email, password, number, textarea, select, checkbox, radio, toggle, date picker
- Badges, tags, chips, tooltips, alerts
- Аватари, прогрес-бари, спіннери
Складові компоненти (molecules)
- Карточки (базова, з зображенням, з action)
- Навігація: breadcrumbs, tabs, pagination, stepper
- Таблиці з сортуванням, фільтрами, пагінацією
- Модальні вікна та drawer'и
- Dropdown-меню, контекст-меню
Глибокий розбір: Component Variants у Figma
Правильна структура компонентів у Figma визначає, наскільки зручно буде працювати з UI-китом через 6 місяців.
Сучасний підхід — Component Properties (введені в Figma 2022). На прикладі кнопки:
Button
├── Properties:
│ ├── Variant: Primary | Secondary | Ghost | Destructive
│ ├── State: Default | Hover | Active | Disabled | Loading
│ ├── Size: SM | MD | LG
│ ├── Icon Left: boolean (instance swap)
│ ├── Icon Right: boolean (instance swap)
│ └── Label: text
Це дозволяє менять будь-яке властивість через панель справа без переключення між варіантами вручну. Загалом: замість 4 × 5 × 3 = 60 окремих компонентів — один компонент з Properties.
Для інпутів обов'язкові стани: Default, Focused, Filled, Error, Disabled. Плюс варіанти з Label/без, з Hint text/без, з іконкою/без. Все це покривається через Component Properties, не умножуванням компонентів.
Auto Layout — все в UI-ките повинно бути побудовано на Auto Layout. Це гарантує коректне поведення компонентів при зміні тексту (кнопка розтягується під довгий лейбл, а не обрізає його) та спрощує адаптивність.
Токени та зв'язок з кодом
Професійний UI-кит оперує design tokens — іменованими змінними для всіх візуальних значень. Кольори, відступи, радіуси, тені — не конкретні значення (#3B82F6), а токени (color.primary.500).
Інструменти для експорту токенів з Figma в код:
- Tokens Studio (плагін Figma) — експорт в JSON формат W3C Design Tokens
- Style Dictionary (Amazon) — трансформація токенів в CSS custom properties, SCSS, JS/TS об'єкти, Swift, Android XML
- Figma Variables (нативно) — синхронізація через Figma REST API
Приклад цепочки: дизайнер змінює color.primary.500 у Figma Variables → CI/CD підхоплює експорт через API → Style Dictionary генерує обновлений tokens.css → компоненти автоматично отримують новий колір.
Документація UI-кита
UI-кит без документації використовується неправильно. Мінімальна документація у Figma:
- Cover page — призначення, версія, відповідальний
- Usage guidelines для кожного компонента: коли застосовувати, коли не застосовувати, приклади правильного та неправильного використання
- Changelog — що змінилося в кожній версії
Строк реалізації
UI-кит для невеликого веб-додатків (20–30 компонентів) — 10–15 робочих днів. Повнофункціональний UI-кит для крупного продукту (50+ компонентів, токени, документація) — 4–6 тижнів.