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.
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).
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.
You can then continue to import your component with all variants attached
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.