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:
Do you ever stare at a mockup and sigh? Everyday, I open Figma and wonder:
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.
When we were first thinking of how to solve this problem—we immediately went with Storybook for three reasons:
Because of these reasons, it was clear we needed to start our journey here...
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:
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.
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.
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.
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 :)