The team at Anima asks a controversial question, and makes a strong case for Storybook being the single source of truth: “Even though products begin with the components in the design, the end-users of those products will actually experience the components from the code. The single source of truth, then, is what users will actually see in the end.”
“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.”
Recently I’ve shared a few no-code tools for generating code from Figma mockups, but this one is different and works in reverse by generating Figma components and variants from your code and Storybook stories. Nifty idea!
Storybook is an open-source tool for developing UI components in isolation for React, Vue, and Angular. This article explores some of the Storybook addons for design. The Figma addon depicts the component design next to the implementation. Design changes will automatically be reflected in Storybook.