Code and designs are completely disconnected. With nothing bridging the two, it’s up to you, the developer, to accurately recreate the designs into code. You inspect hundreds of layers, search your codebase, painstakingly compare with DevTools--wasting endless amounts of time, creating inconsistencies, and producing countless QA bugs. 

At Contrast, we solve this by showing you the difference between your code and designs—effectively connecting your Storybook and Figma. You’ll be building UI at record speeds with insane accuracy. 

In this article, we’ll discuss:

• The Great Divide between code and designs
• Why we built a Storybook Addon to solve this problem
• How Contrast + Storybook work together to help you build UI, faster

Do you ever stare at a mockup and sigh? Everyday, I open Figma and wonder:

• Is this element already a component?

• Do we have a Story for it?

• Did I build it to spec?

I comb through our codebase, manically compare the two, and inevitably ping my teammates—constantly wondering how to best recreate it. This uncertainty plagues our team with inconsistencies, meetings, headaches, and wasted time.

So why exactly is this happening? Well, I like to call this problem: The Great Divide.

As UI developers, we live in our own world; one with our own languages, environments, and cultures. But so do designers. Both are filled with amazing ideas and some of the smartest minds, but they’re disconnected...

Code lives in one space. Designs in another. There's no bridge between the two.

I've personally experienced this disconnect for years. While working for startups and building my own, I've seen the problems this separation causes. And it's because of this that we decided to build Contrast—a handoff tool that shows you the difference between your code and designs.

Why Storybook

When we were first thinking of how to solve this problem—we immediately went with Storybook for three reasons:

1. We're Storybook users and know how vital it is when building, testing, and documenting our UI.
2. Storybook has an amazing community of developers who are passionate about the quality of their UI and the speed of their development.
3. Storybook is a well documented platform, letting us build an Addon that unlocks value to our users in a short period of time.

Because of these reasons, it was clear we needed to start our journey here...

How our Addon works

After years of using the same slow, antiquated handoff tools and processes, we set out to rebuild and reimagine. Our goal was create a tool specifically built for component-driven teams—teams that care about consistency, quality, and speed. 

So, we tailored Contrast to help you build UI blazingly fast with complete context—in 3 simple steps:

1. Mirror - Figma files stay mirrored in Contrast, keeping you in-sync with your designer. 
2. Build & Diff - Know if what you’ve coded matches the designs, while building in Storybook.
3. Connect - Once your UI is built, connect the Story to the master Figma component. Transforming it into a living reference when inspecting designs in the future.

‍Mirror

Mirror your Figma files in Contrast—down to the exact pixel. If a change is made in Figma, everything stays perfectly in-sync with Contrast. No manual uploading. No worrying. 

‍

‍Build & 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. 

‍

Connect

Once you’ve built your component in Storybook, quickly connect it to the master component in Figma. Whenever you’re inspecting designs in the future, you’ll see the Story and Tokens on the designs instead of mismatched CSS. This connection will save you endless amounts of time as you continue to build out your product. 

Get started

If you're interested in testing out Contrast to start building UI faster and more accurately, follow the simple steps below. You can also check out the Addon Catalog for more ways to customize and supercharge your Storybook.

1. Install the Addon

2. Add the following to your .storybook/main.js exports:

3. Add the following to your .storybook/preview-body.html:

‍

Or, if this article has inspired you to create an Addon of your own, you can learn how to do it here. The documentation makes it easy to get up-and-running in record time. Don't hesitate to reach out if you have any questions about where to start :)