New
Integrate Next.js and Storybook automaticallyAutomate with Chromatic
Star75,440
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
storybook-anima-beta
A Storybook addon for Anima
npm install storybook-anima-beta
Last updated 9 months ago
4
Downloads per week
Readme View on GitHub

Storybook to Anima to Figma Addon

Storybook Anima addon


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

Storybook to Anima to Figma Addon

Requirements

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

Join the community
5,858 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI