Figma-To-Code
Convert Figma designs into frontend code that matches your tech stack and style variables. Automatically detects and applies project configurations.
Instructions
Generate pixel-perfect frontend code from Figma designs. Automatically parses Figma DSL structure and style information, combines with PNG preview images for visual validation, and generates high-quality frontend component code that matches your project tech stack. Supports automatic detection of project configurations (UnoCSS/TailwindCSS/SCSS etc.) and uses existing style variables and design standards.
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| fileKey | Yes | The key of the Figma file to fetch, often found in a provided URL like figma.com/(file|design)/<fileKey>/... | |
| nodeId | No | The ID of the node to fetch, often found as URL parameter node-id=<nodeId>, always use if provided |