Skip to content
On this page

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.

Quick start

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

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

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:

sh
npm add -D @animaapp/anima-cli
sh
yarn add -D @animaapp/anima-cli
sh
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:

sh
#.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.

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

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:

sh
anima sync --storybook

INFO

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:

sh
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:

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

Sync your design tokens only

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

Command API

anima sync

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

Usage

sh
anima sync [options]

Options

OptionDescriptionType
--token, -tProvide an Anima team token if it was not set as environment variablestring
--storybook, -sTo 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.jsonstring
--basePath, -bIf your project uses Vite, you can provide a base pathstring

anima generate-tokens

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

Usage

sh
anima generate-tokens [options]

Options

OptionDescriptionType
--framework, -f       Provide your framework name i.e. tailwindstring
--config , -cProvide your framework config file i.e. ./tailwind.config.cjsstring
--output , -oProvide an output path of your Design Tokens file, i.e. ./design-tokens.jsonstring

Configuration file API

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

OptionDescriptionType
design_tokensProvide the path to your design tokens filestring
build_commandProvide the command used to build your storybookstring

Example

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