Connect Figma
Connecting Figma to OverlayQA lets you compare your live site against design specs using the Visual Comparison workflow. Link a Figma file to any project to select frames, adjust overlays, and run AI-powered diff analysis directly in your browser.
What Figma Integration Enables
- Visual Comparison — compare Figma frames against live pages to spot design drift.
- Frame linking — associate specific Figma frames with projects for quick access.
- Design context in issues — exported issues include a link to the relevant Figma frame.
Prerequisites
You need a Figma account with view access to the design file you want to compare against. OverlayQA reads frames from the file but does not modify your designs.
Connect Your Figma Account
- Open the OverlayQA sidebar on any page.
- Navigate to Settings and find the Integrations section.
- Click Connect next to Figma.
- A Figma authorization page opens in a new tab. Approve read access for OverlayQA.
- The sidebar updates automatically when the connection is confirmed. You will see a green indicator and "Connected" status.
Link a Figma File to Your Project
- Open Project Settings in the OverlayQA sidebar.
- Find the Figma File input field.
- Paste your Figma file URL (for example,
https://figma.com/design/...). - Click Save Changes.
OverlayQA extracts the file key from the URL and stores it with your project. If the URL is invalid, you will see an error message asking you to paste a link that starts with figma.com/design/ or figma.com/file/.
Verify the Connection
After linking a file, open the Workflows menu and select Visual Comparison. The frame picker should load with thumbnails of your Figma file's top-level frames. If frames appear, your connection is working correctly.
Troubleshooting
| Problem | Solution |
|---|---|
| Frame picker shows "No frames found" | Make sure the Figma file has top-level frames (not just nested layers). Check that you have view access to the file. |
| "Invalid Figma URL" error | Paste the full URL from your browser address bar when viewing the file in Figma. It should start with figma.com/design/ or figma.com/file/. |
| Connection times out | Check your browser's popup blocker. The Figma authorization page may have been blocked. Try again and allow the popup. |
Next Steps
With Figma connected, you can run Visual Comparisons to compare your live site against design specs. See the Getting Started guide for a full walkthrough, or learn how to export issues to Jira, Linear, or Notion.