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

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

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

3. Iniciar el servidor Websocket

4. Servidor MCP

5. Instalar el complemento Figma

Tutorial rápido en vídeo

Ejemplo de automatización del diseño

Reemplazo de contenido de texto masivo

Gracias a @dusskapark por contribuir con la función de reemplazo de texto masivo. Aquí está el video de demostración .

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 :

Servidor WebSocket

Inicie el servidor WebSocket:

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

Guía de Windows + WSL

1. Instalar bun mediante powershell

2. Descomente el nombre de host 0.0.0.0 en src/socket.ts

3. Iniciar el websocket

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
• read_my_design - Obtener información detallada del nodo sobre la selección actual sin parámetros
• get_node_info - Obtener información detallada sobre un nodo específico
• get_nodes_info : obtenga información detallada sobre varios nodos proporcionando una matriz de identificaciones de nodos

Anotaciones

• get_annotations - Obtener todas las anotaciones en el documento actual o en un nodo específico
• set_annotation - Crea o actualiza una anotación con soporte para Markdown
• set_multiple_annotations - Cree y actualice múltiples anotaciones por lotes de manera eficiente
• scan_nodes_by_types : busca nodos con tipos específicos (útil para encontrar objetivos de anotación)

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

Modificar el contenido del texto

• scan_text_nodes : Escanea nodos de texto con fragmentación inteligente para diseños grandes
• set_text_content - Establece el contenido de texto de un solo nodo de texto
• set_multiple_text_contents - Actualiza por lotes varios nodos de texto de manera eficiente

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
• delete_multiple_nodes - Elimina varios nodos a la vez de manera eficiente
• clone_node - Crea una copia de un nodo existente con desplazamiento de posición opcional

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
8. Para diseños grandes:
   • Utilice parámetros de fragmentación en scan_text_nodes
   • Monitorear el progreso a través de actualizaciones de WebSocket
   • Implementar un manejo de errores adecuado
9. Para operaciones de texto:
   • Utilice operaciones por lotes cuando sea posible
   • Considere las relaciones estructurales
   • Verificar cambios con exportaciones específicas
10. Para convertir anotaciones heredadas:

• Escanee los nodos de texto para identificar marcadores numerados y descripciones
• Utilice scan_nodes_by_types para encontrar elementos de la interfaz de usuario a los que hacen referencia las anotaciones
• Empareja los marcadores con sus elementos de destino usando ruta, nombre o proximidad
• Clasifique las anotaciones adecuadamente con get_annotations
• Cree anotaciones nativas con set_multiple_annotations en lotes
• Verifique que todas las anotaciones estén vinculadas correctamente a sus destinos
• Eliminar nodos de anotación heredados después de una conversión exitosa

Licencia

Instituto Tecnológico de Massachusetts (MIT)