Talk to Figma MCP

Un servidor para integrarse con Figma, que permite interactuar con tus archivos de diseño.

GitHubPrueba este MCPPatrocinado

Documentación

Talk to Figma MCP

Cómo usar

1. Instalación de Bun

2. Registro de MCP

2.1 Ejecutar desde el repositorio usando bun

"TalkToFigma": {
      "command": "bunx",
      "args": ["hyun1202/talk-to-figma-mcp#dist"]
}

2.2 Ejecución directa

Como no está registrado en el repositorio de npm, debes configurar el proyecto para que se ejecute realmente.

basado en Windows

"TalkToFigma": {
    "command": "cmd", 
    "args": ["/c", "npm", "--silent", "-C", "C:/cursor-talk-to-figma-mcp", "start"]
}

Cambios realizados

  • Modificado para permitir la creación de componentes locales
  • Modificado para que los componentes se creen en el elemento principal al crearlos

Original

Cursor Talk to Figma MCP

Estructura del proyecto

  • src/talk_to_figma_mcp/ - Servidor MCP 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

Primeros pasos

  1. Instala Bun si aún no lo tienes:
curl -fsSL https://bun.sh/install | bash
  1. Ejecuta la configuración; esto también instalará MCP en el proyecto activo de tu Cursor
bun setup
  1. Inicia el servidor WebSocket
bun socket
  1. Servidor MCP
bunx cursor-talk-to-figma-mcp
  1. NUEVO Instala el plugin de Figma desde la página de la comunidad de Figma o instálalo localmente

Tutorial rápido en video

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 instancias Otra contribución de @dusskapark Propaga 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 cuando se trabaja 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 de 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

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

Guía para Windows + WSL

  1. Instala bun mediante powershell
powershell -c "irm bun.sh/install.ps1|iex"
  1. 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",
  1. Inicia el websocket
bun socket

Uso

  1. Inicia el servidor WebSocket
  2. Instala el servidor MCP en Cursor
  3. Abre Figma y ejecuta el Plugin Cursor MCP
  4. Conecta el plugin al servidor WebSocket uniéndote a un canal usando join_channel
  5. Usa Cursor para comunicarte 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 - 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

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 de forma eficiente en lote
  • 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 configurarse 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_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 de forma eficiente en lote

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 relleno para un marco de auto-layout (superior, derecho, inferior, izquierdo)
  • set_axis_align - Establece la alineación del eje principal y del eje transversal para marcos de auto-layout
  • set_layout_sizing - Establece los modos de tamaño horizontal y vertical para marcos de auto-layout (FIXED, HUG, FILL)
  • set_item_spacing - Establece la distancia entre elementos secundarios en un marco de auto-layout

Estilos

  • 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 las esquinas de un nodo con control opcional por esquina

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 forma eficiente
  • clone_node - Crea una copia de un nodo existente con desplazamiento de posición opcional

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 de destino

Exportación y avanzado

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

Gestión de conexiones

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

Prompts de 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 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 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

Compilación del plugin de Figma

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

Mejores prácticas

Cuando trabajes con el Figma MCP:

  1. Únete siempre a un canal antes de enviar comandos
  2. Obtén una vista general del documento usando get_document_info primero
  3. Verifica la selección actual con get_selection antes de las modificaciones
  4. Usa las herramientas de creación adecuadas según las necesidades:
    • create_frame para contenedores
      • create_rectangle para formas básicas
      • create_text para elementos de texto
  5. Verifica los cambios usando get_node_info
  6. Usa instancias de componentes cuando sea posible para mantener la consistencia
  7. Maneja los errores adecuadamente, ya que todos los comandos pueden lanzar excepciones
  8. Para diseños grandes:
    • Usa parámetros de fragmentación en scan_text_nodes
      • Monitorea el progreso mediante actualizaciones de WebSocket
      • Implementa un manejo de errores adecuado
  9. Para operaciones de texto:
    • Usa operaciones en lote cuando sea posible
      • Considera las relaciones estructurales
      • Verifica los cambios con exportaciones específicas
  10. Para convertir anotaciones heredadas:
    • Escanea nodos de texto para identificar marcadores numerados y descripciones
      • Usa scan_nodes_by_types para encontrar elementos de interfaz a los que se refieren las anotaciones
      • Relaciona los marcadores con sus elementos de destino usando ruta, nombre o proximidad
      • Categoriza las anotaciones adecuadamente 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
  11. Visualiza los fideos de prototipo como conectores de 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