# See every page next to the design they signed off.

> Map your Figma pages to your live site once, then review every page side by side with its approved design.

https://www.usefrank.io/features/figma-design-qa

Map your Figma pages when you set up a project. Frank lines up each page from your live site with its design, so you can review build and design side by side, page by page.

## Design drift is silent, and it adds up.

Nobody decides to ship the wrong shade of blue. Small calls made during the build pile up until the site doesn't quite look like what the client approved.

- **Nobody spots it in review**: A 2px spacing change or a slightly off hex code is invisible when you've looked at the same page fifty times.
- **Clients do spot it**: They signed off the Figma file. When the live site feels different, they notice, even if they can't say why.
- **Two windows slow you down**: Flicking between a Figma tab and a browser tab, page by page, is tedious, so it gets rushed or skipped on a deadline.

## From Figma file to side-by-side review in four steps.

Set the mapping up once. Every scan after that is ready to review.

1. **Create a project**: Name the project and paste your staging URL. Takes 30 seconds.
2. **Map your Figma pages**: Connect your Figma file and match each page from your sitemap to its design. Frank keeps the mapping for every scan.
3. **Run a scan**: Frank checks every page and scores each one out of 100.
4. **Review side by side**: Open any page to see the live build next to its design, with that page's issues listed alongside.

## Design review and QA, in one place.

The side-by-side view sits alongside the automated checks Frank runs on every page.

### A score for every page

Every scan scores each page out of 100 with a red, amber or green status, and highlights every issue on a screenshot of the page.

- One score per page
- Issues highlighted on the page
- Every scan kept for history

### Catch what slipped through

While you review the design, Frank checks every link on the page and every block of text for lorem ipsum.

- Broken links
- Lorem ipsum
- Missing alt text and accessibility issues

### Turn design notes into tasks

Spot drift while you're reviewing side by side? Pin a marker on it, mark it as a design issue and @mention the developer. No screenshots pasted into Slack.

- Comment, edit and delete markers
- Filter by priority and type of issue
- Visible to everyone assigned to the project

## Fast to set up. Thorough every time.

- **30s** to connect a site and its Figma file
- **0** lines of code or plugins to install
- **Unlimited** projects and scans on every plan

## Frequently asked questions about Figma side-by-side

### How does the Figma comparison work?

When you set up a project, you map your Figma pages to the pages Frank finds in your live site's sitemap. From then on, each page shows the live build side by side with its approved design.

### Does Frank flag design differences automatically?

No. Frank puts the build and the design side by side so you can review them together; it doesn't automatically compare colours, fonts or spacing. The automated checks cover lorem ipsum, broken links, alt text, accessibility and forms.

### Does it work with any website?

Yes. Frank works from the published site at your staging URL, so it doesn't matter how the site was built. No code or plugins required.

### Is the Figma integration included in every plan?

Yes. The Figma integration is included on every plan, with unlimited projects and scans. [See pricing](https://www.usefrank.io/pricing).