Skip to content
Holtdroid

Design

Compare the screen with the design mockup

Lay a Figma mockup over the phone screen, let Holtdroid find every difference and send the designer a report.

Why: “the button looks a bit off” is hard to argue about. Laying the mockup over the real screen shows exactly what is off and by how many pixels, and the report settles it.

What happens

Section titled “What happens”
  1. Open the Pixel perfect tab next to DevTools.
  2. Add the mockup: drop an image, choose a file or paste it with Cmd+V (Ctrl+V). It becomes a reference and lies over the screen.
  3. Use Opacity to see more of the app or more of the design.
  4. Press Find differences. Each one gets a plain explanation: shifted, another colour, missing.
  5. Click a difference to find it on the screen.
  6. Export report saves a picture to attach to the task.

Good to know

Section titled “Good to know”
  • From Figma, SVG is the best format: select the frame and Copy as → Copy as SVG, then paste it into the tab. It stays sharp at any size. Keep the frame the size of the phone screen in dp (for example 360 × 800). If a frame can’t be SVG, export PNG at 3×.
  • References belong to you, not to the session: they are there in every session, the current app’s first.
  • The phone keeps working under the mockup: taps go through it.
  • Something on the screen is gone in a second (a toast, an animation)? Freeze keeps the current picture so you can compare it calmly.
  • A blend called Difference turns matching pixels black and lights up what is off: a quick check by eye.

If it doesn’t work

Section titled “If it doesn’t work”
  • The mockup is blurry or the wrong size: it was probably a PNG at 1×. Use SVG, or PNG at 3×.
  • Everything is a difference: the mockup isn’t lined up. Turn on Move, drag it into place, then compare again.
  • A video or map always differs: hide that part of the mockup or skip that area of the screen in the tab, so it isn’t compared.

More details: Pixel perfect.