cursor-talk-to-figma-mcp MCP — Casos de uso, Instalar & Demo en vivo

Por qué usarlo

Características clave

Lee la selección actual, árboles de nodos y metadatos del documento
Actualizaciones de texto en masa (scan_text_nodes + set_multiple_text_contents) para localización
Herramientas de auto-layout y espaciado (set_layout_mode, set_padding, set_axis_align)
Crea marcos, rectángulos y texto; instancia componentes; establece sobrescrituras
Exporta cualquier nodo como PNG/SVG para usarlo en otros lugares

Demo en vivo

Cómo se ve en la práctica

cursor-talk-to-figma.replay ▶ listo

0/0

Instalar

Elige tu cliente

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "cursor-talk-to-figma": {
      "command": "npx",
      "args": [
        "-y",
        "cursor-talk-to-figma-mcp"
      ],
      "_inferred": true
    }
  }
}

Abre Claude Desktop → Settings → Developer → Edit Config. Reinicia después de guardar.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "cursor-talk-to-figma": {
      "command": "npx",
      "args": [
        "-y",
        "cursor-talk-to-figma-mcp"
      ],
      "_inferred": true
    }
  }
}

Cursor usa el mismo esquema mcpServers que Claude Desktop. La configuración del proyecto prevalece sobre la global.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "cursor-talk-to-figma": {
      "command": "npx",
      "args": [
        "-y",
        "cursor-talk-to-figma-mcp"
      ],
      "_inferred": true
    }
  }
}

Haz clic en el icono MCP Servers de la barra lateral de Cline y luego en "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "cursor-talk-to-figma": {
      "command": "npx",
      "args": [
        "-y",
        "cursor-talk-to-figma-mcp"
      ],
      "_inferred": true
    }
  }
}

Mismo formato que Claude Desktop. Reinicia Windsurf para aplicar.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "cursor-talk-to-figma",
      "command": "npx",
      "args": [
        "-y",
        "cursor-talk-to-figma-mcp"
      ]
    }
  ]
}

Continue usa un array de objetos de servidor en lugar de un mapa.

~/.config/zed/settings.json

{
  "context_servers": {
    "cursor-talk-to-figma": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "cursor-talk-to-figma-mcp"
        ]
      }
    }
  }
}

Añádelo a context_servers. Zed recarga en caliente al guardar.

claude mcp add cursor-talk-to-figma -- npx -y cursor-talk-to-figma-mcp

Un solo comando. Verifica con claude mcp list. Quita con claude mcp remove.

Casos de uso

Usos del mundo real: cursor-talk-to-figma-mcp

Cómo actualizar cada capa de texto en un documento Figma desde un único prompt

👤 Diseñadores + PMs realizando revisiones de texto o localización ⏱ ~20 min intermediate

Cuándo usarlo: Tienes una especificación que renombra 50 cadenas y no quieres hacer 50 clics.

Requisitos previos

Bun instalado — curl -fsSL https://bun.sh/install | bash
Figma desktop abierto con el plugin vinculado — Plugins > Development > Link existing plugin > point to src/cursor_mcp_plugin/manifest.json
WebSocket bridge ejecutándose — bun run start in the cloned repo

Flujo

Únete al canal desde el panel del plugin

Únete al canal Figma X7F2 y enumera todos los nodos de texto en la página actual.✓ Copiado

→ Lista de IDs de nodos con texto actual
Asigna texto antiguo a texto nuevo

Aquí hay un CSV de old_string,new_string. Para cada nodo de texto cuyo contenido coincida con un old_string, reemplázalo con el new_string usando set_multiple_text_contents.✓ Copiado

→ Cantidad de actualizaciones aplicadas, vista previa de diff
Verifica visualmente

Exporta los tres marcos que tuvieron más ediciones como PNG para que pueda revisar.✓ Copiado

→ URLs PNG / rutas de archivo

Resultado: Un archivo revisado de texto con cada cadena actualizada y una exportación antes/después para comprobarlo.

