Nadia R.
Sample Free and genuinely good
Well structured and up to date with the current interface. I am moving on to the auto layout course next.
Figma from zero: design your first mobile app screens
Learn frames, text, colour, auto layout and components by designing a small recipe app from a blank file to a clickable prototype
Created by Tomas Novak
- Updated August 2026
- English
- Beginner
What you will learn
- Navigate the Figma workspace and use the core tools with confidence
- Create frames and layouts for common phone sizes
- Set up text and colour styles for consistent design
- Use auto layout to build buttons, lists and cards
- Turn repeated elements into components with instances
- Link screens into a simple clickable prototype
- Share files for feedback and export assets
Course content
Getting comfortable in Figma
Layout basics
- Article: Alignment and distribution 8 min
- Article: Layout grids and guides 9 min
- Article: A first look at auto layout 12 min
- Article: Constraints and resizing 8 min
Designing the app screens
- Article: Planning screens with quick sketches 7 min
- Article: Building the sign in screen 10 min
- Article: The recipe feed 13 min
- Article: The recipe detail screen 12 min
- Article: Icons and images 8 min
Reusable pieces with components
- Article: Creating your first components 9 min
- Article: Instances and overrides 9 min
- Article: Variants for button states 10 min
- Article: Organising pages and the assets panel 7 min
Bringing the design to life
- Article: Prototype connections 10 min
- Article: Transitions and smart animate 9 min
- Article: Previewing on a real phone 7 min
- Article: Sharing and collecting feedback 7 min
Handoff and next steps
- Article: Exporting assets 7 min
- Article: An overview of Dev Mode 8 min
- Article: A tidy file checklist 6 min
- Quiz: Final check 6 min
Requirements
- A free Figma account and a modern browser or the desktop app
- No design experience needed
Description
Figma is the tool most product teams use to design interfaces, and it runs in the browser, so anyone can start for free. This course takes you from a blank file to a small, clickable mobile app design, one tool at a time, without assuming any design background.
What you will build
You will design four screens of a simple recipe app: sign in, a home feed of recipes, a recipe detail page and a saved recipes list. Along the way you will learn the parts of Figma you will use every day.
- Frames, shapes, layers and the properties panel
- Text, type styles and colour styles
- Alignment, layout grids and a first look at auto layout
- Components and instances so changes spread everywhere
- Basic prototyping to click through your screens on a phone
How the course is taught
Section 1 is fully written and gets you comfortable in the workspace. Each later section adds one layer of skill and ends with a version of the app you can be proud of. Short lessons focus on one idea each, with keyboard shortcuts introduced as you need them, not all at once.
You need only a free Figma account. The course uses the current Figma interface, sometimes called UI3, with the toolbar along the bottom of the canvas. If you later want to go deeper into auto layout, variables and design systems, the follow up courses build on exactly this foundation.
Who this course is for
- Complete beginners curious about interface design
- Developers, marketers and founders who need to sketch app ideas
- Students preparing for a first design course or job
Instructor
Tomas Novak
Product designer teaching Figma the way working design teams use it day to day
- 4.4 instructor rating
- 23 reviews
- 8,650 students
- 3 courses
- Sample
I am a product designer who has worked on web and mobile apps for over a decade, and Figma has been my main tool since it replaced my old desktop setup. I design screens, build component libraries and prepare files that developers can pick up without a meeting.
I teach Figma from the ground up and then into the features that separate tidy files from chaotic ones: auto layout, components and variants, variables and modes, and prototypes that behave like the real product. I care a lot about file structure and naming, because a design file is shared work, not a private sketchbook.
My courses are project based. You build real screens alongside me, and every section ends with a file you can keep and reuse.
Student reviews
Ana M.
Sample Perfect first Figma course
I had never opened a design tool before. Two weeks later I have four screens and a clickable prototype I showed at work.
Irina V.
Sample Components finally make sense
The difference between main components and instances was explained better than any video I had watched before.
Paul D.
Sample Builds skills in the right order
Each section adds one thing, so it never felt overwhelming. The auto layout introduction was very clear.
Shreya K.
Sample Great for developers
I am a backend developer and wanted to sketch ideas properly. This gave me exactly that, though I skipped the export lesson.
Chen L.
Sample Nice practical project
Designing the feed with long recipe names taught me more about real layouts than any tutorial with perfect content.
Mateo G.
Sample Clear and well paced
Short lessons with useful shortcuts introduced only when needed. The recipe app was a nice project to follow.
Joseph E.
Sample A bit slow at the start
The first section covers basics I already knew from other tools. Later sections were much more useful for me.
Keep exploring
All Figma courses
More in Figma
Free
Enroll now