On this page
About Storybook Connect
Storybook Connect is a free Figma plugin published by Chromatic Deploys in 2021. It works in Figma Design and Dev Mode and has 62,670 users and 1,066 likes on the Figma Community. It ranks #8 in Dev Handoff, #10 in Developers and #10 in Design Systems on our lists.
In the developer's words
Embed stories into your Figma workspace to cross-reference the live implementation in one place. Open the Storybook Connect window to start interacting with the real components.
With the Storybook Connect Plugin you can:
- Link design components to stories
- Play with interactive stories in Figma
- Compare implementation to the design
Link components
When you link a component or a variant to a story that link propagates to every instance in Figma. Your collaborators can also see the story link.
Compare implementation to the design
The plugin comes with a compact yet powerful story embed that includes familiar tools like the Outline, Measure, Backgrounds, and more.
Open Storybook from the sidebar
See which components are linked by glancing at the Storybook Connect section in Figma’s sidebar.
Open Storybook in Dev mode
See which components are linked by glancing at the Storybook Connect section in Figma’s sidebar
Requires a Chromatic account for access control & security, sign up for free here.
Join the Storybook discord here and visit the #figma-plugin channel for support!
What's new
Version 26 · released Jan 16, 2024
- Added support for the Figma VSCode extension
Permissions and privacy
Network access
Storybook Connect's manifest allows network access to any domain ("*"), so Figma doesn't limit where it can send data.
- *.chromatic.com
- *
Extra permissions
None beyond the standard access to the file you run it in.
Read from the plugin's published manifest.
Where Storybook Connect ranks
Stacks with Storybook Connect
Storybook Connect alternatives
- 1
Zeplin
by Zeplin Crew
293K users2.9KFree + paid featuresDesign tools are for designing. Zeplin is for clear, structured design delivery.
- 2
Measure
by Philip
161K users3.3KFreeAdd measurement lines and additional helpful information to your designs
- 3
Redlines
by Danny Keane
143K users3.8KFree - 4
DesignDoc [Spectral]
by Marka Plugin Dev
141K users3.2KFree📐 Effortlessly hand off your Figma designs to the development team
- 5
Specs Classic
by Directed Edges Plugins
139K users5.6KFree + $8/mo upgradeGenerate component specs including anatomy, props and layout & spacing
- 6
Inspect Styles
by max.denaro
139K users4KFreeInspect styles from Figma and transform to CSS
Storybook Connect FAQ
What does Storybook Connect do?
Inspect Storybook stories in Figma. It's a Figma plugin by Chromatic Deploys that runs in Figma Design and Dev Mode.
Is Storybook Connect free?
Yes. Storybook Connect is free to install and run from the Figma Community, with no paid tier listed.
Is Storybook Connect safe to use?
Figma plugins can only reach the internet through domains listed in their manifest. Storybook Connect's manifest allows network access to any domain ("*"), so Figma doesn't limit where it can send data. As with any plugin, check the developer's privacy policy before using it on client work.
How do I install Storybook Connect?
Open it on the Figma Community, or search for it in the Actions menu (Cmd/Ctrl + K) inside any file you can edit. See how to install Figma plugins.
What are the best alternatives to Storybook Connect?
By user count, the closest alternatives are Zeplin, Measure and Redlines. Compare all of them on the best Figma plugins for dev handoff.
Built this plugin?
Use this page as a landing page for Storybook Connect: link to it from your site, README or launch posts, or add a badge. Pick a style and copy the code.
Style
Label
Size
Code
<a href="https://figmaplugins.co/plugins/storybook-connect/" target="_blank" rel="noopener"><img src="https://figmaplugins.co/badges/featured-dark.svg" alt="Storybook Connect on figmaplugins.co" width="220" height="48"></a>Want it featured on figmaplugins.co? Submit it for review