Figma MCP, del diseño al código: 6 pasos y los límites que quedan

Al terminar esta guía tendrás un setup de Figma MCP en el que un agente de desarrollo como Claude Code, Cursor o Codex lee un frame de Figma y escribe código con los componentes y los tokens del proyecto. También tendrás una lista corta de los trabajos que siguen necesitando a una persona.

El servidor MCP de Figma es el servidor Model Context Protocol con el que Figma pasa a los agentes de desarrollo el contexto estructurado de un archivo: capas, auto layout, variables, componentes, capturas y, cuando lo configuras, el código al que corresponde cada componente. La documentación de Figma es clara sobre el alcance: «The MCP server is not a one-click design to perfect code tool», es decir, el servidor no convierte un diseño en código perfecto con un clic. Envía el contexto y un primer borrador de código. El código final lo escribe el agente, y vale lo que valgan el archivo, los mapeos y las reglas que le des.

La distancia se puede medir. En el informe de IA 2025 de Figma, una encuesta a 2.500 personas que construyen producto en siete países, el 78% dice que la IA hace su trabajo mucho más eficiente, pero solo el 32% dice que puede fiarse de lo que produce. Los seis pasos que siguen cierran esa distancia en el paso del diseño al código. Si MCP es nuevo para ti, empieza por qué es MCP y por qué un SaaS necesita un servidor.

Qué necesitas antes de empezar

• Una licencia de Figma que pueda llamar al servidor. Las licencias View y Collab llegan a 20 llamadas al mes en cualquier plan. Las licencias Dev y Full llegan a 200 al día en Professional y Organization, y a 600 al día en Enterprise.
• Un cliente MCP que Figma admita. Solo se conectan los clientes del catálogo MCP de Figma, entre ellos VS Code, Cursor y Claude Code.
• Una base de código con una librería de componentes y tokens. El traspaso lleva un diseño a código que ya existe. Si no hay nada a lo que llevarlo, el agente se lo inventa.
• Para Code Connect, un plan Organization o Enterprise y una licencia Full o Dev, según el centro de ayuda de Figma.

Paso 1: elegir el servidor y revisar la licencia

Figma ofrece dos servidores. El remoto, en https://mcp.figma.com/mcp, es el que Figma recomienda y el único con todas las herramientas, incluida la escritura en el canvas. Funciona con enlaces: pegas la URL de un frame o de una capa y el agente descarga ese nodo. El servidor de escritorio corre dentro de la app de Figma y también lee la selección actual, algo práctico cuando diseño y desarrollo trabajan codo con codo.

Después toca hacer cuentas. La página de límites de Figma fija estos topes, con límites por minuto además de los diarios:

• Licencia View o Collab, cualquier plan: hasta 20 llamadas al mes.
• Licencia Dev o Full en Professional: hasta 200 al día, 10 por minuto.
• Licencia Dev o Full en Organization: hasta 200 al día, 15 por minuto.
• Licencia Dev o Full en Enterprise: hasta 600 al día, 20 por minuto.

Una pantalla rara vez cuesta una sola llamada. Una pasada normal lee la estructura, el contexto de dos o tres secciones, una captura y los assets. Así que 20 llamadas al mes dan para una prueba, y 200 al día cubren a un desarrollador que avanza pantalla a pantalla. Para escribir en archivos de Figma hace falta una licencia Full; con una Dev solo se lee.

Paso 2: estructurar el archivo para que el contexto sirva

El agente lee lo que contiene el archivo: la jerarquía de componentes, el auto layout, las variables y los nombres de las capas. Un frame llamado "Frame 1184", con rellenos en hexadecimal y posiciones absolutas, se convierte en código con valores hexadecimales y posiciones absolutas. Un frame llamado "Precios / anual", hecho con componentes de la librería y con colores y espaciados ligados a variables, se convierte en código que puede reutilizar ambos.

• Liga color, espaciado, radios y tipografía a variables. Cada valor suelto que queda en el archivo es un valor suelto que el agente puede copiar al código.
• Construye con componentes de la librería y sus variantes, sin desvincular las instancias. Una instancia desvinculada le llega al agente como un grupo de formas.
• Usa auto layout, así los huecos y el padding llegan como números con una dirección, que se traducen a flex o grid.
• Nombra las capas por lo que son. Los nombres viajan al contexto y muchas veces al código.

Aquí los nombres de los tokens importan más que en ningún otro sitio. Si la variable se llama color/action/primary en Figma y color.action.primary en el archivo de tokens, el agente las empareja sin ayuda. Un esquema que aguanta el viaje lo explicamos en convenciones de nombres de design tokens.

Paso 3: conectar los componentes con Code Connect

Code Connect vincula un componente de Figma con su componente en el repositorio. Cuando un componente vinculado aparece en el frame, el servidor MCP lo envuelve en un CodeConnectSnippet con los valores actuales de sus propiedades, la sentencia de import, un ejemplo de uso y las instrucciones que hayas escrito para él, como explica la documentación de Figma sobre Code Connect. Entonces el agente escribe <Button variant="primary"> desde tu librería, en lugar de reconstruir un botón a partir de un rectángulo y una capa de texto.

Hay dos formas de configurarlo. La CLI de Code Connect vive en el repositorio y envía ejemplos más completos, con el mapeo de props y las rutas de los archivos. Code Connect UI se configura dentro de Figma, genera el import y un ejemplo básico, y te deja añadir instrucciones para el servidor MCP: reglas de accesibilidad, las props que un componente nunca debe recibir, el contenedor en el que siempre va. Si la misma librería está vinculada a React y a SwiftUI, en el servidor remoto le indicas al agente qué etiqueta usar con el parámetro clientFrameworks.

