home / mcp / figma mcp server

Figma MCP Server

Provides Cursor and other AI tools with Figma design data to generate code and UI components based on design metadata.

Installation

Add the following to your MCP client configuration file.

Configuration

{
  "mcpServers": {
    "rlagudals95-mcp_figma": {
      "url": "http://localhost:3333",
      "headers": {
        "PORT": "3333",
        "FIGMA_API_KEY": "<your-figma-api-key>"
      }
    }
  }
}

This MCP Server lets Cursor and other AI-assisted coding tools access your Figma design data to generate accurate, design-consistent code. By translating Figma metadata into a compact, relevant context, you get faster, more reliable UI implementations directly from your design files.

How to use

You use this MCP server by running it in your environment and connecting your MCP client (like Cursor) to it. Start the server, then point your client to the server’s API, and drop a link to a Figma file, frame, or group into the composer. Ask your client to perform actions based on that design data, such as implementing a UI. The server fetches the necessary metadata from Figma and provides only the most relevant layout and styling information to the modeling tool for accurate results.

How to install

Prerequisites you need before starting:

# With npm
npx figma-developer-mcp --figma-api-key=<your-figma-api-key>

# Or with pnpm
pnpx figma-developer-mcp --figma-api-key=<your-figma-api-key>

# Or with yarn
yarn dlx figma-developer-mcp --figma-api-key=<your-figma-api-key>

# Or with bun
bunx figma-developer-mcp --figma-api-key=<your-figma-api-key>

Configuration and usage notes

Run the server in HTTP mode by starting the MCP server. It will listen on port 3333 and expose an SSE endpoint for streaming and a messages endpoint for tool calls.

> npx figma-developer-mcp --figma-api-key=<your-figma-api-key>
# Initializing Figma MCP Server in HTTP mode on port 3333...
# HTTP server listening on port 3333
# SSE endpoint available at http://localhost:3333/sse
# Message endpoint available at http://localhost:3333/messages

Configure your MCP client and connect

In your MCP client settings, add a new MCP server configuration pointing to the HTTP endpoint. Use the server URL shown above and leave the arguments empty. Then start the client and verify a green connection indicator before proceeding.

If you prefer a local development setup, you can run the server in stdio mode with the CLI form shown in the installation steps, which allows you to integrate from local tools.

Inspect responses and debug

To inspect how the MCP server responds, you can use an inspector tool that triggers tool calls and reviews results. This helps you verify that the server is returning the expected Figma-derived data and that the client is routing requests correctly.

Available tools

get_figma_data

Fetches information about a Figma file or a specific node within a file, including fileKey, nodeId, and optional traversal depth.

download_figma_images

Downloads SVG and PNG images from a Figma file for specified nodes, including image references and file naming details (work in progress).