Set up variants - Basic
This page walks you through how to import variants directly from story args. This is the “Basic” way to import variants, as you can only select args and values.
If you need more granularity and control, you can use the Advanced mode where every single Figma variant property can be controlled.
A variant in Figma will correspond to one instance of the component in Storybook, Backlight or Histoire.
When importing components to Figma based on story args, you can select a list of variants that will be generated and incorporated into a single Figma component.
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 a selection of variants
You can also come back later and edit the selection of variants that you imported. For example, let’s say that for a particular component that you’ve already imported, there is now a new variant in your stories. 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:
Calculation of variants
story.to.design calculates the number of variants to be imported based on all combinations of property values you selected in the import dialog.
Advanced mode
If this selection of args is not powerful enough for your stories, and you need more granularity, you can go into Advanced mode where each Figma variant property can be specifically tuned to a set of args from your stories.
See Set up variants - Advanced for more information.