UI Design with Figma
Design a real mobile app in Figma, from first frame to developer handoff, and know why every pixel is where it is.
- 4.8 (1,368 ratings)
- 11,700 learners
- Beginner
- 4h 55m total
- Updated May 2026
What you’ll learn
- Apply hierarchy, alignment, spacing and contrast on purpose
- Build screens with frames, constraints and auto layout
- Use an 8-point spacing system and layout guides
- Create components with variants and component properties
- Theme a kit with variables and light and dark modes
- Prototype, check accessibility and hand off in Dev Mode
Who it’s for
You design Steady, a habit-tracker app, from an empty canvas to a handed-off screen set. Along the way you learn the principles that make interfaces readable (hierarchy, alignment, spacing, type and color with real contrast) and the Figma features professionals use every day: frames, auto layout, layout guides, components, variants, variables and modes.
Every lesson is taught by Sofia Reyes, a principal product designer who asks for the reason behind each decision. You critique layouts, build a small component kit with light and dark themes, prototype the check-in flow, check it for accessibility, mark it ready in Dev Mode and finish with a portfolio case study you can show an employer.
- Who it’s for
- Career switchers and developers who want to design clean, consistent app screens in Figma and talk about them with confidence.
- Before you start
- None. A free Figma account and a laptop or desktop computer are enough.
Hands-on practice
- Guided exercises: spot the bug, fill the command, order the steps.
Course content
4 sections · 17 lessons · 4h 55m total
- How UI Design Decisions Get Made14 min
- Hierarchy, Alignment and Spacing18 min
- Type Scale and Color with Contrast18 min
- Frames, Groups, Layers and Constraints20 min
- Section checkpoint5 questions
- Auto Layout: Direction, Gap and Padding18 min
- Resizing: Hug, Fill, Fixed and Wrap20 min
- Layout Guides and the 8-Point System16 min
- Responsive Resizing Across Screen Sizes18 min
- Section checkpoint5 questions
- Components and Instances16 min
- Variants and Component Properties20 min
- Styles vs Variables18 min
- Variable Modes: Light and Dark18 min
- Building the Steady Mini Kit20 min
- Section checkpoint5 questions
- Prototyping: Interactions, Smart Animate and Overlays18 min
- Designing for Accessibility17 min
- Dev Mode and Handoff14 min
- Design Critique and Your Case Study12 min
- Section checkpoint5 questions
Your instructor
Sofia Reyes
Principal Product Designer · Northwind
- 4.8 instructor rating
- 25,900 learners
- 3 courses
Sofia trained as a graphic designer, taught herself CSS to stop arguing with engineers about pixels, and has worked on both sides of the handoff ever since. At Northwind she leads the design system behind 11 products, from the Figma library to the CSS tokens that ship in code.
What learners say
4.8
1,368 ratings
Layla Saad
8 months ago
Auto layout clicked once I rebuilt the habit row three times with hug, fill and fixed. My designs stopped breaking every time I changed a label.
Mateo Fernández
3 months ago
I'm a developer, and this is the first time I've understood why designers care about variables and modes. Setting up light and dark for the Steady kit was the highlight.
Zeynep Yılmaz
5 weeks ago
Great structure from the first frame to the Dev Mode handoff. The prototyping lesson could use one example more complex than the check-in flow.