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 el principio

, probando el código antes de diseñar, explorando a una escala sin precedentes y enviando con el contexto del sistema de diseño, algo que antes se perdía en el traspaso de tareas. Hablamos con creadores de producto de FloQast, Merkle, Affirm y Accor sobre cómo se lleva a la práctica todo esto.

1. Probar las limitaciones en el código

Probar una idea con limitaciones 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 hay detrás— solía requerir una inversión importante por parte de los desarrolladores. Hoy en día, las herramientas de programación basadas en IA han hecho posible que más personas del equipo de producto puedan crear y probar rápidamente este tipo de interacciones antes de compromoterse con una dirección concreta. Esto ha dado lugar a un nuevo flujo de trabajo. Un creador de productos puede crear un prototipo funcional en código y, a continuación, pasarlo al lienzo de Figma usando Codex to Figma

para obtener una visión completa y perfeccionarlo entre todos. A partir de ahí, si hay que seguir trabajando en el código, pueden volver atrás a través de MCP sin perder el contexto del diseño.

Cómo FloQast probó 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 otras hayan terminado, registros que deben coincidir entre distintos sistemas —como un procesador de pagos y una cuenta bancaria— y autorizaciones que quedan pendientes hasta que se haya revisado todo lo demás.

El reto

Hace poco, el equipo tuvo que replantearse uno de sus flujos de trabajo habituales, en el que los usuarios tenían que ir saltando de una página a otra solo para localizar una única discrepancia. Por ejemplo, un contable que detectara un problema en una cuenta probablemente tendría que ir a una página para ver el problema, pasar a otra página para investigarlo y luego volver a la primera para resolverlo. El equipo quería que todo eso se pudiera hacer en una sola página, donde los usuarios pudieran ver sus tareas, saber qué estaba bloqueado y actuar sin tener que salir de la pantalla.

Un prototipo inicial parecía prometedor, pero la página tenía demasiados pasos interconectados —cada uno dependiente de datos reales y lógica— como para que el equipo pudiera llevar a cabo una evaluación solo a partir de una maqueta.

La solución

Benjamin Ellis, gerente de UX en FloQast, creó un prototipo funcional en una herramienta de programación de IA con un backend simulado y datos realistas basados en los flujos de trabajo de un cliente real. El prototipo basado en código permitió al equipo recorrer escenarios reales en los que completar un paso desencadenaba el siguiente, y comprobar si toda la página funcionaba en conjunto. Enseguida detectaron flujos que, a simple vista, parecían correctos, pero que fallaban en la práctica: el tipo de problemas que solo salen a la luz cuando trabajas con datos y lógica reales.

El impacto

Para cuando el equipo de Benjamin y el diseñador se decidieron por una dirección, ya la habían puesto a prueba en código en situaciones reales y habían detectado el tipo de problemas de interacción que no habrían salido a la luz solo con el archivo de diseño. Eso significaba menos sorpresas más adelante y más confianza en el producto que estaban creando.

Prueba esto cuando:

• La IU se comporte de forma diferente según condiciones que no puedas evaluar en una maqueta, como los permisos de usuario o los flujos de varios pasos en los que una acción afecta a la siguiente
• Tengas que hacer un pequeño arreglo y sea más rápido cambiarlo directamente en el código que pasar por todo el proceso de diseño
• Un diseñador y un desarrollador tengan que definir juntos el alcance de una experiencia compleja, y tener algo que funcione 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 variaciones de disposición, escribir contenido realista y señalar brechas en su trabajo sin salir del archivo, todo ello basándose en su sistema de diseño. Cuando el equipo está listo para avanzar una dirección, pueden 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 trasladar el contexto del diseño al código para su producción.

Cómo Merkle amplió su alcance antes de profundizar

Easton Thomas, director creativo adjunto de UX en Merkle, se puso a replantearse cómo su cliente del sector de las telecomunicaciones organizaba y presentaba sus productos en su página web: un reto de arquitectura de la información que exigió explorar muchos enfoques diferentes antes de dar con el adecuado.

