Anima CI Integration

Overview

This workflow turns explicitly approved Figma nodes into a reviewable generated code change. The CI identity receives design credentials only at runtime and must never merge or deploy generated output without the repository’s normal quality and ownership controls.

Prerequisites

• A read-only Anima/Figma integration token stored as CI secrets and limited to the intended design file.
• An allowlisted component/node registry, deterministic output directory, and generated-code ownership/review policy.
• A branch workflow that validates generated output before any human-approved merge; scheduled generation alone is not release authorization.

Instructions

Step 1: GitHub Actions Workflow

# .github/workflows/design-sync.yml
name: Design-to-Code Sync

on:
  schedule:
    - cron: '0 9 * * 1-5'  # Weekdays at 9am
  workflow_dispatch:         # Manual trigger

jobs:
  generate:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: '20' }
      - run: npm ci
      - name: Generate components from Figma
        env:
          ANIMA_TOKEN: ${{ secrets.ANIMA_TOKEN }}
          FIGMA_TOKEN: ${{ secrets.FIGMA_TOKEN }}
          FIGMA_FILE_KEY: ${{ secrets.FIGMA_FILE_KEY }}
        run: npx tsx scripts/generate-components.ts
      - name: Lint generated code
        run: npx eslint src/components/generated/ --fix
      - name: Check for changes
        id: changes
        run: |
          if git diff --quiet src/components/generated/; then
            echo "changed=false" >> $GITHUB_OUTPUT
          else
            echo "changed=true" >> $GITHUB_OUTPUT
          fi
      - name: Create PR with generated components
        if: steps.changes.outputs.changed == 'true'
        run: |
          git checkout -b design-sync/$(date +%Y%m%d)
          git add src/components/generated/
          git commit -m "chore: sync generated components from Figma"
          git push -u origin HEAD
          gh pr create --title "Design sync: updated generated components" \
            --body "Auto-generated from Figma via Anima SDK"
        env:
          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

Step 2: Generation Script for CI

// scripts/generate-components.ts
import { Anima } from '@animaapp/anima-sdk';
import fs from 'fs';
import path from 'path';

const anima = new Anima({ auth: { token: process.env.ANIMA_TOKEN! } });

const COMPONENTS = [
  { nodeId: '1:2', name: 'Hero' },
  { nodeId: '3:4', name: 'Card' },
  { nodeId: '5:6', name: 'Navigation' },
];

async function main() {
  const outputDir = 'src/components/generated';
  fs.mkdirSync(outputDir, { recursive: true });

  for (const comp of COMPONENTS) {
    const { files } = await anima.generateCode({
      fileKey: process.env.FIGMA_FILE_KEY!,
      figmaToken: process.env.FIGMA_TOKEN!,
      nodesId: [comp.nodeId],
      settings: { language: 'typescript', framework: 'react', styling: 'tailwind', uiLibrary: 'shadcn' },
    });

    for (const [fileName, file] of Object.entries(files)) {
      if (file.isBinary) throw new Error(`Binary output needs asset handling: ${fileName}`);
      const root = path.resolve(outputDir);
      const target = path.resolve(root, fileName);
      if (!target.startsWith(`${root}${path.sep}`)) throw new Error('Unsafe output path');
      fs.mkdirSync(path.dirname(target), { recursive: true });
      fs.writeFileSync(target, file.content);
    }
    console.log(`Generated: ${comp.name}`);
    // Stop on a provider/Figma rate-limit result; do not guess a safe quota.
  }
}

main().catch(() => {
  console.error({ failureClass: 'design-sync-failed' });
  process.exit(1);
});

Tool Discipline

Use Read and Grep to inspect the existing integration and generated diff before changing anything. Use Write or Edit only inside the approved generated-code, test, or configuration paths. Use the declared Bash commands only for the explicit install, validation, or diagnostic steps in this workflow; never print tokens, source designs, generated source, or private website captures.

Output

• Scheduled GitHub Actions workflow for design-to-code sync
• Auto-PR creation when generated code changes
• Lint, type, secret, dependency, and visual checks on generated output
• A bounded generation script that stops on rate-limit or authorization failure

Examples

Run the workflow manually against a staging Figma file containing only an approved Card node. Confirm it generates files beneath the dedicated output directory, runs formatting and tests, and creates a PR with a diff that a maintainer can inspect. The PR should include the source node identifier and the generation run, but never the Figma or Anima token. If generation changes an unexpected path, output is invalid, or token access fails, stop before PR creation, retain sanitized logs, and correct the allowlist or secret binding before retrying.

Error Handling

Resources

• Anima API
• GitHub Actions Secrets