4 nuevas formas de pasar de la idea al producto con herramientas de IA

Los equipos de producto se están adaptando rápidamente a la nueva forma de trabajar en la era de la IA. Están creando prototipos desde las primeras etapas

, probando en el código antes de diseñar, explorando a una escala sin precedentes y lanzando productos con el contexto del sistema de diseño, que antes solía perderse durante la entrega a desarrollo. Hablamos con equipos de producto de FloQast, Merkle, Affirm y Accor sobre cómo se está materializando este cambio en la práctica.

1. Poner a prueba las restricciones en el código

Probar una idea frente a restricciones complejas —como flujos de varios pasos en los que una acción desencadena la siguiente o interfaces que se comportan de forma diferente según los datos que tienen detrás— solía requerir una importante inversión de desarrollo. Hoy, las herramientas de programación con IA han hecho posible que más personas dentro de un equipo de producto puedan crear y probar rápidamente este tipo de interacciones antes de decidirse por una dirección. Eso ha dado lugar a un nuevo flujo de trabajo. Un creador de productos puede crear un prototipo funcional programado, luego moverlo al lienzo de Figma usando Codex to Figma

para ver el panorama completo y refinarlo juntos. Desde ahí, si se necesita más trabajo programando, pueden regresar mediante MCP con el contexto del diseño intacto.

Cómo FloQast puso a prueba un flujo de trabajo complejo en el código

FloQast desarrolla software que ayuda a los equipos de contabilidad a gestionar la complejidad del mundo real: tareas que no pueden avanzar hasta que se completen otras, registros que deben coincidir entre sistemas como un procesador de pagos y una cuenta bancaria, y aprobaciones que quedan pendientes hasta que todo lo demás haya sido revisado.

El desafío

Recientemente, el equipo tuvo que replantear uno de sus flujos de trabajo habituales, en el que los usuarios debían pasar de una página a otra solo para encontrar una discrepancia. Por ejemplo, un contador que detectaba un problema en una cuenta podía tener que ir a una página para ver el problema, navegar a otra para investigarlo y luego volver a la primera para resolverlo. El equipo quería consolidar todo eso en una sola página donde los usuarios pudieran ver sus tareas, rastrear lo que estaba bloqueado, y actuar sobre todo sin salir de la pantalla.

Un prototipo inicial había mostrado potencial, pero la página tenía demasiados pasos interconectados —cada uno dependiente de datos y lógica reales— como para que el equipo pudiera evaluarla únicamente a partir de una maqueta.

El punto de inflexión

Benjamin Ellis, gerente de UX de FloQast, creó un prototipo funcional en una herramienta de programación con IA, con un backend simulado y datos realistas basados en los flujos de trabajo de un cliente real. El prototipo respaldado por código permitió al equipo recorrer escenarios reales en los que completar un paso disparaba el siguiente y comprobar si toda la página realmente funcionaba como un conjunto. Detectaron de inmediato flujos que parecían correctos a simple vista, pero que se desmoronaban en la práctica: el tipo de problemas que solo aparecen cuando se trabaja con datos y lógica reales.

El impacto

Cuando el equipo de Benjamin y el diseñador se decidieron por una dirección, ya la habían puesto a prueba en el código con escenarios reales y habían detectado problemas de interacción que un archivo de diseño por sí solo no habría revelado. Eso se tradujo en menos sorpresas más adelante y una mayor confianza en lo que estaban construyendo.

Prueba esto cuando:

• La UI se comporta de manera diferente según condiciones que no puedes evaluar en una maqueta, como permisos de usuario o flujos de varios pasos en los que una acción afecta a la siguiente.
• Necesitas hacer una corrección menor y resulta más rápido modificarla directamente en el código que ir y venir entre diseño y desarrollo.
• Un diseñador y un desarrollador necesitan definir juntos una experiencia compleja, y contar con algo funcional facilita esa conversación.

2. Explorar con IA en el lienzo

Los equipos siempre han explorado en el lienzo, pero la IA ha cambiado hasta dónde puede llegar esa exploración. Con el agente de IA de Figma

, un diseñador puede generar variantes de disposición, redactar contenido realista e identificar aspectos faltantes en su trabajo sin salir del archivo, todo ello basado en su sistema de diseño. Cuando el equipo está listo para avanzar con una dirección, puede usar Figma Make

7 tips for using Figma Make credits more efficiently

