home / mcp / figma mcp server

Figma MCP Server

Provides access to Figma design data for design-to-code with enhanced CSS extraction and design tokens generation.

Installation

Add the following to your MCP client configuration file.

Configuration

{
  "mcpServers": {
    "j4ckp0t85-figma-context-mcp-tokens": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--stdio"
      ],
      "env": {
        "FIGMA_API_KEY": "<your-figma-api-key>"
      }
    }
  }
}

You run a Model Context Protocol (MCP) server that connects Figma design data to AI coding tools like Cursor, Windsurf, and Cline. By exposing Figma data to the model, you can translate designs into code more accurately and with richer styling and tokens. This guide walks you through using, installing, and configuring the Figma MCP Server for practical design-to-code workflows.

How to use

Start by running the MCP server locally with your Figma API key. The server exposes HTTP endpoints and an SSE stream for real-time responses. With the server running, connect your MCP client (such as Cursor) to the local server so you can request Figma data, design tokens, and CSS properties. Use a specific Figma file link (or a selected frame/group link) in your composer and ask your client to perform a task, like generating code from the design. The server will fetch metadata from Figma, simplify it to only the most relevant layout and styling details, and return structured results that your client can use directly.

How to install

Prerequisites you need before installing include a recent Node.js runtime (for example Node.js 14+). You should also have a Figma API access token to authorize data access.

Install and run the server quickly using a one-liner that does not require building from source:

npx figma-developer-mcp --figma-api-key=<your-figma-api-key>

If you prefer alternative package runners, you can use the same command via pnpx, yarn dlx, or bunx:

pnpx figma-developer-mcp --figma-api-key=<your-figma-api-key>

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

bunx figma-developer-mcp --figma-api-key=<your-figma-api-key>

Configuration and starting in JSON mode

You can configure the MCP server using a JSON configuration file. The example below shows how to start the server with the Figma API key in an environment variable, and how the tool should be registered for the MCP client to discover.

{
  "mcpServers": {
    "figma-developer-mcp": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--stdio"],
      "env": {
        "FIGMA_API_KEY": "<your-figma-api-key>"
      }
    }
  }
}

Start using Cursor with the MCP server

1. Open Cursor in agent mode. 2. Paste the link to a Figma file, frame, or group. 3. Ask Cursor to perform a task using that Figma data. 4. Cursor will fetch metadata from the Figma data and write code using the simplified, relevant context. 5. If you link to a specific element, you can copy its URL and drop it into the composer to target that element precisely.

Inspect responses with the MCP inspector

To inspect responses from the MCP server, you can run the inspector tool which launches a web UI for triggering tool calls and reviewing responses.

pnpm inspect

Notes on how it works

This MCP server is designed to be used with Cursor. It translates Figma API responses into a compact, relevant shape that focuses on layout and styling information, helping the model deliver accurate and actionable results.

Available tools

get_figma_data

Fetches information about a Figma file, with options to specify the node to fetch, traversal depth, and whether to extract detailed CSS properties for each node.

generate_design_tokens

Generates design tokens from a Figma file and exports them in formats such as CSS, SCSS, TS, or JSON, with optional output path and prefix.