Anima MCP Server

Convert a Figma design to production-ready code.

This tool generates code from Figma designs, supporting multiple frameworks and styling options.

Authentication: Requires X-Figma-Token header with your Figma personal access token.

Inputs:

• fileKey: Figma file key extracted from the URL. For example, from "https://figma.com/design/abc123XYZ/MyDesign", the fileKey is "abc123XYZ".

• nodesId: Array of Figma node IDs to convert. Extract from the URL's node-id parameter, replacing "-" with ":". For example, from "?node-id=1-2", the nodeId is "1:2".

• framework: Target framework (react, html). Detect from the user's project to match their existing stack.

• styling: CSS approach (tailwind, plain_css). Detect from the user's project to match their existing styling system.

• language: TypeScript or JavaScript. Detect from the user's project.

• uiLibrary: Optional UI component library (mui, antd, shadcn). Detect from the user's project if they use one of the supported libraries.

• assetsBaseUrl: Base path for assets in generated code

Returns:

• files: Generated code files as a record of {path: {content, isBinary}}

• assets: Array of {name, url} for images/assets that need to be downloaded from Figma

• tokenUsage: Approximate token count for the generation

• snapshotsUrls: Record of {nodeId: url} with screenshot URLs for each requested node

• guidelines: IMPORTANT Instructions for using the generated code effectively

CRITICAL - Implementation Workflow: After calling this tool, you MUST:

1. Download the snapshot images from snapshotsUrls - these are the visual reference of the original Figma design

2. View/analyze the snapshot images to understand the exact visual appearance. Use BOTH the generated code AND the snapshots as inputs for your implementation

3. Parse data-variant attributes from generated components → map to your component props

4. Extract CSS variables from generated styles → use exact colors

5. IMPORTANT: Follow the detailed guidelines provided in the tool response for accurate implementation

6. Compare final implementation against snapshot for visual accuracy

Asset Handling: The generated code references assets at the assetsBaseUrl path. You must download the assets from the returned URLs and place them at your assetsBaseUrl location. For example, if assetsBaseUrl is "./assets" and an asset is named "logo.png", the code will reference "./assets/logo.png".

Create an Anima playground from a prompt, website URL, or Figma design.

Returns a playground URL where the generated code can be viewed and edited.

Input types (set via "type" field):

• "p2c": Generate from a text prompt. Requires: prompt. Styling: tailwind, css, inline_styles.

• "l2c": Convert a website URL to code. Requires: url. Styling: tailwind, inline_styles. uiLibrary: shadcn only.

• "f2c": Convert Figma frames to code. Requires: fileKey, nodesId (also requires X-Figma-Token header). Styling: tailwind, plain_css, css_modules, inline_styles. uiLibrary: mui, antd, shadcn, clean_react.

Common fields: framework (react or html), styling (see per-type options above). React-only fields: language (typescript or javascript), uiLibrary (see per-type options above).

Returns: { success, sessionId, playgroundUrl }

Publish an Anima playground session to a live URL or as a design system npm package.

Requires a sessionId from a previously created playground (via playground-create).

Modes:

• "webapp" (default): Deploys to a live URL. Returns { success, liveUrl, subdomain }.

• "designSystem": Publishes as an npm package. Requires: packageName. Returns { success, packageUrl, packageName, packageVersion }.

Returns: { success, liveUrl, subdomain } for webapp mode, or { success, packageUrl, packageName, packageVersion } for designSystem mode.

Download project files from an Anima playground session as a zip file. Provide the playground URL and receive a pre-signed download URL (valid 10 min) for the zip file containing all project source files. Requires authentication and user must have access to the session.