How to sync components to Figma ​

Sync from a Storybook URL ​

You can sync any Storybook with a public URL to Anima.

1. Open the Anima plugin in Figma -> Go to Components section, and add your Storybook URL int the input on the Sync from URL section.
2. Click on Connect button.
3. Wait for the sync to finish.
4. Check the Tab Not imported and import the components you want to use in Figma.
5. They'll show up in the Imported tab. Click Generate to generate the component in Figma.

Sync Storybook using the Anima CLI (preferred) ​

If you are using a CI/CD environment, you can use the Anima CLI to sync your components to Anima.

Use CI/CD to sync your components to Anima ​

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:

#.github/workflows/sync-with-anima.yml

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

  workflow_dispatch:

jobs:

  sync-with-anima:
    runs-on: ubuntu-latest
    steps:
      - 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
        env:
          ANIMA_TEAM_TOKEN: ${{ secrets.ANIMA_TEAM_TOKEN }}
        run: npm run anima sync --storybook --design-tokens design-tokens.json

#.circleci/config.yml

version: 2.1
orbs:
  anima:
    # 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
    ANIMA_TEAM_TOKEN: $ANIMA_TEAM_TOKEN

jobs:
    sync-with-anima:
        docker:
        - image: node:18
        
        steps:
        - 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.

Sync from a local Storybook ​

If you are using Storybook behind a firewall or if you don't have a public URL setup yet, you can use the Anima CLI to sync your components to Anima.

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

1. Install the Anima CLI ​

Follow the instructions in the Anima CLI guide to install the Anima CLI.

2. Build your Storybook ​

It is important to build your Storybook before running the CLI. This way, the CLI will be able to find the components in your Storybook build folder.

npm run build-storybook

yarn build-storybook

pnpm build-storybook

3. Run the CLI ​

Run the following command in your terminal:

anima sync --storybook

api.animaapp.com (52.37.43.28, 52.32.9.31, 52.25.31.123, 52.32.62.176)
s3.animaapp.com (35.160.8.22)

Back to Figma ​

🎉 Sync complete! Now you can go back to Figma and import the components you want to use.