Hace poco vimos que GPT4 ahora será capaz de entender imágenes y transformarlas en código. Un sueño esperado por muchos (me incluyo) pero… ¿qué podemos hacer mientras este sueño de hace realidad? Existe una alternativa, que hasta tiene cosas mejores 🤫
Se llama uizard.io y te permite pasar de un wireframe a una interfaz funcional, entre otras cosas que te comparto en esta lista:
Si ya tienes un diseño creado en Figma, Sketch o en cualquier otra aplicación, te permite importarlo y tener todos los componentes editables y vincularlo con otros.
Te permite elegir entre miles de templates ya prediseñados para web, tablet hasta mobile y poder hacer workflow entre screens para poder crear tu MVP.
Y lo que veremos hoy es pasar de un diseño creado a mano alzada a una interfaz lista para ser programada y ejecutada en tu próximo proyecto.
¡Vamos a lo que vinimos!
Entras a la página principal uizard.io y te registras hasta que llegues a la página de proyectos:
Creas uno nuevo proyecto. Puedes elegir entre miles de templates pero hoy vamos a dibujar nosotros. Así que eliges start from scratch:
En este caso, queremos hacer una aplicación móvil así que elegimos la opción mobile hasta llegar hasta esta página:
Ahora, viene el momento clave. La hora del dibujo 🎨 ¡no juzgues mi calidad! lo importante es la intención 🤣 Selecciona scan wireframe sketch porque luego tendrás que subir tu obra de arte:
Llegarás hasta esta pantalla. Tendrás 2 opciones: a) sube alguna imagen que ya tengas guardada en tu compu b) escanea el QR desde tu celular para tomar la foto de tu maqueta:
Después del procesar la imagen, deberás llegar a una pantalla como esta. Selecciona el tipo de dispositivo (en este caso mobile) y luego le das a Import.
Y ahora viene el momento de la magia… 🪄 la AI va a procesar la imagen y te arrojará algo como esto. *No siempre da el mismo resultado, así que serán necesarios algunos retoques leves (le agregué una imagen y le cambié los colores a los bloques originales)
Hasta aquí uizard.io es tremenda herramienta que agiliza un proceso que muchas veces toma varios días de trabajo para algunos equipos 💪
¡Hay más! ¿y si te dijera que es capaz de estimar qué elementos tendrán más clicks o también conocidos como heatmaps para analizar el comportamiento de los usuarios? Pues, selecciona todo el wireframe y selecciona la opción Attention Heatmap:
Y waaaaaaa! 🤯🤯🤯
Necesito poner este gif en este momento…
Y bueno, ¿qué hacer ahora con esto?
Exportar el archivo e incluirlo en tu presentación de proyecto.
Enviarlo a otra plataforma como Figma y luego pasarlo a código con Quest.ai o Teleporthq.io
Crear varios wireframes, unirlos entre si con uizard.io para crear un MVP (y bueno, puede ser tu próxima startup)
Analizar diseños que ya tienes para proyectar la interacción de los usuarios.
Crear diseños con AI para a nivel de imagen y textos, optimizando el proceso de diseño de tu proyecto. Además, están por liberar la opción de “Autodesigner” que te permitá crear diseños con tan solo un prompt para luego editarlos 🤯 Es cierto que ya hay algunas plataformas que te permiten crear diseños con un prompt pero tienen la limitante que no los puedes editar mucho (por ahora)
Bueno, así damos por finalizado este artículo. Espero que te haya servido para que pongas a echar a volar tu imaginación y hagas tus ideas realidad. ¡No olvides suscribirte!
Si te gustó este artículo, compártelo a tu red para que sigamos aprendiendo en conjunto. Te regalo un hermoso botón listo para ser usado por Linkedin y así hacerte la vida más fácil 😉
C’ya!
Pasar de un dibujo a una interfaz gráfica
Soy Dev, actualmente con cargo de CTO de una startup y realmente esto es lo que todos los junior teníamos miedo en los 2000. Hoy en día es una realidad y todos los desarrolladores deben empezar a entender como agilizar su trabajo ocupando estás herramientas. Se viene tremendo update de skills.