Figma Copilot

Permite que los asistentes de IA interactúen y

Documentación

Figma Copilot

Un servidor de Model Context Protocol (MCP) que permite a los asistentes de IA interactuar con diseños de Figma de forma programática. Compatible con cualquier cliente MCP, incluidos Cursor, Claude Desktop y otras aplicaciones habilitadas para MCP. Incluye manejo avanzado de texto, operaciones por lotes y capacidades integrales de automatización de diseño.

Créditos

Este proyecto se basa en cursor-talk-to-figma-mcp de Sonny Lazuardi.

Aviso legal

Este es un proyecto independiente y no está afiliado, mantenido oficialmente, autorizado, respaldado ni patrocinado por Figma, Inc. Todos los nombres de productos y empresas son marcas comerciales™ o marcas registradas® de sus respectivos propietarios.

Mejoras clave

v0.3.2 (Última versión)

Preservación del formato de texto: las actualizaciones de texto ya no pierden el formato (negrita, cursiva, colores, fuentes). Consulta la Guía de operaciones de texto mejoradas.
Operaciones por lotes: mejora del rendimiento del 50-90 % para operaciones masivas. Consulta la Guía de operaciones por lotes.
Manejo de errores mejorado: mensajes de error específicos y procesables con sugerencias
Soluciones para tiempos de espera: nuevas opciones de escaneo con control de profundidad y resultados parciales
Operaciones de texto inteligentes: buscar y reemplazar con preservación de formato

Mejoras anteriores

Corregido el error "Cannot unwrap symbol" al trabajar con fuentes mixtas. Consulta la Documentación de manejo de fuentes.
Carga de fuentes mejorada con la API getRangeAllFontNames()
Mejor manejo de errores con Promise.allSettled() para la carga de fuentes
Devoluciones de valores seguras para evitar problemas de serialización
Registro mejorado para depurar problemas de fuentes

Estructura del proyecto

src/talk_to_figma_mcp/: servidor MCP de TypeScript para la integración con Figma
src/figma_copilot_plugin/: plugin de Figma para comunicarse con los clientes MCP
src/socket.ts: servidor WebSocket que facilita la comunicación entre el servidor MCP y el plugin de Figma

Comenzar

Instala Bun si aún no lo tienes:

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

Ejecuta la configuración para configurar MCP

bun setup

Inicia el servidor WebSocket

bun socket

Servidor MCP

bunx figma-copilot

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

Guía de inicio rápido

¡Próximamente tutoriales en 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.

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 al trabajar con instancias de componentes que necesitan personalizaciones similares.

Mejoras de rendimiento (v0.3.2)

Basado en el uso real en producción con la creación masiva de infografías:

Operación	Antes de v0.3.2	Después de v0.3.2	Mejora
Clonar 20 nodos	50 segundos	5 segundos	90 % más rápido
Actualizar 112 nodos de texto	15 minutos	30 segundos	96 % más rápido
Escanear documento grande	Tiempo de espera agotado tras 30 s	3 segundos	Sin tiempos de espera
Actualización de texto + formato	2 llamadas separadas	1 llamada combinada	50 % menos llamadas a la API

Configuración e instalación manual

Servidor MCP: integración con clientes MCP

Añade el servidor a la configuración de tu cliente MCP. Por ejemplo, en ~/.cursor/mcp.json de Cursor o en la configuración de Claude Desktop:

