tools / image-overlay
Put the mockup on top of the app
The fastest way to check a screen against the design is to put the design on the screen. Buoy Image Overlay pins a mockup over your running app — locked to a specific component or placed freely — with opacity, scale, offset, and flip controls, so pixel-perfect stops being a squint test.
Read the docs
npm i @buoy-gg/image-overlay
What it does
Component match mode
Scan for tagged components and lock the overlay to one — it stays aligned as the layout changes.
Free placement mode
Drag a full-screen mockup anywhere, from clipboard or URL.
Fine-tune controls
Opacity, scale, offset, and flip — flick between app and design until they agree.
Frequently asked questions
How do I compare my React Native UI against a Figma design?
Export the frame as an image, then load it in Image Overlay from clipboard or URL — adjust opacity over the running app and differences jump out.
Add Image Overlay to your app
Free for on-device debugging. Two-minute install, no native code.
Quick start
npm i @buoy-gg/core