Extend stories with Figma variants

When using standard stories with args in the story.to.design plugin, you can manually import components into Figma by using the Basic mode or the Advanced mode.

However, you can also programmatically define the Figma variants directly in your stories’ code, in order to get them automatically loaded and pre-configured.

New parameter: s2d

Add the special s2d parameter in your story like in the following example:

export const Playground: StoryObj<ButtonProps> = {
  ...
  parameters: {
    s2d: {
      variantProperties: [ /* Figma variant properties definition here */ ],
    },
  },
};

story.to.design will detect stories that have this parameter and automatically load them in the Figma plugin.

Then, when using our Figma plugin you simply need to add the component to the canvas or update the canvas if the variants have changed. Zero manual import required.

See variantProperties API to learn about all the different ways to define Figma variant properties.