Cursor Talk to Figma MCP

Integra Cursor AI con Figma para leer y modificar diseños de forma programática.

Documentación

Talk to Figma MCP

Este proyecto implementa una integración de Protocolo de Contexto de Modelo (MCP) entre agentes de IA (Cursor, Claude Code) y Figma, permitiendo que el agente de IA 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 en TypeScript para la integración con Figma
src/cursor_mcp_plugin/ - Plugin de Figma para comunicarse con Cursor
src/socket.ts - Servidor WebSocket que facilita la comunicación entre el servidor MCP y el plugin de Figma

Cómo usar

Instala Bun si aún no lo tienes:

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

Ejecuta la configuración, esto también instalará MCP en el proyecto activo de tu Cursor

bun setup

Inicia el servidor WebSocket

bun socket

NUEVO Instala el plugin de Figma desde la página de la comunidad de Figma o instálalo localmente

Tutorial de Video Rápido

Enlace al video

Ejemplo de Automatización de Diseño

Reemplazo masivo de contenido de texto

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

Propagación de Anulaciones de Instancia Otra contribución de @dusskapark Propaga anulaciones de instancias de componentes desde una instancia fuente a múltiples instancias objetivo con un solo comando. Esta función reduce drásticamente el trabajo de diseño repetitivo al trabajar con instancias de componentes que necesitan personalizaciones similares. Consulta nuestro video de demostración.

Configuración e Instalación Manual

Servidor MCP: Integración con Cursor

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

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

Servidor WebSocket

Inicia el servidor WebSocket:

bun socket

Plugin de Figma

En Figma, ve a Plugins > Desarrollo > Nuevo Plugin
Elige "Vincular plugin existente"
Selecciona el archivo src/cursor_mcp_plugin/manifest.json
El plugin ahora debería estar disponible en tus plugins de desarrollo de Figma

Guía para Windows + WSL

Instala bun mediante powershell

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

Descomenta el nombre de host 0.0.0.0 en src/socket.ts

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

Inicia el websocket

bun socket

Uso

Inicia el servidor WebSocket
Instala el servidor MCP en Cursor
Abre Figma y ejecuta el Plugin MCP de Cursor
Conecta el plugin al servidor WebSocket uniéndote a un canal usando join_channel
Usa Cursor para comunicarte con Figma usando las herramientas MCP

Configuración de Desarrollo Local

Para desarrollar, actualiza tu configuración de mcp para que apunte a tu directorio local.

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

Herramientas MCP

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

Documento y Selección

get_document_info - Obtén información sobre el documento actual de Figma
get_selection - Obtén información sobre la selección actual
read_my_design - Obtén información detallada del nodo sobre la selección actual sin parámetros
get_node_info - Obtén información detallada sobre un nodo específico
get_nodes_info - Obtén información detallada sobre múltiples nodos proporcionando un array de IDs de nodos
set_focus - Establece el foco en un nodo específico seleccionándolo y desplazando la vista hasta él
set_selections - Establece la selección en múltiples nodos y desplaza la vista para mostrarlos

Anotaciones

get_annotations - Obtén todas las anotaciones en el documento actual o en un nodo específico
set_annotation - Crea o actualiza una anotación con soporte de markdown
set_multiple_annotations - Crea/actualiza múltiples anotaciones en lote de manera eficiente
scan_nodes_by_types - Escanea nodos con tipos específicos (útil para encontrar objetivos de anotación)

Prototipado y Conexiones

get_reactions - Obtén todas las reacciones de prototipo de los nodos con animación de resaltado visual
set_default_connector - Establece un conector FigJam copiado como estilo de conector predeterminado para crear conexiones (debe establecerse antes de crear conexiones)
create_connections - Crea líneas de conector FigJam entre nodos, basadas en flujos de prototipo o mapeo personalizado

Creación de 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_section - Crea una sección para agrupar contenido relacionado en el lienzo
create_text - Crea un nuevo nodo de texto con propiedades de fuente personalizables

Modificación de contenido de 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 múltiples nodos de texto en lote de manera eficiente

Auto Layout y Espaciado

