Figma to Code with Cursor MCP - Automate UI Development

Connecting Figma to Cursor with Model Context Protocol

Give Cursor, Windsurf, Cline, and other AI-powered coding tools access to your Figma files with this Model Context Protocol server.

When Cursor has access to Figma design data, it's dramatically more effective at one-shotting designs accurately than alternative approaches like pasting screenshots or describing designs manually.

Get started quickly with this simple command:

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

See It In Action: Design-to-Code Transformation

Watch how seamlessly Cursor can transform Figma designs into functioning UI components:

How Figma-to-Cursor Integration Works

The integration process is remarkably straightforward:

Launch Cursor's composer in agent mode
Paste a link to any Figma file, frame, or group
Ask Cursor to implement the design or specific component
Cursor will automatically fetch the relevant metadata from Figma and generate your code

This MCP server is specifically optimized for Cursor integration. Before providing context from the Figma API, it intelligently simplifies and translates the response, ensuring only the most relevant layout and styling information reaches the model.

By reducing unnecessary context, the AI becomes significantly more accurate, producing cleaner, more relevant code implementations of your designs.

Quick Installation Options

Option 1: Run with NPM (No Installation Required)

The fastest way to get started is running the server directly with NPM:

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

# Alternative package managers
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>

Need a Figma API access token? Follow these official instructions.

Option 2: JSON Configuration for Tool Integration

For tools like Windsurf, Cline, and Claude Desktop that use configuration files, add this to your config:

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

Option 3: Run from Source Code

For developers who prefer to run from source:

Clone the repository
Install dependencies with pnpm install
Copy .env.example to .env and add your Figma API access token
Start the server with pnpm run dev and any additional configuration flags

Server Configuration Options

The server supports flexible configuration through either environment variables or command-line arguments, with command-line arguments taking precedence.

Environment Variables

FIGMA_API_KEY: Your Figma API access token (required)
PORT: Server port (defaults to 3333)

Command-line Arguments

--version: Display version information
--figma-api-key: Your Figma API access token
--port: Configure server port
--stdio: Run in command mode instead of HTTP/SSE
--help: Show all available options

Setting Up Cursor Integration

Step 1: Launch the MCP Server

Start the server with your Figma API key:

npx figma-developer-mcp --figma-api-key=<your-figma-api-key>
# Output:
# 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

Step 2: Connect Cursor to the MCP Server

Open Cursor's settings
Navigate to the Features tab
Configure the MCP server connection with the local URL

Verify the connection is working by checking for a green status indicator and available tools.

Step 3: Start Using Figma Designs in Cursor

With the MCP server connected, you can now leverage Figma designs directly in Cursor's composer (make sure composer is in agent mode).

For optimal results:

Link to specific frames or groups within your Figma files
Use CMD + L in Figma to copy a link to a selected element
Alternatively, right-click and select "Copy Link" from the context menu

Copy link to Figma selection by right clicking

Paste the link in Cursor's composer and describe what you want to implement. The AI will do the rest!

Debugging and Inspecting Responses

For developers who want to explore or debug the MCP server responses:

pnpm inspect
# > [email protected] inspect
# > pnpx @modelcontextprotocol/inspector
#
# Starting MCP inspector...
# Proxy server listening on port 3333
#
# 🔍 MCP Inspector is up and running at http://localhost:5173 🚀

This launches a web UI where you can trigger tool calls and examine responses in detail.

Available MCP Tools

The Figma MCP server provides two primary tools:

get_file

Retrieves comprehensive information about a Figma file.

Parameters:

fileKey (string): The unique identifier for the Figma file
depth (number, optional): Controls how many levels of the node tree to return

get_node

Fetches data about a specific node within a Figma file.