While everyone’s talking about “tokenmaxxing,” we’ve compiled seven best practices to help you build smarter—without prompting more—in Figma Make.

para convertirla en un prototipo interactivo y MCP para llevar el contexto del diseño al código de producción.

Cómo Merkle exploró muchas opciones antes de profundizar

Easton Thomas, director creativo asociado de UX en Merkle, estaba replanteando la forma en que su cliente del sector de las telecomunicaciones organizaba y mostraba sus productos en el sitio web: un desafío de arquitectura de la información que requería explorar muchos enfoques diferentes antes de encontrar el adecuado.

El desafío

La tarea requería una exploración exhaustiva. Easton necesitaba probar muchos diseños y enfoques de contenido distintos antes de sentirse seguro de una dirección y, dado el contenido limitado del sitio existente, no podía evaluar fácilmente si alguno de ellos funcionaría con productos reales en la página.

El punto de inflexión

Easton comenzó en el lienzo, creando siete direcciones de disposición preliminares para explorar distintos enfoques. Luego le pidió al agente de IA de Figma que generara 10 variantes de una de sus disposiciones, luego 10 más, hasta llegar a unas 50. Para entonces, el agente ya había agotado todas las combinaciones posibles, y Easton pudo tomar las ideas más sólidas y seguir diseñando a partir de ellas.

Una vez que encontró una dirección, siguió utilizando el agente de Figma para perfeccionar los detalles. Lo utilizó para:

• Generar contenido marcador de posición para que la página no resultara abstracta para las partes interesadas.
• Escribir anotaciones de especificación para desarrolladores directamente en las tarjetas de anotación.
• Revisar el trabajo terminado e identificar aspectos faltantes, como consideraciones de accesibilidad para lectores de pantalla que podrían haberse pasado por alto.

A partir de ahí, pasó a Figma Make para crear un prototipo de la página de búsqueda con interacciones reales, generando todos los estados necesarios para elementos como los menús de filtrado y así ver cómo se comportaba realmente la página. Volvió a insertar esas pantallas en el lienzo para la entrega al desarrollador.

El impacto

El trabajo de producción que habría llevado días se redujo a unas pocas horas. Pero el verdadero beneficio fue la profundidad de exploración que hizo posible el agente de IA de Figma. En lugar de quedarse con uno de siete diseños y esperar que fuera el correcto, Easton pudo agotar todo el espacio de posibilidades —50 variantes— antes de tomar una decisión. Cuando el trabajo llegó a los desarrolladores, ya había pasado por más rondas de exploración y había detectado aspectos faltantes que, de otro modo, quizá no habría tenido tiempo de buscar, lo que le permitió avanzar con una dirección con mayor confianza.

Prueba esto cuando:

• Estás creando una nueva experiencia y necesitas explorar muchas direcciones antes de decidirte por una.
• Necesitas generar y probar rápidamente múltiples estados y casos límite para un flujo complejo.
• Quieres definir interacciones detalladas basadas en tu sistema de diseño antes de entregarlas a desarrollo.

3. Comenzar con un prototipo

Herramientas como Figma Make permiten a los equipos crear un prototipo funcional en cuestión de horas, incluso antes de redactar un solo requisito. En lugar de comenzar con una especificación y esperar que las partes interesadas puedan imaginar la visión, los equipos crean primero algo real y dejan que eso dé forma a lo que viene después. A partir de ahí, pueden llevar el prototipo al lienzo para perfeccionarlo, convertirlo en una presentación para la revisión de las partes interesadas o trasladarlo al código mediante MCP.

Cómo Accor utilizó Figma Make para generar confianza en una nueva visión

Accor es un grupo hotelero global con decenas de marcas. Recientemente, el equipo de diseño de Accor estaba explorando cómo la IA podía mejorar la experiencia web de una de sus marcas de lujo.

El desafío

El desafío consistía en determinar cómo debía ser realmente esa experiencia basada en IA. Un enfoque genérico —como añadir un chatbot al sitio— no reflejaría la identidad de la marca ni cumpliría las expectativas de sus huéspedes. Justine Grave, diseñadora principal de marca en Accor, necesitaba crear algo que capturara el tono emocional y la personalidad que hacen reconocible a la marca.

El momento clave

