Figma mobile app design: from first frame to handoff

Figma is where most mobile app design happens today: it runs in the browser, several people can work in one file and developers can inspect the result directly. This guide covers how to set up a Figma file for a mobile app so your screens stay consistent and easy to hand off.

Set up your frames

Every screen is a frame. Press F (or pick the Frame tool) and choose a phone preset from the right panel, such as iPhone 16 (393 by 852). Pick one size for the whole project and stick to it; you can check other sizes later.

Name frames by what they are ("Home", "Invoice detail", "Invoice list / empty"), not "Frame 12". Names matter for navigation in the file, prototyping and handoff.

Organize pages by stage or feature: one page for work in progress, one for finished flows, one for components. Lay out each flow left to right in the order users see it.

Add a layout grid

Select a frame and add a layout grid: 4 columns, 16 to 20 point margins and 8 to 16 point gutters work for most phone screens. Add an 8 point baseline grid if you want to keep vertical rhythm tight. Grids are guides, not rules, but they keep edges lined up across screens.

Use auto layout for everything that stacks

Auto layout (Shift+A) makes a frame arrange its children in a row or column with fixed gaps and padding, like flexbox in CSS. Use it for buttons, list rows, cards, forms and whole screens.

• Hug contents makes a frame as big as what's inside it, which is right for buttons and tags.
• Fill container makes a child stretch to the parent's width, which is right for list rows and text blocks.
• Fixed is for things with a set size, like an avatar.

With auto layout, changing a label or adding a row reflows the screen instead of leaving you to nudge every element by hand. It also maps closely to how developers will build the layout.

Build components and variants

Turn anything you use twice into a component (Ctrl/Cmd+Alt+K): buttons, inputs, list rows, the tab bar, the top bar. Edit the main component and every copy updates.

Use variants for states and sizes: a Button component with Type (primary, secondary), State (default, pressed, disabled) and Size properties. Component properties let you toggle an icon or change a label without detaching.

Define variables and styles

Store your colors, spacing and radii as variables, and your type as text styles. A few naming tips:

• Name colors by role, not by value: "text/primary", "surface/raised", "accent", not "gray-900".
• Use a mode for dark theme on the same color variables, so switching a frame's mode recolors it.
• Keep spacing variables on your scale: 4, 8, 12, 16, 24, 32.

Once these exist, use them everywhere. A hard-coded hex value in a screen is a future inconsistency.

Design the screens

Start with the screens people use most, usually home, a list and a detail. Then fill in the rest of the flow, including the screens that are easy to forget: empty states, loading, errors and settings. Our list of the app screens every app needs is a good checklist.

Use real content from the start. Real names, prices and dates expose layout problems that placeholder text hides, like a name that doesn't fit in a list row.

Prototype the main flow

In Prototype mode, connect buttons to the screens they open and choose transitions (Smart Animate works well between similar screens). Prototype the main task end to end and try it on your phone with the Figma mobile app. You'll catch awkward reaches and tiny tap targets that look fine on a big monitor.

Hand off to developers

Developers can inspect sizes, spacing, colors and CSS or iOS and Android code in Dev Mode. Make their job easier:

• Mark frames ready for development when they are final.
• Keep layer names meaningful; they show up in Dev Mode.
• Use variables and components so developers can map them to the code's own tokens and components.
• Add notes for behavior the design can't show, like what happens on a failed save.

Start faster: AI screens into Figma

Setting all this up for a new app takes days. A faster start is to generate a first version of every screen with AI and continue in Figma from there.

With Outclass you describe your app, get all the screens in one consistent style, and copy them into Figma as real, editable layers: frames with auto layout, text you can edit and icons as vectors, with layers named after what they are. You skip the blank canvas and spend your Figma time on the decisions and polish instead. See how to design an app with AI for the process.

After pasting, do a quick tidy-up: turn repeated elements into components, connect colors to your variables and check the layer names match your conventions.

Common questions

What frame size should I use for a mobile app in Figma?

A current iPhone preset such as 393 by 852 is a good default. Use one size for the whole project and check your key screens on a small phone (375 wide) and a large one (430 wide).

Is Figma free for app design?

Figma has a free Starter plan for getting started on your own, with limits on files and team features. Shared libraries and larger teams need a paid plan; check Figma's pricing page for the current limits.

Can I turn a Figma design into an app?

Figma designs are a blueprint, not a working app. Developers build the app from them, using Dev Mode to inspect the details.