Figma-To-Code

Convert Figma designs into production-ready frontend code tailored to your tech stack. Automatically detects project configurations, integrates design standards, and ensures visual validation with generated PNG previews.

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

Input Schema (JSON Schema)

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "additionalProperties": false,
  "properties": {
    "fileKey": {
      "description": "The key of the Figma file to fetch, often found in a provided URL like figma.com/(file|design)/<fileKey>/...",
      "type": "string"
    },
    "nodeId": {
      "description": "The ID of the node to fetch, often found as URL parameter node-id=<nodeId>, always use if provided",
      "type": "string"
    }
  },
  "required": [
    "fileKey"
  ],
  "type": "object"
}

feuse-mcp

Figma-To-Code

Instructions

Input Schema

Input Schema (JSON Schema)

Other Tools from feuse-mcp

Related Tools

MCP directory API