All Collections
Developer's Guide to Anima
How to Write Better Storybook Stories (using controls)
How to Write Better Storybook Stories (using controls)
Andres Raul Leon Bal avatar
Written by Andres Raul Leon Bal
Updated over a week ago

To leverage the full power of Anima storybook integration (i.e. generating Figma component with variants from your Storybook stories), we recommend using controls in your stories. Here is our best recommendation for writing stories:

1. Specify ArgTypes to define the props of your component

Try to set control type of select for props that have a limited number of values
Example:

// Button.stories.js|jsx|ts|tsx 

//...

export default {
// ...
argTypes: {
// ...
variant: {
control: {
type: 'select',
options: ['primary', 'secondary', 'tertiary'],
},
},
},
};

2. Use single story per component

Instead of creating a story for each variant of a component, it is preferable to create just one story and use the args property to define the default values of your props.

This will make it easier to find components to generate in Figma with the Anima plugin.

You can achieve this in two ways:

  • 2.1. Name your single story Default

    So the way it appears in Figma is as Components/Button/Default so that we can ignore the "Default" and just use the parent folder name as the component name in Figma.

// Button.stories.js|jsx|ts|tsx 

import { Button } from './Button';

export default {
title: 'Components/Button',
component: Button,
variant: {
control: {
type: 'select',
options: ['primary', 'secondary', 'tertiary'],
},
},
};

export const Default = () => <Button {...args} />;

Default.args = {
variant: 'primary',
label: 'Button',
};
  • 2.2. Use the single story hoisting feature from Storybook (more info here)

    So the way it appears in Figma is as Components/Button

// Button.stories.js|jsx|ts|tsx 

// import the Button component as a different name

import { Button as Component } from './Button';

export default {
title: 'Components/Button',
component: Component, // use the Button component as the component
variant: {
control: {
type: 'select',
options: ['primary', 'secondary', 'tertiary'],
},
},
};

// This is the only named export in the file, and it matches the
component name

export const Button = () => <Component {...args} />;

Button.args = { variant: 'primary', label: 'Button', };

Did this answer your question?