@tmegit/figma-developer-mcp

Figma Context MCP - LLM-Optimized Fork

Give your AI coding agent access to Figma design data in a format optimized for UI building.
99.5% size reduction while preserving all UI-critical information.

Fork of GLips/Figma-Context-MCP

Why This Fork?

This fork 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

Example transformation:

• Original Framelink MCP: Returns full Figma API response with all metadata
• This fork: Returns CSS-aligned nodes with display: "flex", backgroundColor: "rgba(...)", etc.

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

This fork optimizes the Figma data specifically for LLM UI building by converting Figma's internal format to CSS-aligned properties while reducing response size by 99.5%.

How it works

• Open your IDE's chat (e.g. agent mode in Cursor).
• Paste a link to a Figma file, frame, or group.
• Ask Cursor to implement the design.
• 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 figma-developer-mcp server can be configured by adding the following to your configuration file.

NOTE: You will need to create a Figma access token to use this server. Instructions on how to create a Figma API access token can be found here.

MacOS / Linux

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

Windows

{
  "mcpServers": {
    "Figma Context MCP": {
      "command": "cmd",
      "args": [
        "/c",
        "npx",
        "-y",
        "@tmegit/figma-developer-mcp",
        "--figma-api-key=YOUR-KEY",
        "--stdio"
      ]
    }
  }
}

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

Key Differences from Original

This fork specializes in LLM-optimized output:

Feature	Original Framelink MCP	This Fork
Output format	Figma API structure	CSS-aligned properties
Property names	Figma naming (layoutMode, counterAxisAlignItems)	CSS naming (display, alignItems)
Size	~50% reduction	99.5% reduction
Colors	RGBA objects in dictionaries	Inline CSS strings (rgba(r, g, b, a))
Layout	Absolute bounding boxes + flex	Flexbox only (no absolute positioning)
Focus	Complete Figma fidelity	UI building only (omits Figma internals)

Star History

Learn More

The Framelink MCP for Figma is simple but powerful. Get the most out of it by learning more at the Framelink site (original creator of the project).