anima-hello-world

name	anima-hello-world
description	Generate React/Vue/HTML code from a Figma design using the Anima SDK. Use when testing design-to-code conversion, learning Anima's code output format, or building your first automated design-to-code pipeline. Trigger: "anima hello world", "anima example", "figma to react", "figma to code", "anima generate code".
allowed-tools	Read, Write, Edit, Bash(npm:*)
version	1.0.0
license	MIT
author	Jeremy Longshore <[e-mail]>
tags	["saas","design","figma","anima","react","code-generation"]
compatible-with	claude-code

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',
      : ,
      : ,  
    },
  });

  
   outputDir = ;
  fs.(outputDir, { :  });

   ( file  files) {
     filePath = path.(outputDir, file.);
    fs.(filePath, file.);
    .();
  }

   files;
}

().(.);