gitwtfhub

wtf is cursor-talk-to-figma-mcp?

grab/cursor-talk-to-figma-mcp — explained in plain English

Analysis updated 2026-06-24

6,752JavaScriptAudience · designerComplexity · 3/5Setup · moderate

TL;DR

A bridge that lets AI coding tools like Cursor and Claude read and modify Figma designs in plain language, connecting them via a local WebSocket server and a Figma plugin.

Mindmap

mindmap
  root((cursor-talk-to-figma))
    What it does
      AI controls Figma
      Read layouts
      Edit elements
    Capabilities
      Create shapes and text
      Resize and move
      Bulk text updates
      Export as image
    Tech stack
      TypeScript
      Bun runtime
      WebSocket
      MCP protocol
    Setup
      Figma plugin
      Local server
      Cursor config

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Why would anyone build with this?

REASON 1

Describe a layout change in plain English in Cursor and have the AI apply it directly in your Figma file.

REASON 2

Batch-update dozens of text nodes in a Figma document at once by prompting an AI agent.

REASON 3

Clone component overrides across multiple Figma instances without manual clicking.

REASON 4

Export selected Figma frames as images through a Cursor prompt.

What's in the stack?

TypeScriptJavaScriptBunWebSocket

How it stacks up

grab/cursor-talk-to-figma-mcpbeakerbrowser/beakerthebird/swipe
Stars6,7526,7536,755
LanguageJavaScriptJavaScriptJavaScript
Setup difficultymoderatehardeasy
Complexity3/54/51/5
Audiencedesignerdeveloperdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you spin it up?

Difficulty · moderate Time to first run · 30min

Requires Bun runtime, the Figma desktop app with the plugin installed, and running the WebSocket server before connecting.

Wtf does this do

This project connects AI coding tools like Cursor and Claude Code to Figma, the design tool, so that an AI agent can read and modify designs directly without a human clicking through Figma's interface manually. It works by setting up a communication bridge: a small server runs on your computer, a plugin runs inside Figma, and the two talk to each other over a WebSocket connection. Once connected, you can describe design changes in plain language inside your AI tool and the agent carries them out in Figma. The connection uses something called MCP, short for Model Context Protocol, which is a standard way for AI tools to call external services. This project implements an MCP server that exposes Figma operations as commands the AI can call. The Figma side is handled by a plugin you install in Figma, either from the Figma community page or by loading it locally during development. The list of things the AI can do through this connection is broad. It can read the current document layout, inspect specific elements, create rectangles, frames, and text nodes, change colors, move and resize elements, update text content in bulk, adjust spacing and alignment in auto-layout frames, clone or delete nodes, and export designs as images. There are also tools for working with Figma's prototyping connections and for transferring override properties between component instances, which the README notes reduces repetitive work in component-heavy designs. Setup requires installing Bun (a JavaScript runtime), running a setup script that also registers the MCP server with Cursor, and then starting the WebSocket server before opening the Figma plugin. The README includes steps for Windows users running under WSL, which requires one small configuration change to the socket file. The project is structured in three parts: the TypeScript MCP server, the Figma plugin, and the WebSocket server that connects them. The README does not specify a license.

Yoink these prompts

Prompt 1
Walk me through setting up cursor-talk-to-figma-mcp, installing Bun, starting the WebSocket server, and connecting the Figma plugin to Cursor.
Prompt 2
Using cursor-talk-to-figma-mcp, write a Cursor prompt that creates a card component in Figma with a title, subtitle, and image placeholder sized 320 by 240 pixels.
Prompt 3
Help me write a Cursor prompt that changes all button components in my Figma file to use a new hex color and increases their corner radius to 8.
Prompt 4
Using this MCP bridge, batch-replace all text nodes in my Figma file that say Lorem ipsum with real placeholder copy from a list I provide.

Frequently asked questions

wtf is cursor-talk-to-figma-mcp?

A bridge that lets AI coding tools like Cursor and Claude read and modify Figma designs in plain language, connecting them via a local WebSocket server and a Figma plugin.

What language is cursor-talk-to-figma-mcp written in?

Mainly JavaScript. The stack also includes TypeScript, JavaScript, Bun.

How hard is cursor-talk-to-figma-mcp to set up?

Setup difficulty is rated moderate, with roughly 30min to a first successful run.

Who is cursor-talk-to-figma-mcp for?

Mainly designer.

View the repo → Decode another repo

This repo across BitVibe Labs

Don't trust strangers blindly. Verify against the repo.