anima-hello-world

# 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 ```typescript // 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 Outpu...