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
**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".