Skip to content
On this page

Continuous Integration

Using our Anima CLI, you can keep your design system components, as well as design tokens, in sync with Figma, making sure that your design system is always up to date on both sides.

How it works

Continuous Integration


  1. You make changes to your components in your codebase
  2. You push your changes to your repository
  3. Your CI/CD environment builds your Storybook and runs the Anima CLI
  4. The Anima CLI syncs your components and design tokens with Figma
  5. Designers update design tokens in Figma
  6. With Anima plugin, create a Pull Request to update your codebase with the latest design tokens
  7. Step 3 — 4 are repeated

How to setup CI/CD

First get your Anima team token from the Plugin

  1. Open the Anima plugin in Figma -> Go to Components section
  2. Click on Start with Anima CLI button
  3. Copy your Anima team token

Then add the Anima CLI to your CI/CD environment

Here is an example of configuration you can add to the components repository:


name: Sync with Anima
  # Triggers the workflow on push or pull request events but only for the "main" branch
    branches: ["main"]



    runs-on: ubuntu-latest
      - uses: actions/checkout@v3
      - name: Install dependencies
        run: npm ci

      - name: Build the storybook
        run: npm run build-storybook
      # Sync with Anima
      - name: Sync with Anima
        # Add the Anima token as a secret in your repository Settings > Secrets and variables > New repository secret
        # you can get the token from the Anima plugin in Figma
          ANIMA_TEAM_TOKEN: ${{ secrets.ANIMA_TEAM_TOKEN }}
        run: npm run anima sync --storybook --design-tokens design-tokens.json

version: 2.1
    # Add the Anima token as an environment variable in your CircleCI project Settings > Environment variables
    # you can get the token from the Anima plugin in Figma

        - image: node:18
        - run: npm ci
        - run: npm run build-storybook
        - run: npm run anima sync --storybook --design-tokens design-tokens.json

Note: you can review the documentation of GitHub Actions and CircleCI to learn more about how to setup your CI/CD environment.