Workflow Lab: cómo pasar del diseño al código con agentes

Bienvenido a Workflow Lab, donde presentamos un ejemplo de flujo de trabajo utilizando productos y herramientas de Figma.

El equipo de ingeniería de Radicle, una aplicación ficticia de aprendizaje de STEM, avanza más rápido que nunca. El trabajo que antes llevaba semanas ahora se hace en días, o incluso en horas. Aun así, esta velocidad no les está llevando muy lejos; su código generado por IA se desvía de las especificaciones de diseño más a menudo de lo que debería. El equipo proporciona a su agente de programación capturas de pantalla y tickets de desarrollo como base de trabajo, pero no es suficiente para que los resultados salgan bien, y el equipo se ve obligado a reelaborarlos.

¿Y si el primer resultado de la IA estuviera más cerca de estar listo para la producción? Si dispone de más contexto de diseño con el que trabajar —como componentes aprobados y tokens documentados en Figma—, un agente de programación puede captar lo que quieres con menos indicaciones. En este ejemplo de flujo de trabajo, un desarrollador de Radicle usa herramientas de desarrollo de Figma para proporcionar un mejor contexto a su agente IA, para que pueda generar un código de mejor calidad. Sigue leyendo para ver cómo el desarrollador mantiene el diseño y el código de una nueva función perfectamente sincronizados, desde la primera retícula hasta la revisión final.

El problema

El equipo de Radicle quiere renovar la bandeja de entrada donde los estudiantes pueden enviar mensajes a los profesores y a sus compañeros. Para empezar, tienen pensado añadir un nuevo flujo de actualización masiva, que contará con tres elementos: una barra de herramientas, una ventana emergente y una notificación temporal. La barra de herramientas permitirá al usuario seleccionar todos sus mensajes, borrarlos o marcarlos como no leídos; la ventana emergente le pedirá que confirme o cancele la acción; y, por último, la notificación temporal mostrará si la acción se ha realizado correctamente, con la opción de deshacerla.

El diseñador del equipo crea cada pantalla en Figma Design, y el desarrollador del proyecto introduce esos diseños en su agente de programación. Reciben el código enseguida, pero la IU no funciona bien. Los iconos no coinciden, el espaciado de la ventana emergente es irregular y a la notificación le falta el estado de error. El desarrollador podría pasarse toda la tarde retocándolo. En cambio, dan un paso atrás y vuelven a empezar con las herramientas de desarrollo de Figma.

Planificar antes de formular indicaciones

Antes de escribir ningún código, el desarrollador describe el comportamiento previsto de las pantallas, los estados y las transiciones que definen el nuevo flujo de actualización masiva. Envía el esquema a su agente, junto con el PRD y el código de los componentes que componen actualmente la bandeja de entrada. Usando la herramienta generate_diagram con el servidor MCP de Figma, el desarrollador crea entonces un diagrama editable en FigJam que ilustra el flujo a través de tres superficies:

• La opción “seleccionar todo” de la barra de herramientas marca todos los mensajes
• La opción “eliminar” abre la ventana emergente de confirmación
• El botón “deshacer“ de la notificación actualiza el panel a su estado anterior

El diagrama proporciona contexto adicional sobre el que el agente puede basarse, al tiempo que ofrece al equipo algo sobre lo que reaccionar antes de que comience el desarrollo. El desarrollador comparte el FigJam con su compañero de diseño y con el responsable de sistemas de diseño, quienes dejan sus comentarios directamente en el diagrama en lugar de en un hilo de Slack.

Proporcionar al agente un sistema sobre el que basarse

Una vez que todo el mundo da el visto bueno, el desarrollador envía el diagrama de FigJam a su agente de programación a través del servidor MCP de Figma, que le da acceso a los componentes, tokens y disposiciones del sistema de diseño de Radicle.

