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

  1. Get your team's Anima Token in the Anima Plugin under the "Storybook" section.

  2. Build your storybook, usually npm run build-storybook

  3. Then run npx anima-storybook-cli sync -t <ANIMA_TOKEN_HERE> in your Storybook project.

  4. 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).

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

--token

-t

Provide Anima's token if it was not set as Environment variable

string

--directory

-d

To specify the storybook build folder, otherwise it uses Storybook's default storybook-static

string

--design-tokens

Provide a path of your Design Tokens file, i.e. ./design-tokens.json

string


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"
};


Did this answer your question?