story.to.design — by ‹div›RIOTS — Import Storybook components to Figma components
Generate and sync a full Figma library from Storybook or Histoire
Plugin Preview
About this plugin
Generate and sync a full Figma library from Storybook or Histoire.story.to.design imports your components from Storybook to Figma. You’ll get notified any time the code changes in Storybook to update your Figma components in a single click. Less grunt work, more design time.[Go to Homepage]How it works:Install this plugin, story.to.designOn a blank Figma file, search for “story.to.design” under Plugins, or using cmd+/In your browser, open your Storybook and copy the URLPaste the URL into the plugin, select the components and variants you want and click ‘Import’story.to.design automatically converts your coded components into native Figma componentsWhy use story.to.design?Want a better handoff with developers? story.to.designBetter design quality? Design with components that look exactly like production.Faster go-to-market? Imagine having your full UI library all ready in under 2 hours!Key features:Syncs components when Storybook stories changeWorks with any story frameworkImports sub-componentsSimulates statesSupports component properties and variantsPrivate Storybooks now supported too!------------------------------Brought to you by ‹div›RIOTS💬 Chat with us------------------------------
Plugin Details
| Version | 370 |
|---|---|
| Created | February 16, 2022 |
| Last Updated | July 17, 2026 |
| Category | Import & export plugins |
| Creator | divRIOTS |
| Stats | 2732 installs, 672 likes |
| Pricing | Paid |
Technical Details
- API:1.0.0
- UI:build/ui.js
- main:build/main.js
- Network Access:
story.to.design uses a backend. For private URLs, it also uses the agent which runs locally on port 9265
- Editor Types:figma
- Allowed Domains:
- *
- Codegen Languages:
- HTML(html)
More Like This
Discover other plugins in the Import & export plugins category.
Free Compressed PDF and Image Exporter (PDF, PNG, JPG, WebP and SVG)
Export compressed PNG, PDF, JPG, SVG, WebP & merge multiple frames into one PDF—fast & easy! 🚀
Color Import / Export
Help design and dev teams stay in sync by providing import and export tools for color palettes
Export/Import Variables
Export variables from one file and import them to another. Supports modes, references, and scopes.