El reto

El trabajo requería una exploración exhaustiva. Easton necesitaba probar muchas disposiciones y enfoques de contenido diferentes antes de estar seguro de la dirección a seguir, y como el contenido de la web existente era limitado, no le resultaba fácil evaluar si alguna de esas opciones funcionaría con productos reales en la página.

La solución

Easton empezó en el lienzo, esbozando siete ideas de disposición generales para explorar diferentes enfoques. A continuación, pidió al agente de IA de Figma que generara 10 variaciones de una de sus disposiciones, después otras 10 más, hasta llegar a unas 50. Llegados a ese punto, el agente había agotado todas las combinaciones posibles, y Easton pudo seleccionar las ideas más prometedoras y seguir diseñando a partir de ahí.

Una vez que tuvo una dirección clara, siguió usando el agente de Figma para pulir los detalles. Lo utilizó para:

• Generar contenido de marcador realista para que la página no resultara demasiado abstracta a los interesados
• Escribir anotaciones con especificaciones para los desarrolladores directamente en sus tarjetas de anotación
• Revisar el trabajo terminado y señalar las carencias, como aspectos de accesibilidad para lectores de pantalla que se le pudieran haber 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 diferentes estados de elementos como los menús de filtrado para poder ver cómo se comportaba realmente la página. Volvió a importar esas pantallas al lienzo para entregárselas a los desarrolladores.

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 el agente de IA de Figma hizo posible. En lugar de comprometerse con una de las siete disposiciones y esperar que fuera la correcta, Easton pudo agotar todas las opciones posibles —50 variaciones— antes de tomar una decisión. Para cuando el trabajo llegó a manos de los desarrolladores, ya lo había sometido a más rondas de exploración y había detectado carencias que, de otro modo, quizá no habría tenido tiempo de buscar, lo que le permitió comprometerse con una dirección con más confianza.

Prueba esto cuando:

• Estás creando una nueva interfaz y necesitas explorar muchas direcciones antes de decidirte
• Necesitas generar y probar rápidamente múltiples estados y casos extremos para un flujo complejo
• Quieres definir interacciones detalladas basadas en tu sistema de diseño antes de entregárselas a los desarrolladores

3. Empezar con un prototipo

Herramientas como Figma Make permiten a los equipos crear un prototipo funcional en cuestión de horas, antes incluso de que nadie haya redactado ni un solo requisito. En lugar de empezar con unas especificaciones y esperar que las partes interesadas puedan hacerse una idea del proyecto, los equipos empiezan creando algo real y dejan que eso determine los siguientes pasos. A partir de ahí, pueden trasladar el prototipo al lienzo para perfeccionarlo, convertirlo en una presentación para que lo revisen las partes interesadas o transformarlo en código a través de MCP.

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

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

El reto

El reto era averiguar cómo debería ser realmente esa experiencia con IA. Un enfoque genérico —como limitarse a añadir un chatbot a la web— no reflejaría la identidad de la marca ni cumpliría con las expectativas de sus huéspedes. Justine Grave, diseñadora principal de marca en Accor, necesitaba crear algo que captara el tono emocional y la personalidad que hacen que la marca sea reconocible.

El momento clave

Justine abrió Figma Make y creó un prototipo de algo que no habría tenido tiempo de hacer a mano: una página web que se reorganiza según lo que escriban los usuarios. Si buscas “golf”, la página se adapta para mostrar alojamientos con campos de golf, salidas seleccionadas y experiencias relacionadas. Make se encargó de las microinteracciones y las transiciones, y el servidor MCP de Figma se ocupó de que todo estuviera alineado con el sistema de diseño de la marca. En cuestión de días, tenía un prototipo funcional lo suficientemente ambicioso como para mostrar a la dirección las posibilidades que ofrecía, y lo suficientemente concreto como para iniciar una conversación real sobre qué crear a continuación.

El impacto

