OfficeDrills
🔒 Ready for Dev is included with Figma. See pricing below →
Design & Creative

Figma

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
  1. Create a New Frame
  2. Apply a Design System Component
  3. Organize the Layer Names
Sign-Up Screen
  1. Lay Out the Screen
Lessons
  1. Judge the Background for an Auth Screen
  2. Add the Actions
  3. Update the Copy for a Reused Flow
  4. Add an Error State
  5. Decide Which Detail Actually Needs a Spec
  6. Add a Loading State
  7. Add Google Sign-Up Without Disrupting the Hierarchy
  8. 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
← Back to all courses