Connect Figma to Storybook

Embed stories in your Figma files

loading
Shaun Lloyd
@_shaunlloyd

UI implementation and design naturally diverge over time which leads to confusion around the source of truth. Chromatic already brings collaborators across disciplines into the development workflow. Now, Chromatic also bridges the gap between code and design tools!

I’m excited to announce that we’ve partnered with Figma to create Storybook Connect, a plugin that links your stories to variants. It helps you compare implementation to design specs to speed up handoff and UI review.

  • 🔗 Link stories to component variants
  • 🕹 Play with live implementation in Figma
  • 📌 Highlight components to reuse
  • 📐 Compare story to spec
  • 🔐 Setup private projects with access control
Used by Brex, Microsoft, Rabobank, and The Washington Post

Developers use Storybook to develop UI components and capture their states as stories. While designers model these states as component variants in Figma. It’s not uncommon to lose parity between these two tools during hand-off.

Our new Figma plugin, Storybook Connect, links stories directly to their corresponding variants. This helps teams resolve inconsistencies earlier in the design process and identify reusable components. Jump to the docs or read on for the features.

Set it and forget it

Link your stories once and we’ll keep them up to date with the latest versions of the design or implementation. Just click on the component in Figma then paste the story URL from Chromatic that matches the design and you’re done.

Link to a story

Open the live story next to the component design. Designers can check how a component works before using it in their designs.

Open a story next to it's design
"We love this plugin and it's going to really help use since we are also created a new design workflow on our team" John Conway, Senior Architect for The Washington Post

Smoother handoff between design and development

The plugin streamlines handoff by surfacing which design components have already been implemented. Links to a Component’s stories are called out in the Figma sidebar.

Story links in the Figma sidebar

During handoff, click “Open story in browser” to jump into the complete Storybook environment with addons, tests, and API docs.

Open storybook from Figma
"Our team is rebuilding the dev-designer workflow and raising a design system, and I must say this plugin is a perfect tool to ensure that devs and designers are able to see the [design system] from the same point of view." Ricardo Verginelli de Almeida, UI & UX Designer at Gorila

Review implementation together

The plugin helps designers check that the rendered UI matches their designs via the same Storybook addons that your developers use.

Use the Measure addon to compare dimensions and spacing of DOM elements to design specs.

Storybook's measure addon

The Outline addon visualizes the boundaries of each DOM element for debugging CSS alignment.

Storybook's outline addon

Verify whether a component’s color palette is accessible by toggling the Accessibility addon’s visual filters to simulate different forms of colorblindness.

Storybook's accessibility addon
"Works like magic! This is really going to make a huge difference in how designers and developers can work together at our organization" Yngve Bakken-Nilsen, Senior Consultant at Aurum.

Try the plugin now

Learn how to unite your component code with the corresponding design specs. Go to our setup docs now!

What’s next?

Our goal is to unite component-driven tools like Storybook and Figma into one seamless workflow. That starts with establishing a persistent link between design and development components.

With the plugin, you can now view stories in Figma. We hope to make that component link omni-directional, allowing you to embed Figma back into Storybook (via an addon) or any other tool (via an API).

Have questions? Reach out to us through our in-app chat.

Did this article help you?

Get free UI development guides and tutorials like this emailed to you.

4,459 developers and counting

We’re hiring!

Join the team behind Storybook and Chromatic. Build tools that are used in production by 100s of thousands of developers. Remote-first.

View jobs

Popular posts

SOC 2 Type 2 compliant

Robust security for every plan
loading
Dominic Nguyen
by Chromatic
In-depth guides and tutorials for professional UI developers, from the Storybook team
Guides
Intro to StorybookDesign Systems for DevelopersVisual Testing Handbook
Subscribe
Join the Ink newsletter to get free tutorials, guides, and resources emailed to you.