Para configurar Figma MCP con Claude Code, activa el servidor MCP en el Modo Desarrollo de la app de escritorio de Figma y añade una entrada JSON a tu archivo .mcp.json de Claude Code apuntando a http://127.0.0.1:3845/mcp. Todo el proceso toma menos de cinco minutos, le da a Claude Code acceso en vivo a tus tokens de diseño, mapas de componentes y estructura de layout, y produce código que usa los nombres reales de tus Variables en lugar de valores hexadecimales fijos. Esta guía es el complemento específico para Claude Code de nuestra guía general de Figma MCP — si quieres la arquitectura completa, el desglose de herramientas y la comparación con otros IDEs, empieza por allí. Para los fundamentos de tokens que determinan la calidad del resultado de MCP, consulta la guía de design tokens en Figma.
Flujos relacionados: Figma MCP para la guía completa del servidor Dev Mode, Claude Design para ideación con IA antes del handoff, y Habilidades de IA para diseñadores para patrones de prompts reutilizables.
En resumen
- Activa un solo toggle en el Modo Desarrollo de Figma para iniciar el servidor MCP local en
http://127.0.0.1:3845/mcp. - Añade una sola entrada al
.mcp.jsonde Claude Code — sin API keys, sin autenticación, sin instalaciones adicionales. - Reinicia Claude Code y ejecuta
/mcppara confirmar que el servidorfigma-dev-modeaparece con cuatro herramientas:get_code,get_image,get_variable_defs,get_code_connect_map. - Vincula Variables antes de conectar — la IA solo puede citar nombres de token que existen en tu archivo. Ejecuta Encontrar valores no tokenizados primero.
- Un frame enfocado a la vez supera la selección de página completa: las respuestas de MCP tienen un límite de aproximadamente 20 KB por llamada.
El servidor Figma MCP viene integrado en la aplicación de escritorio de Figma y habla el Model Context Protocol, el estándar abierto que Anthropic publicó en noviembre de 2024. Claude Code — la herramienta CLI agéntica de Anthropic construida sobre la API de Claude — es un cliente MCP de primera clase que descubre e invoca el servidor automáticamente una vez que la entrada de configuración está en su lugar. Cuando Vitalina probó por primera vez el pipeline de Claude Code + Figma MCP en Atomize, toda la configuración — desde activar el servidor hasta obtener un scaffold de componente React tokenizado — tomó menos de tres minutos. La calidad del resultado, sin embargo, depende casi por completo de qué tan bien esté estructurado tu archivo Figma antes de que la IA lo lea.
Requisitos previos
Antes de conectar Figma MCP a Claude Code, asegúrate de tener estas cuatro cosas en orden. El requisito del plan es lo que más gente pasa por alto — ¿es Figma MCP gratis? No para trabajo de producción. El servidor MCP de Dev Mode necesita un asiento Dev o Full en un plan Professional, Organization o Enterprise. Las cuentas Starter tienen aproximadamente seis llamadas a herramientas por mes, suficiente para probar la funcionalidad pero no para construir. Para equipos que gestionan un flujo de trabajo con tokens de diseño, el plan Professional es el punto de partida práctico.
- App de escritorio de Figma instalada y en ejecución. El servidor MCP solo funciona en la app de escritorio — los usuarios de Figma solo en navegador deben instalar el cliente de escritorio primero. Descarga desde figma.com/downloads.
- Claude Code instalado. Instala con npm:
npm install -g @anthropic-ai/claude-codeo sigue la guía oficial de configuración de Claude Code. Verifica conclaude --version. - Acceso a Dev Mode en Figma. Necesitas un asiento Dev o Full en un plan Professional, Organization o Enterprise. Las cuentas Starter están limitadas a aproximadamente seis llamadas a herramientas MCP por mes.
- Un archivo de diseño de Figma con acceso de edición, abierto en la app de escritorio. El servidor MCP lee lo que esté abierto y seleccionado — tener un archivo con tokens estructurados y componentes reales marca una diferencia drástica en la calidad del resultado.
Paso 1: Activar el servidor Figma MCP
El servidor MCP viene dentro de la aplicación de escritorio de Figma — no hay nada que descargar por separado. Se inicia automáticamente cuando activas un toggle en Dev Mode. En Atomize, nuestra primera llamada MCP funcionando ocurrió a los dos minutos de activar ese toggle; la única fricción fue recordar reiniciar Claude Code después para que pudiera descubrir el nuevo endpoint.
- Abre la aplicación de escritorio de Figma (no la versión de navegador) y carga cualquier archivo de diseño para el que tengas acceso de edición.
- Cambia a Modo Desarrollo (Dev Mode) usando el toggle en la esquina superior derecha de la barra de herramientas. Si no lo ves, es posible que tu asiento no incluya acceso a Dev Mode.
- En el panel de Inspección a la derecha, desplázate hacia abajo para encontrar la sección MCP.
- Activa el toggle Habilitar servidor MCP de escritorio. Figma inicia un servidor JSON-RPC local en
http://127.0.0.1:3845/mcp. - Mantén Figma en ejecución — el servidor está activo solo mientras la app de escritorio está abierta con Dev Mode habilitado.
El servidor local se ejecuta solo en tu máquina. Ningún dato sale de tu ordenador a través de este canal a menos que configures explícitamente una variante MCP remota. El servidor expone cuatro herramientas — get_code, get_image, get_variable_defs y get_code_connect_map — que Claude Code descubrirá e invocará automáticamente una vez conectado. Para un desglose completo de lo que devuelve cada herramienta, consulta nuestra guía de Figma MCP.
Paso 2: Configurar Claude Code para conectar con Figma MCP
Claude Code lee su configuración MCP de un archivo .mcp.json. Puedes colocar este archivo en la raíz de tu proyecto (configuración por proyecto), en tu directorio personal (configuración global) o especificar una ruta personalizada con la bandera --mcp-config. Para la mayoría de los equipos, un .mcp.json a nivel de proyecto es la elección correcta — mantiene la configuración de Figma MCP versionada junto al código que ayudará a generar.
Crea o edita .mcp.json en la raíz de tu proyecto y añade la entrada del servidor Figma Dev Mode. El archivo completo tiene este aspecto:
{
"mcpServers": {
"figma-dev-mode": {
"type": "http",
"url": "http://127.0.0.1:3845/mcp"
}
}
}El campo type: "http" le dice a Claude Code que se conecte por HTTP en lugar de stdio. Si ya tienes un .mcp.json con otros servidores configurados, añade la entrada figma-dev-mode al objeto mcpServers existente — no crees un segundo archivo. Claude Code combina configuraciones de múltiples ubicaciones, y la configuración a nivel de proyecto tiene prioridad sobre la global.
Si prefieres una configuración global para que cada proyecto pueda acceder a Figma MCP, coloca el mismo JSON en ~/.claude/.mcp.json. La desventaja es que las configuraciones globales son más difíciles de versionar y mantener sincronizadas en un equipo. Para flujos de trabajo en equipo donde todos deberían tener la misma configuración MCP, el .mcp.json a nivel de proyecto commiteado al repositorio es el patrón más sólido.
Alternativa: conexión mediante proxy stdio
Algunos equipos ejecutan un proceso proxy que reenvía Figma MCP por stdio — útil cuando el servidor HTTP local está bloqueado por un firewall corporativo o cuando quieres añadir middleware de registro. La variante stdio reemplaza el campo url con un command que lanza el proxy:
{
"mcpServers": {
"figma-dev-mode": {
"type": "stdio",
"command": "npx",
"args": ["-y", "figma-mcp-proxy"],
"env": {
"FIGMA_MCP_URL": "http://127.0.0.1:3845/mcp"
}
}
}
}La mayoría de los usuarios deberían quedarse con el tipo HTTP — es más simple, tiene menos puntos de fallo y es lo que recomienda la documentación oficial de Figma. Recurre a stdio solo cuando tu entorno de red lo requiera.
Paso 3: Verificar que la conexión funciona
Después de añadir la configuración, reinicia Claude Code para que lea el nuevo .mcp.json. Luego ejecuta una verificación rápida:
- Abre una terminal y navega al directorio de tu proyecto.
- Ejecuta
claudepara iniciar Claude Code. - Escribe
/mcpy pulsa Enter. Claude Code lista todos los servidores MCP conectados. - Confirma que
figma-dev-modeaparece en la lista con estado conectado. - Si muestra estado desconectado, verifica que la app de escritorio de Figma está en ejecución, Dev Mode está habilitado y el toggle del servidor MCP está activado. Luego reinicia Claude Code.
Para ejecutar una prueba real, selecciona un frame en tu archivo Figma (un solo componente o pantalla, no toda la página) y luego en Claude Code escribe:
# En Claude Code, después de seleccionar un frame en Figma:
"Genera un componente React de mi selección actual de Figma. Usa los tokens de diseño de get_variable_defs."Claude Code invoca get_code y get_variable_defs en tu selección de Figma, luego escribe un componente que referencia los nombres de tus tokens. Si el resultado usa var(--color-surface-primary) o spacing/4 en lugar de valores hexadecimales y píxeles manuales, la configuración está funcionando correctamente. Si el resultado muestra valores fijos, es probable que tu archivo Figma tenga propiedades no tokenizadas — la IA solo puede citar lo que el archivo contiene.
Problemas comunes y soluciones
La mayoría de los problemas de configuración caen en una de cuatro categorías. Repasa estas en orden — las dos primeras cubren más del 80% de los problemas que hemos visto en Atomize durante la incorporación de clientes.
Claude Code no encuentra el servidor Figma MCP
La causa más común es que la app de escritorio de Figma no está en ejecución o Dev Mode no está habilitado. El servidor MCP local se inicia solo cuando ambas condiciones son verdaderas. También verifica que el toggle del servidor MCP en el panel de Inspección esté explícitamente activado — viene desactivado por defecto. Si todo parece correcto en Figma, verifica que ningún otro proceso esté usando el puerto 3845:
# Verificar si el servidor Figma MCP está escuchando
curl -s http://127.0.0.1:3845/mcp || echo "Servidor no accesible — ¿está Figma escritorio ejecutándose con Dev Mode habilitado?"El servidor conecta pero las llamadas a herramientas fallan
Esto suele significar que estás en un plan Starter alcanzando el límite de aproximadamente seis llamadas por mes. Actualiza a un plan Professional, Organization o Enterprise con un asiento Dev o Full. Si estás en un plan de pago y las llamadas siguen fallando, verifica que tu app de escritorio de Figma esté actualizada — el soporte MCP se añadió a principios de 2025 y las versiones anteriores no lo incluyen. Actualiza desde el menú de Figma: Figma > Buscar actualizaciones.
El código generado usa valores fijos en lugar de tokens
Esto no es un problema de conexión — es un problema de estructura del archivo. Claude Code solo puede citar nombres de Variable que existen en tu archivo Figma. Si un fill está configurado como #1A1A27 en lugar de estar vinculado a una Variable llamada surface/elevated, la IA recibe el valor hexadecimal y lo escribe literalmente. La solución está antes: vincula tus propiedades a Variables antes de enviar el frame a MCP. Nuestro escaneo de Encontrar valores no tokenizados identifica cada propiedad no vinculada en tu archivo para que puedas corregirlas antes de que la IA las lea.
El resultado está truncado o incompleto
Las respuestas de Figma MCP tienen un límite de aproximadamente 20 KB por llamada. Si seleccionas una página completa con docenas de frames, el servidor puede truncar la respuesta y la IA trabaja con datos parciales. La solución es simple: selecciona un frame a la vez. Las selecciones de un solo componente o pantalla producen los resultados más fiables.
Buenas prácticas para archivos Figma preparados para MCP
Conectar Claude Code a Figma MCP es fácil — obtener código con calidad de producción depende de lo que hay dentro de tu archivo. Después de auditar docenas de archivos de clientes antes de la incorporación a MCP, encontramos un patrón consistente: los archivos con más del 80% de cobertura de vinculación a Variables producen scaffolds utilizables en la primera pasada que solo necesitan ajustes menores de props; los archivos con menos del 40% de cobertura producen ruido lleno de literales independientemente de cómo se escriba el prompt. Para una arquitectura de tokens completa que funcione en múltiples herramientas, consulta la guía de design tokens en Figma.
- Vincula cada fill, stroke, padding, radio y métrica tipográfica a una Variable. La IA no puede citar un token que no existe. Ejecuta un escaneo para encontrar propiedades no vinculadas antes de enviar cualquier frame a MCP.
- Usa componentes reales, no grupos separados.
get_code_connect_mapsolo coincide con lo que está expuesto como componente en la librería. Las instancias separadas rompen el mapeo. - Anota comportamientos no obvios en Dev Mode. El modelo lee las anotaciones en su contexto — úsalas para explicar estados de interacción, breakpoints responsive y visibilidad condicional.
- Mantén las selecciones enfocadas. Un frame a la vez supera las selecciones de página completa en precisión y se mantiene por debajo del límite de 20 KB por respuesta.
- Audita la accesibilidad antes de generar código. Ejecuta una Auditoría de Contraste para que el diseño que la IA lee ya cumpla con AA — corregir accesibilidad en código es más caro que corregirla en diseño.
- Versiona tu
.mcp.jsonen git. La configuración MCP a nivel de proyecto commiteada al repositorio significa que cada desarrollador del equipo obtiene la misma conexión a Figma sin configuración manual.
El enfoque Atomize: antes de conectar Figma MCP a Claude Code, ejecuta un escaneo para vincular valores no tokenizados. Cuando tu archivo usa tokens estructurados en lugar de códigos hexadecimales manuales, la IA recibe surface/elevated en lugar de #1A1A27 y escribe var(--surface-elevated) en lugar de un color literal. Ese único cambio — de valores manuales a referencias de token — es lo que separa el código generado por IA que tienes que reescribir del código que puedes enviar después de una revisión rápida.
Avanzado: combinando Figma MCP con flujos de tokens de diseño
Una vez que Claude Code lee de forma fiable tus tokens de Figma a través de MCP, el siguiente nivel es establecer un flujo de trabajo bidireccional: los tokens de diseño fluyen de Figma al código a través de un pipeline de exportación, y la IA escribe código que referencia esos mismos tokens por nombre. Aquí es donde todo el poder del Model Context Protocol se encuentra con un sistema de diseño gobernado.
El flujo de trabajo que usamos en Atomize, que ha demostrado ser fiable en múltiples codebases de clientes, sigue tres etapas:
- Tokeniza en Figma. Construye tus Primitivos (valores base como
gray/900) y tokens semánticos (alias con propósito comosurface/elevated) como Variables de Figma. Asegúrate de que cada propiedad en cada componente esté vinculada a una Variable — sin hexadecimales manuales, sin valores de píxel literales. - Exporta tokens a código mediante un pipeline. Usa un plugin como Atomize o un exportador compatible con DTCG para sincronizar Variables en tu codebase como CSS custom properties, tokens de Style Dictionary o extensiones de tema de Tailwind. El formato del W3C Design Tokens Community Group asegura que los mismos nombres de token existan en ambos entornos.
- Conecta Claude Code mediante Figma MCP y haz prompts con contexto de tokens. Cuando Claude Code lee tu selección a través de MCP,
get_variable_defsdevuelve los mismos nombres de token que tu pipeline de exportación escribió en el codebase. La IA genera código usandovar(--surface-elevated)y tu pipeline de tokens ya tiene esa CSS custom property definida.
El resultado: un cambio de diseño en Figma actualiza la Variable, el pipeline de exportación sincroniza el nuevo valor con el codebase y Claude Code — leyendo el token actualizado a través de MCP — genera componentes ya alineados con el diseño actual. Esta es la migración desde el handoff basado en capturas hacia un canal de tokens en vivo que la guía de Figma MCP describe en profundidad.
# Ejemplo de flujo: generación de componentes tokenizados con Claude Code + Figma MCP
# 1. Tu archivo Figma usa Variables vinculadas a cada propiedad
# 2. Tu codebase ya tiene CSS custom properties coincidentes
# En Claude Code, después de seleccionar un frame:
"Genera un componente React de tarjeta usando los tokens de diseño de mi selección de Figma.
Usa los nombres de Variable de get_variable_defs como referencias a CSS custom properties.
Importa los componentes que aparecen en get_code_connect_map en lugar de reconstruirlos."Figma MCP vs el handoff de diseño tradicional
El cambio del handoff tradicional al handoff basado en MCP no es incremental — cambia qué información llega al desarrollador y qué se pierde en la traducción. La tabla a continuación compara los tres caminos de handoff que la mayoría de los equipos usan hoy: handoff por capturas, exportación mediante plugins y Figma MCP con Claude Code.
Figma MCP + Claude Code vs métodos tradicionales de handoff de diseño
| Aspecto | Handoff por capturas | Exportación por plugin | Figma MCP + Claude Code |
|---|---|---|---|
| Fidelidad de tokens | Perdida — solo valores hex | Preservada si el plugin soporta tokens | Nombres de Variable en vivo desde el archivo |
| Mapeo de componentes | Manual — el desarrollador lee la captura | Parcial — depende del plugin | Automático mediante get_code_connect_map |
| Velocidad de iteración | Horas — re-exportar en cada cambio | Minutos — re-ejecutar el plugin | Segundos — re-seleccionar y re-promptear |
| Complejidad de configuración | Ninguna | Instalar plugin, configurar exportación | Un toggle + una entrada JSON |
| Calidad del código generado | Valores literales, layouts manuales | Depende del codegen del plugin | Referencias a tokens, nombres de Variable, imports reales |
| Requiere plan de pago | No | Varía según el plugin | Professional+ con asiento Dev/Full |
Lo que hace diferente a la combinación MCP + Claude Code es que la IA no está trabajando desde una exportación estática generada una vez y obsoleta en el momento en que el diseñador edita una capa. MCP proporciona una lectura en vivo del estado actual del archivo — cada cambio de Variable, cada actualización de componente, cada anotación — y Claude Code invoca las herramientas mientras razona sobre qué construir. La comparación de Figma MCP con otras herramientas en nuestra guía principal cubre el panorama más amplio incluyendo Framelink, Anima, Locofy y Visual Copilot.
Veredicto final - Figma MCP + Claude Code
Conectar Figma MCP a Claude Code toma cinco minutos y desbloquea un canal de diseño a código que nuestro equipo en Atomize ahora considera infraestructura esencial. La configuración es trivial — un toggle en Figma, una entrada JSON en .mcp.json y un reinicio — pero la calidad del resultado se determina antes: en qué tan bien está tokenizado y estructurado tu archivo Figma antes de que la IA lo lea. Los archivos con vinculación completa a Variables y componentes reales producen código que referencia tus tokens por nombre e importa tu librería de componentes existente. Los archivos con vinculación parcial y grupos separados producen ruido de apariencia plausible que necesita una revisión más exhaustiva. Para equipos que ya han invertido en una arquitectura de tokens gobernada y un pipeline de exportación, añadir Claude Code al stack de Figma MCP convierte el handoff de diseño a código de la etapa más lenta del flujo de trabajo en la más rápida. Para equipos que todavía trabajan con valores manuales y capturas puntuales, la prioridad debería ser la higiene de tokens primero — la IA solo puede ser tan limpia como el archivo que lee.
