I’d like to share a guide on how to create UI designs for iOS mobile apps. This guide covers essential topics that we need to know to make high-quality designs **that are **consistent with Apple’s guidelines.
Structure:
In Figma, you can find different artboard sizes for iPhone, and you could ask yourself which one you should pick for the design. The thing is on a code level, XCode automatically adjusts the layout design to the selected device, so you can choose the artboard size for the most popular iPhone and design UI considering the layout specifications of this model.
The image below demonstrates layout regions and specifications for the iPhone 14 Pro.
Layout regions and specifications for the iPhone 14 Pro
☝ ️UI elements such as buttons and controls must be placed only within the area that is not covered by Status Bar and Home Indicator regions to avoid interfering with interactive iOS system elements.
Grids help arrange content in a structured way. Commonly, they are used in responsive website design, however, they are still useful for mobile apps.
How to define a grid for a mobile app: