Talk to 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

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

Enlace de 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 .

Propagación de anulaciones de instancias. Otra contribución de @dusskapark. Propague las anulaciones de instancias de componentes desde una instancia de origen a múltiples instancias de destino con un solo comando. Esta función reduce drásticamente el trabajo de diseño repetitivo al trabajar con instancias de componentes que requieren personalizaciones similares. Vea nuestro 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)

Prototipado y conexiones

• get_reactions : obtiene todas las reacciones del prototipo de los nodos con animación visual destacada
• set_default_connector : establece un conector FigJam copiado como el estilo de conector predeterminado para crear conexiones (debe configurarse antes de crear conexiones)
• create_connections - Crea líneas de conexión FigJam entre nodos, según flujos de prototipos o mapeo personalizado

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

Diseño y espaciado automáticos

• set_layout_mode : establece el modo de diseño y el comportamiento de ajuste de un marco (NINGUNO, HORIZONTAL, VERTICAL)
• set_padding - Establece valores de relleno para un marco de diseño automático (superior, derecha, inferior, izquierda)
• set_axis_align - Establece la alineación del eje principal y del eje contrario para los marcos de diseño automático
• set_layout_sizing : establece los modos de tamaño horizontal y vertical para los marcos de diseño automático (FIJO, ABRAZO, RELLENO)
• set_item_spacing - Establece la distancia entre los elementos secundarios en un marco de diseño automático

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
• create_component_instance - Crea una instancia de un componente
• get_instance_overrides : extrae propiedades de anulación de una instancia de componente seleccionada
• set_instance_overrides : aplicar anulaciones extraídas a las instancias de destino

Exportación y Avanzado

• export_node_as_image : exporta un nodo como una imagen (PNG, JPG, SVG o PDF); soporte limitado para imágenes que actualmente devuelven base64 como texto

Gestión de conexiones

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

Indicaciones de MCP

El servidor MCP incluye varios mensajes de ayuda para guiarlo a través de tareas de diseño complejas:

• design_strategy - Mejores prácticas para trabajar con diseños de Figma
• read_design_strategy : Mejores prácticas para leer diseños de Figma
• text_replacement_strategy : Enfoque sistemático para reemplazar texto en diseños de Figma
• annotation_conversion_strategy : estrategia para convertir anotaciones manuales en anotaciones nativas de Figma
• swap_overrides_instances : estrategia para transferir anulaciones entre instancias de componentes en Figma
• reaction_to_connector_strategy - Estrategia para convertir las reacciones del prototipo de Figma en líneas de conexión usando la salida de 'get_reactions' y guiando el uso de 'create_connections' en secuencia

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

11. Visualice prototipos de fideos como conectores de FigJam:

• Utilice get_reactions para extraer flujos de prototipos,
• Establezca un conector predeterminado con set_default_connector ,
• y generar líneas de conexión con create_connections para un mapeo de flujo visual claro.

Licencia

Instituto Tecnológico de Massachusetts (MIT)