On this page
About story.to.design
story.to.design is a free + paid features Figma plugin published by divRIOTS in 2022. It works in Figma Design and Dev Mode and has 20,553 users and 669 likes on the Figma Community. It ranks #17 in Design Systems on our lists.
In the developer's words
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.
How it works:
- Install this plugin, story.to.design
- On a blank Figma file, search for “story.to.design” under Plugins, or using cmd+/
- In your browser, open your Storybook and copy the URL
- Paste 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 components
Why use story.to.design?
- Want a better handoff with developers? story.to.design
- Better 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 change
- Works with any story framework
- Imports sub-components
- Simulates states
- Supports component properties and variants
- Private Storybooks now supported too!
------------------------------
Brought to you by ‹div›RIOTS
------------------------------
What's new
Version 364 · released Jun 10, 2026
The developer didn't publish release notes for this version.
Permissions and privacy
Network access
story.to.design's manifest allows network access to any domain ("*"), so Figma doesn't limit where it can send data.
- *
Extra permissions
- Reads your Figma name and avatar
Read from the plugin's published manifest.
Where story.to.design ranks
story.to.design alternatives
- 1
Styler
by Andrei Iancu
229K users3.4KFreeBulk management of styles based on layer properties.
- 2
Design Lint
by Daniel Destefanis
142K users5.7KFreeFind and fix errors in your designs
- 3
Specs Classic
by Directed Edges Plugins
136K users5.5KFree + $8/mo upgradeGenerate component specs including anatomy, props and layout & spacing
- 4
Styles & Variables Organizer
by Chenmu Wu
134K users3.2KFree + $15 upgradeApply styles and variables to all your designs with one click!
- 5
Instance Finder
by Idan Arbel
96K users1.8KFree - 6
Color Style Guide
by hiloki
79K users1.4KFreeCreate the brillant Color Styleguide page using your local Color Styles.
story.to.design FAQ
What does story.to.design do?
Generate and sync a full Figma library from Storybook or Histoire. It's a Figma plugin by divRIOTS that runs in Figma Design and Dev Mode.
Is story.to.design free?
story.to.design is free to install, but some features are unlocked through a paid plan on the developer's site.
Is story.to.design safe to use?
Figma plugins can only reach the internet through domains listed in their manifest. story.to.design's manifest allows network access to any domain ("*"), so Figma doesn't limit where it can send data. As with any plugin, check the developer's privacy policy before using it on client work.
How do I install story.to.design?
Open it on the Figma Community, or search for it in the Actions menu (Cmd/Ctrl + K) inside any file you can edit. See how to install Figma plugins.
What are the best alternatives to story.to.design?
By user count, the closest alternatives are Styler, Design Lint and Specs Classic. Compare all of them on the best Figma plugins for design systems.
Built this plugin?
Use this page as a landing page for story.to.design: link to it from your site, README or launch posts, or add a badge. Pick a style and copy the code.
Style
Label
Size
Code
<a href="https://figmaplugins.co/plugins/story-to-design/" target="_blank" rel="noopener"><img src="https://figmaplugins.co/badges/featured-dark.svg" alt="story.to.design on figmaplugins.co" width="220" height="48"></a>