Figma MCP es un servidor Dev Mode local integrado en la aplicación de escritorio de Figma que da a las herramientas de codificación con IA acceso estructurado a tu archivo de diseño - tokens, componentes, layout - en lugar de una captura de pantalla. Actívalo una vez en Dev Mode, apunta tu IDE a http://127.0.0.1:3845/mcp, y los clientes de IA como Claude Code, Cursor o Windsurf generarán código que usa tus nombres de tokens reales en lugar de valores hex literales. Expone cuatro herramientas - get_code, get_image, get_variable_defs, get_code_connect_map - y se basa en el Model Context Protocol, un estándar abierto que Anthropic publicó en noviembre de 2024. Esta guía explica cómo funciona el servidor, cómo configurarlo, cómo estructurar los archivos para obtener mejores resultados y cómo se compara con alternativas como Framelink, Anima y Builder.io Visual Copilot.
Flujos relacionados: Guía de tokens de Figma, Plugins de Figma para tokens y Git, Paridad diseño-código en sistemas de diseño.
Qué es realmente MCP
MCP es el estándar de conexión universal que permite que cualquier cliente de IA hable con cualquier herramienta externa sin integraciones personalizadas. Antes de que existiera, cada herramienta de diseño a código tenía que negociar su propio pipeline de datos con cada LLM - un lío combinatorio que producía resultados inconsistentes y conectores frágiles. Anthropic publicó la especificación del Model Context Protocol el 25 de noviembre de 2024; ahora es un estándar comunitario con SDKs en Python, TypeScript, C# y Java. Ten en cuenta esto: MCP es lo que permite a Figma exponer tu biblioteca de tokens como datos en vivo y consultables en lugar de una exportación estática.
Construimos el pipeline de exportación de Atomize sobre la API REST de Variables de Figma antes de que existiera MCP - cada lectura de token requería una llamada API manual, inferencia del tipo de token desde el nombre de la variable y un transformador personalizado para producir salida estructurada. El servidor Figma MCP Dev Mode reemplaza todo eso: una aplicación de escritorio de Figma en ejecución expone los mismos datos a través de un socket local que cualquier cliente compatible con MCP puede leer sin autenticación ni análisis personalizado. El cambio de la entrega basada en capturas de pantalla a la salida estructurada de tokens es el cambio más significativo en el pipeline de diseño a código desde que se lanzaron las Variables.
Por qué un protocolo de contexto importa para el diseño
Los diseñadores han vivido con las consecuencias de la pérdida de contexto durante años. Un frame de Figma llega a un desarrollador como un PNG más un enlace de Notion, el desarrollador lo pega en un LLM, y el modelo devuelve CSS que usa valores hex literales, rellenos con 2px de diferencia y nombres de componentes que nadie en el equipo usa. El problema nunca fue el modelo - era que el modelo no podía ver el sistema de diseño, solo una imagen de un frame. MCP cierra esa brecha dando a la IA un canal estructurado al archivo: nombres de variables, IDs de componentes, jerarquía de capas y referencias a tu base de código real, todo sin pasos intermedios con pérdida de información.
Cómo funciona el servidor MCP de Figma Dev Mode
El servidor MCP Dev Mode de Figma funciona ejecutando un endpoint JSON-RPC local dentro de la aplicación de escritorio que los clientes de IA consultan una selección a la vez. Ese diseño de alcance por selección es intencional: mantiene cada respuesta bien por debajo del límite de contexto y obliga al modelo a razonar sobre la pieza correcta del diseño en lugar de alucinar a partir de un volcado parcial de todo el archivo. Cuando Vitalina construía el pipeline de exportación de Atomize, las lecturas pre-MCP requerían llamadas REST separadas, inferencia manual del tipo de token y transformadores personalizados; el servidor local colapsa los tres pasos en una única respuesta estructurada. Recuerda: el servidor es tan útil como la selección que le envías - un frame enfocado siempre supera a una página completa.
Las cuatro herramientas que expone el servidor
Cada llamada de Figma MCP se resuelve en una de cuatro herramientas. Saber qué devuelve cada herramienta facilita la escritura de buenos prompts y la depuración cuando el resultado se desvía del diseño.
Qué devuelve cada herramienta de Figma Dev Mode MCP
| Herramienta | Qué devuelve | Cuándo la llama la IA |
|---|---|---|
| get_code | Código React + Tailwind para el frame seleccionado, redirigible a otros frameworks | Generar un andamio de componente desde un frame |
| get_image | PNG renderizado de la selección a la escala elegida | Referencia visual y bucles de verificación píxel perfecto |
| get_variable_defs | Variables y estilos usados en la selección - color, espaciado, tipografía | Mantener el código generado vinculado a tus tokens |
| get_code_connect_map | Mapa de nodeId → rutas codeConnectSrc en tu repositorio | Apuntar el modelo a tus implementaciones de componentes reales |
Cómo luce realmente el contexto
Conectar un servidor Figma MCP a un IDE es un pequeño cambio de configuración. El ejemplo a continuación es la entrada que un IDE como Claude Code o Cursor añade a su configuración MCP; una vez que la aplicación de escritorio de Figma está ejecutándose con Dev Mode habilitado, esa única línea es suficiente para que el cliente descubra las cuatro herramientas y empiece a invocarlas.
// .mcp.json - Claude Code, Cursor, Windsurf, o VS Code Copilot
{
"mcpServers": {
"figma-dev-mode": {
"url": "http://127.0.0.1:3845/mcp"
}
}
}Cómo configurarlo en 60 segundos
Habilitar Figma MCP lleva menos de un minuto si ya tienes un asiento Pro y la aplicación de escritorio instalada. El servidor viene dentro de Figma - no hay nada que descargar por separado - y se activa con un único interruptor en el panel Inspect de Dev Mode. El primer funcionamiento MCP de Atomize ocurrió a los dos minutos de activar ese interruptor; el principal obstáculo fue reiniciar el IDE para recoger el nuevo endpoint. El requisito previo que suele sorprender: el servidor local solo funciona en la aplicación de escritorio, así que los usuarios de Figma solo en navegador necesitan instalar primero la aplicación de escritorio antes de que cualquiera de los pasos siguientes funcione.
- Abre la aplicación de escritorio de Figma y carga cualquier archivo de Diseño al que tengas acceso de edición.
- Cambia a Dev Mode usando el interruptor en la parte superior derecha de la barra de herramientas.
- En el panel Inspect, encuentra la sección MCP y activa
Habilitar servidor MCP de escritorio. - Añade el endpoint
http://127.0.0.1:3845/mcpa la configuración MCP de tu IDE y reinicia el IDE.
El soporte nativo de clientes cubre VS Code con GitHub Copilot, Cursor, Windsurf, Claude Code y Zed - los documentos oficiales de Figma mantienen la lista actual y una página de problemas conocidos para peculiaridades específicas de cada cliente. En cuanto al plan, el servidor requiere un asiento Dev o Full en un plan Professional, Organization o Enterprise; las cuentas Starter están limitadas a aproximadamente seis llamadas de herramienta al mes, suficiente para probar la función pero no para trabajar con ella.
Cómo se benefician los diseñadores en la práctica
El beneficio real de MCP para los diseñadores es que la IA deja de inventar tu sistema de diseño y empieza a leerlo. La mayoría de los equipos descubren que el código generado sin MCP parece plausible pero está mal en formas que son lentas de detectar - valores hex codificados, relleno fuera de especificación, componentes similares que derivan en el momento en que se actualiza el componente real. Con MCP activo, Vitalina observó que los andamios de primera pasada de los archivos tokenizados de Atomize necesitaban casi ninguna corrección de espaciado, porque el modelo referenciaba spacing/4 en lugar de adivinar 16px. Los tres cambios siguientes aparecen consistentemente en la primera semana de adopción.
Los tokens siguen siendo tokens
Sin MCP, un asistente de IA que mira una captura de pantalla elige los colores con un cuentagotas y pega valores hex literales en el resultado. Con get_variable_defs disponible, el modelo ve que el color de la superficie es surface/elevated con alias a gray/950, y escribe var(--surface-elevated) o la referencia de token equivalente. El mismo cambio ocurre para el espaciado, la tipografía y el radio - el código generado usa tus nombres de tokens, así que un cambio futuro del sistema aún se propaga. Combina esto con una arquitectura de tokens primitivos y semánticos saludable y el resultado de la IA empieza a parecerse a código que habría escrito tu ingeniero frontend senior.
Los componentes se mapean a componentes de código reales
get_code_connect_map es la herramienta que vale su peso en una base de código madura. Cuando un componente de Figma está mapeado a su contraparte real en React o Vue mediante Code Connect, la IA ya no reconstruye tu Button desde cero en cada frame - importa el componente que ya escribiste, con los props correctos inferidos de la variante. Sin Code Connect, el modelo crea componentes similares de imitación, que es el modo de fallo del que se queja todo ingeniero senior. Code Connect requiere Organization o Enterprise; esta es la parte del sistema que está detrás de un nivel de pago, y también es la parte que da el mayor salto de precisión.
Menos ida y vuelta en la entrega
Los diseñadores pasan menos tiempo en el hilo de Slack que comienza con «el relleno está mal» porque la IA trabaja desde la misma fuente que el diseñador está editando. Las pérdidas de traducción clásicas - 16px convirtiéndose en 13px, text/heading/lg convirtiéndose en un literal font-size: 24px, o una tarjeta construida desde primitivos en lugar del componente de tarjeta existente - se reducen. Algo de deriva persiste, especialmente en diseños donde los bordes de auto-layout se encuentran con posicionamiento absoluto, pero la calidad de base es suficientemente alta como para que la conversación pase de «esto está mal» a «¿puedes ajustar este detalle?».
Figma MCP vs otras herramientas de diseño a código
Figma MCP es la elección correcta cuando quieres que una IA de propósito general razone sobre un diseño dentro de tu IDE usando tu base de código como contexto - no es la elección correcta cuando quieres un pipeline de exportación llave en mano. El espacio de diseño a código ha crecido rápidamente desde 2024, y cada herramienta resuelve un cuello de botella diferente: modelos afinados, pipelines de mapeo de componentes, o contexto estructurado bruto. Atomize evaluó Figma MCP, Framelink, Anima y Visual Copilot en archivos de clientes reales; el diferenciador que más importó fue si la herramienta podía citar nombres de tokens del archivo en vivo en lugar de producir literales. Usa la tabla a continuación como orientación inicial, no como un benchmark definitivo.
Figma MCP vs otras herramientas de Figma a código
| Herramienta | Enfoque | Consciente de tokens | Consciente de componentes | Dónde vive |
|---|---|---|---|---|
| Figma Dev Mode MCP | Servidor MCP local alimenta la selección al cliente de IA | Sí | Con Code Connect | App de escritorio + IDE |
| Framelink MCP (comunidad) | Servidor MCP sobre la API REST de Figma | Parcial | No | Solo IDE |
| Anima | Plugin de Figma + extensión VS Code Frontier | Parcial | Sí (Frontier) | Plugin + IDE |
| Locofy Lightning | Plugin, exportación de modelo afinado | Parcial | Parcial | Plugin + web |
| Builder.io Visual Copilot | Pipeline de IA de múltiples etapas mediante plugin | Sí | Sí | Plugin + nube |
Cuando Atomize evaluó Framelink MCP y el servidor oficial Figma Dev Mode MCP contra el mismo frame de nuestra biblioteca tokenizada, la diferencia fue directa: Framelink devolvió valores hex resueltos - #1A1A27 para un relleno de superficie - mientras que el servidor oficial devolvió el nombre de Variable surface/elevated junto al color resuelto. Esa distinción determina si la IA escribe background-color: #1A1A27 o background-color: var(--surface-elevated). Para un sistema de diseño donde las propiedades CSS personalizadas son la interfaz de producción, la salida de nombre de Variable del servidor oficial es lo que hace que el código generado sea realmente mantenible.
Si quieres contexto bruto alimentado a un modelo de propósito general en tu IDE, el servidor oficial de Figma o el Framelink MCP de la comunidad es la forma correcta. Si prefieres un pipeline de extremo a extremo que mapea diseños a tu base de código usando un modelo afinado por el proveedor, Anima o Visual Copilot son más potentes. No hay una respuesta universal; la pregunta decisiva es si quieres que la IA razone dentro de tu IDE con el contexto de tu base de código, o si quieres una exportación llave en mano.
Limitaciones que debes conocer antes de desplegar
- El servidor oficial todavía está etiquetado como beta a mediados de 2026; espera cambios ocasionales de protocolo y documenta cualquier integración personalizada de forma defensiva.
- Las respuestas están limitadas a aproximadamente 20 KB por llamada - los frames grandes deben desglosarse en selecciones más pequeñas antes de que la IA pueda razonar sobre ellos.
- Code Connect es el desbloqueo para el mapeo de componentes, y requiere Organization o Enterprise más un asiento Dev; las cuentas Pro obtienen tokens pero no importaciones de componentes reales.
- La variante MCP remota/alojada no funciona detrás de todas las configuraciones de autenticación empresarial; los equipos con AWS Bedrock o proxies personalizados han encontrado barreras conocidas.
- La selección es la unidad de trabajo: el servidor no es una forma de volcar un archivo completo en un modelo, y hacerlo desperdicia llamadas y produce resultados superficiales.
Cómo diseñar para una salida amigable con MCP
La salida amigable con MCP comienza con el archivo, no con el prompt - el servidor solo puede devolver lo que ya está vinculado y nombrado correctamente. Los diseñadores que se obsesionan con la ingeniería de prompts e ignoran la cobertura de tokens obtienen consistentemente peores resultados que los diseñadores que tokenizan exhaustivamente y escriben prompts mínimos. Cuando Atomize auditó archivos de clientes antes de la incorporación a MCP, los que tenían más del 80% de cobertura de vinculación de variables produjeron andamios de primera pasada que solo necesitaban ajustes menores de props; los archivos con menos del 40% de cobertura produjeron ruido con muchos literales independientemente de cómo se escribiera el prompt. La lista a continuación cubre los hábitos de higiene de archivos de mayor impacto, la mayoría de los cuales se superponen con las mejores prácticas del sistema de diseño que ya deberías tener en vigor.
- Vincula cada relleno, trazo, relleno, radio y métrica de texto a una Variable - la IA no puede citar un token que no existe. Ejecuta Buscar Valores No Tokenizados antes de enviar un frame a MCP.
- Usa componentes reales, no grupos desvinculados -
get_code_connect_mapsolo coincide con lo que está expuesto como componente en la biblioteca. - Anota el comportamiento no obvio en Dev Mode - el modelo lee las anotaciones como contexto.
- Mantén la selección enfocada - un frame a la vez supera a las selecciones de páginas completas, tanto en precisión como en el límite de respuesta de 20 KB.
- Audita la accesibilidad antes de la generación de código, no después - ejecuta Auditoría de Contraste para que el diseño que la IA está leyendo ya sea AA-compatible.
Dónde encaja MCP con el resto de tu sistema de diseño
MCP es el canal en vivo hacia el archivo - amplifica cualquier disciplina de sistema que ya esté ahí, buena o mala. Un sistema de diseño sin nombres de tokens consistentes, componentes reales o paridad de modo oscuro producirá salida de IA que expone cada brecha, simplemente más rápido. Los equipos que obtienen más de Figma MCP ya han invertido en paridad diseño-código y en un stack de plugins de tokens/Git: los mismos nombres de tokens existen en Figma y en la base de código, por lo que la salida de la IA encaja limpiamente sin un paso de renombramiento. Piensa en MCP como un multiplicador de calidad, no un sustituto de calidad - la documentación para desarrolladores de Figma cubre los detalles del protocolo, pero el apalancamiento está aguas arriba en tu sistema.
Veredicto final - Figma MCP
Figma MCP es el canal que faltaba entre diseño y código - no un botón mágico de exportación, sino una lectura en vivo y estructurada de tu archivo sobre la que una IA de propósito general puede actuar como un ingeniero senior. La calidad del resultado escala directamente con la calidad del archivo: los archivos completamente tokenizados de Atomize con Code Connect configurado producían andamios de calidad de producción en la primera pasada; los archivos con vinculación mixta y grupos desvinculados producían ruido de apariencia plausible que necesitaba una revisión más profunda. Los sistemas de diseño que ya estaban limpios se volvieron más limpios, más rápido; los archivos que eran un desastre revelaron cada brecha. Trata MCP como una fuerza impulsora de la higiene del sistema, y la entrega de diseño a código se convierte en la parte más fluida de tu flujo de trabajo.
