Diff

Forget tab-hopping and start inspecting designs directly in Storybook—side-by-side. Keep it all in-context and never lose your place again.

More importantly, as you’re building UI, Contrast tells you the difference between what you’ve coded and the designs. You can think of Diff like a spell-checker for UI developers. A tool that feels so magical, you’ll think it is. Say goodbye to inconsistencies, design bugs, and endless QA.

To launch Diff make sure you have installed the Contrast Storybook Addon.

Once you've installed the Addon follow these steps to Diff your first layer:

  1. Open a Contrast Project and select a layer
  2. Click "Diff Layer" in the Diff section of the Inspect Panel
  3. Diff will be activated within your Storybook Story, click the corresponding DOM element
  4. Review the results in the Diff section of the Inspect Panel
  5. Make any fixes, Diff will automatically detect and mark those as fixed.
  6. Repeat until all your layers are Diffed and 100% match.

Still have a question? Email us at support@contrast.app to let us know!