Back to Plugins
Storybook Connect

Storybook Connect

Inspect Storybook stories in Figma

documentationstorybookdesignvuehandoffcollaborationangularreactcomponentsdevelopment

Plugin Preview

Storybook Connect preview

About this plugin

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!

Plugin Details

Version26
CreatedDecember 24, 2021
Last UpdatedJanuary 16, 2024
CategorySoftware development
CreatorJonathan Kolnik
Stats8685 installs, 829 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:dist/ui.html
  • main:dist/code.js
  • Network Access:

    Our plugin can render user-specified domains.

  • Editor Types:
    figma
  • Allowed Domains:
    • *
    • https://*.chromatic.com