Back to blog

Figma plugin beta

Connect stories to design components

loading
Dominic Nguyen
@domyen

Over time, implementation and design tend to drift apart. As apps get more complex, teams lose track of what’s been developed in Storybook and what’s been designed in Figma. This ambiguity slows you down.

I’m thrilled to announce that Storybook Connect for Figma is now in beta. It’s a Figma plugin which brings your stories into the design workspace. That streamlines design handoff and UI review because teams can reference code components alongside their designs.

  • 🔗 Link stories to designs
  • 🕹 Interact with stories in Figma
  • 📌 Pinpoint components during design handoff
  • 📐 Compare design specs to implementation
  • 🔐 Private projects and access control
Select component in Figma

The problem

Developers and designers are converging on components, but each discipline takes a different approach. Developers build components in Storybook while designers draw the components in Figma.

Every component is expressed twice, in separate tools. Naturally, this duplication causes confusion around the source of truth for UI. You end up asking “does the component already exist?” and “why doesn’t the component look like the design?”

So even though developers and designers start with components, in practice, there’s a distinct disconnect. At Storybook, our mission is to connect component-driven tools.

Connect Storybook to Figma via plugin

Join the beta now!

We’re launching Storybook Connect for Figma to link stories to their corresponding variants. Teams work smarter because they can debug inconsistencies earlier in the design process and discover existing components to reuse.

Before we begin, your project needs to be published to Chromatic, a free service by Storybook maintainers. Chromatic handles access control, security, embedding, and the database that backs the plugin. Once your project is on Chromatic, follow the steps below.

  1. Join our Discord #figma-plugin channel
  2. Install the plugin and ❤️ it

The #figma-plugin gives you access to maintainers and hands-on support.

Link stories to corresponding Figma components or variants. Click on the component in Figma then paste the story URL that matches the design. This creates a persistent connection between code and design that propagates to every component instance across Figma files. When you link once, you never have to do it again.

Link stories to designs

Play with interactive stories to confirm behavior

Open the Storybook Connect window to quickly reference the real component implementation that you’ve built in Storybook. This helps designers confirm the nuances of how a component is expected to behave before committing to using it. During handoff, developers can quickly reference an implementation without tabbing between windows.

Open the plugin window to play with the interactive story

Open the full Storybook in one click

Jump to the complete Storybook with addons, tests, and auto-generated docs. Every connected component has a handy link to “Open story in browser”.

1-click to open Storybook in a new browser window

Pinpoint components during design handoff

Components with links to stories are called out in the Figma sidebar. That helps you identify which component you can reuse and which components you need to build anew. That saves teams from accidentally creating multiple versions of the same component.

See which components are connected to stories in the sidebar

Compare implementation to design specs

During UI implementation review, check that the rendered UI matches the design with Storybook addons.  The Measure addon shows the dimensions and spacing of DOM elements. That helps you confirm design details down to the pixel.

Use Measure addon to see dimensions and spacing

Align CSS layouts in a glance

Use the Outline addon to visualize the boundaries of each DOM element. This helps you debug CSS alignment.

Use Outline addon to check alignment

Check color accessibility

Accessibility addon provides filters that simulate different forms of colorblindness. This helps you verify whether a component’s color palette is palatable to users with disabilities.

Use Accessibility addon to simulate color blindness

Already have an invite?

Check out the full setup guide in our Figma community file.

Get involved

Storybook Connect for Figma is in active development. We need your help to find edge cases and improve the workflow. Chat with us on Discord #figma-plugin.

The plugin was developed by Jono Kolnik, Michael Arestad, Gert Hengeveld, Zoltan Olah, and Dominic Nguyen (me!).

If Storybook makes your UI development workflow easier, join our community to make Storybook better. You can contribute a new feature, fix a bug, or improve the docs. To get project updates and early access to features, sign up to Storybook’s mailing list below.

Join the Storybook mailing list

Get the latest news, updates and releases

6,543 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

Test component interactions with Storybook

Complete tutorial on how to simulate and verify user behavior
loading
Varun Vachhar
Join the community
6,543 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI