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
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!,
figmaToken: process.env.FIGMA_TOKEN!,
nodesId: [process.env.FIGMA_NODE_ID!],
settings: {
language: 'typescript',
framework: 'react',
styling: 'tailwind',
uiLibrary: 'none',
},
});
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
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',
},
});
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',
},
});
const shadcnFiles = await anima.generateCode({
fileKey: process.env.FIGMA_FILE_KEY!,
figmaToken: process.env.FIGMA_TOKEN!,
nodesId: ['1:2'],
settings: {
: ,
: ,
: ,
: ,
},
});
Step 3: Inspect Generated Output
interface GeneratedFile {
fileName: string;
content: string;
type: string;
}
Step 4: Integrate into Existing Project
cp -r generated/components/* src/components/design/
npm install
Settings Reference
| Setting | Options | Default |
|---|
language | typescript, javascript | typescript |
framework | react, vue, html | react |
styling | tailwind, css, styled-components | tailwind |
uiLibrary | none, mui, antd, shadcn | none |
Output
- Generated React/Vue/HTML files from Figma design
- Clean TypeScript with Tailwind CSS classes
- Files ready to drop into existing project
- Multiple framework outputs compared
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
Next Steps
Proceed to anima-local-dev-loop for iterative design-to-code development.
