De Figma a código con MCP: cómo un agente lee tu diseño

El servidor MCP de Figma deja que un agente de IA lea frames, variables y componentes para escribir código. Cómo conectarlo, preparar el archivo y sus límites.

info Definición Rápida

Figma MCP es un servidor del Model Context Protocol que da a un agente de IA acceso estructurado a tus archivos de Figma. Con él, el agente puede leer un frame, sus variables y sus componentes, y usarlos como base para escribir código. El resultado es contexto de diseño que el agente debe traducir a tu proyecto, no código final.

¿Qué es MCP y qué papel juega Figma aquí?

MCP (Model Context Protocol) es, según su sitio oficial, un estándar abierto para conectar aplicaciones de IA con sistemas externos, comparable a un puerto USB-C: una forma común de enchufar cosas distintas. Para entender el protocolo a fondo, lee MCP explicado para diseñadores; para ver qué más puedes conectar, servidores MCP útiles para diseñadores. Aquí nos quedamos en el flujo concreto de Figma a código.

El servidor es de Figma y expone herramientas con nombres concretos. Las principales de lectura son get_design_context (contexto y código de una selección), get_metadata (un esquema ligero en XML), get_screenshot, get_variable_defs (variables y estilos usados) y search_design_system (busca componentes, variables y estilos en tus bibliotecas). En vez de que copies valores a mano desde Dev Mode, el agente pregunta a Figma por el frame y recibe estructura, estilos y variables.

¿Cómo preparo mi archivo para que el agente lo entienda?

Tu trabajo cambia: los nombres, las capas, el auto layout y las variables ahora los lee una máquina. Si un componente se llama “Frame 1268” o los colores son valores sueltos, el agente tendrá que adivinar. La guía de Figma para estructurar archivos recomienda:

Componentes para todo lo que se repite (botones, tarjetas, campos, elementos de navegación), para que el agente reutilice una sola implementación.
Variables para espaciado, color, radio de borde y tipografía, para que use tus tokens y no valores fijos. Si quieres repasar la diferencia, mira variables y estilos y la arquitectura de tokens.
Nombres descriptivos en capas y componentes, en lugar de “Frame1268” o “Group5”.
Auto layout, que evita el posicionamiento absoluto y suele dar código más limpio y predecible. Antes de generar, cambia el tamaño del frame para comprobar que se comporta bien.
Anotaciones para lo que no se ve, como cómo debe alinearse o responder un elemento.
Code Connect, la función de Figma que enlaza componentes del diseño con componentes de tu código. La propia guía la llama la forma más eficaz de que el agente reutilice tus componentes reales; sin ella, tiene que adivinar cuál corresponde.

Todo esto descansa en un sistema de diseño con componentes bien nombrados.

¿Cómo se conecta y cuál es el flujo de trabajo?

Según la documentación de Figma, hay dos caminos para Claude Code:

Plugin oficial: claude plugin install figma@claude-plugins-official. Instala la conexión y también las skills de Figma. Después reinicia Claude Code, abre /plugin, elige figma en la pestaña Installed y autoriza el acceso en el navegador.
Manual: claude mcp add --transport http figma https://mcp.figma.com/mcp. No instala las skills. Abre una sesión nueva, escribe /mcp, elige figma, pulsa Authenticate y autoriza en el navegador. Con --scope user queda disponible en todos tus proyectos; sin él, solo en el actual.

Una vez conectado, un flujo razonable, que sigue las reglas de ejemplo de Figma, es:

Copia el enlace de un frame o de un componente desde Figma. Con el servidor remoto, el prompt debe incluir ese enlace.
Si el diseño es grande, pide primero get_metadata: Figma lo recomienda porque get_design_context puede devolver demasiado a la vez.
Pide get_design_context solo sobre la parte que vas a construir.
Toma una captura con get_screenshot como referencia visual.
Implementa traduciendo el resultado a las convenciones de tu proyecto y valida contra Figma antes de dar el trabajo por terminado.

Figma también ofrece el prompt create_design_system_rules, que redacta un archivo de reglas a partir de tu código para que el agente respete tus convenciones.

¿Qué cambia entre el servidor remoto y el de escritorio?

	Servidor remoto	Servidor de escritorio
Dirección	`https://mcp.figma.com/mcp`	`http://127.0.0.1:3845/mcp`
App de escritorio	No la necesita	Sí, actualizada y con un archivo de diseño en Dev Mode
Prompt con tu selección actual	No: hay que pegar el enlace del frame	Sí
Escribir en el lienzo	Sí	No
Herramientas	Todas, incluidas las solo remotas (como `search_design_system`)	Las que no están marcadas como solo remotas
Asiento y plan	Escribir fuera de tus borradores pide un asiento Full	Dev o Full en Professional, Education, Organization, Government o Enterprise

