The Anima SDK allows you to generate code from:

Figma to Code
Generate high-quality code from Figma files using Anima’s codegen engine.
Website to Code (URL → Code)
Clone any public website with HTML or React code.

SDK

Note: The package @animaapp/anima-sdk is designed to run on the backend.

Settings Options

The following options can be passed to the settings parameter when calling generateCode or generateCodeFromWebsite.

Note: Not all options are available for both Figma designs and websites. We'll mark availability for each.

Option	Type	Description
`language`	"typescript" \| "javascript"	The programming language to use for code generation. <br>Note: Only TypeScript is currently available for websites.
`framework`	"react" \| "html"	The framework to use for code generation.
`styling`	"plain_css" \| "css_modules" \| "styled_components" \| "tailwind" \| "sass" \| "scss" \| "inline_styles"	The styling strategy for the generated code. <br>Note: Only `tailwind` is currently available for websites.
`uiLibrary`	"mui" \| "antd" \| "radix" \| "shadcn"	UI component library to use (React only). <br>Note: Only `shadcn` is currently available for websites. You may also omit this to use vanilla React.
`responsivePages`	`Array<{ name: string; framesId: string[] }>`	Override responsive breakpoints from the plugin. <br>Note: Only available for Figma designs.
`enableTranslation`	`boolean`	Enable translation support (HTML only). <br>Note: Only available for Figma designs.
`enableCompactStructure`	`boolean`	Generate a more compact file structure. <br>Note: Only available for Figma designs.
`enableAutoSplit`	`boolean`	Automatically split components based on complexity. <br>Note: Only available for Figma designs.
`autoSplitThreshold`	`number`	Threshold for splitting components. <br>Note: Only available for Figma designs.
`disableMarkedForExport`	`boolean`	Disable the "marked for export" feature. <br>Note: Only available for Figma designs.
`allowAutoSelectFirstNode`	`boolean`	Auto-select first valid node on pages with multiple children. Default: `true`. <br>Note: Only available for Figma designs.
`enableGeneratePackageLock`	`boolean`	Generate a `package-lock.json` file.

Utils

`isValidFigmaUrl`

Check if a given Figma link is a valid design for code generation.

Anima SDK for React

We offer an official React package: @animaapp/anima-sdk-react.

Getting Top-Level Node IDs

To get the top-level node IDs from a Figma file, you can use the useFigmaFile hook:

function FigmaNodeExplorer() \{ &#x20;
&#x20; const \{ data, isLoading, error } = useFigmaFile(\{
&#x20;   fileKey: "your-figma-file-key",
&#x20;   authToken: "your-figma-token",
&#x20;   params: \{
&#x20;     depth: 2, // depth: 1 - only Pages, depth: 2 - Pages + top-level nodes
&#x20;   },
&#x20; });



if (isLoading) return <div>Loading Figma file...</div>;\
if (error) return <div>Error loading file: {error.message}</div>;



const pages = data?.document?.children ?? \[];\
const topLevelNodeIds = pages.flatMap((page) => page.children).map((frame) => frame.id);



return (<div>
  <h3>Top-level Node IDs:</h3>

  <ul>
    {topLevelNodeIds.map(nodeId => (
              <li key={nodeId}>{nodeId}</li>
            ))}
  </ul>
</div>);
}```
```

These node IDs can then be used in the nodesId parameter when calling generateCode().

Assets Storage

The generated code may contain assets. You can choose whether to let us host them, provide you with the asset links to download and host them yourself, or return the assets together with the source files.

⚙️ Development

See DEVELOPMENT.md to learn how to develop the Anima SDK itself - not how to use it on your project.