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', };