When porting a Figma layout to Jetpack Compose, inconsistencies often emerge: spacing not multiples of 4dp, colors defined as HEX values instead of color roles, and component states not rendered. The developer then has to refine the layout, wasting time. Our engineers, with over 10 years of combined experience in Android design, ensure every screen perfectly aligns with M3 and Jetpack Compose. This cuts development budget by up to 30% and accelerates time to release.
Why dynamic colors are mandatory for Android
Material Design 3 is built around color roles — not specific color values but semantic slots: primary, onPrimary, primaryContainer, onPrimaryContainer, and so on across 29 roles. The designer defines a Source Color; the HCT (Hue, Chroma, Tone) algorithm automatically generates the full palette. Dynamic Color — from Android 12+ the system generates a palette from the wallpaper. Layouts with hardcoded HEX values instead of color roles appear foreign on a Pixel 8 and Galaxy S23. For design, we use the Material Theme Builder plugin in Figma: import Brand Color → get full M3 palette → export as Color.kt for the developer. This eliminates manual color translation and errors.
How to set up M3 typography in Figma
M3 defines 15 text styles in 5 groups: Display, Headline, Title, Body, Label. Sizes are not arbitrary: Display Large = 57sp, Body Medium = 14sp. Using sp instead of dp for text is required for correct scaling when the system font size changes (accessibility). The base grid is 4dp. All spacings, component sizes, and corner radii are multiples of 4. A padding of 12dp instead of 16dp is a mistake that the developer fixes with padding(12.dp), but on a high-density screen the difference will be noticeable.
Components and their states
Each M3 component has 5 states: enabled, hovered, focused, pressed, disabled. In Jetpack Compose this is a StateLayer with fixed opacity: pressed = 12% overlay, focused = 12%, hovered = 8%, disabled = 38% opacity of content. A layout without rendered states is incomplete. The developer receives only the enabled state and has to guess the rest. Critical components to render:
| Component | Variants in M3 |
|---|---|
| Button | Filled, Filled Tonal, Outlined, Text, Elevated |
| Card | Filled, Outlined, Elevated |
| TextField | Filled, Outlined |
| NavigationBar | Bottom navigation (up to 5 items) |
| NavigationRail | Side navigation (tablets, landscape) |
| TopAppBar | CenterAligned, Small, Medium, Large |
Choosing the variant is not about aesthetics but semantics. Filled Button — primary action, at most one per screen. Text Button — secondary. Using two Filled Buttons next to each other violates hierarchy.
Adaptation to screen sizes
Android devices — phones (compact width), foldables (medium), tablets (expanded). M3 defines Canonical Layouts: List-Detail for expanded, Supporting Panel for medium. A layout designed only for compact is half the work. Minimum set: design for compact (360–599dp) and expanded (840dp+). Medium (600–839dp) is intermediate, often inheriting from one of the two.
| Breakpoint | Width (dp) | Devices |
|---|---|---|
| Compact | 360–599 | Phones |
| Medium | 600–839 | Foldables |
| Expanded | 840+ | Tablets |
How we design screens: step-by-step process
- Analyze requirements and brand guidelines.
- Set up color palette via Material Theme Builder (29 roles, light and dark themes).
- Create typographic scale per M3 standard.
- Render all screens in Figma with component states and annotations for the developer (spacing tokens, color roles, component specs).
- Adapt for compact and expanded breakpoints.
- Export colors and typography in a format ready for import into Compose (
Color.ktandType.kt). - Final review and handover to the developer.
Tip: test layouts on real devices
Even a perfectly designed layout can look different on various pixel densities. We always test key screens on Pixel 7, Galaxy S23, and Samsung Tab S9 — this catches errors in spacings and font sizes.What's included in the work
- Setting up the color system via Material Theme Builder (all 29 roles, light/dark theme)
- Typographic scale per M3 standard
- Rendering all screens in Figma with component states
- Adaptation for compact and expanded breakpoints
- Annotations for the developer: spacing tokens, color roles (not HEX), component specs
- Export of colors and typography in a format ready for import into Compose
Timelines and cost
3–5 days depending on the number of screens. One screen with full states and two breakpoints — about 0.5–1 day. Cost is calculated individually after analyzing requirements and the number of unique screens. Contact us for a project assessment — we’ll choose the optimal stack and timeline. Order turnkey development with full support.