Figma Context MCP — Casos de uso, Instalar & Demo en vivo

Por qué usarlo

Características clave

Retorna datos de Figma en forma YAML/JSON eficiente en tokens, no el crudo monstruo API
Resuelve instancias de componentes y sus sobrescrituras
Expone tokens de diseño (colores, estilos de texto, espaciado) por nombre
Exportación de imágenes de nodos seleccionados para referencia visual
Solo lectura — nunca escribe de vuelta a tu archivo de Figma

Demo en vivo

Cómo se ve en la práctica

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": {
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp"
      ]
    }
  }
}

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

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

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp"
      ]
    }
  }
}

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": {
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp"
      ]
    }
  }
}

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

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp"
      ]
    }
  }
}

Mismo formato que Claude Desktop. Reinicia Windsurf para aplicar.

~/.continue/config.json

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

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

~/.config/zed/settings.json

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

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

claude mcp add figma -- npx -y figma-developer-mcp

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

Casos de uso

Usos del mundo real: Figma Context

Genera código React/SwiftUI/Tailwind a partir de un frame de Figma

👤 Desarrolladores frontend implementando una pantalla diseñada ⏱ ~30 min intermediate

Cuándo usarlo: Tienes un frame de Figma para una pantalla/componente y quieres que se genere fielmente el primer 80% del código.

Requisitos previos

Token de acceso personal de Figma — figma.com → Settings → Personal access tokens; scope a file_read
URL del archivo de Figma — Copia la URL del archivo de Figma; el MCP puede extraer la clave del archivo y el id del nodo

Flujo

Extrae los datos del frame

Obtén el nodo de Figma en <pega URL de figma con node-id>. Retorna su layout, contenido de texto, colores y estructura de hijos.✓ Copiado

→ Datos de nodo jerárquicos con valores reales — no 'unable to fetch'
Genera código basado en los datos

Genera un componente React + Tailwind que coincida exactamente. Usa los colores hex reales y valores de píxeles de los datos de Figma, no aproximaciones.✓ Copiado

