Pixelay Development Comparison Figma Plugin

Compare Figma designs with your local web development builds using browser overlays

— Features

• Compare multiple Figma designs and URLs at the same time.
• No user accounts, browser extensions or apps required.
• Overlays: Transparent, split screen, toggle, drag and diff.
• Optionally specify different website page URLs per Figma frame.
• Supports localhost using BrowerSync or Hot Module Reloading.
• Built-in pixel ruler for measuring space differences in comparisons.
• Easily relaunch directly from the Figma sidebar in your projects.
• Get perfect web builds that match your Figma designs everytime.

— To use Pixelay

1. Install Pixelay and run the plugin inside your project.
2. Select the frames you want to compare with your website.
3. Paste in the URL you would like to compare your frames to.
4. Optionally add different website page URLs per frame.
5. Click the “Compare Designs” button.
6. Click on the link to compare inside your browser.

For step-by-step video tutorials:
• Compare “localhost” builds – https://youtu.be/vOU3gGrgv4c
• Compare a Webflow site – https://youtu.be/XlT_QTu1eEg

— Additional Notes

• IMPORTANT: Pixelay uses iFrames to make it possible to compare multiple URLs at the same time; as such, please ensure that the URLs you’re trying to compare do not contain any blockers (eg. “same-origin policy”) that will prevent them from being loaded in an iFrame outside of the website’s own domain (which happens if you try loading https://google.com, for example). This is not a problem for local development environments (eg. http://localhost:3000) or development servers that you manage for your own websites.

• If your website CSS uses “vh” units for any elements, please note that these may appear much taller than they normally would at a resonable browser height due to Pixelay setting the viewport height to be the same as your full Figma mockup.

• If you add/remove any frames in Figma while Pixelay is running, you can click on the “Refresh” icon in the top right of the Pixelay Figma plugin to refresh the list of available frames to compare.