Errores comunes

El plugin se desconecta durante la operación — set_multiple_text_contents es idempotente — vuelve a ejecutar con el mismo mapeo; los nodos ya correctos se omiten
El texto en componentes vs instancias confunde las actualizaciones — Usa get_instance_overrides primero para ver qué instancias sobrescriben el texto base

Combinar con: filesystem

Cómo anotar una especificación Figma desde un PRD en un solo paso

👤 Ingenieros de diseño asociando documentos con prototipos ⏱ ~25 min intermediate

Cuándo usarlo: Tu PRD dice 'el CTA debería decir X, incluye copia de tooltip Y' y quieres eso como anotaciones Figma.

Flujo

Comparte el PRD

Aquí está el PRD [pega]. Extrae cada requisito de anotación de UI.✓ Copiado

→ Lista estructurada de {node_hint, annotation_text}
Asigna pistas a nodos reales

Usa get_selection y scan_nodes_by_types para hacer coincidir cada anotación con un id de nodo concreto en la página actual.✓ Copiado

→ Pares de node_id + anotación listos
Aplica anotaciones

Aplícalas con set_multiple_annotations.✓ Copiado

→ Anotaciones visibles en la superposición del plugin

Resultado: Un archivo Figma autodocumentado que los ingenieros pueden leer sin cambiar de pestaña.

Errores comunes

Claude coincide con el nodo incorrecto cuando varios comparten un nombre — Incluye nombres de marcos padres como pistas de desambiguación

Combinar con: notion · github

Cómo generar variantes de componentes (modo oscuro, tamaños) programáticamente

👤 Equipos de sistemas de diseño ⏱ ~20 min advanced

Cuándo usarlo: Necesitas clonar un botón base en 12 variantes y ajustar rellenos/trazos.

Flujo

Clona el nodo base

Clona el marco Button/Primary 4 veces y acomódalos horizontalmente con espacio de 16px.✓ Copiado

→ 4 nodos nuevos en el documento
Ajusta tonos de rellenos/trazos

Para cada clon, establece set_fill_color en los tonos 500, 600, 700, 800 de #3B82F6.✓ Copiado

→ Progresión de color visible
Convierte a variantes

Agrupalos como un conjunto de componentes llamado 'Button / Intensity'.✓ Copiado

→ Nuevo conjunto de componentes aparece en assets

Resultado: Un conjunto de variantes listo para usar en tu sistema de diseño.

Errores comunes

Los tokens de color difieren del hex sin procesar — Si tu sistema usa variables, usa set_fill_color con el id de variable, no el hex sin procesar

Cómo exportar cada marco marcado como PNG para entrega a desarrollo

👤 Ingenieros de diseño preparando un documento de entrega ⏱ ~10 min beginner

Cuándo usarlo: Antes de un inicio de sprint o una revisión de cliente.

Flujo

Encuentra marcos con una etiqueta de entrega

Escanea nodos de tipo FRAME en la página actual cuyo nombre comienza con '[HANDOFF]'.✓ Copiado

→ Lista de marcos objetivo
Exporta a 2x

Exporta cada uno como PNG a 2x y guarda en /handoff/2026-04/.✓ Copiado

→ Rutas de archivo devueltas

Resultado: Una carpeta de entrega con marca de tiempo lista para colocar en Notion o Linear.

Combinar con: filesystem · notion

Combinaciones

Combínalo con otros MCPs para multiplicar por 10

cursor-talk-to-figma + notion

Sincroniza anotaciones de diseño en una página de especificación Notion para ingenieros

Extrae cada anotación en la página Figma actual y espéjalas en el documento Notion 'Checkout Spec v3' como una lista de verificación.✓ Copiado

cursor-talk-to-figma + filesystem

Exporta marcos en una carpeta de entrega local versionada por fecha

Exporta cada marco [HANDOFF] a /design-handoff/2026-04/ como PNG 2x.✓ Copiado

cursor-talk-to-figma + github

