Every tool in this course is more useful combined than alone. This closing lesson is a project plan, not a new tool — a suggested order to practice everything covered, on one small real deliverable, exactly the way a real freelance or junior design task would actually unfold.
Design a 3-screen flow for a simple habit-tracking app: a sign-in screen, a home screen listing today's habits, and a "habit added" confirmation. Small enough to finish, real enough to touch every skill in this course.
| Step | What it uses |
|---|---|
| 1. Set up the file | 3 device-preset Frames (Frames & Presets) |
| 2. Build a type scale and 2-3 Color styles | Text & Type Scale, Color and Effect Styles |
| 3. Build a Button component set | Components and Variants — Default/Disabled at minimum |
| 4. Lay out the sign-in screen | Designing a Mobile App Screen |
| 5. Lay out the home screen with Auto Layout rows | Auto Layout, for the scrolling habit list |
| 6. Wire the 3 screens together | Prototyping — sign-in → home → confirmation |
| 7. Add one Smart Animate moment | e.g. a habit card growing when checked off |
Not pixel-perfect — a working prototype that plays start to finish in Figma's preview, built from named, reusable pieces rather than one-off shapes on each screen. That last part is the real skill this course has been building: the same button, the same color, the same spacing value, defined once and used everywhere.
Real fluency in Figma comes from repetition on real briefs, not more tutorials. Pick a real app or website already on a phone or a bookmark bar and try rebuilding one screen of it from scratch — matching an existing design is one of the fastest ways to notice details a from-scratch design lets you skip past.