Figma MCP: Conectando Figma con Claude Code y agentes de programación con IA

Hacer una captura de pantalla de un frame de Figma y pegarla en Claude Code es la forma de obtener algo aproximado. Conectar Figma MCP es la forma de obtener componentes que coinciden con tu sistema de diseño hasta el token.

La diferencia entre esos dos flujos de trabajo es de unos cinco minutos de configuración. La mayoría de los diseñadores no lo ha hecho porque cada tutorial lo hace sonar técnico. No lo es. Es un único comando más activar un interruptor dentro de Figma. Eso es todo.

Una vez conectado, el agente de IA deja de adivinar qué significa "20px gap" y empieza a leer el token de espaciado real que asignaste. Deja de inventar colores y empieza a usar tu paleta real. Deja de aproximar tu Button y empieza a llamar al que ya construiste. Esto solo funciona si el sistema de diseño del otro lado es real.

MCP es un traductor, no una varita mágica

MCP son las siglas de Model Context Protocol. Anthropic lo lanzó a finales de 2024. Figma publicó un servidor oficial para él en 2025. Todas las herramientas de IA que merece la pena usar en 2026 lo admiten.

Piensa en MCP como un puerto USB para agentes de IA. Antes de MCP, cada herramienta que quería hablar con un modelo de IA tenía que construir una integración personalizada. Después de MCP, las herramientas simplemente hablan el protocolo y cualquier agente compatible con MCP puede leerlas. Figma, GitHub, Slack, Linear, tu sistema de archivos, bases de datos, lo que sea. Un protocolo, estandarizado, reutilizable.

Lo que hace específicamente el servidor MCP de Figma: expone los datos estructurales dentro de tus archivos de Figma a cualquier agente de IA que conectes. IDs de frames, nombres de capas, componentes anidados, valores de espaciado, variables de color, estilos tipográficos, configuraciones de auto-layout, todo ello. La IA lee lo que tu archivo contiene realmente, no cómo luce un JPEG de tu archivo.

MCP no es magia. Es un cable. El trabajo todavía tiene que ser bueno en ambos extremos.

Qué expone realmente el servidor MCP de Figma

El servidor da a los agentes de IA acceso de lectura a un conjunto específico de tus datos de Figma. Saber exactamente qué puede y qué no puede ver importa tanto para los resultados como para la seguridad.

Lo que no puede leer: archivos privados que no hayas autorizado, otras bibliotecas de equipo no conectadas a este archivo, comentarios, historial de versiones, o cualquier cosa fuera del archivo específico al que lo dirijas.

Ese ámbito importa porque significa que una IA mal entrenada no puede deambular por tu espacio de trabajo de Figma. Lee lo que le entregas, nada más.

Instálalo en Claude Code (cinco minutos)

Si ya tienes Claude Code funcionando (si no, consulta Claude Code para Diseñadores), MCP está a un cambio de configuración de distancia.

Paso 1: En Figma desktop, ve a Preferencias y activa "Enable local MCP server" en la configuración de Dev Mode. Figma iniciará un servidor en tu máquina en el puerto predeterminado.

Paso 2: En tu terminal, abre el archivo de configuración de Claude Code:

claude mcp add figma http://127.0.0.1:3845/mcp --transport http

Ese único comando registra el servidor MCP local de Figma con Claude Code. Sin edición de JSON, sin buscar archivos de configuración.

Paso 3: Reinicia Claude Code. En tu próxima sesión, Claude Code verá automáticamente Figma disponible.

Verifica con: /mcp dentro de una sesión de Claude Code. Deberías ver Figma en la lista.

Para usarlo, pega una URL de Figma en tu prompt. Claude Code resuelve el frame a través de MCP, no una captura de pantalla, y trabaja con la estructura real.

Instálalo en Cursor (también cinco minutos)

Para usuarios de Cursor, el flujo es ligeramente diferente pero la misma idea.

Paso 1: Igual que antes. Activa el servidor MCP local de Figma en Figma desktop.

Paso 2: En Cursor, abre Configuración, ve a la sección MCP, haz clic en "Add MCP Server." Pega:

Name: figma URL: http://127.0.0.1:3845/mcp Transport: HTTP

Paso 3: Guarda y reinicia Cursor. Figma aparecerá como fuente de datos disponible en el panel del agente.

Cursor gestiona MCP de forma ligeramente más visual que Claude Code, con un interruptor basado en interfaz por servidor. Funcionalmente, las dos experiencias son idénticas: pegas una URL de Figma, el agente lee el frame real, el resultado coincide con tu sistema.

Los cinco flujos de trabajo que desbloquea

De diseño a código con fidelidad. Pegas la URL de un frame de Figma. Claude Code obtiene la estructura de capas, los valores de auto-layout, los vínculos de variables, las instancias de componentes. El componente React generado usa tu Button real, tu Card real, tus tokens de espaciado reales. Sin aproximaciones, sin clases inventadas. Este es el flujo de trabajo estrella y vale la pena la instalación de cinco minutos por sí solo.

Verificación de Code Connect. Si ya usas la función Code Connect de Figma (que mapea componentes de Figma a tus componentes de código), MCP permite que el agente verifique el mapeo cuando genera código. No construirá un nuevo componente que duplique uno que Code Connect ya ha registrado. Menos reinvenciones accidentales.

Comprobaciones de sincronización de variables. Digamos que la semana pasada renombraste un token de color. Pregúntale a Claude Code: "Lee el frame de esta URL de Figma y lista las referencias de variables que no coincidan con nuestro archivo de tokens actual." Marcará la deriva en un solo paso. Eso solía ser una sesión de Loom de 45 minutos con un desarrollador.