Empareja un cambio de diseño con una referencia de PR de código

Añade una anotación en el botón CTA vinculándola al PR #4421 en el repositorio frontend.✓ Copiado

Herramientas

Lo que expone este MCP

Herramienta	Entradas	Cuándo llamar	Coste
get_document_info		Oriéntate en un archivo nuevo	gratuito
get_selection		Opera sobre lo que el usuario acaba de hacer clic	gratuito
scan_text_nodes	root_id?: str	Antes de cambios de texto en masa	gratuito
set_multiple_text_contents	updates: {id, text}[]	Reemplazo de texto por lotes	gratuito
set_fill_color	id: str, color: {r,g,b,a}	Vuelve a estilizar un nodo	gratuito
set_layout_mode	id, mode: 'HORIZONTAL'\|'VERTICAL'\|'NONE'	Activa/desactiva auto-layout	gratuito
create_component_instance	component_key: str, parent_id: str, position?: {x,y}	Coloca un componente de biblioteca en el lienzo	gratuito
set_multiple_annotations	annotations: {id, text}[]	Anotaciones de especificación por lotes	gratuito
export_node_as_image	id: str, format: 'PNG'\|'SVG'\|'JPG', scale?: number	Entrega, revisiones, vistas previas en línea	gratuito
join_channel	channel: str	Primera llamada después de lanzar el plugin	gratuito

Coste y límites

Lo que cuesta ejecutarlo

Cuota de API: Figma no tiene un límite de velocidad publicado para acciones de plugin; el límite práctico es el rendimiento de WebSocket
Tokens por llamada: Información de nodo: 100-1500 tokens dependiendo de los hijos
Monetario: Gratuito (se requiere cuenta Figma; el plan gratuito funciona)
Consejo: Siempre limita los escaneos a un id de nodo raíz específico; los escaneos en toda la página en archivos grandes consumen el contexto.

Seguridad

Permisos, secretos, alcance

Ámbitos mínimos: Plugin Figma ejecutándose en aplicación de escritorio/web; no se necesita token API

Almacenamiento de credenciales: Ninguno — el plugin se ejecuta en proceso en Figma; MCP se comunica a través de WebSocket localhost

Salida de datos: Los nodos del documento Figma fluyen desde el plugin a tu MCP local y luego a tu LLM elegido. Los diseños sensibles salen de tu máquina solo a través de la llamada LLM.

No conceder nunca: No expongas el puerto WebSocket más allá de localhost

Las ediciones en masa no son transaccionales — el fallo parcial deja estado mixto. Confirma versiones de Figma antes de ejecutar grandes operaciones.

Resolución de problemas

Errores comunes y soluciones

El plugin no puede conectarse a WebSocket

Asegúrate de que bun run start esté activo y el id del canal del plugin coincida con lo que se unió el agente.

Verificar: bun --version && lsof -i :3055

set_multiple_text_contents solo actualiza algunos nodos

Los nodos dentro de capas bloqueadas o componentes se omiten. Desbloquea o apunta a la sobrescritura de instancia.

El plugin Figma muestra 'manifest not found'

Vuelve a vincular a través de Plugins > Development > Link existing plugin > elige manifest.json de src/cursor_mcp_plugin/.

Las exportaciones devuelven URLs vacías

Algunos nodos (grupos de máscaras, ciertos efectos) no pueden renderizarse del lado del servidor. Aplana primero o exporta como SVG.

Alternativas

cursor-talk-to-figma-mcp vs otros

Alternativa	Cuándo usarla	Contrapartida
Official Figma Dev Mode MCP	Tienes asientos pagados de Figma Dev Mode y quieres soporte oficial	Solo lectura; sin edición en masa
Framelink Figma MCP	Prefieres un servidor basado en REST-API de solo lectura	Sin mutación, no se necesita plugin WebSocket pero no puede editar

Más

Recursos

📖 Lee el README oficial en GitHub

🐙 Ver issues abiertas

🔍 Ver todos los 400+ servidores MCP y Skills