Over.fig

About Over.fig

Over.fig is a browser extension that overlays a Figma design on top of a live website in real time, letting developers and QA testers compare implementation to design pixel-by-pixel without switching applications. It provides measurement tools, CSS inspection that converts Figma styles into Tailwind utility classes, selection and extraction of Figma design blocks, and downloading of pre-optimized project media directly from the extension. It also supports custom fonts and media query/device verification.

The product is aimed at developers and QA teams working from Figma designs who need to verify layout and styling accuracy against a live site. It offers a free Basic plan for a single developer, limited to one project, up to 3 Figma screens, and 15 MB of workspace. An Advanced Professional plan, priced at $5/month billed annually, is aimed at teams and adds unlimited projects, unlimited Figma screens, and up to 150 MB of workspace.

Key features

• Overlay Figma designs on the live website in real time to compare pixel accuracy
• Inspect Figma CSS styles and convert them to Tailwind utility classes
• Select and extract Figma design blocks directly in the browser extension
• Download pre-optimized Figma project media straight from the extension
• Precise measurement tools with media queries and device verification

Frequently asked questions