set_layout_mode - Establece el modo de layout y el comportamiento de ajuste de un marco (NONE, HORIZONTAL, VERTICAL)
set_padding - Establece valores de padding para un marco con auto layout (superior, derecho, inferior, izquierdo)
set_axis_align - Establece la alineación del eje principal y secundario para marcos con auto layout
set_layout_sizing - Establece modos de dimensionamiento horizontal y vertical para marcos con auto layout (FIXED, HUG, FILL)
set_item_spacing - Establece la distancia entre hijos en un marco con auto layout

Estilos

set_fill_color - Establece el color de relleno de un nodo (RGBA)
set_stroke_color - Establece el color y grosor del trazo de un nodo
set_corner_radius - Establece el radio de esquina de un nodo con control opcional por esquina
set_image_fill - Rellena un nodo con una imagen desde una ruta de archivo local, URL o datos base64 (FILL, FIT, CROP o TILE)

Layout y Organización

move_node - Mueve un nodo a una nueva posición
resize_node - Redimensiona un nodo con nuevas dimensiones
delete_node - Elimina un nodo
delete_multiple_nodes - Elimina múltiples nodos a la vez de manera eficiente
clone_node - Crea una copia de un nodo existente con desplazamiento de posición opcional
rename_node - Renombra un nodo
set_parent - Mueve un nodo a un nuevo padre (sección, marco o grupo), preservando su posición absoluta por defecto

Componentes y Estilos

get_styles - Obtén información sobre estilos locales
get_local_components - Obtén información sobre 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 - Aplica anulaciones extraídas a instancias objetivo

Exportación y Avanzado

export_node_as_image - Exporta un nodo como imagen (PNG, JPG, SVG o PDF) - soporte limitado en imagen que actualmente devuelve base64 como texto

Gestión de Conexiones

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

Prompts MCP

El servidor MCP incluye varios prompts de ayuda para guiarte en 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 a anotaciones nativas de Figma
swap_overrides_instances - Estrategia para transferir anulaciones entre instancias de componentes en Figma
reaction_to_connector_strategy - Estrategia para convertir reacciones de prototipo de Figma en líneas de conector usando la salida de 'get_reactions', y guiar el uso de 'create_connections' en secuencia

Desarrollo

Construcción del Plugin de Figma

Navega al directorio del plugin de Figma:
```
cd src/cursor_mcp_plugin
```
Edita code.js y ui.html

Mejores Prácticas

Al trabajar con el Figma MCP:

Únete siempre a un canal antes de enviar comandos
Obtén una vista general del documento usando get_document_info primero
Verifica la selección actual con get_selection antes de las modificaciones
Usa las herramientas de creación apropiadas según las necesidades:
- create_frame para contenedores
- create_rectangle para formas básicas
- create_text para elementos de texto
Verifica los cambios usando get_node_info
Usa instancias de componentes cuando sea posible para mantener la consistencia
Maneja los errores apropiadamente ya que todos los comandos pueden lanzar excepciones
Para diseños grandes:
- Usa parámetros de fragmentación en scan_text_nodes
- Monitorea el progreso a través de actualizaciones de WebSocket
- Implementa un manejo de errores apropiado
Para operaciones de texto:
- Usa operaciones en lote cuando sea posible
- Considera las relaciones estructurales
- Verifica los cambios con exportaciones específicas
Para convertir anotaciones heredadas:
- Escanea nodos de texto para identificar marcadores numerados y descripciones
- Usa scan_nodes_by_types para encontrar elementos de UI a los que se refieren las anotaciones
- Empareja marcadores con sus elementos objetivo usando ruta, nombre o proximidad
- Categoriza las anotaciones apropiadamente con get_annotations
- Crea anotaciones nativas con set_multiple_annotations en lotes
- Verifica que todas las anotaciones estén correctamente vinculadas a sus objetivos
- Elimina los nodos de anotación heredados después de una conversión exitosa
Visualiza los "fideos" de prototipo como conectores FigJam:

Usa get_reactions para extraer flujos de prototipo,
establece un conector predeterminado con set_default_connector,
y genera líneas de conector con create_connections para un mapeo visual claro del flujo.

Licencia

MIT