story.to.design — by ‹div›RIOTS — Import Storybook components to Figma components

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:

1. Install this plugin, story.to.design
2. On a blank Figma file, search for “story.to.design” under Plugins, or using cmd+/
3. In your browser, open your Storybook and copy the URL
4. Paste the URL into the plugin, select the components and variants you want and click ‘Import’
5. story.to.design automatically converts your coded components into native Figma components

Why use story.to.design?

1. Want a better handoff with developers? story.to.design
2. Better design quality? Design with components that look exactly like production.
3. Faster go-to-market? Imagine having your full UI library all ready in under 2 hours!

Key features:

1. Syncs components when Storybook stories change
2. Works with any story framework
3. Imports sub-components
4. Simulates states
5. Supports component properties and variants
6. Private Storybooks now supported too!

------------------------------

Brought to you by ‹div›RIOTS

💬 Chat with us

------------------------------