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:
- Install the Storybook Addon
- npm i storybook-contrast
- Add the following to your
.storybook/main.js
exports: - module.exports = { addons: ['storybook-contrast'] };
- Add the following to
.storybook/preview-body.html
: - <script id="contrast-snippet" src="https://contrast-snippet.s3.amazonaws.com/contrast-snippet.js"> </script>
- Open the Contrast Addon in Storybook
Sync a Figma File to Contrast
- Open any
File
in Figma - Click the
Share
Button and then press theCopy Link
Button - Press the
Add Project
button in the Contrast Dashboard and paste FigmaLink
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.
- Open any
Project
in Contrast - Select any
Design Layer
in the Contrast Canvas - Click
Diff Layer
in the Inspect Panel - Click the corresponding
DOM element
in Storybook - 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!