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.
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.
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.
- Join our Discord #design channel
- Mention maintainer
@michaelarestadto get a beta invite and join the private beta group - Install the plugin
The private beta group gives you access to plugin maintainers and hands-on support. As the plugin develops, the beta will open to the public.
Link stories to designs
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.
[“source=storybook”]
