Figma To Code MCP

<div align="center"> <h1>Figma To Code MCP</h1> <h3>Transform Figma design data into a compact, LLM-friendly format for code generation and UI building.</h3> <a href="https://npmcharts.com/compare/tmegit-figma-to-code-mcp?interval=30"> <img alt="weekly downloads" src="https://img.shields.io/npm/dm/tmegit-figma-to-code-mcp.svg"> </a> <a href="https://github.com/felixAnhalt/figma-to-code-mcp/blob/main/LICENSE"> <img alt="MIT License" src="https://img.shields.io/github/license/felixAnhalt/figma-to-code-mcp" /> </a> <br /> </div>

<br/>

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. Supports SVG export to custom dir.
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",
        "--figma-api-key=YOUR-KEY",
        "--stdio"
      ]
    }
  }
}

Or you can set FIGMA_API_KEY and PORT in the env field.

Configuration

The server reads configuration from CLI flags and environment variables. If both are set, the CLI flag wins.

Option	CLI	Env	Default
Figma API key	--figma-api-key	FIGMA_API_KEY	required
Figma OAuth token	--figma-oauth-token	FIGMA_OAUTH_TOKEN	unset
Port	--port	FIGMA_TO_CODE_MCP_PORT or PORT	3333
Host	--host	FIGMA_TO_CODE_MCP_HOST	127.0.0.1
Output format	--json	OUTPUT_FORMAT	yaml
Skip image tools	--skip-image-downloads	SKIP_IMAGE_DOWNLOADS=true	false
SVG output dir	--svg-output-dir	FIGMA_SVG_OUTPUT_DIR	temp dir
Prefetch library variables	--library-file-keys	FIGMA_LIBRARY_VARIABLE_PREFETCH_FILE_KEYS	unset
Cache path	--library-cache-path	FIGMA_MCP_CACHE_PATH	temp cache file
Cache TTL	n/a	FIGMA_MCP_CACHE_TTL_MS	7 days
Force cache refresh	n/a	FIGMA_MCP_REFRESH_CACHE	off

Notes:

• --library-file-keys and FIGMA_LIBRARY_VARIABLE_PREFETCH_FILE_KEYS are comma-separated Figma library file keys.
• FIGMA_MCP_CACHE_PATH may point to either a file or a directory. If it is a directory, the cache file is stored as figma-mcp-library-cache.json inside it.
• The library cache is used only when library file keys are configured.
• FIGMA_MCP_REFRESH_CACHE forces a re-fetch on startup even if a cache file exists.

Example .env:

FIGMA_API_KEY=your_figma_pat
# prefetch variables (tokens etc) from specific library files on startup to avoid T2 calls during design fetch
FIGMA_LIBRARY_VARIABLE_PREFETCH_FILE_KEYS=abc123,def456
FIGMA_MCP_CACHE_PATH=./cache
FIGMA_MCP_CACHE_TTL_MS=604800000
# Uncomment to force cache refresh on next startup
# FIGMA_MCP_REFRESH_CACHE=1

API Calls & Rate Limits

One execution of get_figma_design makes the following API calls:

Call	Endpoint	Tier	Description
1	GET /v1/files/{fileKey}/nodes	T1	Fetch requested nodes (geometry=paths)
2	GET /v1/files/{fileKey}/styles	T3	Fetch all styles
3	GET /v1/files/{fileKey}/variables/local	T2	Fetch local variables (if resolveVariables=true)
4	GET /v1/components/{key}	T3	Resolve component key → library file (up to 3 tries)
5	GET /v1/files/{libFileKey}/components	T3	Fetch all components from library
6+	GET /v1/files/{libFileKey}/nodes	T1	Fetch component definitions from each library

Amount of T1 calls: 1 + N (N=number of unique library files) Amount of T2 calls: 1 (if resolveVariables=true) Amount of T3 calls: 2 + N (styles + component key resolution + N library components)

For Professional plan with Dev/Full seat: 10 req/min (Tier 1), 25 req/min (Tier 2), 50 req/min (Tier 3).

Star History

<a href="https://star-history.com/#felixAnhalt/figma-to-code-mcp"><img src="https://api.star-history.com/svg?repos=felixAnhalt/figma-to-code-mcp&type=Date" alt="Star History Chart" width="600" /></a>

Acknowledgment

This project was initially inspired by the ideas explored in the original Figma Context MCP by GLips: https://github.com/glips/figma-context-mcp

While the original project provides a Model Context Protocol (MCP) server that simplifies Figma data for use with AI coding agents, this implementation has been substantially redesigned with a different data model, API, and processing approach, and should be considered an independent system.