TemplateFREE⏱️ 1-2 hours per feature
Design QA Template for Product Managers
A design QA checklist template for verifying implementation matches design specs. Covers visual fidelity, responsive behavior, interaction states,...
Updated 2026-03-05
Design QA
| # | Area | Criteria | Score (1-5) | Findings | Action Required | Status | |
|---|---|---|---|---|---|---|---|
| 1 | |||||||
| 2 | |||||||
| 3 | |||||||
| 4 | |||||||
| 5 |
#1
#2
#3
#4
#5
Edit the values above to try it with your own data. Your changes are saved locally.
Get this template
Choose your preferred format. Google Sheets and Notion are free, no account needed.
Frequently Asked Questions
How long should design QA take?+
Budget 1-2 hours per feature for a thorough QA pass. Simple features (a single page with few states) take 30-45 minutes. Complex features (multi-step flows with responsive layouts and many interaction states) take 2-3 hours. The time investment prevents bugs that would take 2-4x longer to discover and fix after launch.
Should the designer or a dedicated QA person do design QA?+
The designer who created the work should do the first pass. They know the intent behind every decision and can spot deviations that a QA engineer would not recognize as bugs. For large teams, pair the designer with a QA engineer: the designer checks visual fidelity and interaction states, while the QA engineer focuses on accessibility, cross-browser, and edge cases.
What tools help with design QA?+
Browser extensions: VisBug (overlay measurement), axe DevTools (accessibility audit), Pixel Perfect (overlay Figma screenshots). Figma plugins: Inspect mode (token values, spacing, CSS). Comparison tools: Percy or Chromatic for visual regression testing. These supplement manual QA but do not replace it. Automated tools catch contrast violations and missing alt text, but they cannot tell you that the empty state illustration looks wrong.
How do I handle disagreements between design and engineering on what is "close enough"?+
Refer to the design system documentation. If the component spec says `border-radius: 8px` and the build shows `4px`, that is a bug, not a judgment call. For unspecified details (animation easing curves, shadow opacity), the designer decides. Establish a tolerance threshold in advance: 1-2px deviation on spacing is acceptable, 4px+ is a bug. Having this threshold in writing prevents every QA session from becoming a negotiation.
Should I re-test everything after bug fixes?+
Re-test all Critical and Major fixes. For Minor fixes, a spot check is sufficient. Also regression-test adjacent areas that the fix might have affected. If the engineer changed a shared component to fix one bug, verify the component still works correctly everywhere else it appears. ---
Explore More Templates
Browse our full library of PM templates, or generate a custom version with AI.