Habla con Figma MCP

Cursor Habla con Figma MCP

Este proyecto implementa una integración de Protocolo de Contexto de Modelo (MCP) entre Cursor AI y Figma, lo que permite que Cursor se comunique con Figma para leer diseños y modificarlos programáticamente.

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

Estructura del proyecto

src/talk_to_figma_mcp/ - Servidor MCP de TypeScript para la integración con Figma
src/cursor_mcp_plugin/ - Complemento de Figma para comunicarse con Cursor
src/socket.ts : servidor WebSocket que facilita la comunicación entre el servidor MCP y el complemento Figma

Empezar

Instala Bun si aún no lo has hecho:

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

Ejecute la instalación, esto también instalará MCP en el proyecto activo de su cursor

bun setup

Iniciar el servidor Websocket

bun start

Instalar el complemento Figma

Configuración e instalación manual

Servidor MCP: Integración con Cursor

Agregue el servidor a su configuración de Cursor MCP en ~/.cursor/mcp.json :

{
  "mcpServers": {
    "TalkToFigma": {
      "command": "bun",
      "args": [
        "/path/to/cursor-talk-to-figma-mcp/src/talk_to_figma_mcp/server.ts"
      ]
    }
  }
}

Servidor WebSocket

Inicie el servidor WebSocket:

bun run src/socket.ts

Complemento de Figma

En Figma, vaya a Complementos > Desarrollo > Nuevo complemento
Seleccione "Vincular complemento existente"
Seleccione el archivo src/cursor_mcp_plugin/manifest.json
El complemento ahora debería estar disponible en sus complementos de desarrollo de Figma

Uso

Iniciar el servidor WebSocket
Instalar el servidor MCP en Cursor
Abra Figma y ejecute el complemento Cursor MCP
Conecte el complemento al servidor WebSocket uniéndose a un canal usando join_channel
Utilice el cursor para comunicarse con Figma mediante las herramientas MCP

Herramientas MCP

El servidor MCP proporciona las siguientes herramientas para interactuar con Figma:

Documento y selección

get_document_info - Obtener información sobre el documento actual de Figma
get_selection - Obtener información sobre la selección actual
get_node_info - Obtener información detallada sobre un nodo específico

Creando elementos

create_rectangle - Crea un nuevo rectángulo con posición, tamaño y nombre opcional
create_frame - Crea un nuevo marco con posición, tamaño y nombre opcional
create_text - Crea un nuevo nodo de texto con propiedades de fuente personalizables

Estilo

set_fill_color - Establece el color de relleno de un nodo (RGBA)
set_stroke_color : establece el color y el grosor del trazo de un nodo
set_corner_radius : establece el radio de la esquina de un nodo con control opcional por esquina

Diseño y organización

move_node - Mover un nodo a una nueva posición
resize_node - Redimensiona un nodo con nuevas dimensiones
delete_node - Eliminar un nodo

Componentes y estilos

get_styles - Obtener información sobre estilos locales
get_local_components - Obtener información sobre los componentes locales
get_team_components - Obtener información sobre los componentes del equipo
create_component_instance - Crea una instancia de un componente

Exportación y Avanzado

export_node_as_image : exporta un nodo como imagen (PNG, JPG, SVG o PDF)
execute_figma_code - Ejecuta código JavaScript arbitrario en Figma (úselo con precaución)

Gestión de conexiones

join_channel - Únete a un canal específico para comunicarte con Figma

Desarrollo

Construyendo el complemento de Figma

Navegue hasta el directorio de complementos de Figma:
cd src/cursor_mcp_plugin
Editar code.js y ui.html

Mejores prácticas

Al trabajar con Figma MCP:

Únase siempre a un canal antes de enviar comandos
Obtenga la descripción general del documento usando get_document_info primero
Verifique la selección actual con get_selection antes de realizar modificaciones
Utilice herramientas de creación adecuadas según sus necesidades:
- create_frame para contenedores
- create_rectangle para formas básicas
- create_text para elementos de texto
Verificar cambios usando get_node_info
Utilice instancias de componentes cuando sea posible para mantener la coherencia
Maneje los errores apropiadamente ya que todos los comandos pueden generar excepciones

Licencia

Instituto Tecnológico de Massachusetts (MIT)

This server cannot be installed

security - not tested

license - not found

quality - not tested

remote-capable server

The server can be hosted and run remotely because it primarily relies on remote services or has no dependency on the local environment.

Permite que Cursor AI interactúe con los diseños de Figma, lo que permite a los usuarios leer información de diseño y modificar elementos programáticamente a través de comandos de lenguaje natural.

Related MCP Servers

Figma MCP Server
GLips
-
security
A
license
-
quality
Enables Cursor to access Figma files through the Model Context Protocol, enhancing its ability to accurately interpret and utilize design data for code generation.
Last updated -
5
41,115
7,637
TypeScript
MIT License
Talk to Figma MCP
sonnylazuardi
A
security
A
license
A
quality
An MCP server integration that enables Cursor AI to communicate with Figma, allowing users to read designs and modify them programmatically through natural language commands.
Last updated -
19
2,514
3,528
JavaScript
MIT License
Cursor Talk To Figma MCP
toiletmadarchut
A
security
F
license
A
quality
Enables users to control the cursor in Figma through verbal commands using an agentic AI agent, streamlining the design process with a new interaction method.
Last updated -
19
2,514
1
JavaScript
Figma MCP Server
rlagudals95
-
security
A
license
-
quality
Gives AI-powered coding tools like Cursor, Windsurf, and Cline access to Figma design files, enabling more accurate code generation directly from Figma designs.
Last updated -
41,115
TypeScript
MIT License

View all related MCP servers

Talk to Figma MCP