La propia documentación de Figma muestra una respuesta de get_design_context de 351.378 tokens frente a un límite de 25.000. Este artículo explica qué infla la salida de Figma MCP, cómo medir cada llamada y siete soluciones, desde get_metadata hasta Code Connect, para que las respuestas sigan siendo pequeñas.
Pegas un enlace de Figma en tu agente de programación, pides una sola tarjeta de precios y la ejecución falla con un error sobre el tamaño de la respuesta. La página de solución de problemas de Figma muestra el mensaje exacto: una respuesta get_design_context de 351.378 tokens frente a un techo de 25.000 tokens. Esa solicitud superó el límite catorce veces. Y aunque una respuesta quepa por poco dentro del límite, sigue ocupando tu ventana de contexto, desplaza las instrucciones anteriores fuera de alcance y vuelve a leerse en cada turno que sigue.
Este artículo explica por qué el servidor MCP de Figma genera tanta salida, cómo ver lo que cuesta cada llamada y siete cambios que reducen las cifras sin empeorar la interfaz generada. Los nombres de las herramientas y los límites proceden de la documentación pública de Figma. Los consejos de flujo de trabajo surgen de lo que ocurre cuando los archivos de diseño grandes se encuentran con ventanas de contexto pequeñas.
Un enlace a un nodo no devuelve un solo rectángulo. get_design_context extrae el contexto de diseño de las capas seleccionadas y lo entrega como código, en React con Tailwind por defecto, aunque hay otros frameworks disponibles. Si seleccionas un marco de página completa, llega con él cada capa anidada: barras de navegación, tarjetas, instancias de iconos, estilos de texto, reglas de auto layout y espaciado.
Una landing page con muchos elementos puede contener miles de nodos, y cada nodo lleva un nombre, un tamaño, rellenos, trazos, relleno interior y ajustes de tipo. Al convertirse en código, todo eso se transforma en listas largas de clases y marcado profundo. Las listas largas de clases se tokenizan mal. Una regla práctica habitual es de unos cuatro caracteres por token para la prosa en inglés, y el código y el marcado densos suelen meter menos caracteres en cada token.
Cuatro factores tienden a inflar la respuesta con más rapidez:
Una solicitud de diseño suele activar varias herramientas de lectura, y cada una añade su propia carga. La referencia de herramientas de Figma las enumera:
| Herramienta | Qué devuelve | Tamaño relativo | Mejor uso |
|---|---|---|---|
get_metadata | Esquema XML disperso con IDs de capas, nombres, tipos, posiciones y tamaños | Pequeño | Mapear un marco grande antes de pedir nada |
get_design_context | Estilo y estructura de la capa como código, en React y Tailwind por defecto | Grande, crece con el subárbol | Construir un componente o una sección |
get_screenshot | PNG de la selección para mantener la fidelidad del diseño | Medio, tokens de imagen | Comprobación visual del resultado |
get_variable_defs | Variables y estilos usados en la selección: colores, espaciado, tipografía | Pequeño a medio | Ajustar los tokens de diseño |
download_assets | Exportaciones en PNG, JPG, SVG o PDF, o las imágenes originales | Depende de los recursos | Guardar iconos y fotos como archivos |
get_code_connect_map | Asignaciones de ID de nodo a componentes de código | Pequeño | Reutilizar componentes que ya tienes en producción |
La columna de tamaño describe lo que devuelve cada herramienta en general. Las cifras reales dependen de tu archivo, así que mide antes de fiarte de cualquier etiqueta.
Los resultados de las herramientas permanecen en la conversación. Supón que una consulta devuelve 40.000 tokens: cada mensaje posterior carga ahora con ese peso. El caché de prompts puede reducir el precio de volver a leerlo, pero los tokens siguen ocupando la ventana, así que desplazan tus archivos fuente, la salida de las pruebas y las instrucciones. Las sesiones largas activan entonces la compactación automática, que resume y elimina detalles que querías conservar.
💡 Comprobación rápida: si el agente se vuelve más lento o olvida instrucciones anteriores justo después de una llamada a Figma, culpa primero a la respuesta sobredimensionada antes que al modelo.
La mayoría de los agentes de programación muestran lo llena que está la ventana. En Claude Code, el comando /context lo hace. Revisa el número antes y después de cada llamada a Figma. La diferencia es el costo real de esa llamada, con la captura de pantalla incluida, y es el único número que importa para tu archivo.
Elige un marco real y ejecuta tres llamadas en una sesión nueva, anotando el tamaño del contexto después de cada una:
get_metadata sobre el marco completo.get_design_context sobre el marco completo.get_design_context sobre un nodo hijo tomado de los metadatos.Registra los resultados en una tabla como esta:
| Llamada | Nodo | Contexto añadido | Notas |
|---|---|---|---|
get_metadata | Marco completo | Rellenar | Solo esquema |
get_design_context | Marco completo | Rellenar | Comprobar el error de tamaño |
get_design_context | Un hijo | Rellenar | Comparar con la fila de arriba |
Tras unas cuantas pruebas con marcos tendrás tu propia curva de costos, que supera cualquier cifra de un blog, incluida esta. Mi regla práctica: procura que las consultas sean lo bastante pequeñas como para hacer cinco o seis en una sesión antes de que empiece la compactación. Si una sola consulta se come un tercio de la ventana, el nodo es demasiado grande.
Más o menos en orden de cuánto suelen ahorrar.
Figma recomienda get_metadata para diseños muy grandes porque devuelve un esquema XML disperso, sin estilos adjuntos. Lee el esquema, elige la sección que realmente necesitas y llama a get_design_context solo con el ID de ese nodo.
Run get_metadata on this frame. Do not call get_design_context yet.
List the top level sections with their node IDs and wait for my pick.
El servidor trabaja a partir del nodo que seleccionas o enlazas. Enlaza el botón, no la página. Construye una página como lo haría una persona: cabecera, hero, precios y pie, cada uno en su propia solicitud.
Ordena también el archivo fuente. Las capas sin usar y los grupos muy anidados pueden añadir nodos que la respuesta tiene que describir, así que una limpieza de diez minutos por parte del diseñador suele amortizarse en la siguiente consulta.
La documentación de Figma indica configurar Code Connect para obtener los mejores resultados de reutilización de código. Las asignaciones enlazan un nodo de Figma con un componente real de tu repositorio, mediante get_code_connect_map y add_code_connect_map. En lugar de reconstruir un botón a partir de estilos sin procesar en cada solicitud, el agente puede apuntar al botón que ya tienes en producción. Eso significa menos código generado y menos comentarios en la revisión.
Una diferencia a vigilar: el servidor de escritorio usa las asignaciones que selecciones, mientras que el servidor remoto necesita el parámetro clientFrameworks configurado con una etiqueta concreta, como React o SwiftUI.
Cuando los diseñadores aplican variables y estilos para el color, el espaciado y la tipografía, get_variable_defs devuelve los que se usan en la selección. Una salida que hace referencia al nombre de un token es mejor que el mismo código hexadecimal y el mismo valor en píxeles repetidos en cientos de elementos, y además coincide con los tokens que ya tienes en tu hoja de estilos.
💡 Pide al equipo de diseño que vincule los rellenos y el espaciado a variables antes de la primera consulta MCP. Les cuesta unos minutos y te ahorra tiempo en cada solicitud posterior.
React con Tailwind es la salida por defecto. Si tu proyecto usa Vue, SwiftUI o CSS puro, una respuesta en React necesita una segunda pasada para convertirla, y pagas por ambas. Indica la pila en el prompt y, en el servidor remoto, configura clientFrameworks de forma explícita. Lo mismo vale para los estilos: di si usas Tailwind, módulos CSS o una biblioteca de componentes, porque mezclar enfoques en una sola pasada es lo que da pie a las reescrituras.
Usa download_assets para exportar iconos y fotos como archivos al repositorio y referenciarlos por ruta. No hagas que el agente vuelva a leer un nodo de imagen para cada componente que muestra el mismo logotipo. Las exportaciones pueden ser SVG para los iconos y PNG o JPG para las fotos, así que elige el formato que ya usa tu compilación. Una vez que los archivos estén en el repositorio, los prompts posteriores solo necesitan la ruta del archivo.
Figma indica que las capturas pueden desactivarse si te preocupan los límites de tokens, aunque recomienda dejarlas activas porque conservan la fidelidad del diseño. Un término medio razonable: mantenlas para la primera versión de una sección y quítalas en cambios pequeños, como cambiar una etiqueta o ajustar un relleno.
El mensaje de error sugiere aumentar MAX_MCP_OUTPUT_TOKENS, y la página de solución de problemas de Figma menciona 50000 o 100000 como valores de ejemplo. En Claude Code, configuras la variable en los ajustes del entorno y reinicias la aplicación. Eso desbloquea la llamada, pero no cambia en nada cuántos tokens contiene la respuesta. Un límite más alto solo deja pasar una montaña más grande a la ventana.
Si el error de tamaño sigue apareciendo después de pedir una sola sección, el nodo en sí es pesado. Divídelo: pide a get_metadata los hijos de ese nodo y luego descárgalos uno a uno. Si un componente sigue devolviendo demasiado, la causa suele ser una lista de instancias muy larga o una capa cargada de texto, y la solución está en el archivo de Figma, no en el prompt.
| Enfoque | Efecto en el contexto | Cuándo tiene sentido |
|---|---|---|
Subir MAX_MCP_OUTPUT_TOKENS | Ninguno, solo deja pasar respuestas más grandes | Una consulta puntual que no puedes dividir |
| Pedir nodos hijos | Reduce mucho el tamaño de la respuesta | Opción por defecto para algo más grande que una sección |
| Desactivar las capturas | Elimina la carga de imágenes | Cambios pequeños |
| Code Connect | Reduce el código que escribe el agente | Cualquier proyecto con biblioteca de componentes |
| Conversación nueva por sección | Borra cargas antiguas | Sesiones largas |
El archivo de reglas puede ser breve. Algo como esto basta:
Design to code rules
- Framework: React with Tailwind. Reuse components from src/components first.
- Colors and spacing: use the tokens in src/styles/tokens.css, never raw hex values.
- Figma: call get_metadata first on any frame larger than one section.
- Fetch one node per request. Do not re-pull a node that is already built.
Cuesta unas pocas decenas de tokens por sesión y evita que aparezcan los hábitos más caros desde el principio.
get_metadata y elige un nodo.Tomemos una página de precios con cabecera, tres tarjetas de planes, una sección de preguntas frecuentes y un pie. La ruta cara es un enlace al marco completo y el prompt «construye esta página». La ruta ligera tiene este aspecto:
get_metadata sobre el marco de la página devuelve el esquema y los IDs de nodo.get_design_context para una tarjeta de plan, con las capturas activadas.PlanCard con propiedades para el nombre, el precio y las características.Tres tarjetas de planes, una sola consulta de diseño. En una página completa, la diferencia entre «una consulta por sección» y «una consulta para todo» es donde está la mayor parte del ahorro.
| Error | Por qué cuesta | Solución |
|---|---|---|
| Enlazar la página completa | Vuelve todo el subárbol | Enlaza una sola sección |
Llamar a get_design_context dos veces sobre un mismo nodo | La misma carga entra dos veces en el contexto | Reutiliza el primer resultado |
| Volver a consultar por un ajuste pequeño | Una carga nueva para un cambio de una línea | Edita el código directamente |
| Subir el límite por defecto | Las consultas sobredimensionadas se vuelven normales | Mantén el valor por defecto y súbelo solo temporalmente |
| Ignorar el framework | Una segunda pasada de conversión | Indica primero la pila |
Algunas soluciones van en el archivo de Figma, no en el prompt. Pide al equipo de diseño que divida los flujos largos en una sección por marco, que nombre las secciones según lo que son, y que guarde los componentes reutilizables en una biblioteca en lugar de copiarlos entre páginas. Un archivo ordenado le da a get_metadata un esquema limpio con el que trabajar, lo que hace que cada consulta posterior sea más pequeña y más fácil de leer para el agente. Comparte también tus cifras del mismo marco con ellos. Ver cómo una consulta baja de enorme a moderada es la forma más rápida de convertir los costos de token en un hábito de diseño.
Varios servidores de la comunidad afirman comprimir los datos de Figma en una salida más ligera. Pueden merecer una mirada, pero ejecuta la prueba del mismo marco antes de cambiar, y revisa qué dejan fuera. Una respuesta más pequeña solo es una ventaja si sobreviven los detalles de maquetación que necesitas.
Pasar de un diseño a código implica más que llamadas a Figma. Buena parte del trabajo que lo rodea no necesita ocurrir dentro del contexto de tu agente de programación, y ahí es donde ayudan los modelos de la colección Large Language Models de PicassoIA.
Las imágenes son otro lugar donde ahorrar. Las fotos de cabecera y las imágenes de marcador no tienen por qué pasar por el servidor de Figma. Genéralas a partir de un prompt con Flux 2 Pro, Seedream 4.5 o P-Image, y nada de eso toca el contexto de tu agente de programación. ¿Necesitas movimiento para una landing page? Seedance 2.0 y PicassoIA Video convierten un prompt o una imagen fija en un clip corto.
Tu próxima sesión de diseño a código irá más rápido si las imágenes están listas antes del primer prompt. Abre Picasso IA, escribe una descripción breve de la escena y pásala por Flux 2 Pro y Seedream 4.5 en paralelo. Quédate con la que encaje en tu maquetación y luego anímala con Seedance 2.0 si la página necesita un hero en movimiento.
Prueba unos cuantos prompts hoy y mira cuáles prefieres. Todos los modelos aparecen en picassoia.com/en/all-models, así que puedes probar tantos como quieras.
Elige tu idioma
