Import your first component

Getting started with the plugin is simple. Follow these steps to get your components directly from stories to Figma.

01 - Download the plugin

To download, go to the plugin page in the Figma community and click on Try it out.

Download the plugin

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.

Run the plugin where you want 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:
Connect your Storybook

04 - Import a component from stories

To import your first component, click on Import new 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.

Select the component to import

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.

Select the args to create variants for

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 is processing and importing your component and its variants.

Component in the list being imported

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.

Click the downward arrow to add the component on the 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.

Component and its variants created on the canvas

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.

Created component in the 'Assets' panel