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>
    </>
  );
};

@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! 🎉