Visual Control: Testing Mockups & Design Documents

🎨 What This Module Is About

Most QAs test the final UI. But the design file is documentation too — and it has the same problems as any spec.

Designers are human. They design the happy path first. Error states get added later, if at all. UI copy gets placeholder text that never gets replaced. Responsive states get forgotten.

Your job: review the Figma file the way you'd review a spec — methodically, before development starts.

🎓 What You'll Learn

• What a QA checks in Figma: states, spacing, responsiveness, consistency
• How to spot "sad path" screens that are missing from the design
• How to audit UI text for clarity, consistency, and correctness

📋 Module Lessons

Lesson 1 — Mockups as Documentation

The design file is a spec. Learn the checklist: all interactive states, grid and spacing, responsive breakpoints, component naming.

Lesson 2 — Where Design Meets Logic

Error states, empty states, loading states — designers often skip them. Here's how to systematically find and request the missing screens.

Lesson 3 — UI Text and UX Writing

"Error 404" vs. "Oops, this page got lost 🏠". From typo hunting to error message quality, this lesson makes you the copy auditor your team didn't know it needed.

🖼️ Module insight: A pixel problem found in Figma is a 5-minute fix. The same problem found in production is a design sprint, a ticket, a PR, and a regression test. Which do you prefer?

Earn the "Pixel Inspector" 🔬 badge by completing all three lessons.