Storybook addon that extracts the Storybook data and transforms stories into Figma components for a better design-development workflow.
Learn more about the motivations and benefits in our our blog post
Demo
Requirements
- Storybook@>=6.0.0
- Anima Account
- Sign up for Anima's beta
- Anima's Figma plugin
This addon should work with any framework. If you find a case that the addon does not work, please open an issue.
:warning: Currently, we only support Wepback builders, if you use a custom builder for storybook for example,
vite
or one of storybook's experimental features, please write to us or open an issue as the addon might not work as expected.
Getting started
1. Install
npm install --save-dev storybook-anima --legacy-peer-deps
# yarn add -D storybook-anima
2. Register the addon in .storybook/main.js
// .storybook/main.js
module.exports = {
addons: ["storybook-anima"],
};
3. Set Anima access token
First get the access token from the Anima Figma plugin, or in your Anima team settings. Learn more about how to get the token from Anima.
You can then set the access token as an environment variable called STORYBOOK_ANIMA_TOKEN
.
You can create .env
file in your project's root folder, or you can provide the environment variable as a command line parameter when building or dynamically running Storybook.
# .env
STORYBOOK_ANIMA_TOKEN="<paste your TOKEN here>"
Design system tokens support
Anima can also use your design tokens when generating stories, automatically converting them to Figma styles.
To enable this feature, please follow these steps:
1 - Prepare your design system tokens file
The file should be written in the standard JSON format.
Example :
design-system-tokens.json
{
"--primary": {
"$value": "#1976D2"
},
"--secondary": {
"$value": "#ffcd29"
}
}
2 - Add your design system tokens file to the storybook preview
Go to .storybook/preview.js
and export a new parameter called anima
with the path of your design system tokens file under designTokens
// .storybook/preview.js
export const parameters = {
...
anima: {
designTokens: require('../design-system-tokens.json')
},
};
That is it, now if you have components that use these design tokens they will be exported to Figma as components using native Figma styles.
Considerations
For the time being, this integration works best if the your stories composition consists of just the component itself, rather than complex stories with multiple examples or included documentation.
In short, what you see in the Storybook story, is what you'll get in Figma.
Limitations with Boolean control types
Due to a Storybook bug, the addon can't correctly process boolean controls if they don't explicitly specify a type
.
For example, we could have some trouble processing Stories with the following argTypes
definition,
as the arguments don't explicity specify a type
:
argTypes: {
disabled: { control: "boolean" },
isContained: { control: { type: "boolean" } },
},
In such cases, it's necessary to add an explicit type for each boolean control:
argTypes: {
disabled: { control: "boolean", type: "boolean" },
isContained: { control: { type: "boolean" }, type: "boolean" },
},
Limits on the number of variants
The addon currently limits the number of variants to a maximum of 1025 for any given story. As a result, some props might be missing in the exported components.
In the near future, we are going to provide some options to customize which controls should be included or excluded during the export process.
Development
Run following commands in separate tabs to start development
npm run build
npm run dev
For more information visit : Anima Storybook integration
License
MIT © Anima