Figgy is a Chrome extension designed to enhance the workflow of designers and developers by providing a visual overlay tool that allows for direct comparison between Figma designs and the live web pages. This tool addresses the common challenge of ensuring that web implementations align accurately with design specifications, particularly concerning elements like margins, alignment, and font sizes. With Figgy, users can import their Figma designs as PNG images and overlay them on the current web page, facilitating a straightforward visual comparison.

The extension automatically calculates pixel differences between the live DOM elements and the design, displaying these discrepancies in a tooltip for easy identification. Figgy's responsive design capabilities ensure that it adapts to various device resolutions, automatically applying the appropriate PNG image without additional configuration. Users can customize the display style of design discrepancies, including tooltip placement and highlight styles, while also benefiting from a shortcut-based overlay toggle feature for quick comparisons. Overall, Figgy significantly enhances collaboration between designers and developers by streamlining the design validation process.