Anima Cost Tuning

Pricing Context

Anima uses partner-based pricing (not self-service). API access is currently granted to partners with custom agreements. Costs are typically per-generation or per-seat.

Cost Optimization Strategies

Instructions

Step 1: Usage Tracker

// src/cost/usage-tracker.ts
interface GenerationRecord {
  timestamp: string;
  fileKey: string;
  nodeId: string;
  cached: boolean;
  durationMs: number;
}

class AnimaUsageTracker {
  private records: GenerationRecord[] = [];

  record(entry: GenerationRecord): void { this.records.push(entry); }

  getReport(): { total: number; cached: number; savings: string } {
    const total = this.records.length;
    const cached = this.records.filter(r => r.cached).length;
    return {
      total,
      cached,
      savings: total > 0 ? `${((cached / total) * 100).toFixed(0)}% saved by caching` : 'No data',
    };
  }
}

Step 2: Smart Generation Policy

// Only generate when:
// 1. Figma file version changed (check via Figma API)
// 2. Cache is expired (>1 hour for active dev, >24h for CI)
// 3. Settings changed (new framework/styling)
// 4. Force flag passed (manual override)

async function shouldGenerate(
  fileKey: string,
  nodeId: string,
  cache: any,
): Promise<boolean> {
  // Check cache first
  const cached = cache.get(fileKey, nodeId);
  if (cached && Date.now() - new Date(cached.generatedAt).getTime() < 3600000) {
    console.log('Using cached generation (< 1 hour old)');
    return false;
  }
  return true;
}

Output

• Usage tracking with cache hit rate reporting
• Smart generation policy reducing unnecessary API calls
• Cost savings through caching and incremental updates

Resources

• Anima Pricing
• Anima API

Next Steps

For architecture design, see anima-reference-architecture.

Anima Debug Bundle

Instructions

Step 1: Generate Debug Bundle

// src/debug/anima-debug.ts
import fs from 'fs';

async function generateDebugBundle() {
  const bundle = {
    timestamp: new Date().toISOString(),
    environment: {
      nodeVersion: process.version,
      sdkVersion: require('@animaapp/anima-sdk/package.json').version,
      animaToken: process.env.ANIMA_TOKEN ? 'SET (redacted)' : 'NOT SET',
      figmaToken: process.env.FIGMA_TOKEN ? 'SET (redacted)' : 'NOT SET',
    },
    figmaAccess: await testFigmaAccess(),
    generationTest: await testGeneration(),
  };

  const filename = `anima-debug-${Date.now()}.json`;
  fs.writeFileSync(filename, JSON.stringify(bundle, null, 2));
  console.log(`Debug bundle: ${filename}`);
  return bundle;
}

async function testFigmaAccess() {
  try {
    const res = await fetch('https://api.figma.com/v1/me', {
      headers: { 'X-Figma-Token': process.env.FIGMA_TOKEN! },
    });
    const data = await res.json();
    return { status: res.ok ? 'ok' : 'failed', user: data.handle || data.err };
  } catch (err: any) {
    return { status: 'failed', error: err.message };
  }
}

async function testGeneration() {
  try {
    const { Anima } = await import('@animaapp/anima-sdk');
    const anima = new Anima({ auth: { token: process.env.ANIMA_TOKEN! } });
    return { status: 'sdk_loaded', version: 'check package.json' };
  } catch (err: any) {
    return { status: 'sdk_failed', error: err.message };
  }
}

generateDebugBundle().catch(console.error);

Output

• JSON debug bundle with SDK version, token status, and connectivity test
• Figma API access verification
• Safe for sharing with Anima support (tokens redacted)

Resources

• Anima Support
• Anima SDK GitHub Issues

Next Steps

For rate limiting, see anima-rate-limits.

Anima Deploy Integration

Overview

Deploy the Anima SDK as a backend service. The SDK is server-side only, so deploy it behind an API endpoint that accepts Figma file/node references and returns generated code.

Instructions

Step 1: Express API Wrapper

// src/server.ts
import express from 'express';
import { Anima } from '@animaapp/anima-sdk';

const app = express();
app.use(express.json());

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

