Contrast Guide

Getting Started

Sign up or Sign in

Install Storybook

If you're a designer and don't have access to Storybook, please share this with your developer. You can also view the docs in Github or npm:

  1. Install the Storybook Addon
    2. npm i storybook-contrast
  2. Add the following to your .storybook/main.js exports:
    3. module.exports = {  
	addons: ['storybook-contrast']
};
  3. Add the following to .storybook/preview-body.html:
    4. <script id="contrast-snippet" src="https://contrast-snippet.s3.amazonaws.com/contrast-snippet.js"> </script>
  4. Open the Contrast Addon in Storybook

Sync a Figma File to Contrast

  • Open any File in Figma
  • Click the Share Button and then press the Copy Link Button
  • Press the Add Project button in the Contrast Dashboard and paste Figma Link

Diff

Diff lets you know the difference between what you've coded in Storybook and the Figma designs. You can think of it like a spell-checker for UI. To launch Diff, make sure you've followed the Install Storybook instructions above.

  1. Open any Project in Contrast
  2. Select any Design Layer in the Contrast Canvas
  3. Click Diff Layer in the Inspect Panel
  4. Click the corresponding DOM element in Storybook
  5. Contrast will highlight all of the differences in the Inspect Panel. If you make any fixes, Diff will automatically detect those and mark them as fixed

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