该项目实现了 AI 代理（Cursor， Claude Code）与 Figma 之间的模型上下文协议（MCP）集成，使 AI 代理能够与 Figma 通信，以读取设计和程序化修改。

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

项目结构

• src/talk_to_figma_mcp/ - TypeScript MCP 服务器，用于 Figma 集成
• src/cursor_mcp_plugin/ - 用于与光标通信的Figma插件
• src/socket.ts - WebSocket服务器，促进MCP服务器与Figma插件之间的通信

如何使用

1. 如果你还没安装Bun，请安装：

2. 运行安装，这也会在你光标的活跃项目中安装MCP

3. 启动Websocket服务器

4. 新消息 从Figma社区页面安装Figma插件或本地安装

快速视频教程

视频链接

设计自动化示例

批量文本内容替换

感谢@dusskapark贡献了批量文本替换功能。这是演示视频。

实例覆盖传播 又一篇来自@dusskapark的贡献 Propagate组件实例通过一个命令将源实例覆盖到多个目标实例。

Talk to Figma MCP

This project implements a Model Context Protocol (MCP) integration between AI agent (Cursor, Claude Code) and Figma, allowing AI agent 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

How to use

1. Install Bun if you haven’t already:

curl -fsSL https://bun.sh/install | bash

2. Run setup, this will also install MCP in your Cursor’s active project

bun setup

3. Start the Websocket server

bun socket

4. NEW Install Figma plugin from Figma community page or install locally

Quick Video Tutorial

Video Link

Design Automation Example

Bulk text content replacement

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

Instance Override Propagation Another contribution from @dusskapark Propagate component instance overrides from a source instance to multiple target instances with a single command. This feature dramatically reduces repetitive design work when working with component instances that need similar customizations. Check out our 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"

2. Uncomment the hostname 0.0.0.0 in src/socket.ts

// uncomment this to allow connections in windows wsl
hostname: "0.0.0.0",

3. 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