Escribir en el lienzo está en beta, es gratis durante ese periodo y Figma avisa de que pasará a cobrarse por uso; las preguntas frecuentes advierten además que su resultado es de calidad beta y puede necesitar revisión.

Los límites de lectura dependen del plan y del asiento. La página de Figma consultada el 4 de noviembre de 2026 indica, para asientos Dev o Full, 200 llamadas al día y 10 por minuto en Professional, 200 al día y 15 por minuto en Organization y 600 al día y 20 por minuto en Enterprise. Los asientos View o Collab tienen 20 llamadas al mes, y Education recibe los mismos límites que Professional. Los precios y límites cambian: confirma la página oficial antes de planificar.

¿Cuándo NO conviene usarlo?

Cuando el diseño no tiene estructura: capas sin nombre, sin auto layout y sin componentes. El código que sale es difícil de mantener.
Cuando esperas un resultado idéntico al diseño sin revisión humana. Figma lo dice sin rodeos: no es un camino de un clic hacia código terminado.
Cuando el proyecto no tiene sistema de diseño ni tokens. Sin ellos, el agente crea componentes nuevos en lugar de reutilizar los existentes.
Cuando solo tienes un asiento View o Collab y necesitas muchas consultas: 20 al mes se agotan rápido.

Ejemplo

Ejemplo ilustrativo: una diseñadora tiene un formulario de registro en Figma con cuatro campos, un botón primario y mensajes de error. Conecta el servidor remoto a Claude Code y escribe: “Usa get_design_context sobre este enlace y construye el formulario con los componentes de src/components. Reutiliza Button y TextField si existen. Genera en el framework de mi proyecto, no en React con Tailwind.” El agente lee el contexto, toma una captura y mira el código del proyecto. Como el botón de Figma está enlazado a Button mediante Code Connect, lo reutiliza; los campos no tenían enlace, así que propone uno nuevo. La diseñadora compara el resultado con la captura y anota las diferencias de espaciado.

El valor está en el paso de revisión, no en la generación: sin comparar con el diseño no sabes si el código lo respeta.

Errores comunes

Pedir “hazlo igual que Figma” sin pasar el enlace exacto del frame o del componente.
Usar get_design_context sobre una página entera. Empieza por un componente o una sección, o por get_metadata.
Confiar en el código sin revisar accesibilidad, estados de foco y comportamiento responsivo. Figma muestra un estado; tu producto necesita todos.
No indicar el framework y recibir React y Tailwind por defecto aunque tu proyecto use otra cosa.
Esperar que el agente conozca tus convenciones sin dárselas: Figma aclara que solo las conoce si las compartes mediante Code Connect, variables, reglas o el prompt.
Tratar el resultado como código de producción.

Fuentes

Preguntas frecuentes

¿Qué es el servidor MCP de Figma?

Es un servidor del Model Context Protocol que Figma ofrece para que un cliente de IA, como Claude Code, lea contexto de diseño de Figma (código, metadatos, capturas, variables) y, con el servidor remoto, escriba contenido en el lienzo.

¿Figma MCP genera código listo para producción?

No. Las preguntas frecuentes de Figma dicen que su trabajo es dar contexto de diseño al agente, no código listo para producción; el agente escribe el código final. Por defecto el resultado de get_design_context usa React y Tailwind, pero puedes pedir otro framework en el prompt.

¿Cómo conecto Figma MCP a Claude Code?

Con el plugin oficial (claude plugin install figma@claude-plugins-official) o a mano con claude mcp add –transport http figma https://mcp.figma.com/mcp. Después autorizas el acceso en el navegador desde /plugin o /mcp, según la vía que elegiste.

¿Necesito la app de escritorio de Figma para usar el servidor?

No. El servidor remoto no la necesita y es el que Figma recomienda. El servidor de escritorio sí requiere la app y un asiento Dev o Full, pero es el único donde un prompt puede usar tu selección actual.

¿Hay límites de uso?

Sí. Según la página de Figma consultada el 4 de noviembre de 2026, los asientos Dev o Full tienen 200 llamadas al día en Professional y Organization, y 600 en Enterprise; los de lectura (View o Collab) tienen 20 al mes. Los límites aplican a las herramientas que leen datos de Figma.