Related MCP Server Resources

Explore more AI models, providers, and integration options:

  • Explore AI Models
  • Explore AI Providers
  • Explore MCP Servers
  • LangDB Pricing
  • Documentation
  • AI Industry Blog
  • Figma MCP Server
  • Readwise MCP
  • Figma MCP Server
  • MCP Manager
  • mcp-histfile
Back to MCP Servers
Talk to Figma MCP

Talk to Figma MCP

Public
yhc984/cursor-talk-to-figma-mcp-main

Enables seamless integration between Cursor AI and Figma via Model Context Protocol, providing tools for reading, modifying, creating, styling, and exporting Figma designs programmatically through WebSocket communication.

typescript
0 tools
May 29, 2025
Updated Jun 4, 2025

Supercharge Your AI with Talk to Figma MCP

MCP Server

Unlock the full potential of Talk to Figma MCP through LangDB's AI Gateway. Get enterprise-grade security, analytics, and seamless integration with zero configuration.

Unified API Access
Complete Tracing
Instant Setup
Get Started Now

Free tier available • No credit card required

Instant Setup
99.9% Uptime
10,000+Monthly Requests

Cursor Talk to Figma MCP

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

https://github.com/user-attachments/assets/129a14d2-ed73-470f-9a4c-2240b2a4885c

Project Structure

  • src/talk_to_figma_mcp/ - TypeScript MCP server for Figma integration
  • src/cursor_mcp_plugin/ - Figma plugin for communicating with Cursor
  • src/socket.ts - WebSocket server that facilitates communication between the MCP server and Figma plugin

Get Started

  1. Install Bun if you haven't already:
curl -fsSL https://bun.sh/install | bash
  1. Run setup, this will also install MCP in your Cursor's active project
bun setup
  1. Start the Websocket server
bun start
  1. Install Figma Plugin

Manual Setup and Installation

MCP Server: Integration with Cursor

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, go to Plugins > Development > New Plugin
  2. Choose "Link existing plugin"
  3. Select the src/cursor_mcp_plugin/manifest.json file
  4. The plugin should 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 server by joining a channel using join_channel
  5. Use Cursor to communicate with Figma using the MCP tools

MCP Tools

The MCP server provides the following tools for interacting with Figma:

Document & Selection

  • get_document_info - Get information about the current Figma document
  • get_selection - Get information about the current selection
  • get_node_info - Get detailed information about a specific node

Creating Elements

  • create_rectangle - Create a new rectangle with position, size, and optional name
  • create_frame - Create a new frame with position, size, and optional name
  • create_text - Create a new text node with customizable font properties

Styling

  • set_fill_color - Set the fill color of a node (RGBA)
  • set_stroke_color - Set the stroke color and weight of a node
  • set_corner_radius - Set the corner radius of a node with optional per-corner control

Layout & Organization

  • move_node - Move a node to a new position
  • resize_node - Resize a node with new dimensions
  • delete_node - Delete a node

Components & Styles

  • get_styles - Get information about local styles
  • get_local_components - Get information about local components
  • get_team_components - Get information about team components
  • create_component_instance - Create an instance of a component

Export & Advanced

  • export_node_as_image - Export a node as an image (PNG, JPG, SVG, or PDF)
  • execute_figma_code - Execute arbitrary JavaScript code in Figma (use with caution)

Connection Management

  • join_channel - Join a specific channel to communicate with Figma

Development

Building the Figma Plugin

  1. Navigate to the Figma plugin directory:

    cd src/cursor_mcp_plugin
    
  2. Edit code.js and ui.html

Best Practices

When working with the Figma MCP:

  1. Always join a channel before sending commands
  2. Get document overview using get_document_info first
  3. Check current selection with get_selection before modifications
  4. Use appropriate creation tools based on needs:
    • create_frame for containers
    • create_rectangle for basic shapes
    • create_text for text elements
  5. Verify changes using get_node_info
  6. Use component instances when possible for consistency
  7. Handle errors appropriately as all commands can throw exceptions

License

MIT

Publicly Shared Threads0

Discover shared experiences

Shared threads will appear here, showcasing real-world applications and insights from the community. Check back soon for updates!

Share your threads to help others
Related MCPs5
  • Figma MCP Server
    Figma MCP Server

    Enables AI coding tools to access and interpret Figma design data via Model Context Protocol, provid...

    Added May 30, 2025
  • Readwise MCP
    Readwise MCP

    Enables seamless integration between Large Language Model clients and Readwise by providing standard...

    1 tools
    Added May 30, 2025
  • Figma MCP Server
    Figma MCP Server

    Model Context Protocol server bridging Figma designs and React by converting design files into React...

    Added May 30, 2025
  • MCP Manager
    MCP Manager

    Flexible Model Context Protocol (MCP) server enabling seamless communication between AI models and t...

    Added May 30, 2025
  • mcp-histfile
    mcp-histfile

    Access, search, and retrieve shell command history programmatically through the Model Context Protoc...

    Added May 30, 2025