Cursor Talk to Figma MCP

Model Context Protocol (MCP) integration between Cursor AI and Figma, allowing Cursor to communicate with Figma for reading designs and modifying them programmatically.

Overview

The Cursor Talk to Figma MCP project establishes a Model Context Protocol (MCP) integration between Cursor AI and Figma. This integration enables Cursor to interact with Figma, facilitating the reading and programmatic modification of design files.

Created by sonnylazuardi

By bridging Cursor AI with Figma, this server allows Product Designers, Project Managers, and Design Leaders to automate design tasks, streamline workflows, and enhance collaboration between design and development teams.

Key Features

• Document & Selection:
  • get_document_info - Retrieve information about the current Figma document.
  • get_selection - Obtain details about the current selection.
  • get_node_info - Access comprehensive information about a specific node.
• Creating Elements:
  • create_rectangle - Generate a new rectangle with specified position, size, and optional name.
  • create_frame - Create a new frame with defined position, size, and optional name.
  • create_text - Establish a new text node with customizable font properties.
• Styling:
  • set_fill_color - Assign the fill colour of a node using RGBA values.
  • set_stroke_color - Define the stroke colour and weight of a node.
  • set_corner_radius - Set the corner radius of a node, with optional per-corner control.
• Layout & Organisation:
  • move_node - Relocate a node to a new position.
  • resize_node - Adjust the dimensions of a node.
  • delete_node - Remove a node from the document.
• Components & Styles:
  • get_styles - Retrieve information about local styles.
  • get_local_components - Access details about local components.
  • get_team_components - Obtain information about team components.
  • create_component_instance - Generate an instance of a component.
• Export & Advanced:
  • export_node_as_image - Export a node as an image in formats such as PNG, JPG, SVG, or PDF.
  • execute_figma_code - Execute arbitrary JavaScript code within Figma (use with caution).
• Connection Management:
  • join_channel - Join a specific channel to facilitate communication with Figma.

Capabilities

• Retrieve comprehensive information about the current Figma document and specific nodes.
• Create and manipulate design elements such as rectangles, frames, and text nodes programmatically.
• Apply styling attributes, including fill and stroke colours, and corner radii to design elements.
• Manage layout by moving, resizing, and deleting nodes within the Figma document.
• Interact with components and styles by retrieving information and creating component instances.
• Export design elements as images in various formats and execute custom JavaScript code within Figma.
• Establish and manage communication channels between Cursor AI and Figma.

How It Works

• Project Structure:
  • src/talk_to_figma_mcp/ - TypeScript MCP server for Figma integration.
  • src/cursor_mcp_plugin/ - Figma plugin facilitating communication with Cursor.
  • src/socket.ts - WebSocket server enabling communication between the MCP server and Figma plugin.
• Setup and Installation:
  • MCP Server Integration with Cursor:
    1. Install Bun if not already installed:curl -fsSL https://bun.sh/install | bash
    2. Add the server to your Cursor MCP configuration in ~/.cursor/mcp.json:{
       "mcpServers": {
       "TalkToFigma": {
       "command": "bun",
       "args": [
       "/path/to/cursor-talk-to-figma-mcp/src/talk_to_figma_mcp/server.ts"
       ]
       }
       }
       }
  • WebSocket Server:
    • Start the WebSocket server:bun run src/socket.ts
  • Figma Plugin:
    1. In Figma, navigate to Plugins > Development > New Plugin.
    2. Select "Link existing plugin."
    3. Choose the src/cursor_mcp_plugin/manifest.json file.
    4. The plugin will now be available in your Figma development plugins.
• Usage:
  1. 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

✨ New to MCP or wondering why it matters?
Read how I’m using it in real workflows—with Claude, Figma, and Ghost:
👉 What Is Model Context Protocol (MCP)? It Changed How I Design—and Blog