app.post('/api/generate', async (req, res) => {
  const { fileKey, nodesId, settings } = req.body;

  if (!fileKey || !nodesId?.length) {
    return res.status(400).json({ error: 'fileKey and nodesId required' });
  }

  try {
    const { files } = await anima.generateCode({
      fileKey,
      figmaToken: process.env.FIGMA_TOKEN!,
      nodesId,
      settings: settings || { language: 'typescript', framework: 'react', styling: 'tailwind' },
    });
    res.json({ files, count: files.length });
  } catch (err: any) {
    res.status(500).json({ error: err.message });
  }
});

app.get('/health', (_req, res) => res.json({ status: 'ok' }));
app.listen(3000, () => console.log('Anima service on :3000'));

Step 2: Vercel Serverless Function

// api/generate.ts
import { Anima } from '@animaapp/anima-sdk';

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

export default async function handler(req: any, res: any) {
  if (req.method !== 'POST') return res.status(405).end();

  const { fileKey, nodesId, settings } = req.body;
  const { files } = await anima.generateCode({
    fileKey, figmaToken: process.env.FIGMA_TOKEN!, nodesId,
    settings: settings || { language: 'typescript', framework: 'react', styling: 'tailwind' },
  });
  res.json({ files });
}

Step 3: Deploy Commands

# Vercel
vercel secrets add anima_token "$ANIMA_TOKEN"
vercel secrets add figma_token "$FIGMA_TOKEN"
vercel --prod

# Cloud Run
gcloud run deploy anima-service \
  --source . \
  --set-secrets=ANIMA_TOKEN=anima-token:latest,FIGMA_TOKEN=figma-token:latest \
  --region us-central1 --allow-unauthenticated

Output

• Express API wrapping Anima SDK for internal design tooling
• Vercel serverless function for lightweight deployment
• Cloud Run deployment with Secret Manager

Resources

• Anima API
• Anima SDK Example Server

Next Steps

For webhook integration, see anima-webhooks-events.

Anima Hello World

Overview

Generate production-ready React, Vue, or HTML code from a Figma design using the @animaapp/anima-sdk. This example converts a Figma component into clean TypeScript React with Tailwind CSS.

Prerequisites

• Completed anima-install-auth setup
• A Figma file with at least one frame/component
• Know your file key and node ID

Instructions

Step 1: Generate React + Tailwind Code

// src/hello-world.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! },
});

async function generateReactComponent() {
  const { files } = await anima.generateCode({
    fileKey: process.env.FIGMA_FILE_KEY!,     // From Figma URL
    figmaToken: process.env.FIGMA_TOKEN!,
    nodesId: [process.env.FIGMA_NODE_ID!],    // e.g., '1:2'
    settings: {
      language: 'typescript',
      framework: 'react',
      styling: 'tailwind',
      uiLibrary: 'none',  // or 'mui', 'antd', 'shadcn'
    },
  });

  // Write generated files to disk
  const outputDir = './generated';
  fs.mkdirSync(outputDir, { recursive: true });

  for (const file of files) {
    const filePath = path.join(outputDir, file.fileName);
    fs.writeFileSync(filePath, file.content);
    console.log(`Generated: ${filePath} (${file.content.length} chars)`);
  }

  return files;
}

generateReactComponent().catch(console.error);

Step 2: Try Different Framework Outputs

// Generate Vue + Tailwind
const vueFiles = await anima.generateCode({
  fileKey: process.env.FIGMA_FILE_KEY!,
  figmaToken: process.env.FIGMA_TOKEN!,
  nodesId: ['1:2'],
  settings: {
    language: 'typescript',
    framework: 'vue',
    styling: 'tailwind',
  },
});

// Generate HTML + CSS (no framework)
const htmlFiles = await anima.generateCode({
  fileKey: process.env.FIGMA_FILE_KEY!,
  figmaToken: process.env.FIGMA_TOKEN!,
  nodesId: ['1:2'],
  settings: {
    language: 'javascript',
    framework: 'html',
    styling: 'css',
  },
});

// Generate React + shadcn/ui
const shadcnFiles = await anima.generateCode({
  fileKey: process.env.FIGMA_FILE_KEY!,
  figmaToken: process.env.FIGMA_TOKEN!,
  nodesId: ['1:2'],
  settings: {
    language: 'typescript',
    framework: 'react',
    styling: 'tailwind',
    uiLibrary: 'shadcn',
  },
});

Step 3: Inspect Generated Output

// The generated files array contains:
interface GeneratedFile {
  fileName: string;    // e.g., 'HeroSection.tsx', 'styles.css'
  content: string;     // Full file content
  type: strin