Lo sensato es empezar por los diez o quince componentes que salen en casi todas las pantallas: botones, campos, tarjetas, diálogos, navegación. En un plan Professional, donde Code Connect no está disponible, parte del trabajo lo hace el archivo de reglas del paso 4, indicando la carpeta donde viven los componentes.

Paso 4: escribir el archivo de reglas antes del primer prompt

El servidor no conoce las convenciones del proyecto hasta que se las das. Un archivo de reglas (CLAUDE.md para Claude Code, las rules de Cursor, las instrucciones personalizadas de Copilot) las recoge una sola vez, para que ningún prompt tenga que repetirlas. La guía de reglas de Figma propone un flujo obligatorio, que mantenemos casi tal cual:

## Reglas para Figma MCP1. Ejecuta primero get_design_context sobre el nodo exacto.2. Si la respuesta llega truncada, ejecuta get_metadata y descarga solo los nodos necesarios.3. Ejecuta get_screenshot como referencia visual.4. Descarga los assets solo después de los pasos 1 a 3.5. Lee la salida React + Tailwind como una descripción del diseño. Reescríbela en nuestro stack.6. Usa los componentes de src/components/ui. Nunca escribas a mano un hexadecimal, un valor en px o un tamaño de fuente.7. Compara el resultado con la captura antes de darlo por terminado.

La línea 5 es la que más pesa. La salida por defecto es React con clases de Tailwind, y un agente sin guía la pega tal cual. La regla convierte esa salida en una descripción que el agente traduce a los componentes y tokens del proyecto. Sobre cómo escribir reglas que funcionen, está cómo escribir un archivo CLAUDE.md que guíe de verdad a Claude Code.

Paso 5: una sección cada vez

get_design_context sobre una página entera devuelve una respuesta enorme, y una respuesta enorme desplaza todo lo demás del contexto del agente. get_metadata existe para esto: devuelve un esquema XML mínimo con los ID, nombres, tipos, posiciones y tamaños de las capas, y nada más. El agente lee el esquema y luego llama a get_design_context sobre el hero, después sobre la tabla de precios, después sobre el footer, un nodo cada vez.

El prompt también orienta la salida. "Genera esta selección en Vue", "en HTML y CSS", "en SwiftUI" o "con los componentes de src/ui" cambian lo que vuelve, según la referencia de herramientas de Figma. Cuando necesitas tokens y no código, pide get_variable_defs por su nombre: devuelve las variables y los estilos usados en la selección.

Paso 6: comparar el resultado con el diseño y con el sistema

• Visual. Pon la pantalla en marcha junto a la imagen de get_screenshot, al mismo ancho.
• Sistema. Busca en el diff valores hexadecimales, medidas en píxeles y componentes nuevos que duplican otros que ya existen. Cada uno es una desviación, y el component drift se acumula sin hacer ruido.
• Estados. Haz la lista de los estados que el frame no muestra (carga, vacío, error, texto largo, desactivado) y construye cada uno a propósito.
• Accesibilidad. Pasa una revisión automática y una prueba con teclado. Un frame no dice nada del orden del foco ni de las etiquetas.

Lo que el servidor MCP de Figma todavía no hace

Figma enumera tres cosas que el servidor no hace: generar el código final, entender por sí solo el design system y corregir o adaptar el código cuando algo falla. En la práctica quedan cuatro huecos que el equipo tiene que cubrir.

• El comportamiento que nadie dibujó. Un frame es un estado a un ancho. La carga de datos, la validación, los permisos y cada breakpoint entre los dibujados los aportan el desarrollador y la especificación.
• El criterio ante los conflictos. Cuando el frame dice 18 px y la escala de espaciado dice 16 o 20, alguien decide si se equivoca el diseño o el sistema. La regla que sugiere Figma da prioridad al token del design system y ajusta la medida lo mínimo.
• Escribir en el canvas a escala. La herramienta use_figma deja a los agentes crear frames, componentes, variables y auto layout directamente en el archivo, ejecutando JavaScript a través de la Plugin API. Está en beta desde el 24 de marzo de 2026, es gratuita durante la beta y pasará a ser de pago por uso. Los límites actuales: 20 KB de respuesta por llamada, sin imágenes, sin fuentes personalizadas, y componentes que hay que publicar a mano antes de que Code Connect complete el vínculo.
• Cualquier cliente. Solo se conectan los clientes del catálogo MCP de Figma. El resto se apunta a una lista de espera.

Fallos frecuentes y cómo resolverlos

• El servidor siempre devuelve React. Indica el framework en el prompt y en el archivo de reglas.
• Pediste variables y recibiste código. Llama a get_variable_defs de forma explícita.
• Se atasca o corta la respuesta. La selección pesa demasiado. Empieza por get_metadata y descarga los nodos hijos.
• Límite alcanzado a mitad de sprint. Ejecuta whoami: devuelve el email autenticado, los planes de la cuenta y el tipo de licencia en cada uno.
• Errores de permisos. La cuenta solo lee los archivos que ya puede abrir, y el archivo tiene que pertenecer a un plan del que el usuario forme parte.

Lo que hace bueno este traspaso es lo que hacía bueno el anterior: una librería de componentes que la gente usa, tokens con nombres claros y archivos construidos con ambos. El servidor MCP hace que ese trabajo rinda dos veces, una para el desarrollador que lee el archivo y otra para el agente.