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

Por qué usarlo

Características clave

Funciona con cuentas gratuitas de Figma (sin licencia de Dev Mode)
Lectura: información del documento, selección, auditorías de estilos, escaneos de componentes
Escritura: crear/modificar formas, texto, marcos, colores, auto-layout
El emparejamiento de ID de canal conecta cada sesión de Claude a un archivo de Figma

Demo en vivo

Cómo se ve en la práctica

claude-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": {
    "claude-talk-to-figma": {
      "command": "npx",
      "args": [
        "-y",
        "claude-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": {
    "claude-talk-to-figma": {
      "command": "npx",
      "args": [
        "-y",
        "claude-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": {
    "claude-talk-to-figma": {
      "command": "npx",
      "args": [
        "-y",
        "claude-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": {
    "claude-talk-to-figma": {
      "command": "npx",
      "args": [
        "-y",
        "claude-talk-to-figma-mcp"
      ],
      "_inferred": true
    }
  }
}

Mismo formato que Claude Desktop. Reinicia Windsurf para aplicar.

~/.continue/config.json

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

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

~/.config/zed/settings.json

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

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

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

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

Casos de uso

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

Auditar un archivo de Figma en busca de colores y estilos fuera del sistema

👤 Responsables del sistema de diseño ⏱ ~20 min intermediate

Cuándo usarlo: El archivo del equipo se ha alejado de los tokens de diseño y quieres encontrar los desviados.

Requisitos previos

Plugin de Figma importado mediante manifiesto — Figma → Plugins → Desarrollo → Importar desde manifiesto
Ejecutar bun run socket — Desde el repositorio; abre el WebSocket

Flujo

Conectar

Conectar a Figma, canal abc123 (copiar de la interfaz del plugin).✓ Copiado

→ Conectado; nombre del documento mostrado
Escanear rellenos fuera del sistema

Escanear todos los nodos en busca de colores de relleno que no estén en nuestros 12 tokens de marca. Enumera las rutas de los nodos.✓ Copiado

→ Lista de instancias de desviación
Reportar

Agrupar por marco más cercano y resumir. Sugiere qué token debería ser cada desviado.✓ Copiado

→ Lista de limpieza accionable

Resultado: Un archivo que puedes entregar a un diseñador con correcciones concretas.

Errores comunes

El ID del canal rota si reinicia el plugin — Siempre copia fresco del panel del plugin; los IDs antiguos agotan silenciosamente el tiempo

Convertir una especificación escrita en un marco de Figma aproximado

👤 PMs, no diseñadores ⏱ ~15 min beginner

Cuándo usarlo: Quieres un wireframe rápido sin abrir Figma tú mismo.

Flujo

Describir el diseño

Crea un nuevo marco 1440x900 en el archivo actual. Añade un encabezado, una cuadrícula de características de 3 columnas y un pie de página. Usa nuestros colores de marca.✓ Copiado

→ El marco aparece en Figma con la estructura
Iterar

Haz que las tarjetas de características usen nuestro componente 'Card'. Cambia el encabezado a la variante 'primary'.✓ Copiado

→ Marco actualizado en tiempo real

Resultado: Un wireframe aproximado sin tocar la interfaz de Figma.

Ejecutar una verificación de contraste de color de accesibilidad en un archivo de Figma

👤 Diseñadores, defensores de la accesibilidad ⏱ ~25 min intermediate

Cuándo usarlo: Antes de entregar, quieres marcar las fallas de contraste.

Flujo

Recorrer nodos de texto con sus fondos

Para cada nodo de texto, calcula el contraste WCAG contra el relleno de fondo más cercano. Marca cualquier cosa por debajo de 4.5:1 para cuerpo o 3:1 para grande.✓ Copiado

→ Lista de pares con fallas y sus ratios
Sugerir ajustes

Para cada falla, sugiere el cambio de token mínimo para pasar.✓ Copiado

→ Sugerencias de arreglos

Resultado: Un informe de accesibilidad antes de que QA lo descubra más tarde.

Combinaciones

Combínalo con otros MCPs para multiplicar por 10

claude-talk-to-figma + meigen-ai-design

Genera una imagen, colócala en un marco de Figma como marcador de posición

Genera una imagen hero con MeiGen, luego colócala como relleno en el marco de Figma seleccionado.✓ Copiado

claude-talk-to-figma + unreal

Figma HUD → andamio de widget UMG de Unreal

Exporta la estructura del marco HUD de Figma seleccionado, luego crea un Blueprint de Widget UMG coincidente en Unreal.✓ Copiado

Herramientas

Lo que expone este MCP

Herramienta	Entradas	Cuándo llamar
get_document_info		Primer paso; confirma el archivo correcto
get_selection		Operar sobre lo que el usuario seleccionó
scan_styles		Detección de desviación
create_shape	type, x, y, w, h, fill?	Construir diseños
create_text	content, x, y, style?	Agregar etiquetas/encabezados
set_fill	node_id, color	Arreglar desviados
set_auto_layout	node_id, direction, padding, gap	Convertir a responsivo

Coste y límites

Lo que cuesta ejecutarlo

Cuota de API: Ninguno — todo es WebSocket local
Tokens por llamada: Los escaneos de documentos pueden ser 5-30k tokens en archivos grandes
Monetario: Gratuito
Consejo: Operar en get_selection siempre que sea posible; los escaneos de documentos completos queman tokens

Seguridad

Permisos, secretos, alcance

Almacenamiento de credenciales: Sin claves API; el plugin usa tu sesión actual de Figma

Salida de datos: Solo WebSocket local; los datos de Figma solo se ceden si compartes resultados

Resolución de problemas

Errores comunes y soluciones

Tiempo de espera de conexión agotado / canal no encontrado

Los IDs de canal rotan — copia fresco del panel del plugin y reconecta

Plugin faltante en el menú de Figma

Re-importa a través de Plugins → Desarrollo → Importar desde manifiesto; los plugins de desarrollo no persisten entre reinicios de Figma en algunas configuraciones

Las escrituras fallan silenciosamente

Figma restringe las escrituras de plugin en algunos tipos de archivos (librerías, duplicados comunitarios). Busca el icono de bloqueo

Alternativas

claude-talk-to-figma-mcp vs otros

Alternativa	Cuándo usarla	Contrapartida
Framelink / Figma-Context MCP	Quieres solo lectura a través de la API de Figma con un token personal	Sin escritura; requiere acceso a API
Figma Dev Mode MCP (official)	Tu organización paga por Dev Mode	Se requieren asientos pagos

Más

Recursos

📖 Lee el README oficial en GitHub

🐙 Ver issues abiertas

🔍 Ver todos los 400+ servidores MCP y Skills