Pixelay Compare Design to Web

About this plugin

Documentation & Video Tutorials

For plugin/web app documentation and step by step video tutorials, please visit https://docs.hypermatic.com/pixelay

Questions & Support

Pixelay is still a baby panda, so if you notice any bugs or have any questions about the plugin, please get in touch directly via https://hypermatic.com/contact and we'll help you troubleshoot and resolve them as quickly as possible.

Security

Pixelay is designed to be privacy and security focused — for details about security and how the plugin works, please visit https://docs.hypermatic.com/pixelay/security

Features

1. Compare multiple Figma designs and URLs at the same time.
2. Light-weight Chrome Extension required to compare multiple pages at once.
3. Easily perform visual QA of your designs against the real build.
4. Test your responsive designs, with support for multiple screen sizes (eg. desktop/mobile/tablet).
5. Instantly switch between multiple test/dev environment website URLs.
6. Transparency, split-screen, toggle, drag and diff overlays.
7. Optionally specify different website page URLs per Figma frame.
8. Supports localhost using BrowerSync or Hot Module Reloading.
9. Built-in pixel ruler for measuring space differences in comparisons.
10. Get perfect web builds that match your Figma designs, every time.

Never hear excuses for your designs being messed up again.

Pixelay effortlessly visually syncs up your Figma designs and your real website URL(s) with a single click.

Sync your websites and designs directly from Figma in seconds.

Pixelay syncs your designs from Figma into the browser, where your designs are automatically placed over your real website, letting you super accurately compare your designs with the real thing.

Easily compare mulitple pages and screen sizes at the same time.

Pixelay gives you a bunch of modes to help you compare Figma designs with your website. One-click toggle between: the original Figma design, your website build, transparent overlay, split screen overlay, blended diffing, draggable transparent overlay and pixel guides/rulers.

Supports any live, "localhost" or logged-in/authenticated website URLs.

Install the lightweight Chrome Extension to compare any URLs with your Figma designs; live websites, websites in development (eg. localhost) or websites that require authentication.

Pixelay Pro

10 free trials of Pixelay Pro are included with the free version, and if you're a casual user, you can continue using the free version of Pixelay forever.

If you're a power user, you can optionally upgrade to continue using all the extra features that are only available in the pro version of Pixelay.

To learn more about Pixelay Pro, please visit https://www.hypermatic.com/pixelay/#pro