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
• 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.

Getting started

1. Install

npm install --save-dev storybook-anima
# 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>"

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.

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