How to write stories

story.to.design needs stories with args in order to extract variants of a component.

See Variants for the user experience.

Developers can further improve the experience of designers by creating dedicated stories with the specific set of args that will create the perfect variant set for Figma.

Example of a story with args

import { Button } from './Button';

export default {
  title: 'Button',
  component: Button,
};

export const ForFigma = {
  argTypes: {
    disabled: { control: 'boolean' },
    type: { control: 'select', options: ['primary', 'secondary'] },
  },
  args: {
    children: 'Label',
    disabled: false,
    type: 'primary',
  },
};

This example will set specific argTypes and args default values for component Button only on a story called ForFigma.

arg in Storybookstory.to.design
childrenSet to value “Label” on all variants.
disabledPropose “true” and “false” variants.
typePropose “primary” and “secondary” variants.