Visual QA Workflow: From Figma to Production

Freeze the intended baseline

Agree which Figma frame, component state, content, and viewport represent acceptance. If implementation must differ for accessibility or technical reasons, document the decision before comparison so reviewers do not repeatedly report it.

Compare during development

Early comparisons find structural drift while CSS and component decisions are still inexpensive to change. Start with layout and typography, then inspect assets, borders, shadows, and detailed spacing after the page geometry is stable.

Triage with shared evidence

• Attach the reference, actual capture, viewport, and comparison view.
• Describe the affected component rather than saying the page looks wrong.
• Separate systemic defects from one-off content issues.
• Assign severity according to user and release impact.

Close the loop in production

After deployment, run a focused comparison against the approved reference to catch environment-specific fonts, asset paths, feature flags, and responsive behavior. Keep the final report with the release record.

Create a compact visual acceptance record

Store the Figma frame or exported reference, implementation URL or build, target dimensions, known deviations, comparison report, unresolved accepted issues, and final approver together. This record prevents later regression checks from treating undocumented drift as an approved baseline.