gitmyhub

cursor-talk-to-figma-mcp

JavaScript ★ 6.8k updated 1mo ago

TalkToFigma: MCP integration between AI Agent (Cursor, Claude Code) and Figma, allowing Agentic AI to communicate with Figma for reading designs and modifying them programmatically.

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.