Justine y su equipo están presentando ahora el prototipo a las partes interesadas de marca y marketing, ofreciéndoles algo concreto con lo que puedan interactuar y ponerse de acuerdo, en lugar de una presentación de diapositivas.

Prueba esto cuando:

• Necesitas que las partes interesadas se pongan de acuerdo en torno a una visión que aún no existe
• La idea es demasiado compleja para comunicarla a través de un documento o una presentación de diapositivas
• Quieres comprobar si una idea tiene futuro antes de invertir tiempo en diseño e ingeniería

4. Apostar fuerte por tu sistema de diseño

Cuando el trabajo pasa del diseño al código, es importante que la implementación se base en tu sistema de diseño real

, en lugar de en patrones genéricos. Antes, esto era un proceso manual: los desarrolladores consultaban las especificaciones y recreaban los componentes a mano. Ahora, los equipos pueden usar MCP

5 cambios que redefinen los sistemas de diseño en la era de la IA

A medida que la IA transforma la forma en que fabricamos productos, los sistemas de diseño están evolucionando desde bibliotecas de piezas reutilizables hasta marcos vivos que escalan el gusto y el oficio. Hablamos con líderes de producto y profesionales sobre los cambios que están observando respecto a cómo se crean, utilizan y mantienen los sistemas de diseño.

para pasar sus componentes, tokens y estructura de disposición reales directamente al entorno de programación, de modo que las herramientas de programación con IA generen el código a partir del sistema real desde el principio.

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

Affirm crea productos financieros que permiten a los clientes dividir sus compras en planes de pago al finalizar la compra. La experiencia de pago está disponible en escritorio, web móvil, Android e iOS, y mantener la coherencia entre todas estas experiencias es un reto constante.

El reto

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ápido, como indicar qué plan tiene un 0 % de interés o cuál se liquidaría antes. Pero había un montón de combinaciones que gestionar: qué insignia mostrar a cada cliente, en qué proceso de pago y en qué dispositivo. Cada variación tenía que ser fiel al sistema de diseño en todas esas interfaces, y antes tardábamos unas seis semanas en llevar incluso un cambio sencillo desde la idea hasta la producción.

La solución

Un gerente de producto creó prototipos de las diferentes variaciones de la insignia en Figma Make: pasó de la idea al prototipo funcional en dos días, en lugar de las seis semanas habituales. Los diseñadores perfeccionaron la propuesta ganadora en el lienzo y, cuando el equipo estuvo listo para llevar ese diseño a producción, subieron los archivos de diseño al servidor MCP de Figma y lo conectaron a Cursor. MCP pasó los componentes, los tokens y la estructura de la disposición directamente al entorno de programación, donde un agente de IA generó la implementación del front-end. Los desarrolladores lo usaron como punto de partida para crear el código de producción, que ya reflejaba los diseños en lugar de tener que reinterpretarlos desde cero.

El impacto

La creación de prototipos se redujo de seis semanas a un par de días. Pero lo más importante es que, como MCP mantuvo el contexto del diseño durante todo el proceso, los desarrolladores no tuvieron que reinterpretar los diseños ni volver a crear los componentes desde cero. Lo que se envió coincidía con la intención de los diseñadores.

Prueba esto cuando:

• Estás pasando un diseño a la fase de producción y quieres que la implementación se mantenga fiel a tu sistema de diseño
• Necesitas mantener la coherencia entre varias interfaces o plataformas con el mismo diseño
• Tu equipo de sistemas de diseño está implementando cambios y quiere que esas actualizaciones se reflejen automáticamente en el entorno de programación de cada ingeniero, para que el nuevo código refleje el sistema actual desde el principio

Los equipos que hoy en día lanzan productos fantásticos no se limitan a una sola herramienta o a un único proceso: eligen por dónde empezar en función de la pregunta que tienen que resolver y van cambiando de plataforma a medida que avanza el trabajo. Más información sobre los nuevos flujos de trabajo que dan forma a los productos en la era de la IA.