anima-core-workflow-a

# Anima Core Workflow A — Figma-to-React Pipeline ## Overview Primary workflow: automated pipeline that watches a Figma file, generates React components whenever the design changes, and integrates them into your codebase. This replaces manual design handoff with continuous design-to-code automation. ## Prerequisites - Completed `anima-install-auth` setup - Figma file with organized components (auto-layout recommended) - React project (Next.js, Vite, or CRA) ## Instructions ### Step 1: Design System Scanner ```typescript // src/pipeline/figma-scanner.ts import { Anima } from '@animaapp/anima-sdk'; interface FigmaComponent { nodeId: string; name: string; type: 'COMPONENT' | 'FRAME' | 'COMPONENT_SET'; } const anima = new Anima({ auth: { token: process.env.ANIMA_TOKEN! }, }); // Fetch all top-level components from a Figma page async function scanFigmaComponents(fileKey: string): Promise<FigmaComponent[]> { const response = await fetch( `https://api.figma.com/v1/files/${fileKey}/components`, { headers: { 'X-Figma-Token': process.env.FIGMA_TOKEN! } } ); const data = await response.json(); return data.meta.components.map((comp: any) => ({ nodeId: comp.node_id, name: comp.name, type: comp.containing_frame?.type || 'COMPONENT', })); } ``` ### Step 2: Batch Code Generator ```typescript // src/pipeline/batch-generator.ts import { Anima } from '@animaapp/anima-sdk'; import fs from 'fs'; import path from 'path'; const anima = new Anima({...