How to design a mobile app: a step-by-step guide for beginners

Step 1

One main flow instead of a feature list

A typical beginner mistake is drawing dozens of screens “about everything” straight away. Start with one person and one task. For example, a practice project: an app for ordering ahead at the café next door, or a habit tracker. Describe the flow in words, step by step, from opening the app to the result:

• •who the person is and in what situation they open the app (in a queue, on a bus, one-handed);
• •what they want to get, in one sentence;
• •which steps they go through and what data they enter at each;
• •where things can go wrong: no connection, a failed payment, an empty list.

💡 Draw the flow as a chain of rectangles on paper: one rectangle is one screen. If the chain feels too long, look for what you can merge or remove.

Step 2

Navigation that follows the platform

Mobile apps don't invent navigation from scratch: Apple has the Human Interface Guidelines, Google has Material Design. Start with their navigation sections. For example, Apple advises using a tab bar to move between sections, not to trigger actions, labeling every tab, ideally with one word, and remembering that fewer tabs are generally easier to navigate. If tabs don't fit, iOS moves the extra ones into a More tab, where they're harder to reach.

• •list the few sections people visit most: those are your tab candidates;
• •actions on the screen's content (add, share, filter) go in a toolbar or buttons, not in tabs;
• •don't hide main sections in a hamburger menu: according to NN/g research, people use hidden navigation less often than visible navigation and take longer to complete tasks, on phones as well as on desktop;
• •the Back button and the title at the top should tell people where they are.

Step 3

Sizes, text and safe areas

In Figma, create a frame from the ready-made phone sizes and keep the safe area in mind from the start: Apple defines it as the area not covered by hardware features or system bars, such as the Dynamic Island, the status bar or the tab bar. Important content and buttons go only inside it. Then a few numbers worth knowing:

• •Apple recommends a control size of 44 by 44 pt on iPhone (minimum 28 by 28 pt);
• •Android's accessibility documentation says touch targets should be at least 48 by 48 dp;
• •on iOS the default body text size is 17 pt and the minimum is 11 pt;
• •leave room between buttons placed side by side: Apple stresses that spacing between controls matters as much as their size.

💡 Your app will be opened by people who use a large system font. Check your screen with enlarged text: where a heading doesn't fit, you need a line break, not a smaller font.

Step 4

Screen states and awkward cases

A beautiful screen with perfect data is only one of the possibilities. For every screen in your flow, add the states the app actually ends up in:

• •loading: what people see while the data hasn't arrived yet;
• •empty: first launch, no entries yet. Explain what will be here and offer a button for the first action;
• •error and offline: what happened and what the person can do;
• •long names, large amounts, a translation into another language: text should wrap, not get cut off mid-word;
• •camera, location or notification access: Android's documentation advises asking for a permission in context, when the person starts using the feature that needs it, not on the first screen.

Step 5

A prototype on a real phone

A mobile layout on a big monitor lies: buttons look bigger and text looks more readable. Link the screens into a clickable prototype in Figma and open it on a phone: the Figma mobile app lets you view and test prototypes and mirror selected frames from your computer to your phone. Then hand the phone to a few people with a task from your flow and watch in silence.

• •where the person stopped and started searching: that's a navigation or labeling problem;
• •where they tapped and nothing happened;
• •whether they could reach the buttons with one hand.

💡 How to build a prototype with transitions and overlays is covered in Prototyping in Figma. And show the finished flow in the community: people who haven't seen your drafts notice more.