{
  "mcpServers": {
    "figma-copilot": {
      "command": "bunx",
      "args": ["figma-copilot@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/figma_copilot_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 tu cliente MCP
Abre Figma y ejecuta el plugin Figma Copilot
Conecta el plugin al servidor WebSocket uniéndote a un canal mediante join_channel
Usa tu cliente MCP para comunicarte con Figma usando 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_current_context: obtén contexto completo, incluida la selección, la diapositiva enfocada (si está en modo Slides) y, opcionalmente, información del documento
~~get_selection~~ - OBSOLETA: usa get_current_context en su lugar
read_my_design: obtén información detallada del nodo sobre la selección actual sin parámetros
get_nodes: obtén información detallada sobre uno o más nodos (acepta un ID único o un array)
~~get_node_info~~ - OBSOLETA: usa get_nodes con un ID de nodo único en su lugar
~~get_nodes_info~~ - OBSOLETA: usa get_nodes con un array de IDs de nodo en su lugar
~~get_focused_slide~~ - OBSOLETA: usa get_current_context con la opción includeSlideDetails
~~get_slides_mode~~ - OBSOLETA: usa get_current_context con la opción includeSlideDetails

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 por lotes
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, según 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

Operaciones de texto

Operaciones básicas de texto

~~scan_text_nodes~~ - OBSOLETA: usa scan_nodes_with_options con nodeTypes: ['TEXT'] en su lugar
scan_nodes_with_options: escaneo mejorado con control de profundidad, manejo de tiempos de espera y resultados parciales
set_text_content: establece el contenido de texto de un único nodo de texto (nota: pierde el formato)
set_multiple_text_contents: actualiza múltiples nodos de texto de forma eficiente por lotes (nota: pierde el formato)

Texto con preservación de formato (v0.3.2)

Consulta la Guía de operaciones de texto mejoradas para obtener una descripción general.

update_text_preserve_formatting: actualiza el texto preservando todo el formato de caracteres (negrita, cursiva, colores, fuentes)
smart_text_replace: busca y reemplaza texto preservando el formato de las partes sin cambios
set_multiple_text_contents_with_styles: actualiza texto por lotes con formato en una sola operación

Estilo de texto

Consulta la Guía de estilo de texto para obtener un uso detallado.

set_text_style_range: aplica estilo de texto (negrita, cursiva, subrayado, tachado) a rangos de caracteres específicos
get_text_style_range: obtén el estilo de texto para un rango específico
set_text_decoration_range: establece propiedades avanzadas de decoración de texto
get_text_decoration_range: obtén las propiedades de decoración de texto para un rango
set_range_font: cambia la familia y el estilo de fuente para un rango de texto
set_range_font_size: cambia el tamaño de fuente para un rango de texto
set_range_fills: establece el color del texto para un rango específico
get_styled_text_segments: obtén información detallada sobre los segmentos de texto y sus propiedades
set_component_description: establece la descripción del componente usando Markdown
get_component_description: obtén la descripción del componente en formato Markdown
normalize_markdown: normaliza el texto Markdown al subconjunto compatible con Figma

Auto Layout y espaciado

set_layout_mode: establece el modo de diseño y el comportamiento de ajuste de un marco (NONE, HORIZONTAL, VERTICAL)
set_padding: establece los 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 dimensionamiento horizontal y vertical para marcos de auto layout (FIXED, HUG, FILL)
set_item_spacing: establece la distancia entre los hijos en un marco de auto layout

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

Diseño 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

Operaciones por lotes (v0.3.2)

Consulta la Guía de operaciones por lotes para conocer las mejores prácticas.

clone_multiple_nodes: clona un nodo en múltiples posiciones en una sola operación (50-90 % más rápido que los clones individuales)
~~get_multiple_nodes_info~~ - OBSOLETA: usa get_nodes con un array de IDs de nodo en su lugar
set_multiple_nodes_property: establece el mismo valor de propiedad en múltiples nodos a la vez
execute_batch: ejecuta múltiples comandos diferentes en secuencia con un solo viaje de ida y vuelta
get_connection_status: obtén el estado actual de la conexión y las estadísticas

Componentes y estilos

get_styles: obtén información sobre los estilos locales
get_local_components: obtén información sobre los componentes locales
create_component_instance: crea una instancia de un componente
get_instance_overrides: extrae las propiedades de anulación de una instancia de componente seleccionada
set_instance_overrides: aplica las anulaciones extraídas a las instancias de destino

Herramientas compuestas

extract_slide_content: extrae todo el contenido de una diapositiva de Figma, incluidos texto, tablas y, opcionalmente, imágenes (admite salida sin procesar o estructurada)
get_presentation_summary: genera una descripción general de una presentación de Figma, incluido el número de diapositivas, los títulos de las diapositivas y, opcionalmente, un esquema que resuma los puntos clave
get_table_data: extrae datos de un nodo de tabla de Figma en varios formatos (array, objeto o CSV) con manejo personalizable de encabezados

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 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
batch_operations_guide: mejores prácticas para operaciones masivas eficientes en Figma (v0.3.2)
error_recovery_guide: cómo manejar errores comunes y tiempos de espera en operaciones de Figma (v0.3.2)
text_formatting_guide: mejores prácticas para actualizar texto preservando el formato (v0.3.2)

Desarrollo

Compilación del plugin de Figma

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

Mejores prácticas

Cuando trabajes con el MCP de Figma:

Únete siempre a un canal antes de enviar comandos
Obtén una visión general del documento usando get_document_info primero
Verifica el contexto actual con get_current_context antes de realizar modificaciones
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
Verifica los cambios usando get_node_info
Usa instancias de componentes cuando sea posible para mantener la consistencia
Maneja los errores de manera adecuada, ya que todos los comandos pueden lanzar excepciones
Para diseños grandes:
- Usa scan_nodes_with_options con un tiempo de espera y configuración de profundidad adecuados
  - Supervisa el progreso mediante actualizaciones de WebSocket
  - Implementa un manejo de errores apropiado
Para operaciones de texto:
- Usa operaciones por lotes cuando sea posible
  - Considera las relaciones estructurales
  - Verifica los cambios con exportaciones específicas
Para convertir anotaciones heredadas:
- Escanea los nodos de texto para identificar marcadores numerados y descripciones
  - Usa scan_nodes_by_types para encontrar los elementos de la interfaz de usuario a los que se refieren las anotaciones
  - Empareja los marcadores con sus elementos objetivo usando ruta, nombre o proximidad
  - Categoriza las anotaciones de manera adecuada 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 "noodles" de prototipos como conectores de FigJam:

Usa get_reactions para extraer flujos de prototipos,
configura un conector predeterminado con set_default_connector,
y genera líneas de conexión con create_connections para un mapeo visual claro del flujo.

Solución de problemas

Problemas de fuentes

Si encuentras errores de "Cannot unwrap symbol" al actualizar texto, esto probablemente se debe a fuentes mixtas en los nodos de texto. Consulta la Documentación de manejo de fuentes para obtener detalles sobre cómo el plugin maneja fuentes mixtas y las estrategias disponibles.

Problemas de tiempo de espera

Para documentos grandes que causan tiempos de espera, usa scan_nodes_with_options con limitación de profundidad y resultados parciales. Consulta la Guía de operaciones por lotes para estrategias de optimización.

Documentación

Guía de operaciones por lotes - Aprende a usar operaciones por lotes para obtener ganancias masivas de rendimiento
Guía de operaciones de texto mejoradas - Preserva el formato mientras actualizas texto
Guía de estilos de texto - Aplica y gestiona estilos de texto
Documentación de manejo de fuentes - Maneja fuentes mixtas y estrategias de carga de fuentes
Registro de cambios v0.3.2 - Notas de la última versión