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

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-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).