Si el desarrollador solo tuviera una captura de pantalla con la que trabajar, tendría que rebuscar en la base de código para encontrar el componente adecuado o pedirle al diseñador que le aclare detalles: si ese espacio de 12 px es el token de espaciado correcto, si el botón es el secundario que ya está en el repositorio o si la ventana emergente es un patrón nuevo o algo que el equipo ya ha lanzado. Sin embargo, todas esas respuestas están en el archivo a través del servidor MCP de Figma, que proporciona al agente todo el contexto de diseño que necesita.

Cómo conectar el sistema de diseño con el código

Saber qué componente usar no es lo mismo que saber cómo está hecho. Esa parte proviene de Code Connect, que configura el responsable de sistemas de diseño de Radicle. Empezando en Figma, conectan la biblioteca al repositorio de GitHub del equipo para que cada componente apunte al archivo que lo implementa. Después, escriben archivos de plantilla para componentes como botones, iconos y ventanas emergentes en la base de código, asignando las propiedades de Figma a las propiedades del código.

Ahora, el desarrollador da una indicación al agente para que genere el código a partir de su selección en Figma, y Code Connect identifica qué componente hay que importar. En lugar de perder tiempo y créditos escribiendo código nuevo, el agente parte del esquema de implementación que ya existe.

Pero el estado de selección de la actualización masiva es nuevo, así que es la única parte que Code Connect no puede asignar. Antes de crearlo desde cero, el desarrollador da una indicación search_design_system, que busca en las bibliotecas de Figma del equipo un componente de selección ya existente. El agente identifica uno similar de una función que el equipo lanzó hace unos meses. A partir de ahí, el agente encuentra ese componente en el código fuente y lo adapta al flujo de actualización masiva. El resultado se ajusta a la imagen de marca y es coherente con el resto de la app de Radicle, y el agente no tiene que inventarse un patrón que el equipo ya ha creado.

Detectar desviaciones antes de que se produzcan

El desarrollador pasa a programar la ventana emergente de confirmación. Pero mientras trabaja en ello, el equipo de diseño hace dos cambios: la ventana emergente tiene que ser de un color de marca más oscuro y el botón tiene un nuevo radio de esquina. El diseñador publica la actualización en la biblioteca de Radicle y señala los cambios en un ticket. En lugar de hacer los cambios a mano, el desarrollador le pide al agente que compruebe si hay desviaciones.

Formulan la indicación get_variable_defs en el agente de programación, que devuelve las variables utilizadas en la ventana emergente, reflejando ahora los cambios del diseñador. El agente las compara con los tokens del código, detecta las dos discrepancias al instante y actualiza la ventana emergente.

El proceso hasta la producción

El desarrollador ha terminado la barra de herramientas, los estados de selección de mensajes y la ventana emergente de confirmación, todos ellos a partir de componentes que mantiene el equipo. Eso deja la notificación, que se creó durante la compilación y, de momento, solo existe en el código. Aún le falta un estado de error. El desarrollador formula la indicación use_figma para colocar la notificación en el lienzo como capas editables, y el diseñador añade el estado que faltaba con una acción de “reintentar”. A continuación, el responsable de sistemas de diseño publica el nuevo componente y lo vincula al código con Code Connect. Ahora la notificación funciona igual que el resto de la biblioteca de Radicle.

A partir de ahí, parece un lanzamiento como cualquier otro. El desarrollador abre una solicitud de extracción, y la diferencia es principalmente lógica funcional. Los ingenieros revisan el código y el diseñador comprueba una versión preliminar.

El servidor MCP de Figma y Code Connect permiten al agente acceder al mismo sistema en el que trabajan todos, así el equipo puede centrarse en los detalles que dan forma a la experiencia del usuario en lugar de tener que volver a trabajar en el código generado por IA. Dedicar más tiempo a crear significa hacer un mejor trabajo, no solo hacerlo más rápido.

Para proporcionar a tu agente un mejor contexto, instala el servidor MCP de Figma y conéctalo al agente de programación que prefieras. Configura Code Connect para los componentes que tu equipo reutiliza más.

Lee todas nuestras publicaciones de blog en la serie Workflow Lab para explorar otras formas de trabajar en Figma.