Skip to main content
Glama

Figma MCP Server

by AIYA861202

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 socket
  1. MCP server

bunx cursor-talk-to-figma-mcp
  1. Install Figma Plugin

Quick Video Tutorial

image

Design Automation Example

Bulk text content replacement

Thanks to @dusskapark for contributing the bulk text replacement feature. Here is the demo video.

Manual Setup and Installation

MCP Server: Integration with Cursor

Add the server to your Cursor MCP configuration in ~/.cursor/mcp.json:

{ "mcpServers": { "TalkToFigma": { "command": "bunx", "args": ["cursor-talk-to-figma-mcp@latest"] } } }

WebSocket Server

Start the WebSocket server:

bun socket

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

Windows + WSL Guide

  1. Install bun via powershell

powershell -c "irm bun.sh/install.ps1|iex"
  1. Uncomment the hostname 0.0.0.0 in src/socket.ts

// uncomment this to allow connections in windows wsl hostname: "0.0.0.0",
  1. Start the websocket

bun socket

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

  • read_my_design - Get detailed node information about the current selection without parameters

  • get_node_info - Get detailed information about a specific node

  • get_nodes_info - Get detailed information about multiple nodes by providing an array of node IDs

Annotations

  • get_annotations - Get all annotations in the current document or specific node

  • set_annotation - Create or update an annotation with markdown support

  • set_multiple_annotations - Batch create/update multiple annotations efficiently

  • scan_nodes_by_types - Scan for nodes with specific types (useful for finding annotation targets)

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

Modifying text content

  • scan_text_nodes - Scan text nodes with intelligent chunking for large designs

  • set_text_content - Set the text content of a single text node

  • set_multiple_text_contents - Batch update multiple text nodes efficiently

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

  • delete_multiple_nodes - Delete multiple nodes at once efficiently

  • clone_node - Create a copy of an existing node with optional position offset

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

  8. For large designs:

    • Use chunking parameters in scan_text_nodes

    • Monitor progress through WebSocket updates

    • Implement appropriate error handling

  9. For text operations:

    • Use batch operations when possible

    • Consider structural relationships

    • Verify changes with targeted exports

  10. For converting legacy annotations:

    • Scan text nodes to identify numbered markers and descriptions

    • Use scan_nodes_by_types to find UI elements that annotations refer to

    • Match markers with their target elements using path, name, or proximity

    • Categorize annotations appropriately with get_annotations

    • Create native annotations with set_multiple_annotations in batches

    • Verify all annotations are properly linked to their targets

    • Delete legacy annotation nodes after successful conversion

License

MIT

-
security - not tested
A
license - permissive license
-
quality - not tested

local-only server

The server can only run on the client's local machine because it depends on local resources.

Enables AI assistants like Cursor to interact with Figma designs programmatically. Supports reading design information, modifying elements, creating components, managing text content, and automating design workflows through natural language commands.

  1. Project Structure
    1. Get Started
      1. Quick Video Tutorial
        1. Design Automation Example
          1. Manual Setup and Installation
            1. MCP Server: Integration with Cursor
            2. WebSocket Server
            3. Figma Plugin
          2. Windows + WSL Guide
            1. Usage
              1. MCP Tools
                1. Document & Selection
                2. Annotations
                3. Creating Elements
                4. Modifying text content
                5. Styling
                6. Layout & Organization
                7. Components & Styles
                8. Export & Advanced
                9. Connection Management
              2. Development
                1. Building the Figma Plugin
              3. Best Practices
                1. License

                  MCP directory API

                  We provide all the information about MCP servers via our MCP API.

                  curl -X GET 'https://glama.ai/api/mcp/v1/servers/AIYA861202/figma-mcp'

                  If you have feedback or need assistance with the MCP directory API, please join our Discord server