whatisgithub

What 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

In one sentence

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
Click or tap to explore — scroll the page freely

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

What do people build with it?

USE CASE 1

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

USE CASE 2

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

USE CASE 3

Clone component overrides across multiple Figma instances without manual clicking.

USE CASE 4

Export selected Figma frames as images through a Cursor prompt.

What is it built with?

TypeScriptJavaScriptBunWebSocket

How does it compare?

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 get it running?

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.

So what is it?

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.

Copy-paste 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

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

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.