Cursor Talk To Figma

Автоматизируйте задачи дизайна в Figma с помощью Cursor AI! Используйте Cursor Talk To Figma для программного чтения, изменения и создания дизайна. Ускорьте рабочий процесс с помощью ИИ. Бесплатно и с открытым исходным кодом!

Продуктивность и workflow Инструменты разработчика Дизайн ★ 1,759 GitHub (1,759 ★)

Этот инструмент обеспечивает интеграцию по протоколу MCP (Model Context Protocol) между Cursor AI и Figma, позволяя Cursor программно взаимодействовать с дизайнами Figma. Он использует WebSocket-сервер для связи между плагином Figma и TypeScript MCP-сервером, предоставляя возможность получать информацию о дизайне, создавать и изменять элементы, применять стили, управлять макетом и даже выполнять произвольный код в Figma напрямую из Cursor. Эта интеграция упрощает рабочие процессы дизайна и улучшает совместную работу между средами кодирования с ИИ и платформами дизайна.

Ключевые возможности

01Применение стилей (цвет заливки, цвет обводки, радиус скругления углов)

021 759 звезд на GitHub

03Создание и изменение элементов Figma (прямоугольники, фреймы, текст)

04Выполнение произвольного JavaScript-кода в Figma

05Получение информации о документе и узлах Figma

06Управление макетом и организацией узлов

Примеры использования

01Программная генерация элементов дизайна из Cursor AI.

02Интеграция дизайн-процессов со средами кодирования на основе ИИ.

03Автоматизация изменений дизайна на основе аналитики ИИ.

Cursor Talk to Figma MCP

This project implements a Model Context Protocol (MCP) integration between Cursor AI and Figma, allowing Cursor to communicate with Figma for reading designs and modifying them programmatically.

cursorfigmavideo.mp4

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

Get Started

Install Bun if you haven't already:

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

Run setup, this will also install MCP in your Cursor's active project

bun setup

Start the Websocket server

bun socket

MCP server

bunx cursor-talk-to-figma-mcp

Install Figma Plugin

Quick Video Tutorial

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"]
    }
  }
}

WebSocket Server

Start the WebSocket server:

bun socket

Figma Plugin

In Figma, go to Plugins > Development > New Plugin
Choose "Link existing plugin"
Select the src/cursor_mcp_plugin/manifest.json file
The plugin should now be available in your Figma development plugins

Windows + WSL Guide

Install bun via powershell

powershell -c "irm bun.sh/install.ps1|iex"

Uncomment the hostname 0.0.0.0 in src/socket.ts

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

Start the websocket

bun socket

Usage

Start the WebSocket server
Install the MCP server in Cursor
Open Figma and run the Cursor MCP Plugin
Connect the plugin to the WebSocket server by joining a channel using join_channel
Use Cursor to communicate with Figma using the MCP tools

MCP Tools

The MCP server provides the following tools for interacting with Figma:

Document & Selection

get_document_info - Get information about the current Figma document
get_selection - Get information about the current selection
get_node_info - Get detailed information about a specific node
get_nodes_info - Get detailed information about multiple nodes by providing an array of node IDs

Creating Elements

create_rectangle - Create a new rectangle with position, size, and optional name
create_frame - Create a new frame with position, size, and optional name
create_text - Create a new text node with customizable font properties

Modifying text content

set_text_content - Set the text content of an existing text node

Styling

set_fill_color - Set the fill color of a node (RGBA)
set_stroke_color - Set the stroke color and weight of a node
set_corner_radius - Set the corner radius of a node with optional per-corner control

Layout & Organization

move_node - Move a node to a new position
resize_node - Resize a node with new dimensions
delete_node - Delete a node
clone_node - Create a copy of an existing node with optional position offset

Components & Styles

get_styles - Get information about local styles
get_local_components - Get information about local components
get_team_components - Get information about team components
create_component_instance - Create an instance of a component

Export & Advanced

export_node_as_image - Export a node as an image (PNG, JPG, SVG, or PDF)
execute_figma_code - Execute arbitrary JavaScript code in Figma (use with caution)

Connection Management

join_channel - Join a specific channel to communicate with Figma

Development

Building the Figma Plugin

Navigate to the Figma plugin directory:
```
cd src/cursor_mcp_plugin
```
Edit code.js and ui.html

Best Practices

When working with the Figma MCP:

Always join a channel before sending commands
Get document overview using get_document_info first
Check current selection with get_selection before modifications
Use appropriate creation tools based on needs:
- create_frame for containers
- create_rectangle for basic shapes
- create_text for text elements
Verify changes using get_node_info
Use component instances when possible for consistency
Handle errors appropriately as all commands can throw exceptions

License

MIT

Cursor Talk To Figma MCP

Интеграция между Cursor AI и Figma через протокол MCP (Model Context Protocol). Позволяет Cursor читать дизайны Figma и программно их изменять.

