This helps visualize differences between the final design and the website/app you're working on. It's faster and requires less code than setting up a visual diff tool. It eliminates the need to constantly switch to the design file to check dimensions and other parameters.

overlayImage-DesignQA.jsx

// Check first comment for instructions and assumptions.

import design from "img/design.png";

const Homepage = () => {
  return (
    <>
      <otherHomepageComponents />
      <img
        src={design}
        alt="design image that should be removed after Design QA"
        style={{
          zIndex: 99999999999999, // This is probably excessive, but at least it's over 9000!
          position: "absolute",
          // match design image dimensions and make sure the browser viewport is the same
          width: 1370,
          height: 768,
          opacity: 0.2,
          pointerEvents: "none", // Pass mouse events (hover, click, etc) through this image to elements under it
          border: "1px solid red", // This is only to help you confirm the image is aligned well. Comment/delete this as soon as you can so the border doesn't affect the layout.
          filter: "invert(100%)", // This makes the differences between the design and the current page more obvious
        }}
      ></img>
    </>
  );
};

I usually do this with the entire viewport, so here is an example with the following assumptions:

• You are using React (but obviously you can do this with other frameworks and even just HTML).
• You are referring to the Homepage of the site/app.

Instructions

1. Export an image of the entire Homepage from the final design (Figma, Sketch, Adobe XD, etc). The image should cover the entire viewport.
2. Go to the Homepage file in your IDE. You should go to the file that returns the entire view of the Homepage. It may not always be Homepage.tsx
3. Import the image.
4. Add the image after all other components/elements in the Homepage file.
5. Make sure to resize your browser viewport to the same dimensions as the design image. The border helps with this.
6. Comment out/delete the border after you confirm the viewport matches the image dimensions. If you don't, the border will cause issues with alignment.
7. Adjust opacity as needed. Sometimes you'll need to temporarily change colors of the webpage elements because they may not be very visible with the overlay.
8. Delete all this code when you're satisfied with the outcome.
9. Let me know if you found this useful or have ideas for improvements.

It's my old-days-favorite solution 😂 I'm not using this solution anymore, cause:

1. Hard to handle responsive design
2. Shows the designers' mistakes that developers can fix(like 1px mis-position)
3. Should export the design image by hands.

But I don't think this solution is bad idea. Especially, 2 and 3 could be solved with some kind of automation tools(Figma plugin? Chrome extension?)

@deminoth
Good point, it's not a perfect solution, but it seemed better to me than manually checking the spacing for each element in Figma. Is there a more elegant solution that can also be implemented relatively quickly?

The ideal seems to be using a visual testing tool that integrates with Figma but that requires more time and management of the limits for free/paid plans.

I'm back to the manual check, so no better solutions now 😞
Anyway, try filter: invert(100%) css filter. It visualize the difference dramatically.

but at least it's over 9000!

@deminoth
Wow, thanks! That's much more obvious! 🎉