story.to.design

What Is story.to.design?

story.to.design is a Figma plugin in the design-toolscategory that imports components from Storybook to create a Figma library. It enables teams to generate and maintain UI kits or libraries directly from Storybook, Backlight, or Histoire stories, supporting a paid pricing model.

The core purpose of story.to.design is to transform coded components into Figma-ready assets, bridging design and development workflows. It fits into design systems where consistency between code and design is essential, allowing updates from Storybook changes to sync automatically in Figma.

What story.to.design Does

• Imports components from Storybook into Figma by pasting a Storybook URL and selecting stories.
• Generates Figma components with variants based on story arguments, mapping properties automatically.
• Supports design tokens by importing them as Figma styles for consistent application.
• Maintains synchronization by updating Figma libraries when Storybook stories change.
• Detects pre-configured stories using the s2dparameter for automatic variant loading without manual selection.
• Works with Storybook versions 6.x to 8.0 and frameworks including React, Angular, Vue, Svelte, and others.

How story.to.design Can Be Used

• Connect a Storybook instance to Figma by pasting its URL, then import selected components and variants for prototyping.
• Update existing Figma libraries after code changes by re-importing stories, reducing manual variant recreation.
• Build design systems by importing components from Backlight or Histoire alongside Storybook for multi-tool workflows.
• Apply design tokens as Figma styles during import to ensure color, spacing, and typography alignment across teams.
• Drag imported components marked as "Ready" from the Assets panel onto canvases, including their documentation frames.

Designers encounter scenarios where Storybook components evolve in code, but Figma files lag behind; story.to.design addresses this by enabling quick imports and one-click updates in real project iterations.

Who Is story.to.design For?

story.to.design serves design and development teams maintaining design systems with Storybook, particularly UI/UX designers and front-end developers who need code-accurate Figma libraries. It suits projects using Figma for prototyping and Storybook for component documentation, from mid-sized teams to larger organizations handling frequent updates across frameworks like React or Vue. Experience levels range from intermediate users familiar with plugins to advanced practitioners scaling UI kits.

Visit story.to.design