Compare a Figma design with the running app

Olyvr reads a Figma frame, opens the same screen in your app, and writes a report of where they differ, with screenshots and steps to reproduce.

Note

This works through the Figma and Playwright plugins. What Olyvr can do depends on the tools those plugins’ servers offer. Playwright drives a browser on your computer; Figma reads the design.

What you need

• The Figma plugin, connected and signed in to an account that can view the file.
• The Playwright plugin, connected. It needs Node.js installed.
• The Figma link to the frame, and the address of the screen in your app. If the app needs a login, sign in first or tell Olyvr how.

Ask Olyvr

Compare our checkout screen at http://localhost:3000/checkout with this Figma frame: [link]. Write a report I can hand to the team.

What Olyvr does

1. Reads the frame’s structure, text and spacing from Figma.
2. Opens the page in the browser at a matching window size and waits for it to finish loading.
3. Takes screenshots and reads the page’s structure.
4. Compares the two and separates visual differences, such as a wrong label or spacing, from things that don’t work.
5. Creates the report as a draft, with evidence and reproduction steps for each finding.

Check the result

• Each finding points to the Figma frame or element and the page state it came from.
• Open the app yourself and confirm one or two of the findings.
• The report doesn’t flag loading placeholders as design defects, or give measurements more exact than it could check.

If something goes wrong

• Wrong layout compared. If the design is for a different screen width, tell Olyvr the size to use.
• Times or dates differ. Content that changes on every load isn’t a design defect. Ask Olyvr to ignore it.
• Fonts look off. A missing font on your computer can cause differences that won’t appear for users.