OfficeDrillsFigma
Practice real Figma workflows — laying out a screen, judging design-system and copy decisions for reused flows, adding actions, error and loading states, a secondary sign-up option, and annotating for handoff — building one continuous sign-up screen in a hands-on training simulation.
Educational practice environment — not affiliated with, endorsed by, or sponsored by Figma.
Options
Lesson 1 is free in every option. You'll enter your email first — no password. $20 unlocks the rest of Beginner or Advanced · Crash Course is $10.
Start here
Beginner
Every step spelled out, including what each screen and field actually means. For anyone who's never opened Figma before.
Start Beginner — free lesson 1 →
Advanced
The full real-world workflow with less hand-holding. Best if you've used it before or pick up new software fast.
Start Advanced — free lesson 1 →
Crash Course
Four of the Advanced lessons — the highest-value tasks in the same real workflow. Built for brushing up before an interview.
Start Crash Course — $10, free lesson 1 →
What you'll practice
Getting Set Up
- Create a New Frame
- Apply a Design System Component
- Organize the Layer Names
Sign-Up Screen
- Lay Out the Screen
Lessons
- Judge the Background for an Auth Screen
- Add the Actions
- Update the Copy for a Reused Flow
- Add an Error State
- Decide Which Detail Actually Needs a Spec
- Add a Loading State
- Add Google Sign-Up Without Disrupting the Hierarchy
- Annotate for Handoff
Drills & Projects
Drill
Design a Sign-Up Screen →
Build a real mobile sign-up screen in an always-on editor — stack the fields and buttons with auto layout, put the primary action first, design the error and loading states, and give every layer a real name.
🔒 Included with Figma
Drill
Still Detached →
Six design-system checks in a real Figma file — a button that stopped following its component, a color that is only close to the variable, a badge restyled instead of switched, a cart row that breaks when the text grows.
🔒 Included with Figma
Drill
Ready for Dev →
Six handoff checks on a Figma file — a section marked Ready for dev that isn't, exports set to the wrong format, a frame that breaks when it resizes, a prototype that starts in the wrong place, and more.
🔒 Included with Figma