@animaapp/anima-cli

Anima CLI

Anima CLI is a command line tool that works in conjunction with the Anima Figma Plugin to transform Storybook stories into Figma components and your design tokens into Figma styles.

You can learn more about the whole Design System workflow in our Anima Design System Automation guide.

Quick start

Run the following command in the folder you have Storybook installed:

npx @animaapp/anima-cli sync -t <anima-team-token> --storybook

Warning Heads up! You'll need an Anima team token to use the CLI. You can get one from the Anima Plugin ↗️ under the Manage Design System screen.

Setup

1. Installation

Run the following command (with your preferred package manager) in the repo with your Storybook:

npm add -D @animaapp/anima-cli

yarn add -D @animaapp/anima-cli

pnpm add -D @animaapp/anima-cli

2. Add your unique Anima team token

After installing the anima-cli, we recommend adding the Anima team token as an environment variable. This way, you won't need to pass it as an argument when you run the CLI.

Create a .env file in the root of your Storybook project with the following contents:

#.env
ANIMA_TEAM_TOKEN="paste-your-token-here"

3. Specify the path to your design tokens

If you want to sync your design tokens, you can also specify the path to your tokens in the CLI command.

npx @animaapp/anima-cli sync --storybook --design-tokens <path-to-design-tokens-JSON-file>

Warning Heads up! You can also specify the path to your design tokens in a anima.config.js file, you can learn more about other configuration options

Usage

Sync Storybook to Anima

To sync your Storybook with Anima, run the following command:

anima sync --storybook

If you are not using the default Storybook build folder storybook-static, you'll need to specify the path to your custom Storybook build folder. For example:

anima sync --storybook ./custom-bulid-folder

Sync your Storybook and design tokens to Anima

To sync both your design tokens and Storybook, run the following command:

anima sync --storybook --design-tokens ./design-tokens.json

Sync your design tokens only

anima sync --design-tokens ./design-tokens.json

Command API

anima generate-storybook (experimental)

Initialize and generate storybook config for your project (only needed if you do not already have storybook).

anima generate-storybook [option]

Options

Options	Description	Type
--token, -t	Provide an Anima team token if it was not set as environment variable	string
--components, -d	To specify the components folder of your project	string
--component, -c	To specify a single component to generate config for	string
--buildDir, -b	To specify the build directory of your project	string
--skipInstall	To skip storybook install	boolean

anima sync

Syncs your Storybook and/or design tokens to your Anima team so that it cant then be generated in Figma.

Usage

anima sync [options]

Options

Option	Description	Type
--token, -t	Provide an Anima team token if it was not set as environment variable	string
--storybook, -s	To specify the Storybook build folder, otherwise it uses Storybook's default storybook-static	boolean | string
--design-tokens, -d	Provide a path to your design tokens file, e.g., ./design-tokens.json	string
--basePath, -b	If your project uses Vite, you can provide a base path	string

anima generate-tokens

Generates design tokens from your framework config file. Learn more about these work in Design token transformers.

Usage

anima generate-tokens [options]

Options

Option	Description	Type
--framework, -f	Provide your framework name i.e. tailwind	string
--config , -c	Provide your framework config file i.e. ./tailwind.config.cjs	string
--output , -o	Provide an output path of your Design Tokens file, i.e. ./design-tokens.json	string

Configuration file API

You can specify a number of variables in an anima.config.js file.

Option	Description	Type
design_tokens	Provide the path to your design tokens file	string
build_command	Provide the command used to build your storybook	string

Example

// anima.config.js
module.exports = {
  design_tokens: '<path to design tokens JSON file>', // e.g. "./design-tokens.json"
};