Import your first component
Getting started with the story.to.design plugin is simple. Follow these steps to get your components directly from stories to Figma.
01 - Download the story.to.design plugin
To download story.to.design, go to the plugin page in the Figma community and click on Try it out
.
02 - Run the 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 or Histoire
Connect the Storybook or Histoire you would like to import components from by entering the URL in the field provided and click Connect
.
In this example we’ll use Phorkit’s public Storybook at:
https://phorkit.phork.org/
04 - Import a component from stories
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 the boxes for the Args you want for your component. These are what will make your Figma component come with variants mapped to the corresponding properties.
Once you’re ready, click on Import
to start bringing your components from Storybook to Figma.
07 - Import processing
Your component is now in the main list and you’ll see a loading bar. This means story.to.design is processing and importing your component and its variants.
08 - Place component in canvas
Once the processing is complete, you’ll see the button Add to canvas
appear next to the component. Click to add the component and its variants to your Figma canvas.
Tip: You can also 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. The status of your component should change
to (Synced)
as it is now in-sync and mapped to the coded component in Storybook, Backlight or Histoire.
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
your designs.