Designing mobile apps that feel genuinely native across both iOS and Android is one of the foundational skills of modern product design. Yet, many designers still struggle with safe areas, system bar heights, and platform-specific grid behaviors.
When you design a frame in Figma, you aren't just designing for an abstract rectangle. You are designing for hardware with physical screen cutouts, dynamic software status bars, bottom gesture home indicators, and distinct platform navigation patterns.
In this practical guide, we break down the definitive layout, screen size, and 4-column grid rules for building pixel-perfect mobile apps across Apple iOS and Google Android in 2026.
1. Base Screen Sizes & The 8pt Spatial System
Choosing your base frame size in Figma dictates how easily developers can inspect and code your designs. Today's industry standards have converged around two primary viewports: iOS Standard at 393 × 852 px (iPhone 15/16 and iPhone 14 Pro baseline, rendered at @3x Retina) and Android Standard at 360 × 640 px to 393 × 851 px (baseline Material Design 3 density).
Designing on legacy 375px frames often results in cramped cards and touch targets on modern smartphones. Starting at 393px ensures your touch targets reflect real user ergonomics while leaving ample breathing room for content.
A consistent spatial rhythm is what separates amateur UI from institutional design systems. Always space layout containers, cards, and section paddings using the 8pt grid system.
- The 8pt Grid Foundation: Always space containers, cards, and sections in increments of 8 (8px, 16px, 24px, 32px, 48px).
- The 4pt Sub-Grid: Reserve 4px increments strictly for fine icon alignment, typography leading, and compact chip tags.
- Touch Target Ergonomics: Maintain minimum touch targets of 44×44pt on iOS and 48×48dp on Android to prevent missed taps.
2. Conquering Safe Areas & Native System Bars
The most common mistake junior designers make is placing clickable buttons or critical branding inside native operating system zones. Both platforms reserve critical screen real estate at the top and bottom that must be respected.
On iOS, the Dynamic Island and camera cutout require a generous 54pt status bar, while standard Large Title headers occupy 96pt (collapsing to 44pt on scroll). At the bottom, the 34pt Home Indicator zone must remain clear of interactive buttons.
On Android, the Material top status bar occupies 24px, followed by a 56px top app bar. The bottom features a 56px bottom navigation bar and a 48px system navigation bar (or 16-24px for gesture navigation).
- iOS Status Bar: 54 pt height accommodating the Dynamic Island and hardware sensors.
- iOS Navigation Bar: 96 pt for Large Titles; collapses to 44 pt compact header on scroll.
- iOS Tab Bar & Home Indicator: 56 pt tab bar accompanied by a 34 pt bottom safe area.
- Android Status & App Bar: 24 px status bar followed by a 56 px top app bar.
- Android Navigation: 56 px bottom navigation bar and 48 px system navigation bar.
3. The 4-Column Layout Grid in Figma
Both iOS and Android mobile screens thrive on a standard 4-Column Layout Grid. When configured correctly with stretch constraints in Figma, it guarantees responsive adaptability across narrow Android devices and oversized Pro Max iPhones.
On a 393px mobile canvas, setting 16px side margins produces an exact content width of 361px. With 16px gutters between columns, multi-column card grids, lists, and form inputs snap together with harmonious visual balance.
- Grid Type: Stretch (adapts seamlessly as parent frames or device viewports scale).
- Columns Count: 4 columns across all mobile phone viewports.
- Side Margins: 16 px outer padding (the industry gold standard for mobile density).
- Gutters: 16 px spacing between columns for rhythmic spacing between card components.
- Content Bounds: 361 px usable content width on a standard 393 px viewport.
4. iOS-First vs. Dual-Platform Architecture
In over 90% of product teams, starting with iOS (393px) as the primary design canvas is standard practice because Apple’s Human Interface Guidelines (HIG) enforce stricter structural constraints. Once the iOS experience is nailed, adapting to Android is straightforward.
Rather than re-drawing every screen from scratch, leverage Figma Variables and Design Tokens. Unifying colors, typography tokens, corner radii, and spacing variables allows your team to toggle between iOS rounded corners and Android Material styling in seconds.
Always test your screens with physical device mirroring (Figma Mirror) to verify readability, contrast ratios, and thumb-zone reachability before handing off to developers.
- Preserve Platform Paradigms: Use iOS segmented controls and bottom sheets; use Android Material 3 FABs and top tabs where appropriate.
- Unified Design Tokens: Manage colors, typography, corner radii, and spacing with Figma Variables for instant cross-platform scaling.
- Real Device Mirroring: Never judge safe areas on a desktop monitor alone. Always test on physical hardware.
Scale Your Workflow with Production-Ready Figma UI Kits
Looking to establish industry-leading design standards from day one? Explore our collection of master design systems, 500+ pre-built mobile screens, and 1800+ icons.