При портуванні макету з 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 дня. Вартість розраховується індивідуально після аналізу вимог та кількості унікальних екранів. Зв'яжіться з нами для оцінки вашого проєкту — ми підберемо оптимальний стек та терміни. Замовте розробку під ключ з повним супроводом.