OverlayQA Documentation
OverlayQA is a Chrome extension for design QA that helps product teams catch visual inconsistencies between Figma designs and live websites. It combines visual comparison, AI-powered design analysis, and WCAG accessibility auditing into a single browser-based workflow, so designers and developers can identify and resolve issues without switching between tools.
What is OverlayQA?
OverlayQA sits directly in your browser and lets you compare any live page against its Figma source design. The extension captures screenshots with full CSS context (computed styles, selectors, padding, font, and color values), runs AI-powered diff analysis to surface visual discrepancies, and exports structured issues to Jira, Linear, or Notion. Teams use OverlayQA to streamline the design-to-development handoff and reduce the back-and-forth that typically stretches QA reviews across multiple days.
Guides
- Getting Started — Install the Chrome extension, create your first project, and start reviewing designs against live builds. This guide walks you through account setup, extension installation from the Chrome Web Store, and your first design comparison.
- Creating an Issue — Annotate any element on a live page, capture screenshots with CSS context, and draft issues with AI suggestions. Each issue includes the CSS selector, computed styles, viewport dimensions, and browser metadata automatically.
- Visual Comparison — Compare your live site against Figma designs with overlay controls, opacity adjustments, and AI-powered diff analysis. The visual comparison workflow lets you select specific Figma frames and compare them at any responsive breakpoint.
- Accessibility Audit — Run WCAG accessibility scans on any page, review violations by severity, and bulk-create issues from findings. Audits are powered by axe-core combined with AI analysis to prioritize and explain each violation.
- Exporting Issues — Export captured issues to Jira, Linear, or Notion with full technical context, screenshots, and metadata. Each export includes the page URL, screenshot attachment, CSS selector, computed CSS values, viewport size, and browser information.
- Connect Figma — Connect your Figma account via OAuth to compare designs against live builds and link frames to projects. Once connected, you can browse Figma files and select specific frames for visual comparison.
- Connect Jira — Connect Jira Cloud via OAuth to export issues with screenshots, CSS context, and metadata. You can select the target project and issue type, and issues are automatically labeled for easy filtering.
- Connect Linear — Connect Linear via OAuth to export issues with screenshots, CSS context, and metadata. Choose a team, project, and label to organize exported issues within your existing Linear workflow.
- Connect Notion — Connect Notion via OAuth to export issues to an auto-created database with full technical context. OverlayQA creates a structured database on first export, so each issue appears as a rich Notion page.
Key Features
- Visual comparison against Figma designs — Select any Figma frame and compare it against your live page with adjustable opacity controls and responsive scaling to match different viewport sizes.
- AI-powered design diff analysis — GPT-4o analyzes visual differences between your design and implementation, surfacing spacing, color, typography, and layout discrepancies that are easy to miss manually.
- WCAG accessibility audits — Run automated accessibility scans powered by axe-core and AI to identify contrast, structure, and ARIA violations, grouped by severity for efficient triage.
- Issue capture with screenshots and CSS context — Click any element to capture a screenshot along with its CSS selector, computed styles (padding, font, color, border), viewport dimensions, and browser metadata.
- Export to Jira, Linear, and Notion — Send issues directly to your project management tool with all technical context attached, including the Figma frame link and page URL, so developers have everything they need to fix the issue.
Getting Started
- Install the extension — Add OverlayQA to Chrome from the Chrome Web Store and create your account. The extension adds a panel to your browser that activates on any webpage.
- Connect your tools — Link your Figma account to enable design comparison, and connect Jira, Linear, or Notion to enable one-click issue export with full context.
- Run your first review — Navigate to any live page, open the OverlayQA panel, and select a Figma frame to compare against. Capture issues, run an accessibility audit, or use AI analysis to identify visual differences.