How to copy a Figma frame into inspecta

This is the how-to. The product page is Compare Figma to your live site.

Before you start

You will need:

• The inspecta Chrome extension
• The Figma to inspecta plugin
• A Figma file with the design you want to validate
• The live URL you want to compare against

Step 1: Copy from Figma

1. Open your design in Figma.
2. Run the Figma to inspecta plugin.
3. Select what you want to copy: a frame or component to compare, or page-level colors, fonts, or design tokens, and copy the design data.

Step 2: Paste into inspecta

1. Open the live page in Chrome.
2. Click the inspecta extension icon.
3. Paste the copied Figma data into inspecta.
4. inspecta matches Figma tokens and variables to the live CSS.

Step 3: Review and fix mismatches

inspecta lists gaps on the live page. Preview a card, apply one value, or apply Figma values in bulk. Weak matches are skipped.

You can paste Figma styles onto matched elements, replace SVGs with the Figma version, and overlay the Figma art if you want a pixel check.

Tips

• Compare at the same viewport width as your Figma frame.
• Compare a section or component when a full screen is noisy.