How to Design an App in Figma: A Beginner's Tutorial

Quick answer: How do I design a mobile app in Figma?

Set up — frames at phone size, a 4- or 8-point spacing grid.
Define styles — 5–7 colours, 4–6 text styles, consistent spacing.
Build with auto layout — so screens adapt to content and sizes.
Make components — buttons, inputs, cards, nav bars, with variants for states.
Prototype and hand off — link screens, test, then document states for developers.

Key takeaways

Design from a tested wireframe; Figma is for refining decisions, not making them all at once.
A tiny, consistent style system looks more professional than many clever one-offs.
Auto layout and components save hours as soon as you change anything.
Follow platform guidelines: at least 44×44 pt touch targets on iOS, 48×48 dp on Android.
Design every state — loading, empty, error, success — not just the happy path.

Figma's blank canvas is both its charm and its trap. You can draw anything — so beginners often draw everything, one screen at a time, each slightly different. Professional app design looks calm because it is built from a small set of rules applied again and again. This tutorial teaches you those rules in the order you'll need them.

How do I design a mobile app in Figma? At a glance: Set up; Define styles; Build with auto layout; Make components; Prototype and hand off. — At a glance: How do I design a mobile app in Figma?

Before you open Figma

Bring a tested wireframe of one key flow. If you don't have one, start with how to make a wireframe. Figma is where you refine decisions, not where you discover them.

Step 1: set up your file

Create a new design file and add a frame using a phone preset — 390×844 (iPhone) or 360×800 (common Android).
Add a layout grid: 4 columns with 16 px margins works for most phone screens.
Decide on an 8-point spacing scale — 4, 8, 16, 24, 32, 48 — and use only those values.
Create pages: Wireframes, Design, Components, Prototype.

Step 2: define a small style system

A beginner's style system in Figma
Style	Keep it to	Example
Colours	1 primary, 1 accent, 3–4 neutrals, plus success / warning / error	Primary for main buttons only
Text styles	4–6	Title, heading, body, body small, label, caption
Corner radius	1–2 values	8 for inputs and buttons, 16 for cards
Shadows	1–2	One for cards, one for floating sheets

Save each as a Figma style or variable so you can change it everywhere at once. Check text contrast: WCAG asks for at least 4.5:1 for normal body text⁵.

Step 3: build screens with auto layout

Auto layout makes frames stack their contents with fixed spacing and padding, and resize as content changes — the way real app code behaves¹.

Select a group of elements and press Shift + A to wrap them in auto layout
Set direction (vertical or horizontal), spacing between items, and padding
Use Fill container for elements that stretch, Hug contents for ones that fit their text
Nest auto-layout frames: a card inside a list inside a screen

Test it: change a button label to something twice as long. If the layout adapts, you did it right.

Step 4: turn repeats into components

Anything you use twice should be a component — buttons, inputs, list items, cards, nav bars, tab bars². Add variants for states:

Button

Primary, secondary, text · default, pressed, disabled, loading

Input

Empty, focused, filled, error, disabled

List item

With and without image · with and without trailing action

Tab bar

Each tab selected

Step 5: follow the platform

Users bring habits from every other app. Respect them:

Key iOS and Android design differences for beginners
	iOS	Android
Guideline	Apple Human Interface Guidelines³	Material Design 3⁴
Minimum touch target	44×44 pt	48×48 dp
Primary navigation	Tab bar at the bottom	Navigation bar at the bottom
Back	Top-left back, swipe from edge	System back gesture

Figma's community has free official UI kits for both platforms — start from them rather than drawing system controls yourself.

Step 6: design every state

Loading — skeletons or progress for anything that waits on the network
Empty — first-time screens that explain what to do next
Error — what went wrong and how to fix it, in plain words
Success — clear confirmation of what just happened
Long content — long names, many items, large text sizes

Step 7: prototype, test and hand off

In Prototype mode, connect each button to its destination and set simple transitions. Test the flow with three to five people. Then prepare for developers: name layers clearly, keep everything on components and styles, mark the screens that are ready, and annotate behaviour that isn't obvious from a static screen.

Once your screens are designed, a mobile app UX audit checks them against proven usability principles before you build.

Key terms, defined

Frame — a container in Figma, usually a screen. Auto layout — automatic stacking and spacing of contents. Component — a reusable element; its copies are instances. Variant — a version of a component, such as a state. Style / variable — saved colours, text and values reused across a file. Prototype — linked screens that can be clicked through.

Frequently asked questions

Is Figma free for app design?

Figma has a free Starter plan that is enough to learn and design a small app, including prototyping. Paid plans add things like unlimited files, shared team libraries and Dev Mode for developer handoff.

How long does it take to learn Figma?

Most beginners can design a simple, decent-looking app in a week or two of practice. Learning frames, auto layout and components covers most day-to-day work; advanced features like variables and interactive components come later.

What size should a mobile app frame be in Figma?

Use one of Figma's phone presets, such as 390×844 for a modern iPhone or 360×800 for a common Android size. Design at one size, then check your layouts at a smaller and a larger size.

What is auto layout in Figma?

Auto layout makes a frame arrange its contents automatically — stacked vertically or horizontally with set spacing and padding — so elements resize and reflow when content changes, much like layout in real code.

What are components in Figma?

Components are reusable design elements such as buttons or cards. You design the main component once and use instances everywhere; changing the main component updates them all. Variants handle states like default, pressed and disabled.

Can developers build directly from Figma designs?

Yes. Developers can inspect sizes, colours, spacing and export assets from Figma files. Clear layer names, consistent styles, components and documented states make the handoff faster and more accurate.

Sources

Figma Help Center — Guide to auto layout
Figma Help Center — Guide to components in Figma
Apple — Human Interface Guidelines
Google — Material Design 3
W3C — Understanding contrast (minimum) in WCAG
Checked October 23, 2026. Figures that change — fees, salaries, prices — are reviewed every six months; if something is out of date, tell us.

Keep exploring

Where to go from here

How to make a wireframe in 30 minutes — the step before Figma
Mobile app UX audit — an expert review of your designed screens

Join free

Get the ideas, not the noise.

Sign up with Google and we’ll send you short UX psychology tips by email — why people tap, stall and leave, and what to do about it. Unsubscribe anytime. Prefer something to keep? Get the free Laws of UX guide as a PDF.

Get the free Laws of UX PDFFree · no spam · unsubscribe anytime

Before you launch

Make sure the first screen makes sense.

A behavioral UX audit of your app or SaaS product: why users hesitate, stall and leave, and a prioritized fix list. Fixed price, 2–4 weeks.

↗ Request a Diagnosis More how to make an app guides