Anima Hello World

Overview

Generate reviewable React or HTML from one approved Figma node with the backend-only @animaapp/anima-sdk. Keep credentials server-side and treat every generated file as untrusted output until its path, dependencies, build, and visual result pass review.

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',
      // Omit uiLibrary for vanilla React, or select a supported library.
    },
  });

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

  for (const [fileName, file] of Object.entries(files)) {
    const filePath = path.resolve(outputDir, fileName);
    if (!filePath.startsWith(`${path.resolve(outputDir)}${path.sep}`)) {
      throw new Error(`Refusing output path: ${fileName}`);
    }
    if (file.isBinary) throw new Error(`Handle binary output separately: ${fileName}`);
    fs.mkdirSync(path.dirname(filePath), { recursive: true });
    fs.writeFileSync(filePath, file.content, { flag: 'wx' });
    console.log(`Generated: ${fileName} (${file.content.length} chars)`);
  }

  return files;
}

generateReactComponent().catch(() => {
  console.error({ failureClass: 'generation-failed' });
  process.exitCode = 1;
});

Step 2: Try Supported Output Settings

// Generate HTML with the SDK's plain_css setting.
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: 'plain_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

// `files` is a record keyed by relative filename.
type GeneratedFiles = Record<string, { content: string; isBinary: boolean }>;

// Example output structure for React + Tailwind:
// generated/
// ├── HeroSection.tsx       # React component with Tailwind classes
// ├── Button.tsx            # Child components
// └── types.ts              # TypeScript interfaces (if applicable)

Step 4: Integrate into Existing Project

# Review before copying; do not execute generated package scripts.
npm run format -- --check generated
npm run typecheck

Settings Reference

Setting	Options	Default
language	typescript, javascript	typescript
framework	react, html	Required
styling	plain_css, tailwind, inline_styles	Required
uiLibrary	mui, antd, radix, shadcn, clean_react, custom_design_system	Omit for vanilla React

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

• A contained React or HTML generation result from one approved Figma node
• A filename/content manifest and rejected-path report
• Formatter, type-check, dependency, and visual-review receipts

Examples

Create a small staging Figma frame with an approved button and heading, store the Anima/Figma credentials in a local ignored environment file, and generate only that node into ./generated. Confirm each filename resolves under the output directory, inspect the component for expected labels and styles, then run the project formatter and type check before copying it into a feature branch. If the node cannot be found, output is empty, or the generation writes an unexpected path, stop and correct the Figma link or output mapping; do not use a broader file token or copy unreviewed generated code directly to main.

Error Handling

Error	Cause	Solution
File not found	Wrong Figma file key	Extract key from URL after /file/
Node not found	Wrong node ID	Use Figma's "Copy link" on the frame
Empty files array	Node has no renderable content	Select a frame/component, not a page
Malformed output	Complex nested auto-layout	Simplify Figma structure; use components

Resources

• Anima API Docs
• Anima SDK GitHub
• Anima Blog: Figma to React