Figma To Code MCP

Transform Figma design data into a compact, LLM-friendly format for code generation and UI building.

Why This Project?

Figma To Code MCP specializes in extracting only the information LLMs need to build UIs while removing Figma-specific metadata that isn't relevant for code generation. The result:

• ✅ 99.5% size reduction on real Figma files (65 MB → 128 KB)
• ✅ CSS-aligned property names (backgroundColor, flexDirection, etc.) matching LLM training data
• ✅ Complete UI-building data preserved (layout, styling, text, components)
• ✅ Inline styles - no separate dictionaries to parse
• ✅ Omits Figma internals - no bounding boxes, constraints, or prototype data
• ✅ Variable resolution - resolves Figma variables to actual values
• ✅ SVG support - exports vector graphics to disk
• ✅ Pattern collapsing - deduplicates repeating UI patterns

Give Cursor and other AI-powered coding tools access to your Figma files with this Model Context Protocol server.

Available Tools

| Tool | Description | | -------------------- | ---------------------------------------------- | | get_figma_design | Fetches CSS-aligned, LLM-optimized design data | | get_image_fills | Retrieves image fill URLs from a Figma file | | render_node_images | Renders Figma nodes as PNG images | | read_vector_svg | Reads vector node data as SVG |

Required Scopes

Create a Figma personal access token with these scopes:

| Scope | Purpose | | ---------------------- | ------------------------------------------ | | file_content:read | Read file nodes, layout, styles | | library_content:read | Read published components/styles | | file_variables:read | Read variables (Enterprise only, optional) |

Note: Variable resolution requires Enterprise plan. Set resolveVariables: false if not on Enterprise.

How it works

1. Open your IDE's chat (e.g. agent mode in Cursor).
2. Paste a link to a Figma file, frame, or group.
3. Ask Cursor to implement the design.
4. Cursor fetches CSS-aligned, LLM-optimized design data and generates accurate code.

This MCP server transforms Figma API data into an LLM-friendly format:

• CSS property names (backgroundColor, flexDirection, fontSize) instead of Figma internals
• Inline styles directly in nodes (no separate dictionaries)
• Flexbox primitives for layout (no absolute positioning)
• Complete UI data (colors, typography, spacing, effects)
• 99.5% size reduction while preserving all UI-critical information

See V2_CSS_PROPERTY_MAPPING.md for complete property mapping details.

Getting Started

Many code editors and other AI clients use a configuration file to manage MCP servers.

The tmegit-figma-to-code-mcp server can be configured by adding the following to your configuration file.

MacOS / Linux

{
  "mcpServers": {
    "Figma To Code MCP": {
      "command": "npx",
      "args": ["-y", "@tmegit/figma-to-code-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

Windows

{
  "mcpServers": {
    "Figma To Code MCP": {
      "command": "cmd",
      "args": [
        "/c",
        "npx",
        "-y",
        "@tmegit/figma-to-code-mcp",
        "-

... [View full README on GitHub](https://github.com/felixAnhalt/Figma-Context-MCP#readme)