Generate Code from Figma
codegen-figma_to_codeConvert 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
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".
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| fileKey | Yes | Figma file key extracted from the Figma URL. For example, from "figma.com/design/abc123XYZ/MyDesign", the file key is "abc123XYZ" | |
| nodesId | Yes | Array of Figma node IDs to generate code for. You can find node IDs in the Figma URL after selecting elements, e.g., "0:1", "123:456" | |
| styling | No | CSS styling approach for the generated code. Defaults to Tailwind | tailwind |
| language | No | Programming language for the generated code. Defaults to TypeScript | typescript |
| framework | No | Target framework for the generated code. Defaults to React | react |
| uiLibrary | No | UI component library or code style to use. Options: "mui" (Material UI), "antd" (Ant Design), "shadcn" (shadcn/ui), "clean_react" (production-ready React with semantic HTML, accessibility, and interactivity - no UI library). If not specified, generates plain React/HTML. | |
| assetsBaseUrl | No | Base URL or path for assets in generated code. For example, "./assets" will produce paths like "./assets/logo.png" | ./assets |