←  All terms
D
Design Systems

Design QA

Design QA compares the implemented interface with the design specification and checks spacing, typography, states, and responsive behavior.

Design QA compares the implemented interface with the design specification and checks spacing, typography, states, and responsive behavior. Value comes from governed tokens, accessible components, clear documentation, and consistent maintenance. The concept is closely related to Quality Assurance and Cross-Browser Testing.

Read more

Quality Assurance

Cross-Browser Testing

Design System

FAQ

Design QA

How can design QA be carried out efficiently?
Efficiency comes from checking against tokens and components rather than individual pixels. A checklist with defined tolerances prevents endless debates over details. Comparing the Figma design with the browser rendering should include every state and breakpoint. Visual regression tests catch later deviations automatically.
What does design QA check that functional tests do not cover?
Visual deviations that look fine functionally are what design QA catches: wrong spacing, different font sizes, missing hover and focus states, and layouts that break at breakpoints. A functional test reports success as long as a button is clickable, even if it looks different from the design. The two checks complement each other.
When in a project does design QA take place?
Design QA works best as an ongoing activity, for example per component or sprint, and ends with a final sign-off before launch. Late deviations are expensive because they often affect many pages. Checking only at the end means fixing basic spacing or typography errors everywhere instead of in one central place.