Variants

With story.to.design you can import components from Storybook to Figma with automatic variant generation.

A variant in Figma will correspond to one instance of the component in Storybook or Backlight.

When importing components from Storybook to Figma, based on story Args, you can build a list of variants that will be generated and incorporated in a single Figma component.

Calculation of variants

We calculate the number of variants to be imported based on all combinations of properties values you selected in the import dialog.

Properties section of the import dialog

Selection of variants

You can import an entire group of variant values by selecting the checkbox at the property level (e.g.: ‘size’ will import all size variants).

Checkboxes at the property level

Or, you can select only individual values for a single property by expanding the drop-down menu for that property and selecting the values you wish to generate as variants.

Checkboxes at the property value level

You can then continue to import your component with all variants attached

Button mentioning how many variants will be imported

Updating selection of variants

You can also come back later and edit your selection of variants imported. For example, let’s say that for a particular component that you’ve already imported, there is now a new variant in Storybook. To bring this new variant into Figma without re-generating the component and all its other variants, you can [Edit] the component and select only the new variant you want to import.

Check out this 30-second video for a step-by-step guide:

Documentation of variants

When you import your component from Storybook to Figma with story.to.design, we also generate any documentation for that component that was created in Storybook (or Backlight), as well as all links related to this component.

Example of imported variants on the canvas with Storybook/Backlight links