При портировании макета из Figma в Jetpack Compose часто обнаруживаются несоответствия: отступы не кратны 4dp, цвета заданы HEX-значениями вместо цветовых ролей, а состояния элементов не прорисованы. Разработчику приходится доводить макет до ума, теряя время. Наши инженеры с общим опытом более 10 лет в Android-дизайне гарантируют, что каждый экран идеально ложится на M3 и Jetpack Compose. Это сокращает бюджет на разработку до 30% и ускоряет выход в релиз.
Почему динамические цвета обязательны для Android?
Material Design 3 строится вокруг цветовых ролей — не конкретных цветовых значений, а семантических слотов: primary, onPrimary, primaryContainer, onPrimaryContainer, и так по всей палитре из 29 ролей. Дизайнер задаёт Source Color, алгоритм HCT (Hue, Chroma, Tone) генерирует полную палитру автоматически. Dynamic Color — с Android 12+ система генерирует палитру из обоев рабочего стола. Макеты с жёстко прописанными HEX-значениями вместо цветовых ролей выглядят чужеродно на Pixel 8 и Galaxy S23. Для дизайна используем плагин Material Theme Builder в Figma: импортируем Brand Color → получаем полную M3-палитру → экспортируем как Color.kt для разработчика. Это исключает ручной перевод цветов и ошибки.
Как настроить M3 типографику в Figma?
M3 определяет 15 текстовых стилей в 5 группах: Display, Headline, Title, Body, Label. Размеры — не произвольные: Display Large = 57sp, Body Medium = 14sp. Использование sp вместо dp для текста — требование для корректного масштабирования при изменении системного размера шрифта (accessibility). Базовая сетка — 4dp. Все отступы, размеры компонентов, скругления — кратны 4. Отступ 12dp вместо 16dp — ошибка, которую разработчик исправит через padding(12.dp), но на устройстве с высокой плотностью пикселей разница будет заметна.
Компоненты и их состояния
Каждый M3-компонент имеет 5 состояний: enabled, hovered, focused, pressed, disabled. В Jetpack Compose это StateLayer с фиксированной opacity: pressed = 12% overlay, focused = 12%, hovered = 8%, disabled = 38% opacity контента. Макет без отрисованных состояний — незаконченный. Разработчик получает только «enabled» и начинает угадывать остальное. Критичные компоненты для отрисовки:
| Компонент | Варианты в M3 |
|---|---|
| Button | Filled, Filled Tonal, Outlined, Text, Elevated |
| Card | Filled, Outlined, Elevated |
| TextField | Filled, Outlined |
| NavigationBar | Bottom navigation (до 5 пунктов) |
| NavigationRail | Боковая (планшеты, landscape) |
| TopAppBar | CenterAligned, Small, Medium, Large |
Выбор варианта — не эстетика, а семантика. Filled Button — основное действие, максимум одно на экране. Text Button — вторичное. Использовать два Filled Button рядом — нарушение иерархии.
Адаптация под размеры экрана
Android-устройства — телефоны (compact width), складные экраны (medium), планшеты (expanded). M3 определяет Canonical Layouts: List-Detail для expanded, Supporting Panel для medium. Макет только под compact — половина работы. Минимальный набор: отрисовать для compact (360–599dp) и expanded (840dp+). Medium (600–839dp) — промежуточный, часто наследует от одного из двух.
| Breakpoint | Ширина (dp) | Устройства |
|---|---|---|
| Compact | 360–599 | Телефоны |
| Medium | 600–839 | Складные |
| Expanded | 840+ | Планшеты |
Как мы отрисовываем экраны: пошаговый процесс
- Анализ требований и бренд-гайдлайнов.
- Настройка цветовой палитры через Material Theme Builder (29 ролей, светлая и тёмная темы).
- Создание типографической шкалы по M3-стандарту.
- Отрисовка всех экранов в Figma с состояниями компонентов и аннотациями для разработчика (spacing tokens, цветовые роли, компонентные specs).
- Адаптация под compact и expanded breakpoints.
- Экспорт цветов и типографики в формате, готовом к импорту в Compose (
Color.ktиType.kt). - Финальное ревью и передача разработчику.
Совет: тестируйте макеты на реальных устройствах
Даже идеально отрисованный макет может выглядеть иначе на разных плотностях пикселей. Мы всегда проверяем ключевые экраны на Pixel 7, Galaxy S23 и планшете Samsung Tab S9 — это выявляет ошибки в отступах и размерах шрифтов.Что входит в работу
- Настройка цветовой системы через Material Theme Builder (все 29 ролей, светлая/тёмная тема)
- Типографическая шкала по M3-стандарту
- Отрисовка всех экранов в Figma с состояниями компонентов
- Адаптация под compact и expanded breakpoints
- Аннотации для разработчика: spacing tokens, цветовые роли (не HEX), компонентные specs
- Экспорт цветов и типографики в формате, готовом к импорту в Compose
Сроки и стоимость
3–5 дней в зависимости от количества экранов. Один экран с полным набором состояний и двумя breakpoints — около 0.5–1 дня. Стоимость рассчитывается индивидуально после анализа требований и количества уникальных экранов. Свяжитесь с нами для оценки вашего проекта — мы подберём оптимальный стек и сроки. Закажите разработку под ключ с полным сопровождением.