Figma MCP Server

This utility grants AI-driven development assistants such as Cursor, Windsurf, Cline, and others, direct telemetry access to your Figma projects using the Model Context Protocol.

When an AI tool like Cursor has direct access to Figma layout blueprints, its ability to accurately generate code in a single attempt (one-shot implementation) vastly outperforms methods relying on visual input like screen captures.

To begin swiftly, consult the Configuration section:

bash npx figma-developer-mcp --figma-api-key=

Demonstration Video

View a walkthrough of generating web UI components in Cursor using live Figma data: Watch the demonstration

Operational Workflow

1. Activate agent mode within the Cursor composer interface.
2. Input a direct URL pointing to a specific Figma document, design frame, or component group.
3. Issue a command to the AI, instructing it to translate the design (e.g., "Construct this interface element").
4. The Cursor agent queries the Figma metadata via this server, utilizes the retrieved contextual data, and generates the corresponding source code.

This MCP backend is optimized for Cursor integration. Prior to relaying context retrieved from the Figma API, it intelligently prunes and reformats the payload, ensuring only essential geometric and styling attributes are presented to the underlying language model.

Minimizing the data volume transmitted to the model sharpens the AI's focus, leading to more precise and pertinent code outputs.

Deployment

Rapid NPM Execution

You can launch the server instantly without cloning or local building by utilizing NPM:

bash npx figma-developer-mcp --figma-api-key=

Alternative package runner commands:

pnpx figma-developer-mcp --figma-api-key=

yarn dlx figma-developer-mcp --figma-api-key=

bunx figma-developer-mcp --figma-api-key=

Instructions for generating a Figma API access token are available here.

Configuration Files for Other Clients

Tools like Windsurf, Cline, and Claude Desktop often rely on declarative configuration files to initiate servers. You can integrate this Figma provider by appending the following structure to your client's configuration file:

{ "mcpServers": { "Framelink Figma MCP": { "command": "npx", "args": ["-y", "figma-developer-mcp", "--figma-api-key=", "--stdio"] } } }

Building from Local Source Code

1. Clone the source repository.
2. Execute pnpm install to manage dependencies.
3. Duplicate .env.example into .env and populate it with your Figma API token. Read-only permissions suffice.
4. Initiate the server execution using pnpm run dev, incorporating any parameters detailed in the Command-line Arguments section as needed.

Configuration Parameters

The server initialization respects settings from either environment variables (using a .env file) or direct command-line flags. Command-line inputs supersede any environment variables set.

Environment Variables

• FIGMA_API_KEY: Your necessary Figma API access token.
• PORT: The network interface port for the server (Default: 3333).

Command-line Arguments

• --version: Displays the current software version.
• --figma-api-key: Your Figma API credential.
• --port: Specifies the listening port.
• --stdio: Forces server operation in command-line mode instead of the default HTTP/SSE setup.
• --help: Outputs the usage instructions menu.

Establishing Connection with Cursor

Server Startup

bash

npx figma-developer-mcp --figma-api-key=

Figma MCP Server initializing in HTTP mode on port 3333...

HTTP listener active on port 3333

SSE stream endpoint: http://localhost:3333/sse

Messaging interface available at http://localhost:3333/messages

Linking Cursor to the MCP Service

Once the service is operational, navigate to Cursor's application preferences (under the features tab) and establish the connection to the MCP server.

A successful link is verifiable by observing a green indicator light and the appearance of relevant tool indicators within the interface.

Activating Figma Design Integration in Composer

With the MCP provider linked, you can begin leveraging Figma context only when the composer is operating in agent mode.

Paste a Figma hyperlink into the composer and issue a relevant prompt. This action should trigger the get_figma_data utility automatically.

As Figma files are frequently extensive, it is highly recommended to link to a granular element, such as a specific frame or grouping. Select the desired element and use CMD + L to acquire its precise URL, or locate this function in the element's context menu.

Once the targeted element URL is pasted, instruct Cursor on the desired action.

Response Verification

To facilitate easier inspection of server outputs, execute the inspect utility. This launches the @modelcontextprotocol/inspector web interface, allowing you to simulate tool calls and review the data packets returned:

bash pnpm inspect

> figma-mcp@0.1.12 inspect

> pnpx @modelcontextprotocol/inspector

Launching MCP inspector...

Proxy server bound to port 3333

🔍 MCP Inspector operational at http://localhost:5173 🚀

Provided MCP Functions

The server exposes the following context-retrieval tools:

get_figma_data

Retrieves structural details for a specified Figma file or a singular element (node) within that file.

Parameters:

• fileKey (string, obligatory): The unique identifier for the Figma file, typically extracted from URLs like figma.com/(file|design)/<fileKey>/...
• nodeId (string, elective, strongly advised): The identifier for the specific element, often found following node-id=<nodeId> in a shared link.
• depth (integer, elective): Specifies the extent of recursive traversal into the node hierarchy, only invoked if explicitly requested in your prompt.

download_figma_images (Development Phase)

Facilitates the retrieval of embedded SVG or PNG graphic assets (icons, illustrations) based on their node identifiers within a Figma document.

Parameters:

• fileKey (string, obligatory): The identifier for the host Figma file.
• nodes (array, obligatory): A list detailing the graphic assets targeted for download.
• nodeId (string, obligatory): The unique ID of the image node, usually formatted as 1234:5678.
• imageRef (string, elective): Mandatory if the node utilizes an imageRef fill property. Omit for Vector SVG assets.
• fileName (string, obligatory): The desired name for the locally saved file.
• localPath (string, obligatory): The absolute filesystem path specifying the destination directory for image storage. Directory creation is handled automatically.