# @animaapp/anima-cli > Anima CLI for storybook Latest version **1.1.3** (published 2023-06-27) · MIT license · 0 weekly downloads ## Install ```sh npm install @animaapp/anima-cli pnpm add @animaapp/anima-cli yarn add @animaapp/anima-cli bun add @animaapp/anima-cli ``` Provides the commands `anima`, `anima-storybook`. ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.1.3 | | Published | 2023-06-27 | | First published | 2023-05-24 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Node | >=16.0.0 | | Dependencies | 18 | | Unpacked size | 87.6 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | Anima | | Maintainers | andrico-anima, aymeric_animaapp, moez_anima, federico_anima, orarbel, jorgeanima, animaapp-npm | | Keywords | storybook-addons, storybook, addons, figma, cli, storybook-to-figma, anima, figma, design, design system | ## Links - npm: https://www.npmjs.com/package/@animaapp/anima-cli - Repository: https://github.com/AnimaApp/anima-storybook-cli - Homepage: https://github.com/AnimaApp/anima-storybook-cli#readme - Issues: https://github.com/AnimaApp/anima-storybook-cli/issues - npm.io page: https://npm.io/package/@animaapp/anima-cli ## Dependencies (18) - [c12](https://npm.io/package/c12.md) ^0.2.13 - [ora](https://npm.io/package/ora.md) ^5.4.1 - [zod](https://npm.io/package/zod.md) ^3.20.6 - [flat](https://npm.io/package/flat.md) ^5.0.2 - [chalk](https://npm.io/package/chalk.md) ^4.1.2 - [yargs](https://npm.io/package/yargs.md) 17.0.1 - [lodash](https://npm.io/package/lodash.md) ^4.17.21 - [archiver](https://npm.io/package/archiver.md) ^5.3.1 - [fs-extra](https://npm.io/package/fs-extra.md) 10.0.0 - [form-data](https://npm.io/package/form-data.md) ^4.0.0 - [pkg-types](https://npm.io/package/pkg-types.md) ^0.3.5 - [kebab-case](https://npm.io/package/kebab-case.md) ^1.0.2 - [node-fetch](https://npm.io/package/node-fetch.md) 2 - [@sentry/node](https://npm.io/package/@sentry/node.md) ^7.29.0 - [@sentry/tracing](https://npm.io/package/@sentry/tracing.md) ^7.29.0 - [@types/node-fetch](https://npm.io/package/@types/node-fetch.md) ^2.6.2 - [@animaapp/storybook-api](https://npm.io/package/@animaapp/storybook-api.md) 1.0.6 - [@animaapp/framework-helpers](https://npm.io/package/@animaapp/framework-helpers.md) 1.1.2 ## Alternatives - [@luma.gl/experimental](https://npm.io/package/@luma.gl/experimental.md) — 77.1K weekly downloads - [persona-harness](https://npm.io/package/persona-harness.md) — 4.7K weekly downloads - [@tsparticles/effect-bubble](https://npm.io/package/@tsparticles/effect-bubble.md) — 4.6K weekly downloads - [f3d](https://npm.io/package/f3d.md) — 730 weekly downloads - [spark-html-motion](https://npm.io/package/spark-html-motion.md) — 298 weekly downloads ## Recent versions - 1.1.3 (latest) — 2023-06-27 - 1.1.0 — 2023-06-27 - 1.0.6 — 2023-06-13 - 1.0.5 — 2023-06-12 - 1.0.4 — 2023-06-08 - 1.0.3 — 2023-06-06 - 1.0.2 — 2023-05-30 - 1.0.1 — 2023-05-25 - 1.0.0 — 2023-05-24 ## README
Anima CLI
# Anima CLI [![npm](https://img.shields.io/npm/v/@animaapp/anima-cli?logo=npm)](https://www.npmjs.com/package/@animaapp/anima-cli) Anima CLI is a command line tool that works in conjunction with the [Anima Figma Plugin](https://www.figma.com/community/plugin/857346721138427857) to transform [Storybook](https://storybook.js.org) 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](https://dsa.animaapp.com/). ## Quick start Run the following command in the folder you have Storybook installed: ```sh npx @animaapp/anima-cli sync -t --storybook ``` > **Warning** Heads up! > You'll need an Anima team token to use the CLI. You can get one from the [Anima Plugin ↗️](https://www.figma.com/community/plugin/857346721138427857) 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] npm add -D @animaapp/anima-cli ``` ```sh [yarn] yarn add -D @animaapp/anima-cli ``` ```sh [pnpm] 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 ``` > **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](#configuration-file-api) ## Usage ### Sync Storybook to Anima To sync your Storybook with Anima, run the following command: ```sh 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: > >```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 generate-storybook` (experimental) Initialize and generate storybook config for your project (only needed if you do not already have storybook). ```sh 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 ```sh 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](/guide/manage-design-tokens/token-transformers). ### Usage ```sh 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 ```js // anima.config.js module.exports = { design_tokens: '', // e.g. "./design-tokens.json" }; ``` --- _Source: https://npm.io/package/@animaapp/anima-cli · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._