이 프로젝트는 AI 에이전트(커서, 클로드 코드)와 Figma 간의 모델 컨텍스트 프로토콜(MCP) 통합을 구현하여, AI 에이전트가 Figma와 통신하여 설계도를 읽고 프로그래밍적으로 수정할 수 있도록 합니다.

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

프로젝트 구조

• src/talk_to_figma_mcp/ - Figma 통합을 위한 TypeScript MCP 서버
• src/cursor_mcp_plugin/ - 커서와 통신하는 Figma 플러그인
• src/socket.ts - MCP 서버와 Figma 플러그인 간 통신을 용이하게 하는 WebSocket 서버

사용 방법

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