Home / MCP / Cursor Talk to Figma MCP Server
Provides read/write access to Figma documents via Cursor MCP tools for reading, creating, updating, and annotating designs.
Configuration
View docs{
"mcpServers": {
"talk_to_figma": {
"command": "bun",
"args": [
"/path-to-repo/src/talk_to_figma_mcp/server.ts"
]
}
}
}You enable Cursor to talk to Figma through a dedicated MCP server. This integration lets you read designs, inspect and modify nodes, and automate workflows inside Figma using Cursor’s commands and MCP tools.
Join a channel from your Figma MCP Plugin, then send commands from Cursor to perform design tasks. Use the MCP tools to read document details, query selections, create and move elements, adjust styles, manage annotations, and build prototyped connections. Start by opening a Figma project, running the Cursor MCP Plugin, and connecting to the WebSocket server. After you are connected, you can: read document info, inspect the current selection, create shapes and text, update text content, apply layout and spacing changes, style nodes, manage components and overrides, export images, and visualize prototype flows as FigJam connectors.
Best practices include joining a channel before sending commands, getting an overview with get_document_info, verifying your current selection with get_selection, and using batch operations for large changes. Always verify outcomes with get_node_info or export previews to ensure your changes reflect your intent.
Prerequisites: You need a runtime that can execute MCP server code (Bun is shown here). Ensure Bun is installed on your system.
# Install Bun if you haven't already
curl -fsSL https://bun.sh/install | bash
# Run setup to install MCP in your(Cursor/your active) project
bun setup
# Start the WebSocket server to enable communication with Figma plugin
bun socketDevelopment and local testing require you to run the TalkToFigma MCP server directly from your local directory. Use the following configuration to point Cursor to your local server implementation.
{
"mcpServers": {
"TalkToFigma": {
"command": "bun",
"args": ["/path-to-repo/src/talk_to_figma_mcp/server.ts"]
}
}
}If you prefer to run the MCP server via the Cursor package cache, you can install and run the published package that exposes the MCP server entry point.
{
"mcpServers": {
"TalkToFigma": {
"command": "bunx",
"args": ["cursor-talk-to-figma-mcp@latest"]
}
}
}WebSocket server is started with the following command if you are running locally on Windows Subsystem for Linux or a similar environment.
bun socketInstall the Figma plugin to enable communication with Cursor. In Figma, go to Plugins → Development → New Plugin, choose "Link existing plugin", and select the manifest located at src/cursor_mcp_plugin/manifest.json. This makes the Cursor MCP plugin available within your Figma development environment.
Install Bun via PowerShell, then uncomment the hostname in the WebSocket server file if you need to allow connections from Windows with WSL.
// uncomment this to allow connections in windows wsl
hostname: "0.0.0.0",Start the websocket server with:
bun socket1) Start the WebSocket server. 2) Install the MCP server in Cursor. 3) Open Figma and run the Cursor MCP Plugin. 4) Connect the plugin to the WebSocket server by joining a channel. 5) Use Cursor to issue MCP tool commands to read, modify, and extend your Figma designs.
The MCP server provides a comprehensive set of tools to interact with Figma. They cover reading document and node information, creating and editing elements, annotations, prototyping connections, layout and styling, component management, export, and channel communication.
Retrieve information about the current Figma document, including metadata, pages, and structure.
Obtain details about the current selection in the active document.
Fetch detailed information for the current selection without extra parameters.
Get in-depth information about a specific node by ID.
Retrieve detailed information for multiple nodes by supplying an array of node IDs.
Focus and scroll to a specific node in the viewport.
Select multiple nodes and adjust the viewport to show them.
Read all annotations in the document or on a specific node.
Create or update a single annotation with support for markdown.
Batch create or update several annotations efficiently.
Scan the document for nodes of specific types to locate targets for actions.
Extract prototype reactions from nodes and visualize them.
Set the default FigJam connector style for creating visual connections.
Create FigJam connector lines between nodes based on prototype flows or custom mappings.
Create a new rectangle with position, size, and optional name.
Create a new frame with position, size, and optional name.
Create a new text node with configurable font properties.
Scan text nodes with intelligent chunking for large designs.
Set the text content of a single text node.
Batch update multiple text nodes efficiently.
Set the layout mode (NONE, HORIZONTAL, VERTICAL) for a frame.
Set padding for an auto-layout frame.
Configure alignment for primary and counter axes in auto-layout.
Define horizontal and vertical sizing modes for auto-layout frames.
Set the spacing between children inside an auto-layout frame.
Apply fill color to a node with RGBA values.
Apply stroke color and weight to a node.
Set corner radius for a node, with optional per-corner control.
Move a node to a new position.
Resize a node with new dimensions.
Delete a single node.
Delete multiple nodes at once.
Create a copy of an existing node with optional position offset.
Retrieve information about local styles.
Get information about local components.
Create an instance of a component.
Extract overrides from a selected component instance.
Apply extracted overrides to target instances.
Export a node as an image (PNG/JPG/SVG/PDF); returns base64 as text in some cases.
Join a specific channel to communicate with Figma.