⭐️ Be sure to check out our DSA Docs for a thorough guideline on how to navigate this integration. ⭐️

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
Setup
- 1. Install the CLI
- 2. Add Anima Token
Usage
Commands and Options
- sync
  - Options
Alternative configuration

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