OverlayQA Documentation
OverlayQA is a design QA and website feedback tool that helps product teams catch visual inconsistencies between Figma designs and live websites. Review public URLs in the dashboard with no install, or use the Chrome extension for localhost, staging, and login-gated pages. It combines visual comparison, AI-powered design analysis, and WCAG accessibility auditing into a single workflow, so designers and developers can identify and resolve issues without switching between tools.
What is OverlayQA?
OverlayQA lets you compare any live page against its Figma source design, in the dashboard (no install, for public URLs) or the Chrome extension (localhost, staging, login-gated pages). It 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, Asana, Trello, 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.
- Team Review — Capture and review issues on any live URL straight from the OverlayQA dashboard, with no extension install. Place element and region pins on the page in live or snapshot mode; issues appear in a drawer synced with the canvas.
- 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.
- Design System Audit — Scan any page for design token inconsistencies across colors, typography, spacing, borders, and shadows. The audit scores your page's token consistency and highlights affected elements directly on the page.
- Exporting Issues — Export captured issues to Jira, Linear, Asana, Trello, 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.
- Connect Asana — Connect Asana via OAuth to export issues with screenshots, CSS context, and metadata to your Asana projects.
- Connect Trello — Connect Trello via OAuth to export issues with screenshots, CSS context, and metadata to your Trello boards.
- Connect Slack — Connect Slack via OAuth to post new issues to a team channel and sync thread replies, emoji reactions, and slash commands back to OverlayQA.
- Sharing Issues — Create public, read-only links to share issues with teammates, clients, or stakeholders who don't have OverlayQA. Anyone with the link can view screenshots, severity, and status without logging in.
- Client Share Links — Share a live page or frozen snapshot with external stakeholders for annotated feedback. Reviewers pin notes directly on the page without an account, and notes become issues automatically.
- Team Management — Invite teammates by email, assign Owner, Admin, or Member roles, and manage seat-based access from the dashboard settings.
- Bulk Actions — Update status, type, severity, export, share, or delete multiple issues at once from the extension sidebar.
- Comments and @Mentions — Discuss issues with threaded comments, @mention teammates for notifications, and sync comments with Figma, Jira, Linear, Notion, and Slack.
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, Asana, Trello, 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, Asana, Trello, 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.