Разработка 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 рабочих дней. Зависит от числа компонентов, сложности вариантов и наличия тёмной темы.
Стоимость рассчитывается индивидуально после оценки объёма.