Grid Maker Pro for app designers — iOS & Android safe areas, 8pt grid, icon keylines
Mobile app designers reach Grid Maker Pro for the platform-specific overlays Figma's generic layout grid doesn't cover: iPhone safe areas with status bar, dynamic island, and home indicator; Android Material screens with status bar, FAB safe zone, and gesture region; icon keyline shapes at 16/24/32/48 dp; 8pt spacing verifiable against the live screen.
Why app designers use Grid Maker Pro
Designing for iOS and Android means living with constraints Figma's grid doesn't represent. The notch, the dynamic island, the home indicator, the gesture-bar zone — these change at every device update and aren't visible on a blank Figma frame. Grid Maker Pro overlays the platform-correct frame on your design canvas with all system UI marked, so you verify safe-area compliance before handoff instead of discovering it in QA.
The app-design overlay set
- Mobile App Layout — iPhone & Pixel screens with safe areas.
- 8pt & 4pt Spacing Grid — Material/iOS spacing standard.
- Icon Grid — keyline shapes for system icons at every common size.
- 12-Column Grid — for tablet (iPad, Android tablet) layouts.
- Baseline Grid — text rhythm in long-form app screens (settings, terms).
Workflow examples
Onboarding screen design. Start with the iPhone 15 template (393×852pt). Verify the headline lands inside the safe area's top inset (47pt below the dynamic island). Verify the primary CTA sits above the home indicator (34pt bottom inset) and is at least 44pt tall (the iOS minimum tap target).
Bottom-sheet modal design. Bottom sheets must respect the home-indicator inset on iPhone. The Mobile App Layout overlay shows where the inset ends, so your sheet's content padding stops there, not at the literal screen bottom.
App icon design. Use the Icon Grid overlay at 1024×1024 (iOS app icon source) with keyline shapes. Verify your icon's optical centre matches the keyline circle, not the bounding square — circular content needs to be slightly larger than square content to feel equally weighted.
Cross-platform design tips
- Design at the smaller of the two platform's safe areas — Material's 360×800dp typically wins as the lower bound.
- Tap targets ≥44pt (iOS) and ≥48dp (Material) — both are usability requirements.
- Icon sizes 16, 20, 24, 32, 48dp/pt all snap to the 8pt grid and translate cleanly between platforms.
- Bottom navigation: iOS tab bar 49pt + 34pt safe = 83pt; Material bottom nav 56dp + gesture inset.
Frequently asked questions
Which device sizes should I design for in 2026?
For iOS, design at iPhone 15 logical 393×852pt as a primary canvas. Verify down to iPhone SE (375×667pt) and up to Pro Max (430×932pt). For Android, design at Material baseline 360×800dp. Verify at Pixel 7 (412×915dp) and small Android (360×640dp). Cross-platform projects: starting at the smaller of 360dp wide × 640dp tall covers both ecosystems' bottoms.
Do iOS and Android use the same 8pt grid?
Both default to 8-unit spacing in their official systems — Apple HIG uses 8pt as the implicit grid for most native components, and Material Design explicitly mandates 8dp. The 4-unit half-step is also shared. So yes, an 8pt design system maps cleanly to both platforms — which is one reason cross-platform frameworks like React Native and Flutter standardise on it.
How do I handle the dynamic island in design?
Treat the dynamic island as part of the top safe inset (47pt total on iPhone 14/15 — status bar plus island). Critical UI shouldn't sit beneath the island; navigation titles can sit below it; full-bleed hero imagery can extend behind it but should account for the visual mask. Apple's HIG documents the island's expanded states for media playback and live activities.
Should I draw icons at target size or larger?
Draw at target size (24dp, 32dp). Strokes drawn at 24dp source render crisply at 24dp display; strokes drawn at 96dp source and reduced often produce sub-pixel mush. The exception is launcher icons (1024×1024 source) which scale down to all the platform sizes via the OS — but those are bitmap exports, not stroke-based glyphs.
Related
References
- Müller-Brockmann, Josef. Grid Systems in Graphic Design. Niggli (1981). ISBN 978-3-7212-0145-1.
- Apple. Human Interface Guidelines. developer.apple.com/design. The platform reference for layout, margins, and safe areas — see developer.apple.com.
- Wong, Wucius. Principles of Form and Design. John Wiley & Sons (1993). ISBN 978-0-471-28552-7.