Pixelay for Figma

Compare Figma designs with your build using browser overlays

• 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.
Would you recommend this product?
4 Reviews2.5/5
Ha! Very nice straightforward solution. From the experience in teams of designers and developers, I can potentially see the needs. Especially for remote collaboration it’s hard to always find and explain what is far from the perfection. Even of course for developing should be some tolerance level.
Thanks @densimn! Yes, I really wanted to avoid the need to install extra apps or browser extensions and make it a really simple one-click process for anyone to use from inside Figma. I agree about the remote collaboration, especially when the most common method of sitting next to somebody and going through the differences together is much more difficult at this particular moment in time, when more teams are working remotely; so I do hope Pixelay can make that process easier for remote teams during this time.
Hi everyone! I'm Adam from Figmatic 👋 I'm happy to share our new Figma plugin called "Pixelay", which was built to make it far easier to compare original designs from Figma against the real web development build. This a problem that we used to struggle with in all of my previous digital agencies, and it ended up being a really painful and time consuming process for the all designers and developers involved. It's designed to work directly in the browser and reduce the distance between design and development to zero. Pixelay will automatically overlay your designs over the top of multiple URLs and screen sizes, so you can easily compare them all at the same time. It works really well for developers running local build environments (eg. "localhost:3000") that use BrowserSync or Hot Module Reloading; where any changes will instantly be reflected in the browser while you're comparing it with the designs. I hope this solves some headaches for designers or developers who have been frustrated with alternative approaches of trying to explain differences via text over Slack or Email, spending hours sitting next to each other and pointing out all the pixel differences, or maybe most painful - printing out a website screenshot and writing pixel values on it with red pen for the developer to translate into code. Thanks for checking it out!