The plugin is developed by Jonathan Kolnik, Michael Arestad, Zoltan Olah, and Dominic Nguyen (me!). Or join us in Storybook’s Discord chat #design to follow our progress. Sign up to Storybook’s mailing list below to get notified of early access and project updates. Our mission is to unite component tools in one seamless workflow. We need your help and feedback to bring it to life. It's in active development, hence the sneak peek. Storybook Connect for Figma brings designers closer to developers by connecting stories (code) to variants (design). You’ll find convenient actions to view the story in place or in your web browser. See which components are linked by glancing at the Storybook Connect section in Figma’s sidebar. This gives you a quick way to spot check appearance. The plugin comes with a compact yet powerful story embed that includes familiar tools like the Outline, Measure, Backgrounds, and more. No more tabbing between Figma and Storybook during design handoff or searching multiple Storybooks to find out where a component was implemented. That saves you time by ensuring your collaborators can also see the story link. When you link a component or a variant to a story that link propagates to every instance in Figma. Open the Storybook Connect window to interact with the real component. The Figma plugin embeds stories into the design workspace so that designers can cross-reference the live implementation in one place. As a developer, you’d save time because designs would actually reflect what’s in production. What if you could connect stories to their variants? That’d mean designers see live components to debug inconsistencies earlier in the design process. Till now, these sibling constructs have been tough to link together. It doesn’t take much squinting to see that Storybook stories map to Figma variants and vice versa. With component variants, designers can represent key states in a more granular way. Inspired by engineering, Figma’s components unlock superpowers like “ composition, inheritance, and unlimited overrides”. You build components and write stories along the way that capture key states. The core innovation is the story, a standards-based format for component examples.
But the approach to components is different depending on your discipline.ĭevelopers use Storybook to develop components in isolation from the app. With components, developers and designers have a shared construct. This leads to confusion around expected UI appearance and behavior.
The implementation and design tend to drift apart over time. One of the classic hurdles in frontend is keeping designers abreast of what’s live in production.
At Storybook, we believe the software industry is converging on Component-driven UIs to deliver durable user experiences.