Tu design system decide si el código de la AI sirve

El 5 de agosto de 2026 Figma publicó el resultado de correr dos veces las mismas 27 tareas de diseño a código: una con sus componentes de diseño mapeados al código real que los implementa, otra sin ese mapeo. Con el mapeo puesto, los agentes usaron 29,5% menos tokens — las porciones de texto que un modelo lee y por las que factura —, terminaron 19,6% más rápido y produjeron código que un modelo actuando de juez calificó un punto entero más alto en una escala de 1 a 4. La variable bajo prueba nunca fue el modelo. Fue el design system.

Eso cambia para qué sirve un design system. Un design system es el conjunto compartido de componentes y reglas con el que se arma la interfaz de un producto, y hasta ahora se lo juzgaba por si esos componentes eran consistentes, estaban bien nombrados y documentados. Lo que Figma midió es otra propiedad: si cada componente del archivo de diseño tiene una línea de vuelta al componente que lo implementa en el repositorio. Un sistema puede ser impecable en la primera prueba y sacar cero en la segunda.

Qué quiere decir "conectado" acá

Code Connect es una función de Figma que ata un componente del archivo de diseño al componente real de tu código. Sin eso, un agente que le pide una pantalla a Figma recibe una descripción de lo que ve — frames, colores, espaciados — y reconstruye una versión verosímil en React. Con eso, recibe la ruta de importación y los valores de las propiedades del componente que ya existe en tu repositorio: deja de inventar un botón y empieza a importar el tuyo.

Los dos casos pasan por el servidor MCP de Figma. MCP, el Model Context Protocol, es un estándar abierto para conectar aplicaciones de AI con sistemas externos: una forma de que un agente saque datos estructurados de una herramienta en vez de deducirlos de una captura de pantalla. La implementación de Figma puede traer "variables, componentes y datos de layout directamente al IDE". Ya escribimos sobre este mismo caño en la dirección contraria, con código capturado de vuelta al canvas de Figma. Este es el viaje de regreso, y es el que ahora tiene números.

El número para planificar no es 29,5%

Figma probó dos design systems en React: su sistema de ejemplo público y Figma Pattern Library, uno interno más grande que describe como "un design system realista, con cobertura de Code Connect más despareja". En el primero, los snippets de Code Connect eran cerca del 20% de lo que devolvía el servidor MCP. En el segundo, alrededor del 6%.

Y después la frase que sostiene todo el estudio: "el factor que más movió los números fue la cobertura de Code Connect".

Leídas juntas, las dos cosas le cambian el sentido al titular. Cobertura acá no es qué porcentaje de tus componentes está mapeado: es qué porcentaje de lo que el servidor MCP le entrega al agente vuelve como código real. Medidos así, los dos sistemas probados estaban en 20% y 6%. El ahorro de 29,5% en tokens es entonces una mediana sobre sistemas donde cuatro quintos o más de cada respuesta seguían siendo el agente adivinando. Nuestra lectura es que describe un piso y no un techo. Qué hace un sistema conectado a fondo no se sabe, porque Figma no probó ninguno: el más conectado del estudio era la vidriera de la propia Figma, con un snippet de cada cinco.

La prueba de madurez se corrió de lugar

Para quien contrata o dirige trabajo de producto, esto parte en dos una línea de presupuesto que antes era una sola. Documentar un componente y conectarlo pasaron a ser tareas distintas, con costos distintos y beneficios distintos, y sólo la segunda aparece en lo que devuelve un agente. Una auditoría de design system que informa consistencia de componentes y cobertura de design tokens está contestando la pregunta del año pasado.

La pregunta nueva es más seca: cuando un agente pide esta pantalla, ¿recibe nuestros componentes o una aproximación? Ese número existe y se mide exactamente como lo midió Figma. Nuestra posición es que tiene que entrar en toda auditoría de design system de acá en adelante.

Lo que cuesta antes de rendir

Code Connect no es gratis en ninguno de los dos sentidos. La documentación de Figma dice que está "disponible con un asiento Dev o Full en los planes Organization y Enterprise", lo que lo deja afuera del alcance de equipos chicos en planes menores. El trabajo además es por componente: instalar el CLI @figma/code-connect, generar un token de acceso, agregar un archivo de configuración, escribir una plantilla que mapee las propiedades de cada componente a su código, y publicar. La propia guía de inicio de Figma aclara que un agente puede escribir esas plantillas por vos, que es una buena señal de lo tedioso que resulta hacerlo a mano.

Si la palanca es la cobertura, la amplitud es el instinto equivocado. Diez componentes que aparecen en todas las pantallas — botón, input, select, card, modal, fila de tabla — van a caer en muchas más respuestas del MCP que sesenta documentados y poco usados. Conectá esos diez primero. La completitud es la métrica que da sensación de prolijidad; la frecuencia es la que mueve el número.

El reparo, dicho

Figma midió una función propia y publicó un resultado favorable, y eso conviene tenerlo presente. A su favor: describe la metodología, nombra la rúbrica de evaluación, y la advertencia de que las medianas esconden variación caso por caso es una frase de Figma, no nuestra. Preferimos eso antes que un número más redondo sin método adjunto.

Lo que zanjaría la discusión es que alguien de afuera de Figma corra las mismas tareas contra un sistema con 60% de cobertura. Hasta que eso exista, la pregunta abierta no es si conectar componentes sirve. Es si la curva sigue subiendo más allá de la cobertura que todavía nadie alcanzó, o se aplana justo un poco más arriba.

Fuentes

• Better Code, Fewer Tokens: The Benefits of Code Connect in MCP — Tom Weightman, Figma, 5 de agosto de 2026.
• Code Connect — documentación para desarrolladores de Figma.
• Guía de inicio de Code Connect — documentación para desarrolladores de Figma.
• Servidor MCP de Figma — documentación para desarrolladores de Figma.
• Qué es el Model Context Protocol — documentación oficial de MCP.