Alternativa de captura a componente. Si MCP no puede leer el archivo (propiedad del cliente, no compartido, o no es un frame de auto-layout), el agente recurre al análisis de imagen. Puedes combinar: MCP para tu propio trabajo, capturas de pantalla para referencias puntuales de clientes. El mismo prompt, ambos funcionan.

QA de diseño. Dirección inversa. Pídele a Claude Code que compare una captura de pantalla de una página desplegada con un frame de Figma: "Aquí está la URL de la página de producción. Aquí está la URL de Figma con la que debe coincidir. Lista las diferencias visuales." Esto detecta el problema de "el diseñador aprobó pero el desarrollador publicó el padding incorrecto" antes de que llegue a producción.

Si quieres más análisis de flujos de trabajo con IA, navega por el resto de Brainy Papers. Si quieres MCP integrado en el pipeline completo de diseño a código de tu equipo, contrata a Brainy.

Seguridad: qué ve Figma y qué ve tu IA

Dos preguntas separadas, ambas vale la pena entender.

Qué ve Figma. El servidor MCP se ejecuta localmente en tu máquina, no en los servidores de Figma. Figma sí ve que has habilitado MCP y a qué archivos se accede, porque la autenticación fluye a través de tu sesión de Figma. Para cuentas enterprise, los administradores pueden deshabilitar el MCP local a nivel de organización.

Qué ve el agente de IA. Cualquier URL de archivo de Figma que pegues. El agente no obtiene acceso de navegación a todo tu espacio de trabajo de Figma. No ve otras bibliotecas de equipo a menos que las referencie específicamente. No ve comentarios, historial de versiones, ni archivos no relacionados. Cada prompt tiene el alcance de lo que le entregas.

Qué sale de tu máquina. Si estás usando Claude Code con la API de Anthropic, los datos del frame que solicitas se envían a Anthropic como parte del contexto del prompt. Eso importa si tu archivo de Figma contiene trabajo confidencial de clientes o diseños de productos no publicados. Lee la política de IA de tu equipo antes de conectar MCP en archivos sensibles.

Para la mayoría del trabajo de diseño, esto está bien. Para industrias reguladas o NDAs con cláusulas estrictas de datos, verifica primero.

Dónde Figma MCP todavía se queda corto

Seamos honestos. Esto es Figma MCP en abril de 2026, no alguna versión futura pulida.

El manejo de recursos de imagen es limitado. MCP da al agente las URLs de relleno de imagen, no los datos de píxeles reales. Para layouts donde la imagen hace trabajo compositivo importante, el agente todavía tiene que adivinar.

Los prototipos e interacciones no se traducen. MCP expone la estructura estática. Si tu archivo de Figma tiene conexiones de prototipo, estados hover, smart animate o cambio de variantes, el agente no ve nada de eso. Todavía escribes la lógica de animación a mano.

Los plugins no son legibles. Si un plugin de Figma generó contenido en tu archivo (gráficos, iconos, visualizaciones de datos), el agente ve el resultado como una capa estática. No puede regenerar la lógica del plugin.

El rendimiento se degrada en archivos masivos. Un archivo con más de 500 frames tarda más en resolverse que uno con 20 frames. Trabaja en páginas delimitadas, no en un archivo monstruo, para obtener los mejores resultados.

Las suposiciones de auto-layout importan. El agente produce su resultado más limpio cuando tus frames de Figma usan auto-layout correctamente. Los layouts de forma libre con posicionamiento absoluto se traducen mal. Este es un problema de disciplina en Figma, no un problema de MCP, pero se manifiesta de forma más visible aquí.

Ninguno de estos es un obstáculo definitivo. Todos son razones para combinar MCP con un buen prompt engineering, no confianza ciega.

Preguntas frecuentes

¿Figma MCP es gratuito?

Sí. El servidor MCP está integrado en Figma desktop sin costo adicional. Pagas por Figma y pagas por tu herramienta de IA (Claude, Cursor, etc.). La conexión en sí es gratuita.

¿Figma MCP funciona en la versión web?

El servidor MCP local es una función de Figma desktop. Los usuarios solo web no tienen acceso a él todavía. Para trabajo serio de diseño a código, el escritorio es la mejor configuración de todos modos.

¿Puedo usar MCP con varias herramientas de IA a la vez?

Sí. Varios agentes pueden leer el mismo servidor MCP local. Claude Code, Cursor, Claude Desktop y cualquier otro cliente compatible con MCP pueden conectarse simultáneamente.

¿Qué ocurre si cambio de archivo de Figma durante una sesión?

El agente resuelve el frame en la URL que le das. Cambiar de URL cambia el contexto. Puedes referenciar múltiples archivos en una conversación sin reiniciar nada.

¿MCP reemplaza el Dev Mode de Figma?

No. Dev Mode es la herramienta de inspección orientada a humanos. MCP es la capa de datos orientada a agentes. Son complementarios. De hecho, los mismos datos que muestra Dev Mode son los que MCP expone al agente.

Deja de hacer capturas de pantalla de Figma

Todos los equipos de diseño tienen un mal hábito compartido: tomar una captura de pantalla de un frame de Figma, pegarla en ChatGPT o Claude, y pedir código. El resultado siempre es aproximado, nunca tokens. Luego pasas una hora arreglando esa aproximación a mano.

Cinco minutos de instalación y ese flujo de trabajo muere. El agente lee el frame real. El espaciado es real. Los componentes son los componentes reales. Los tokens son los tokens reales. El código sale la primera vez más cerca de ser publicable.

Activa MCP en Figma. Instala el conector en tu herramienta de IA. Pega URLs, no capturas de pantalla.

La diferencia en calidad de resultado entre "antes de MCP" y "después de MCP" no es sutil. Es la instalación con mayor ROI por minuto en el kit de herramientas del diseñador moderno.

Deja de hacer capturas de pantalla de Figma.