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

Related MCP server: Talk to Figma MCP

Empezar

1. Instala Bun si aún no lo has hecho:

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

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

bun setup

3. Iniciar el servidor Websocket

bun start

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

1. En Figma, vaya a Complementos > Desarrollo > Nuevo complemento

2. Seleccione "Vincular complemento existente"

3. Seleccione el archivo src/cursor_mcp_plugin/manifest.json

4. El complemento ahora debería estar disponible en sus complementos de desarrollo de Figma

Uso

1. Iniciar el servidor WebSocket

2. Instalar el servidor MCP en Cursor

3. Abra Figma y ejecute el complemento Cursor MCP

4. Conecte el complemento al servidor WebSocket uniéndose a un canal usando join_channel

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

1. Navegue hasta el directorio de complementos de Figma:

   cd src/cursor_mcp_plugin

2. Editar code.js y ui.html

Mejores prácticas

Al trabajar con Figma MCP:

1. Únase siempre a un canal antes de enviar comandos

2. Obtenga la descripción general del documento usando get_document_info primero

3. Verifique la selección actual con get_selection antes de realizar modificaciones

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

5. Verificar cambios usando get_node_info

6. Utilice instancias de componentes cuando sea posible para mantener la coherencia

7. Maneje los errores apropiadamente ya que todos los comandos pueden generar excepciones

Licencia

Instituto Tecnológico de Massachusetts (MIT)