Figma MCP: Conectando Figma con Claude Code y Agentes de Código IA

Hacer una captura de un frame de Figma y pegarla en Claude Code es la forma de conseguir vibes. Conectar Figma MCP es la forma de conseguir componentes que coincidan con tu sistema de diseño hasta el último 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 han hecho porque cada tutorial lo hace sonar técnico. No lo es. Es un solo comando más habilitar un interruptor dentro de Figma. Eso es todo.

Una vez conectado, el agente de IA deja de adivinar qué significa "20px de separación" y empieza a leer el token de espaciado real que asignaste. Deja de inventar colores y empieza a extraerlos de tu paleta real. Deja de aproximar tu Button y empieza a llamar al que ya construiste.

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. Toda herramienta de IA que vale la pena usar en 2026 lo soporta.

Piensa en MCP como un puerto USB para agentes de IA. Antes de MCP, cada herramienta que quería comunicarse 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. La IA lee lo que tu archivo realmente contiene, no lo que parece una JPEG de tu archivo.

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

Qué expone realmente el servidor MCP de Figma

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

Lo que no puede leer: archivos privados que no has autorizado, otras bibliotecas de equipo no conectadas a este archivo, comentarios, historial de versiones, ni nada fuera del archivo específico al que lo apuntas.

Ese alcance importa porque significa que una IA mal entrenada no puede deambular por tu espacio de trabajo de Figma. Lee lo que le das, 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 una edición de configuración de distancia.

Paso 1: En Figma desktop, ve a Preferencias y habilita "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 en 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 los usuarios de Cursor, el flujo es ligeramente diferente pero la misma idea.

Paso 1: Igual que antes. Habilita 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 una fuente de datos disponible en el panel del agente.

Cursor maneja MCP de forma ligeramente más visual que Claude Code, con un interruptor basado en UI 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

Diseño-a-código con fidelidad. Pegas la URL de un frame de Figma. Claude Code extrae la estructura de capas, los valores de auto-layout, los enlaces 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 los cinco minutos de instalación 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 tiene registrado. Menos reinvenciones accidentales.

Verificaciones de sincronización de variables. Digamos que renombraste un token de color la semana pasada. Pregúntale a Claude Code: "Lee el frame en esta URL de Figma y lista cualquier referencia de variable que no coincida 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 (de un cliente, no compartido, o no es un frame con auto-layout), el agente recurre al análisis de imagen. Puedes combinar: MCP para tu propio trabajo, capturas para referencias de clientes puntuales. El mismo prompt, ambos funcionan.

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

Si quieres más análisis de flujos de trabajo con IA, explora 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 está accediendo, porque la autenticación fluye a través de tu sesión de Figma. Para cuentas empresariales, 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 referencíes específicamente. No ve comentarios, historial de versiones, ni archivos no relacionados. Cada prompt está limitado a lo que tú le das.

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 aún no lanzados. 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 de datos estrictas, verifica primero.

Dónde Figma MCP aún se queda corto

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

El manejo de activos de imagen es limitado. MCP le da al agente las URLs de rellenos de imagen, no los datos de píxeles reales. Para layouts donde la imagen hace un trabajo compositivo pesado, el agente aún 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. La lógica de animación aún la escribes 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 monstruoso, para mejores resultados.

Las suposiciones de auto-layout importan. El agente produce su resultado más limpio cuando los 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 hace más visible aquí.

Ninguno de estos es un impedimento definitivo. Todos son razones para combinar MCP con una buena ingeniería de prompts, no con confianza ciega.

Preguntas frecuentes

¿Es gratuito usar Figma MCP?

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.

¿Funciona Figma MCP en la versión web?

El servidor MCP local es una función de Figma desktop. Los usuarios que solo usan la versión web aún no tienen acceso a él. 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í. Múltiples 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é pasa 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.

¿Reemplaza MCP al Dev Mode de Figma?

No. Dev Mode es la herramienta de inspección orientada al humano. MCP es la capa de datos orientada al agente. Son complementarios. De hecho, los mismos datos que Dev Mode muestra 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 un frame de Figma, pegarla en ChatGPT o Claude, y pedir código. El resultado siempre son vibes, nunca tokens. Luego pasas una hora arreglando los vibes a mano.

Cinco minutos de instalación y ese flujo de trabajo desaparece. 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 estar listo para producción.

Habilita 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 retorno por minuto en el kit de herramientas del diseñador moderno.

Deja de hacer capturas de pantalla de Figma.