New AI Tools
banner

Cursor Talk to Figma MCP


Introduction:

This project integrates Cursor AI and Figma via MCP, allowing Cursor to programmatically read and modify Figma designs.

Go to view








Cursor Talk to Figma MCP

Cursor Talk to Figma MCP is a project that aims to integrate Cursor AI (a code editor) with Figma (a design tool), utilizing the Model Context Protocol (MCP) to achieve two-way communication.

Core Features:

  • Read Figma Design: Allows Cursor AI to read information from Figma design drafts, such as document structure, layer information, node attributes, etc.
  • Modify Figma Design: Allows Cursor AI to programmatically modify Figma designs, such as creating new elements, modifying existing element styles, moving layers, deleting nodes, etc.

Technical Architecture:

  • MCP Server (TypeScript): A TypeScript server running on the Cursor AI side, responsible for handling requests issued by Cursor AI and converting these requests into instructions that Figma can understand.
  • Figma Plugin: A plugin running on the Figma side, responsible for receiving instructions sent by the MCP server and executing corresponding operations in Figma.
  • WebSocket Server: A bridge responsible for establishing a communication channel between the MCP server and the Figma plugin to enable real-time data transmission.

Usage:

  1. Installation and Configuration: First, install Bun as the JavaScript runtime environment, then configure the MCP settings in Cursor AI and add the project's MCP server.
  2. Start Service: Start the WebSocket server.
  3. Install Figma Plugin: Install and enable the plugin in Figma.
  4. Establish Connection: In the Figma plugin, establish a connection with the WebSocket server via a specified channel.
  5. Use Cursor to Operate Figma: In Cursor AI, you can use MCP tools to interact with Figma, such as retrieving document information, creating elements, modifying styles, etc.

MCP Tools (API):

The project provides a series of MCP tools for interacting with Figma, including:

  • Document and Selection: Retrieve information about documents and selected objects.
  • Element Creation: Create elements such as rectangles, frames, and text.
  • Text Modification: Modify text content.
  • Style Settings: Set fill color, stroke color, rounded corners, and other styles.
  • Layout Organization: Move, scale, delete, and clone nodes.
  • Components and Styles: Retrieve information about local and team components and styles, and create component instances.
  • Export and Advanced Features: Export nodes as images, execute arbitrary JavaScript code (use with caution).
  • Connection Management: Join a specified channel for communication.

Summary:

Cursor Talk to Figma MCP provides a powerful bridge connecting the code editor Cursor AI with the design tool Figma, allowing developers to read and manipulate Figma design drafts through code, thereby improving development efficiency and design collaboration capabilities.