Hello Product Hunters! My name is Ryan and I'm the founder and solo developer at Titanium Clad Studios. Today I am bringing you the Easel UI Checker. This simple plugin allows you to generate a canvas over your current webpage and upload an image to it. The image is draggable, letting you position it anywhere, and will persist across page refreshes wherever you place it until you delete the canvas. The power of this extension is the opacity slider in the menu. It allows you to easily "onion skin" the web components you have development against the image overtop of it. You can export entire Figma pages as a png and upload them, or individual components. I built this because I was tired of getting comments like "it's close, but doesn't perfectly match the Figma" from my design stakeholders. With this tool, I can ensure that my frontend elements DO perfectly match the Figma, every. single. time. I have already received some great feedback from early users, and tried to make this extension as easy to use as possible. Not only that, but it's free and open source! If there's something you want to change, you are welcome to fork it from the Github repo and make it yours. I would love further feedback, and am very open to it. If you get some value out of Easel UI, please reach out!

Easel UI Checker

Overlay images over your webpage to check design parity

Overlay images over your webpage to check design parity