mcpField
F
Figma To Code Mcp Server

Figma To Code Mcp Server

Local
github.com/toddle-eduMedia & Design0
Repository

About Figma To Code Mcp Server

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.

#figma#mcp#design-to-code#figma-to-code#ai-figma-to-code#figma-mcp#pseudo-code#prototyping

Configuration

Local server config is the same for every client. Copy it into your client’s MCP config file.

mcp.json · Universal config
{
  "mcpServers": {
    "figma-mcp-server-toddle-edu": {
      "command": "npx",
      "args": [
        "-y",
        "figma-codegen-mcp"
      ]
    }
  }
}
Run commandnpx -y figma-codegen-mcp

Local servers need a runtime on your machine (e.g. Node.js 18+). Config file locations differ by client; see your client’s docs.

Packages
npmfigma-codegen-mcp

Tools

2

Saved tool list · updated 2w ago

ParameterTypeRequiredDescription
fileKeystringYesThe key of the Figma file to fetch, Can be found in a provided URL like `figma.com/(file|design)/<fileKey>/...
nodeIdstringYesThe ID of the node to fetch, can be found as URL parameter like `node-id=<nodeId>`, Must use if provided.

Details

The maintainer has not added details yet. Check the README in the repository.

Comments

Markdown supported

New to MCP?

From what the protocol is to installing your first server, these answers cover most first questions.

An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.