Introduction

story.to.design is a Figma plugin that generates and maintains a full Figma library or UI kit directly from Storybook or Backlight. It transforms your coded components into Figma components that are ready to use for design work.

story.to.design also allows teams to align design and code, by keeping the Figma UI kit in sync with the codebase. Any time there is a change or update in Storybook, the plugin fetches these changes and automatically updates the corresponding components in Figma.

Faster designing and prototyping, fewer discrepancies and easier design system maintenance are just a few ways design teams can benefit.

Why did we create story.to.design?

When design and code fall out of sync, designers and developers misunderstand each other. Maintaining both UI kits in Figma and component libraries in code is no small task. And when you start having hundreds of variants for a button, it’s a lot of labor to maintain. A tiny code change in the design system can impact thousands of variants. It pushes the design team to architect UI kit components in complex ways, sometimes hacking Figma to make the maintenance bearable.

We believe that design teams should not be wasting time maintaining UI kits to stay in-sync with code. Designers should be researching and designing new, outstanding user experiences. story.to.design does all the maintenance work, freeing-up designers to focus on what matters most.

You can learn more about why we believe in the code-to-design approach and created story.to.design on our blog post announcing it.