Introduction
Design QA is the critical step between development and deployment where you verify the implementation matches the design. Without it, small discrepancies accumulate: wrong spacing, mismatched colors, broken responsive layouts, and missing states.
A structured QA process catches issues early, reduces back-and-forth, and ensures the final product reflects the design team's vision. It's not about pixel perfection on every element — it's about consistency, polish, and meeting the design intent.
This guide covers a practical design QA checklist, tools for visual comparison, and workflow tips for smooth designer-developer collaboration.
Key Concepts
QA Checklist Categories
Design QA covers five areas: Visual Accuracy (colors, spacing, typography), Responsive Behavior (all breakpoints), Interactive States (hover, focus, active, disabled, loading, error, empty), Content (real data, edge cases, overflow), and Accessibility (contrast, focus order, screen reader).
Visual Comparison Tools
Overlay tools let you superimpose the design on the implementation. Browser extensions like PixelPerfect, Overlay, or built-in Figma comparison features help spot differences quickly.
Practical Examples
1. Visual Accuracy Checklist
// For each component, verify:
// ☐ Colors match design tokens (not approximations)
// ☐ Spacing matches (padding, margin, gap)
// ☐ Typography: font, size, weight, line-height, letter-spacing
// ☐ Border radius matches
// ☐ Shadows match (spread, blur, offset, color)
// ☐ Icons are correct size and color
// ☐ Images have correct aspect ratio and object-fit
2. Responsive Testing
// Test at these breakpoints minimum:
// 375px — iPhone SE (smallest common mobile)
// 390px — iPhone 14
// 768px — iPad portrait
// 1024px — iPad landscape
// 1280px — Small desktop
// 1440px — Design spec width
// 1920px — Large desktop
// Check:
// ☐ No horizontal overflow
// ☐ Text doesn't truncate unexpectedly
// ☐ Images resize properly
// ☐ Navigation adapts correctly
// ☐ Touch targets are at least 44x44px on mobile
3. State Matrix
For every interactive element, verify: default, hover, focus, active/pressed, disabled, loading, error, and empty states on desktop and mobile.
4. Automated Visual Regression
// Playwright visual regression
test('homepage', async ({ page }) => {
await page.goto('/');
await expect(page).toHaveScreenshot('homepage.png', { maxDiffPixelRatio: 0.01 });
});
Best Practices
- ✅ Create a QA checklist for each project/component
- ✅ Test on real devices, not just emulation
- ✅ Check all interactive states
- ✅ Use automated visual regression tests
- ✅ Test with real content including edge cases
- ❌ Don't QA only at desktop width
- ❌ Don't skip accessibility checks
Common Pitfalls
- 🚫 Only checking happy path
- 🚫 Not testing with real content
- 🚫 Forgetting dark mode
- 🚫 QA too late in the process