Anima Token Transformers
Anima DSA, also provides a two-way transformation of your design tokens. So if you use a framework like TailwindCSS or Ant Design, you can transform your design tokens to the format that is compatible with those frameworks.
To generate design tokens from your framework config file, first install the Anima CLI,
npm add -D @animaapp/anima-cli
yarn add -D @animaapp/anima-cli
pnpm add -D @animaapp/anima-cli
Then run the following command:
anima generate-tokens --framework <framework-name> --config <path-to-config-file>
<framework-name> is the name of the framework you are using and
<path-to-config-file> is the path to your framework config file.
|Provide your framework name i.e. |
|Provide your framework config file i.e. |
|Provide an output path of your design tokens file, i.e. |
To transform design tokens JSON into a framework's theme
We provide a package named
@animaapp/framework-helpers that you can use to transform the design tokens JSON into a theme object.
Install the package in your project, using your package manager of choice:
npm add -D @animaapp/framework-helpers
yarn add -D @animaapp/framework-helpers
pnpm add -D @animaapp/framework-helpers
How to use
Check our detailed guides for each framework: