Design Comparison

​

Before you begin

• React components (.tsx, .ts, .jsx, .js). Vite, Next.js, webpack and Create React App projects are supported, with or without Storybook.
• The component is pushed from Figma with the latest deeepSpace Figma plugin.
• The Figma component is linked to its code component in deeepSpace: on the component page, the Details panel → Code → Link the code (or Match components on the Components page, to link them all at once). Every component your files export can be linked, including parts that live next to a main component (a TableRow beside Table).
• Your project’s dependencies are installed (npm install, pnpm install…): the CLI builds your components with them.

​

How it runs

1. Run deeep sync. After syncing your components, the CLI builds them into a small preview app with your project’s own settings (path aliases, Tailwind/PostCSS, CSS modules, Sass, fonts, global styles and providers) and uploads it privately to deeepSpace.
2. deeepSpace renders every Figma variant of each linked component in a sandboxed browser, then compares it with the design.
3. Open the component in deeepSpace: each variant shows how closely the code matches it. A comparison usually takes about a minute.

​

Reading the results

• Score: the pill at the top, such as 87% · Close to the design, is how closely the component matches its design across all variants. Green from 95%, orange from 80%, red below. Click it to open the variant that needs the most work.
• Variants: every variant designed in Figma, as cards, each with its own score and number of differences. Filter them by Figma property. Move the mouse across a card to swipe between the design and your rendered code.
• One variant: click a card to open it. Switch between Design, Code (your component, rendered), Side by side and Swipe (drag the line between the design and the code). Use ← → or the strip at the bottom to move between variants, and Esc to go back to all of them.
• Differences: each one is a numbered pin on the image and a line in the panel on the right, in plain words: Font size: 16px in design, 14px in code. Click a pin or a line, or use ↑ ↓: the spot is outlined, the rest of the image fades, and its values show next to it.
  • High and Medium differences are the ones you can see. Minor ones (a color or size that isn’t a design token, details barely visible) are folded into one line; Show lists them and pins them too.
  • A difference caused by another one (a button is narrower because its font is smaller) is listed under its cause, not as a separate difference.
  • The same difference on repeated elements (five accordion titles) is one difference, in 5 places.
• How it’s rendered (in the panel of a variant): the exact code rendered, for example <Button variant="secondary" size="sm">Label</Button>, and how each Figma property was turned into a prop. You can correct it.
• What’s checked (in the panel of a variant): what was matched and checked, and what isn’t checked yet.

​

When something isn’t right

​

Known limits

​

Settings

{
  "compare": {
    "enabled": true,
    "source": "auto",
    "css": ["src/styles/globals.css"],
    "head": "compare-head.html",
    "wrapper": "src/test/Providers.tsx",
    "decorators": true,
    "stories": { "Button": "components-button--primary" }
  }
}

​

Privacy