Getting started with the story.to.design plugin is simple. Follow these steps to get your components directly from Storybook to Figma.
01 - Download story.to.design plugin
02 - Run plugin in your target Figma canvas
Run the plugin in the page and design file where you would like to import your components.
03 - Connect Storybook
Connect the Storybook you would like to import components from by entering the Storybook url in the field provided and click ‘Connect’.
This example will use Microsoft Fluent Storybook at:
04 - Import component from Storybook
To import your first component, click on
[Import new component].
05 - Select your component and story
Select which component and story to import. A button, for example, is a must-have.
06 - Select the args that should make variants
Check which args you want for your component, that’s what will make your Figma component come with variants mapped to the corresponding properties.
Finally, click on
[Import] to start importing.
07 - Import processing
Your component is now in the main list.
After a few seconds, the component should be imported and marked as
08 - Place component in canvas
Once component is
(Ready), it can be placed in your Figma canvas.
Click on the downward arrow icon next to the component’s status to add it to the canvas.
Or drag-and-drop the thumbnail of the component into the canvas.
09 - Component and variants created!
A new frame with your button component appears on the canvas together with any
documentation that is in your Storybook. The status of your component should change
(Synced) as it is now in sync and mapped to the coded component in Storybook.
10 - Congratulations! 👏
You’ve successfully created your first Figma component that is directly linked to your
coded component. The component is in the
Assets panel and you can start using it in