Visual Comparison

Compare your live site against Figma designs with overlay controls, opacity adjustments, and AI-powered diff analysis.

Steps

1. Connect Figma — Connect your Figma account via OAuth to access your design files.
2. Select Visual Comparison — Choose the Visual Comparison workflow from the sidebar.
3. Pick a frame — Browse your Figma files and select the frame to compare against the live page.
4. Adjust the overlay — Use opacity and positioning controls to align the design over your live build.
5. Run AI diff — Run AI-powered analysis to detect visual differences between design and implementation.

Related Guides

• Getting Started
• Creating an Issue
• Accessibility Audit
• Exporting Issues

More

• All Documentation
• OverlayQA Home