Justine abrió Figma Make y creó un prototipo de algo que no habría tenido tiempo de desarrollar manualmente: una página web que se reorganiza según lo que escribe el usuario. Busca "golf" y la página se reconfigura en torno a propiedades con campos de golf, actividades seleccionadas y experiencias relevantes. Make se encargó de las microinteracciones y las transiciones, mientras que el servidor MCP de Figma mantuvo todo conectado con el sistema de diseño de la marca. En cuestión de días, contaba con un prototipo funcional lo suficientemente ambicioso como para mostrarle al liderazgo lo que era posible y lo bastante concreto como para iniciar una conversación real sobre qué desarrollar a continuación.

El impacto

Justine y su equipo ahora están llevando el prototipo a las partes interesadas de marca y marketing, ofreciéndoles algo concreto ante lo que reaccionar y en torno a lo cual alinearse, en lugar de una presentación de diapositivas.

Prueba esto cuando:

• Necesitas alinear a las partes interesadas en torno a una visión que aún no existe.
• La idea es demasiado compleja para comunicarla mediante un documento o una presentación de diapositivas.
• Quieres comprobar si una idea tiene potencial antes de invertir tiempo de diseño y desarrollo.

4. Reforzar tu sistema de diseño

Cuando el trabajo se traslada del diseño a programar, es importante que la implementación se extraiga de tu verdadero sistema de diseño

en lugar de patrones genéricos. Eso solía ser un proceso manual, con desarrolladores que referenciaban especificaciones y reconstruían componentes a mano. Ahora, los equipos pueden usar MCP

5 shifts redefining design systems in the AI era

As AI reshapes how we make products, design systems are evolving from libraries of reusable parts into living frameworks that scale taste and craft. We spoke with product leaders and practitioners about the shifts they’re seeing in how design systems are built, used, and maintained.

para pasar sus componentes, tokens y disposición directamente al entorno de codificación, por lo que las herramientas de codificación de IA generan desde el sistema real desde el inicio.

Cómo Affirm preservó el contexto de diseño del lienzo al código

Affirm desarrolla productos financieros que permiten a los clientes dividir sus compras en planes de pago al momento de pagar. La experiencia de compra abarca escritorio, web móvil, Android e iOS, y mantener la coherencia entre todas esas experiencias representa un desafío constante.

El desafío

El equipo quería añadir insignias a sus planes de pago para ayudar a los clientes a encontrar la opción adecuada más rápidamente, por ejemplo, indicando qué plan ofrece un 0 % de interés o cuál se terminará de pagar antes. Pero había muchas combinaciones que considerar: qué insignia mostrar a qué cliente, en qué proceso de compra y en qué dispositivo. Cada variante debía mantenerse fiel al sistema de diseño en todas esas superficies, e incluso un cambio sencillo solía tardar unas seis semanas en pasar de la idea a producción.

El punto de inflexión

Un gerente de producto creó prototipos de las variantes de las insignias en Figma Make, pasando de la idea a un prototipo funcional en dos días en lugar de las seis semanas habituales. Los diseñadores perfeccionaron la dirección elegida en el lienzo y, cuando el equipo estuvo listo para llevar ese diseño a producción, cargaron los recursos de diseño en el servidor MCP de Figma y lo conectaron a Cursor. MCP transfirió los componentes, los tokens y la disposición del diseño directamente al entorno de programación, donde un agente de IA generó la implementación del front-end. Los desarrolladores utilizaron eso como punto de partida y crearon código de producción que ya reflejaba los diseños, en lugar de reinterpretarlos desde cero.

El impacto

Solo la etapa de creación de prototipos pasó de seis semanas a un par de días. Pero, más importante aún, como MCP mantuvo el contexto de diseño a lo largo de todo el proceso, los desarrolladores no tuvieron que reinterpretar los diseños ni reconstruir los componentes desde cero. El resultado final coincidía con la intención de los diseñadores.

Prueba esto cuando:

• Estás llevando un diseño a producción y quieres que la implementación se mantenga fiel a tu sistema de diseño.
• Necesitas mantener varias superficies o plataformas coherentes con el mismo diseño.
• Tu equipo de sistemas de diseño está implementando cambios y quiere que esas actualizaciones se propaguen automáticamente a los entornos de programación de todos los desarrolladores para que el nuevo código refleje el sistema actual desde el principio.

Los equipos que hoy crean excelentes productos no están atados a una sola herramienta ni a una única secuencia de trabajo: eligen dónde empezar según la pregunta que necesitan responder y se mueven entre distintas superficies a medida que el trabajo evoluciona. Descubre más sobre los nuevos flujos de trabajo que están dando forma a los productos en la era de la IA.