→ Código que referencia valores reales, p. ej. bg-[#1A2B3C] no bg-blue-500
Verifica con una exportación

Exporta el mismo frame como PNG. Compara con el renderizado esperado de tu componente generado y señala cualquier diferencia.✓ Copiado

→ Diffs específicos (icono faltante, padding incorrecto) en lugar de 'se ve parecido'

Resultado: Un primer borrador fiel al píxel que puedas refinar en lugar de reconstruir.

Errores comunes

Auto-layout vs posicionamiento absoluto se mapean diferente a flex/grid — Indica a Claude que prefiera flexbox cuando el frame de Figma usa auto-layout; absoluto cuando no
Los iconos vectoriales vuelven como rutas SVG que Claude inline literalmente — Haz que extraiga iconos separadamente a /icons/*.svg y los referencie como componentes

Combinar con: filesystem · github

Sincroniza tokens de diseño de Figma en tu código

👤 Mantenedores de sistemas de diseño ⏱ ~20 min intermediate

Cuándo usarlo: Los diseñadores actualizaron la paleta/tipografía en Figma y necesitas que el token JSON se actualice para coincidir.

Flujo

Extrae los estilos publicados

Del archivo de Figma <key>, lista cada estilo de color publicado, estilo de texto y estilo de efecto. Agrupa por categoría.✓ Copiado

→ Lista de tokens completa con nombres y valores
Compara contra la base de código

Lee /design-tokens/tokens.json. Muéstrame qué tokens cambiaron en Figma desde la última sincronización de este archivo (añadidos, eliminados, valor cambiado).✓ Copiado

→ Diff por token con viejo/nuevo
Aplica y abre PR

Actualiza tokens.json para que coincida con Figma. Abre un PR titulado 'sync: design tokens YYYY-MM-DD' con el diff en la descripción.✓ Copiado

→ PR abierto con diff revisable

Resultado: Los tokens del lado del código se mantienen sincronizados con Figma; sin más tickets 'por qué el color de marca está ligeramente mal'.

Errores comunes

Los tokens renombrados se ven como delete+add — Haz que Claude detecte el renombramiento heurísticamente (mismo valor, nombre similar) y lo señale para revisión humana

Combinar con: filesystem · github

Extrae especificaciones de desarrollo (espaciado, dimensionamiento, copy) de un archivo de Figma

👤 Ingenieros triando una entrega de Figma sin Dev Mode ⏱ ~15 min beginner

Cuándo usarlo: No tienes Figma Dev Mode pero necesitas especificaciones de píxeles para una pantalla.

Flujo

Obtén la pantalla

Para el nodo de Figma <id>, dame una lista plana de cada elemento hoja con su posición absoluta, tamaño y contenido de texto.✓ Copiado

→ Volcado tabular de elementos con x/y/w/h
Solicita un documento de especificación

Conviértelo en una especificación orientada al desarrollador: sección por sección, con valores de espaciado (margin/padding) inferidos de posiciones.✓ Copiado

→ Documento de especificación con valores equivalentes CSS concretos
Verifica casos límite

¿Qué sucede cuando un texto excede el ancho diseñado? ¿Especifica el diseño el comportamiento de ajuste, truncamiento o crecimiento? Si no se especifica, señálalo para el diseñador.✓ Copiado

→ Lista de preguntas abiertas, no suposiciones silenciosas

Resultado: Una especificación construccionable sin comprar un asiento de Dev Mode para todos.

Errores comunes

El diseñador usó espaciado arbitrario (13px, 17px) en lugar de valores de token — Pide a Claude que redondee al valor de token más cercano pero registre la desviación, para que los diseñadores puedan limpiar

Combinar con: filesystem

Combinaciones

Combínalo con otros MCPs para multiplicar por 10

figma + filesystem

Genera código a partir de Figma y escríbelo directamente en tu archivo de componente

Extrae el nodo de Figma <id>. Genera un componente React que coincida exactamente, escríbelo en src/components/Card.tsx usando filesystem MCP.✓ Copiado

figma + github

Abre un PR con el nuevo componente más un enlace de Figma en la descripción para los revisores

Genera el componente Card desde Figma <url>, realiza commit, push, y abre un PR con tanto el cambio de código como el enlace de Figma de origen.✓ Copiado

figma + chrome-devtools

Construye, renderiza en navegador, captura pantalla y compara visualmente contra la exportación de Figma

Construye el nuevo componente. Renderiza en localhost:3000/preview/card. Toma una captura pantalla. Compara visualmente contra la exportación PNG de Figma y lista cualquier diferencia visual.✓ Copiado

Herramientas

Lo que expone este MCP

Herramienta	Entradas	Cuándo llamar	Coste
get_figma_data	fileKey: str, nodeId?: str, depth?: int	Extrae un frame o archivo completo en forma optimizada para agentes	1 llamada API de Figma (nivel gratuito: 1500/min)
download_figma_images	fileKey: str, nodes: [{nodeId, fileName}], localPath: str, format?: 'png'\|'svg', scale?: number	Exporta activos de diseño (iconos, ilustraciones, capturas) localmente	1 llamada de renderizado de Figma por nodo

Coste y límites

Lo que cuesta ejecutarlo

Cuota de API: Plan gratuito de Figma: 1.500 solicitudes/min. Amplio para uso interactivo.
Tokens por llamada: El modo compacto mantiene payloads en ~1-5k tokens por frame. Los archivos completos pueden inflarse — restringe por nodeId.
Monetario: MCP es gratuito. El acceso API de Figma es gratuito con cualquier cuenta de Figma.
Consejo: Siempre pasa un nodeId cuando puedas — obtener un archivo completo es desperdicio.

Seguridad

Permisos, secretos, alcance

Ámbitos mínimos: file_read

Almacenamiento de credenciales: Token de acceso personal en variable de entorno FIGMA_API_KEY. Nunca commits.

Salida de datos: Todas las llamadas a api.figma.com

No conceder nunca: file_write — el MCP no lo necesita; usar un token con capacidad de escritura arriesga ediciones accidentales

Los tokens de acceso personal son poderosos — usa un token limitado a solo lectura y rótalo periódicamente.
Los contenidos del archivo de Figma (tus diseños) se envían a tu proveedor LLM como contexto. Si el archivo es sensible, prefiere obtenciones limitadas a nodos sobre archivo completo.

Resolución de problemas

Errores comunes y soluciones

403 Forbidden

El token no tiene acceso a ese archivo. Verifica si el archivo está en un equipo/espacio de trabajo que tu token pueda ver. Para archivos compartidos de comunidad, usa un token diferente.

Verificar: curl -H 'X-Figma-Token: $FIGMA_API_KEY' https://api.figma.com/v1/me

Could not extract file key from URL

Usa el formato https://www.figma.com/file/<KEY>/... o https://www.figma.com/design/<KEY>/.... Pasa fileKey explícitamente si falla el análisis de URL.

Response is enormous and blows context

Pasa nodeId para limitar a un frame, o depth: 2 para limitar el recorrido.

Image export fails with 'unsupported node type'

Algunos tipos de nodo (secciones, slices) no pueden ser exportados. Selecciona un frame o componente real en su lugar.

Alternativas

Figma Context vs otros

Alternativa	Cuándo usarla	Contrapartida
Figma official Dev Mode MCP (beta)	Tienes Figma Dev Mode y quieres la integración oficial	Más nuevo, requiere suscripción a Dev Mode; soporte de características de Figma más profundo con el tiempo
Figma REST API directly via shell	Quieres la superficie API completa (variables, ramas, comentarios)	Las respuestas brutas de API son enormes y difíciles de digerir para un LLM

Más

Recursos

📖 Lee el README oficial en GitHub

🐙 Ver issues abiertas

🔍 Ver todos los 400+ servidores MCP y Skills