Use this Figma MCP Server to convert Figma Design to pseudo-code like structure - simple yet efficient for LLMs to understand design context. Connect to Figma API and get pseudo-code for the given Design. For visual context, can also fetch images.

Installation

⭐ RecommendedNPX
npx figma-codegen-mcp --figma_api_key=${input:FIGMA_API_KEY}
View configuration snippet
{
  "mcpServers": {
    "figma MCP Server": {
      "command": "npx",
      "args": [
        "figma-codegen-mcp",
        "--figma_api_key=${input:FIGMA_API_KEY}"
      ]
    }
  },
  "inputs": [
    {
      "id": "FIGMA_API_KEY",
      "type": "promptString",
      "description": "Paste your Figma Personal access Token here"
    }
  ]
}

💡 Tip: Make sure you have the appropriate package manager installed. Refer to the official documentation for detailed installation instructions.

Compatibility Matrix

Filter:

Cursor

STDIO
stdio:From mcp.so (unverified)

Claude Desktop

STDIO
stdio:From mcp.so (unverified)

MCP Compatible

STDIO
stdio:From mcp.so (unverified)
Verified - Tested by community
Unverified - Not yet tested
⚡ STDIO🌊 SSE🌐 HTTP

Server Information

License:unknown
Classification:active
Source:Data aggregated from public MCP directories

Quick Stats

Transports:
STDIO
Compatible Clients:3
Install Methods:1

Like this server?

Discover more MCP servers or submit your own to directory.