A step-by-step guide to designing app screens in Figma. It covers frames, auto layout, components, styles, and prototyping a simple app screen flow, with starter files for every exercise.
What the guide covers
Frames
Setting up frames for different screen sizes, nesting frames, and using layout grids to line things up.
Auto layout
Building buttons, lists and cards that resize with their content using auto layout (Shift A), and controlling spacing, padding and alignment.
Components
Turning repeated elements into components, using instances, changing an instance without breaking the link, and organizing variants.
Styles
Saving colors, text settings and effects as styles so a whole design can be updated from one place.
Prototyping a screen flow
Linking screens together, choosing interactions and transitions, and previewing a simple app flow from start to finish.
Inside the guide
Every chapter follows the same pattern: the skill is explained, broken into steps, practiced in an exercise, and checked against a worked solution. These illustrations show the three kinds of page you will find in the PDF.
Illustrations represent the layout of guide pages. They are not reproductions of any software's interface.
What's in the .zip
Your .zip download
- PDF guideEach skill explained, then broken into numbered steps.
- Step-by-step instructions
- Annotated illustrations
- Practice exercises
- Worked solutionsEvery step, not only the final answer.
- Starter filesFigma files that set up each exercise, ready to open in your own copy of Figma.
The software is not included. See Software required below.
Software required
This guide uses Figma. Figma is not included with the guide; you need your own access to it, obtained separately from its maker.
About software updates. Software makers update their programs, so menus and button locations can change between versions. When an update changes the steps, the guide is revised, and updated files are free to anyone who bought this guide.
How the guide works
This is a self-study guide. You read each step, carry it out in your own copy of the software, then do the exercises and compare your work with the worked solutions. There is no video, no live instruction, no tutoring, and no feedback on your work. Everything you get is in the .zip.
Is this guide a good fit?
Who it's for
- You are new to Figma, or have used it only to view designs others made.
- You want to build screens that are tidy, consistent and easy to change.
- You want to link screens into a simple clickable flow.
Who it isn't for
- You want user research methods or design theory in depth. Those are not covered.
- You want plugin development or turning designs into code. Those are not covered.
- You want video lessons, live help, or someone to review your work.