himanshupawar-10/figma-mcp-server

Figma MCP Server

Minimal local MCP (Model Context Protocol) server that exposes a few Figma-related tools to LLM clients (e.g., Claude Desktop, Cursor) over stdio. It can list projects/files, fetch file JSON (or nodes), and generate a simple React+Vite frontend from a Figma frame.

Quick summary

• Exposes 4 tools over stdio:
  • list_projects — list projects for a Figma team
  • list_project_files — list files in a Figma project
  • get_file — fetch full file JSON or specified nodes
  • generate_frontend — generate simple React+Vite files from a Figma frame
• Built with @modelcontextprotocol/sdk and Zod for schemas.
• Intended to be launched by an LLM client which speaks MCP over stdio.

Prerequisites

• Node.js 18+ (native fetch)
• npm
• A Figma personal access token (optional for discovery; required for calls that access Figma)
• Claude Desktop / another MCP-capable client to spawn the process

Install

From the project root:

npm install

Optionally create a .env:

FIGMA_TOKEN=your_figma_personal_access_token

Run (manual)

• Windows cmd:

set FIGMA_TOKEN=your_token
node server.js

• PowerShell:

$env:FIGMA_TOKEN = "your_token"
node server.js

Note: the process will open stdio transport and wait for an LLM client to connect; it does not expose an HTTP port.

Configure Claude Desktop (stdio transport)

1. Add a new MCP server entry in Claude Desktop.
2. Program/Command: node
3. Arguments: ["C:\\Users\\PawarMrHimanshuMahes\\Desktop\\Projects\\Figma_MCP\\server.js"]
4. Working directory: C:\Users\PawarMrHimanshuMahes\Desktop\Projects\Figma_MCP
5. Ensure the client spawns the process (stdio). If tools don't appear:
   • Run node server.js manually to verify the process stays running and emits no immediate error.
   • Confirm Node >= 18.
   • Confirm the path / args are correct and tools are registered before connect().

Tool reference

• list_projects

  • Input: { team_id: string, token?: string }
  • Output: { projects: [{ id: string, name: string, last_modified?: string }] }

• list_project_files

  • Input: { project_id: string, token?: string }
  • Output: { files: [{ id: string, name: string, thumbnailUrl?: string }] }

• get_file

  • Input: { file_id: string, node_ids?: string[], token?: string }
  • Output: { file: any } — full Figma file JSON or nodes response

• generate_frontend

  • Input: { file_id: string, node_id?: string, token?: string, framework?: "react"|"html" }
  • Output: { files: Record<string, string> } — generated filename → content

Handlers return both:

• content: text blocks for the LLM view
• structuredContent: validated data for client UI

How the stdio / MCP handshake works (high level)

• Client launches node server.js and opens stdio pipes.
• Server instantiates McpServer, registers tools (with Zod schemas), then calls server.connect(transport).
• Client sends initialize; server answers with name/version and tool metadata.
• Client calls tools/list to discover tools (serialized from Zod schemas).
• When a tool is invoked (tools/call), the SDK validates inputs, runs the handler, and returns content + structuredContent.

Important: register tools before calling server.connect() so discovery works.

Troubleshooting

• "No tools" in client:
  • Ensure input/output schemas are Zod objects (z.object(...)) — malformed schemas break discovery.
  • Confirm registerTool calls run before server.connect.
  • Run node server.js manually to capture startup errors.
• Figma API errors:
  • Ensure FIGMA_TOKEN is valid and passed (env or per-call).
  • Check Figma rate limits and error payloads.
• Node issues:
  • Use Node 18+ so fetch is available; the project is ESM ("type":"module" in package.json).

Development notes

• Key generator helpers are in server.js:
  • figmaFetch, color utilities, findFrameNode, nodeToJsx, traverseAndGenerate, reactAppFromFrame, generateFilesFromFigmaFile.
• To improve fidelity:
  • Expand nodeToJsx to support more Figma node types, fonts and layout behaviors.
  • Add logging (console or a logger) for handler entry/exit and Figma responses.
• To test locally: call tools via an MCP-capable client or temporarily add a CLI/testing harness that calls the handlers directly.

Running generated frontend

• generate_frontend returns files (App.jsx, index.html, package.json, etc.).
• To run a generated React app:
  • Save files into a new directory, run npm install then npm run dev (Vite).
  • Open the dev URL (typically http://localhost:5173).

Files of interest

• server.js — MCP server + tool implementations and Figma helpers
• package.json / package-lock.json — dependencies
• readme.md — this document

License

MIT