Anima Storybook CLI is a command line interface that transforms Storybook stories into Figma components for a better design-development workflow.
Learn more about the motivations and benefits in our our blog post.
Index
Quick Start
Get your team's Anima Token in the Anima Plugin under the "Storybook" section.
Build your storybook, usually
npm run build-storybook
Then run
npx anima-storybook-cli sync -t <ANIMA_TOKEN_HERE>
in your Storybook project.On a new Figma file, open the Anima plugin, and select the components you want to generate and sync from the Storybook section (make sure you are on the correct Anima team).
That's it! You can now use your Storybook components in Figma.
Setup
1. Install the CLI
Run the following command (of your preferred package manager) in the project that has Storybook installed:
npm install --save-dev anima-storybook-cli
yarn add -D anima-storybook-cli
pnpm add -D anima-storybook-cli
2. Add Anima Token
Get your team's Anima Token that can be retrieved from the Anima Plugin under the "Storybook" section.
Then, add it as an Environment Variable:
If you're running locally, add the token to an .env
file in the root of your project
#.env
STORYBOOK_ANIMA_TOKEN="PASTE_ANIMA_TOKEN_HERE"
Alternatively you can use the -t
flag when running the CLI command, i.e.:
npm run anima-storybook sync -t <ANIMA_TOKEN_HERE>
If you're running on a CI, add the token as an Environment Variable …
Usage
[pkg manager] anima-storybook sync [option]
We recommend adding the following script to your package.json
So it can be easily integrated with your Continuous Integration solution.
Running the build of your storybook before syncing it with anima ensure that your storybook is always up to date.
"scripts": {
//...
"sync": "npm run build-storybook && anima-storybook sync"
}
then run easily it with:
npm run sync
Commands and Options
sync
Command to sync the storybook project to Anima team so that it can be then generated in Figma.
anima-storybook sync [option]
Example of possible commands
npx anima-storybook sync --token <anima_token>
npx anima-storybook sync --directory <storybook_static_dir> #default is storybook-static
npx anima-storybook sync --design-tokens <path_to_design_tokens_file>
Options
Options | Short | Description | Type |
|
| Provide Anima's token if it was not set as Environment variable |
|
|
| To specify the storybook build folder, otherwise it uses Storybook's default |
|
|
| Provide a path of your Design Tokens file, i.e. |
|
Alternative configuration
You can also create an anima.config.js
file in your root directory, and save the configuration values like design tokens.
// anima.config.js
module.exports = {
design_tokens: '<path to design tokens JSON file>',
// "example ./design-tokens.json"
};