“Figma es la foto, pero el prototipo es una película. Y es mejor mostrarle la película al cliente.”
Me lo dijo Hermes Gonzalez, diseñador UX/UI y amigo, en una charla sobre cómo usa la AI en su trabajo. Y me cambió la forma de ver cómo diseñamos en nuestro equipo.
Porque nosotros veníamos mostrando fotos.
El problema: feedback sobre imágenes
El diseñador armaba cada pantalla en Figma, componente por componente. La AI se usaba, sí, pero como inspiración, cada uno a su manera. Nada estandarizado.
Tardábamos una semana en mostrarle un flujo al cliente. Y el cliente daba feedback sobre imágenes. Le explicás, asiente, pero no termina de entender porque no puede tocar nada. El feedback llega tarde y a medias.
Y algo más: cuando revisamos dónde se nos iba el tiempo, no era en diseñar. Era en descubrir qué quería el cliente.
Lo que aprendí de Hermes
Además del ejemplo de la foto y la película, Hermes me dejó dos ideas más.
Contexto, contexto, contexto. No le pide nada a la AI sin antes darle mucho contexto. De la empresa, de su metodología de trabajo y del cliente. Cuanto más contexto, más personalizado y original el resultado. Si no, te sale el típico diseño genérico de AI que se ve igual en todos lados.
El prototipo como excusa de conversación. Hermes dejó de hacer maquetas y pasó a hacer prototipos. Lo que antes le llevaba 3 o 4 días, todas las pantallas para poder pedir feedback, hoy le puede llevar 3 o 4 horas. Y no le importa tanto que el prototipo se vea lindo. Lo que importa es que el cliente lo pueda tocar y que la conversación avance rápido.
Cómo pasamos de la foto a la película: nuestro Design Sprint
Con eso en la cabeza, rediseñamos el proceso. Así quedó:
1. Briefing y descubrimiento
El PM le pasa al diseñador todo lo que sabe del cliente. Minuta, grabación, contexto. Si el diseñador no escucha al cliente directo, arrancamos mal.
2. Brainstorm con AI
El diseñador le da a la AI el brief, el manual de marca y algunas reglas técnicas, como el framework que vamos a usar. Sale una maqueta lo-fi que sirve solo como inspiración. Mucho contexto desde el principio.
3. Diseño de UI (la foto)
Acá el diseñador pone su mano. Solo las primeras pantallas, máximo un día. Validamos colores, componentes y estilo visual. Nada de proceso ni UX todavía.
Loop interno: diseñar, feedback del equipo, ajustar. Hasta que esté aprobado. El cliente todavía no ve esto.
4. Prototipo de proceso (la película)
Ahora sí, la AI hace el trabajo pesado. Le damos el diseño aprobado más todo el detalle: procesos, campos, tipos de usuario, modelo de datos. Genera 30 o 40 pantallas navegables en minutos.
Es HTML con navegación e interacciones. Sin base de datos, sin lógica de negocio, sin usuarios. Solo el flujo y la parte visual.
Esto es lo que ve el cliente. Lo toca, lo prueba, opina. Le decimos: “esto es 80% fiel en lo visual, ahora validamos el proceso, lo lindo viene después”.
Loop con el cliente cada 3 días, hasta tener el proceso validado al 90%.
5. Alta fidelidad
Con el proceso cerrado, volvemos a Figma. La AI pasa el prototipo a Figma y el diseñador pule el 20% que falta: detalles, íconos, jerarquía. Otro loop con el cliente hasta cerrar el diseño.
6. Handoff
La AI regenera el prototipo final desde el Figma. Desarrollo recibe tres cosas:
- El prototipo, para entender el flujo.
- El Figma, para el detalle visual.
- Los requerimientos escritos del PM.
Por qué funciona
La idea de fondo es AI + HI. Cada fase dice qué hace la máquina y qué hace la persona.
El diseñador pone la calidad en pocas pantallas. La AI pone el volumen. Hacer 40 pantallas a mano cuesta días. La AI las hace en minutos. Entonces el diseñador puede esforzarse bien en una o dos, y dejar lo pesado a la máquina.
Para mí, lo más importante no es la velocidad. Es que más iteraciones dan más calidad. Y que el cliente entiende lo que estamos construyendo antes de escribir una línea de código.
Las metas que nos pusimos:
- Feedback con el cliente cada 3 días, no cada semana.
- Pasar de 1 flujo por semana a 5, con el mismo equipo.
Lo que todavía no sabemos
No todo está resuelto. Estos son los riesgos que vemos:
- Pasar un prototipo HTML a Figma con AI todavía es inestable. A veces sale cualquier cosa. Si pasa, el diseñador rehace en Figma usando el prototipo como guía.
- Los dashboards le cuestan a la AI. Ahí hay que planificar más trabajo manual.
- El cliente puede decir “le falta diseño”. Por eso el diagrama del proceso se lo mostramos desde el día uno, para que sepa qué está viendo en cada etapa.
- Las webs de marketing son otra cosa. Tienen menos pantallas y buscan más originalidad. Ahí la AI ayuda en el mockup, no tanto en el diseño final. Estamos viendo cómo adaptar el proceso.
Ahora estamos probando todo esto en un proyecto real. Les cuento cómo nos va.
Gracias, Hermes, por la charla y por el ejemplo.
¿Y ustedes? ¿Le siguen mostrando fotos al cliente, o ya le muestran la película?