Workflow lab: cómo pasar del diseño al código y viceversa con agentes

Te damos la bienvenida a Workflow Lab, donde presentamos un flujo de trabajo de ejemplo con productos y herramientas de Figma.

El equipo de ingeniería de Radicle, una app ficticia de aprendizaje de STEM, avanza más rápido que nunca. El trabajo que antes llevaba semanas ahora lleva días, o incluso horas. Aun así, esta velocidad no los lleva muy lejos: la mayoría de las veces, el código generado por IA se desvía de las especificaciones de diseño. El equipo proporciona a su agente de programación capturas de pantalla y tickets de desarrollo como referencia, pero no es suficiente para obtener los resultados correctos y terminan teniendo que rehacerlos.

¿Y si la primera iteración de la IA estuviera más cerca de estar lista para producción? Si tiene más contexto de diseño con el que trabajar —como componentes y tokens aprobados y documentados en Figma—, un agente de programación puede ajustarse mejor a tu intención con menos indicaciones. En este flujo de trabajo de ejemplo, un desarrollador de Radicle utiliza las herramientas para desarrolladores de Figma para proporcionar más contexto a su agente de programación y así generar mejor código. Sigue el proceso para ver cómo el desarrollador mantiene sincronizados el diseño y el código de una nueva funcionalidad, desde el primer wireframe 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 instructores y a otros estudiantes. Primero, planean agregar un nuevo flujo de actualización masiva, que tendrá tres superficies: una barra de herramientas, un modal y una notificación temporal. La barra de herramientas permitirá al usuario seleccionar todos sus mensajes, eliminarlos o marcarlos como no leídos; el modal le pedirá que confirme o cancele la acción y, por último, la notificación temporal indicará que la acción se realizó correctamente y ofrecerá la opción de deshacerla.

El diseñador del equipo crea cada pantalla en Figma Design y el desarrollador del proyecto proporciona estos diseños a su agente de programación. Reciben el código rápidamente, pero la UI no queda bien. Los íconos no coinciden, el espaciado del modal es irregular y a la notificación temporal le falta el estado de error. El desarrollador podría pasar toda la tarde rehaciéndolo. En cambio, da un paso atrás y vuelve a empezar con las herramientas para desarrolladores de Figma.

Planificación antes de dar indicaciones

Antes de escribir código, el desarrollador define el comportamiento previsto de las pantallas, los estados y las transiciones que conforman el nuevo flujo de actualización masiva. Proporciona este esquema al agente, junto con el PRD y el código de los componentes que conforman actualmente la bandeja de entrada. Con la herramienta generate_diagram y el servidor MCP de Figma, el desarrollador crea en FigJam un diagrama editable que ilustra el flujo entre las tres superficies:

• La opción "Seleccionar todo" de la barra de herramientas selecciona todos los mensajes.
• La opción "Eliminar" abre el modal de confirmación.
• El botón "Deshacer" de la notificación temporal restablece el panel a su estado anterior.

El diagrama proporciona contexto adicional que el agente puede aprovechar y, al mismo tiempo, le da al equipo algo sobre lo que debatir antes de comenzar el desarrollo. El desarrollador comparte el FigJam con su contraparte de diseño y un líder de sistemas de diseño, quienes ambos dejan feedback directamente en el diagrama en lugar de un hilo de Slack.

Proporcionarle al agente un sistema a partir del cual trabajar

Una vez que todos dan su aprobación, el desarrollador proporciona el diagrama de FigJam a su agente de programación a través del servidor MCP de Figma, lo que le da al agente acceso a los componentes, tokens y disposiciones del sistema de diseño de Radicle.

Si el desarrollador solo tuviera una captura de pantalla como referencia, tendría que buscar en la base de código el componente correcto o recurrir al diseñador para aclarar detalles: si ese espacio de 12 px corresponde al token de espaciado correcto, si el botón es el secundario que ya existe en el repositorio o si el modal es un patrón nuevo o algo que el equipo ya publicó. En cambio, todas esas respuestas ya están en el archivo y, a través del servidor MCP de Figma, le proporcionan al agente todo el contexto de diseño que necesita.

Conectar el sistema de diseño con el código

Saber qué componente usar no es lo mismo que saber cómo está implementado. Esa información proviene de Code Connect, que configura el responsable de sistemas de diseño de Radicle. Desde Figma, conecta la biblioteca con el repositorio de GitHub del equipo para que cada componente apunte al archivo que lo implementa. Luego, escriben archivos de plantilla para componentes como botones, íconos y modales en la base de código, asignando propiedades de Figma a propiedades de código.

Ahora, el desarrollador le indica al agente que cree a partir de su selección de Figma, y Code Connect identifica qué componente debe importar. En lugar de gastar tiempo y créditos escribiendo código nuevo, el agente parte del modelo 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 mapear. Antes de crearlo desde cero, el desarrollador le indica al agente que use search_design_system, que busca en las bibliotecas de Figma del equipo un componente de selección existente. El agente identifica uno similar de una funcionalidad que el equipo lanzó hace unos meses. A partir de ahí, encuentra ese componente en la base de código y lo adapta al flujo de actualización masiva. El resultado está alineado con la marca y es coherente con el resto de la app de Radicle, y el agente no necesita inventar un patrón que el equipo ya creó.

Detectar desviaciones antes de que ocurran

El desarrollador continúa programando el modal de confirmación. Pero mientras trabaja en él, el equipo de diseño realiza dos cambios: el modal necesita 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 manualmente, el desarrollador le pide al agente que compruebe si hay desviaciones.

Le indica que use get_variable_defs en el agente de programación, que devuelve las variables utilizadas en el modal, ahora actualizadas con los cambios del diseñador. El agente las compara con los tokens del código, detecta ambas discrepancias de inmediato y actualiza el modal.

El camino hacia producción

El desarrollador ya terminó la barra de herramientas, los estados de selección de mensajes y el modal de confirmación, los tres a partir de componentes que mantiene el equipo. Solo queda la notificación temporal, que se creó durante el desarrollo y, hasta ahora, solo existe en el código. Todavía necesita un estado de error. El desarrollador le indica al agente que use use_figma para colocar la notificación temporal en el lienzo como capas editables, y el diseñador agrega el estado que falta con una acción de "Reintentar". Luego, el responsable de sistemas de diseño publica el nuevo componente y lo vincula con el código mediante Code Connect. La notificación temporal ahora funciona como todo lo demás en la biblioteca de Radicle.

A partir de ahí, el proceso es como el de cualquier otro lanzamiento. El desarrollador abre una solicitud de extracción y la diferencia de código corresponde principalmente a la lógica de la funcionalidad. Los ingenieros revisan el código y el diseñador comprueba una compilación de vista previa.

El servidor MCP de Figma y Code Connect le dan al agente acceso al mismo sistema con el que trabaja todo el equipo, de modo que el equipo puede centrarse en los detalles que dan forma a la experiencia de usuario en lugar de rehacer código generado por IA. Más tiempo para crear significa un mejor trabajo, no solo un trabajo más rápido.

Empieza a darle a tu agente un mejor contexto instalando el servidor MCP de Figma y conectándolo con el agente de programación que prefieras. Configura Code Connect para los componentes que tu equipo reutiliza con más frecuencia.

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