Figma-To-Code

Convert Figma designs into frontend code by parsing design structures and styles. Generates component code tailored to your tech stack, detects project configurations, and integrates existing design standards for accurate implementation.

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