Структура проекта

src/talk_to_figma_mcp/ — TypeScript MCP-сервер для интеграции с Figma
src/cursor_mcp_plugin/ — плагин Figma для связи с Cursor
src/socket.ts — WebSocket-сервер, обеспечивающий обмен между MCP-сервером и плагином Figma

Быстрый старт

Установи Bun, если ещё не установлен:
```
curl -fsSL https://bun.sh/install | bash
```
Запусти настройку (также установит MCP в активный проект Cursor):
```
bun setup
```
Запусти WebSocket-сервер:
```
bun socket
```
Запусти MCP-сервер:
```
bunx cursor-talk-to-figma-mcp
```
Установи плагин Figma (см. ниже).

Ручная установка

MCP-сервер: интеграция с Cursor

Добавь сервер в конфигурацию MCP Cursor (~/.cursor/mcp.json):

{
  "mcpServers": {
    "TalkToFigma": {
      "command": "bunx",
      "args": ["cursor-talk-to-figma-mcp"]
    }
  }
}

WebSocket-сервер

Запусти:

bun socket

Плагин Figma

В Figma: Plugins > Development > New Plugin
Выбери «Link existing plugin»
Укажи файл src/cursor_mcp_plugin/manifest.json
Плагин появится в разделе Development-плагинов

Windows + WSL

Установи Bun через PowerShell:

powershell -c "irm bun.sh/install.ps1|iex"

Раскомментируй hostname: "0.0.0.0" в src/socket.ts:

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

Запусти WebSocket:
```
bun socket
```

Использование

Запусти WebSocket-сервер
Установи MCP-сервер в Cursor
Открой Figma и запусти плагин Cursor MCP Plugin
Подключи плагин к WebSocket-серверу через join_channel
Используй Cursor для взаимодействия с Figma через MCP-инструменты

MCP-инструменты

Документ и выделение

get_document_info — информация о текущем документе Figma
get_selection — информация о текущем выделении
get_node_info — детальная информация об узле
get_nodes_info — информация о нескольких узлах по массиву ID

Создание элементов

create_rectangle — создать прямоугольник
create_frame — создать фрейм
create_text — создать текстовый узел

Изменение текста

set_text_content — задать содержимое текстового узла

Стилизация

set_fill_color — задать цвет заливки (RGBA)
set_stroke_color — задать цвет и толщину обводки
set_corner_radius — задать скругление углов

Компоновка и организация

move_node — переместить узел
resize_node — изменить размер узла
delete_node — удалить узел
clone_node — клонировать узел

Компоненты и стили

get_styles — информация о локальных стилях
get_local_components — информация о локальных компонентах
get_team_components — информация о командных компонентах
create_component_instance — создать экземпляр компонента

Экспорт и продвинутое

export_node_as_image — экспорт узла как изображение (PNG, JPG, SVG, PDF)
execute_figma_code — выполнить произвольный JavaScript-код в Figma (осторожно!)

Управление подключением

join_channel — присоединиться к каналу для связи с Figma

Разработка

Сборка плагина Figma

cd src/cursor_mcp_plugin

Редактируй code.js и ui.html.

Лицензия

MIT

Источник: https://mcpmarket.com/server/cursor-talk-to-figma-2

Ключевые возможности

Примеры использования

Cursor Talk to Figma MCP

Project Structure

Get Started

Quick Video Tutorial

Manual Setup and Installation

MCP Server: Integration with Cursor

WebSocket Server

Figma Plugin

Windows + WSL Guide

Usage

MCP Tools

Document & Selection

Creating Elements

Modifying text content

Styling

Layout & Organization

Components & Styles

Export & Advanced

Connection Management

Development

Building the Figma Plugin

Best Practices

License

Cursor Talk To Figma MCP

Структура проекта

Быстрый старт

Ручная установка

MCP-сервер: интеграция с Cursor

WebSocket-сервер

Плагин Figma

Windows + WSL

Использование

MCP-инструменты

Документ и выделение

Создание элементов

Изменение текста

Стилизация

Компоновка и организация

Компоненты и стили

Экспорт и продвинутое

Управление подключением

Рекомендации

Разработка

Сборка плагина Figma

Лицензия

Что такое Cursor Talk To Figma?

Каковы некоторые из ключевых функций?

Как начать работу с Cursor Talk To Figma?

Что я могу сделать с помощью Cursor Talk To Figma?

Бесплатно ли использовать Cursor Talk To Figma?

Get Document Info

Get Selection

Read My Design

Get Node Info

Parameters

Get Nodes Info

Parameters

Create Rectangle

Parameters

Create Frame

Parameters

Create Text

Parameters

Set Fill Color

Parameters

Set Stroke Color

Parameters

Move Node

Parameters

Clone Node

Parameters

Resize Node

Parameters

Delete Node

Parameters

Delete Multiple Nodes

Parameters

Export Node As Image