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:
Video demonstration showing how to transform Figma designs into code using Cursor's MCP integration
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
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 filedepth
(number, optional): Controls how many levels of the node tree to return
get_node
Fetches data about a specific node within a Figma file.
Parameters:
fileKey
(string): The Figma file's unique identifiernodeId
(string): The specific node ID to retrieve
Expert Tips for Optimal Results
- Link Specific Elements: Always link to specific frames or components rather than entire files
- Provide Clear Instructions: Be specific about what you want Cursor to implement
- Organize Figma Files: Well-structured, properly named design elements yield better results
- Use Design System Components: Designs using consistent components translate more accurately
- Consider Technology Stack: Mention your preferred framework for better-targeted code generation