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:
npx @animaapp/anima-cli sync -t <anima-team-token> --storybookHeads 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-cliyarn add -D @animaapp/anima-clipnpm add -D @animaapp/anima-cli2. 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>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 --storybookINFO
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-folderSync 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.jsonSync your design tokens only
anima sync --design-tokens ./design-tokens.jsonCommand API
anima sync
Syncs your Storybook and/or design tokens to your Anima team so that it can be then 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"
};