Mobile design made for a single screen size — iPhone 15 Pro 393×852pt — is half the job. In reality, the app runs on iPhone SE with 375×667pt, on Android budget devices with 360×640dp, on flagships with 430pt width. A layout that looks perfect on a designer frame cuts off buttons on small screens and leaves empty spaces on large ones. We face this every day: a client sends a Figma file with one size, and tests reveal that the "Buy" button slides under the Tab Bar. This leads to App Store Review rejections and loss of conversion.
How Design Adaptation for Different Screens Is Done
Adaptation of mobile app design starts with an audit of current layouts. We identify problem areas: content overflow, unaccounted Safe Area, unreadable typography. Then we create control frames for 3–4 key sizes and adjust margins, image scales, and column count. The result is a Figma file with configured Auto Layout and a guide for developers.
What Exactly We Adapt
Key breakpoints are not sizes but proportions. iPhone SE screen with 16:9 vs iPhone 15 Pro Max with 19.5:9 — significant difference. Bottom-anchored elements (Tab Bar, floating buttons, sticky footer in forms) must work correctly on both. Safe Area is a separate story. On iPhone with Dynamic Island — 59pt on top. On iPhone without notch (SE 3rd gen) — 20pt. On Android, notch varies or is absent. Content that "sticks" to the status bar without considering Safe Area is guaranteed to get a App Store Review rejection.
Typography on small screens: text at 16sp is readable on a 6-inch display, but on a 4.7-inch screen at 326 ppi — borderline. Minimum size for body text on mobile — 14pt/sp, and this is not a recommendation but a practical minimum for most fonts. We use dynamic typography: on small screens, headings decrease by 2pt, on large screens, increase.
How to Adapt for iOS and Android Simultaneously?
Approaches differ. iOS uses Auto Layout with ratios (Aspect Ratio, Multiplier), Android uses ConstraintLayout with percent or Guideline. We design in Figma using Auto Layout and Constraints, then prepare separate guides for each platform. In practice, Auto Layout in Figma + SwiftUI Layout is better than frames with hard constants — difference in adaptation speed up to 50%. For Android we use Jetpack Compose with Modifier.fillMaxWidth() and Modifier.weight(), but testing on real devices is still mandatory.
How We Format Adaptation in Figma
We create frames for control sizes:
| Device | Size (pt/dp) | Purpose |
|---|---|---|
| iPhone SE 3rd gen | 375×667 | iOS minimum |
| iPhone 15 / 14 | 390×844 | iOS main |
| iPhone 15 Pro Max | 430×932 | iOS maximum |
| Android compact | 360×800 | Budget/mid-range |
| Android regular | 390×844 | Android flagship |
Each key screen is checked on the extreme sizes. Not all 50 screens — only those with content overflow, Bottom Sheet, complex forms, fixed-height images. Additionally, we prepare layouts for the widest and narrowest screens so developers see the boundaries.
Comparison of Approaches: Auto Layout vs Adaptive Layouts
| Criterion | Auto Layout Only | Adaptive Layouts with Breakpoints |
|---|---|---|
| Image scaling | Stretch/shrink | Different images per size |
| Column count | Fixed | Changes (1, 2, 3 columns) |
| Typography | Fixed size | Dynamic (smaller/larger) |
| Proportion fitting | No | Yes |
| Effort | Low | Higher but better result |
Why Auto Layout Isn't Enough?
Auto Layout doesn't scale images, doesn't change column count in a grid. On iPhone SE, product cards in 2 columns turn into 1 column — this must be accounted for in design. We use adaptive layout with breakpoints: on width up to 375pt — one column, up to 430pt — two, above — three. This requires separate handling of each screen, but the user won't see "truncations".
What's Included in the Work
- Audit of current layouts for adaptation issues (Safe Area, overflow, typography).
- Creation of control frames for 3–4 sizes (iOS + Android).
- Adjustment of margins, alignment, image scales.
- Preparation of a developer guide with constraints and notes.
- Testing on real devices (we have a fleet of 15+ devices).
- Final Figma file with configured Auto Layout and variables.
- Consultation with the development team on layout.
We work with design at all stages: from design to handoff to development. 5+ years of experience, over 20 completed projects for iOS and Android. We guarantee that after our adaptation, there will be no rejections under Section 4.2 of App Store Review and Google Play Console.
Work Process
- Analysis: study current layouts and identify problem areas.
- Design: create control frames and adaptive variants.
- Implementation: adjust elements and prepare guide.
- Test: check on real devices and simulators.
- Deploy: hand off the Figma file and guide to developers.
Estimated Timeframes
Adaptation of existing design for 3–4 control sizes (key screens, not full project) — from 1 to 3 business days. Full adaptation of entire project (up to 50 screens) — from 5 to 10 business days. Cost calculated individually, depends on number of screens and complexity. We will assess your project for free — just contact us.
Get a consultation on adapting your mobile app design. We help avoid common mistakes: incorrect Safe Area calculation, ignoring screen proportions, unreadable typography. Order design adaptation — your product will look perfect on any screen.