How to write stories 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
childrenSet to value “Label” on all variants.
disabledPropose “true” and “false” variants.
typePropose “primary” and “secondary” variants.