Uso de la inteligencia artificial de Visily para creación de wireframes y prototipos

Siempre me sorprende ver ofertas de trabajo en LinkedIn y ver que todavía se exige a los diseñadores de UX saber usar Adobe XD y Sketch, cuando Figma domina el mercado de herramientas de diseño. Parece que las ofertas de trabajo siguen ancladas en la década de 2010. Por otro lado, no se mencionan nombres nuevos con frecuencia.

Dicho esto, en los últimos años han surgido algunos disruptores del mercado. Penpot, un software de código abierto similar a Figma, ha tenido éxito, y un nuevo competidor, Visily , está empezando a destacar.

En este artículo, aprenderá qué es Visily y las herramientas de IA que le permite utilizar.

¿Por qué necesitas saber sobre Visily?

Visily es un software desarrollado en Vietnam por un grupo de ingenieros de software. Se fundó en 2022 y dos años después ya contaba con 100.000 usuarios. Aunque comenzó en Vietnam, la empresa tiene una oficina en Atlanta, EE. UU.

El software tiene una apariencia totalmente diferente a la de Figma y se centra directamente en las funcionalidades basadas en IA, en lugar de en las herramientas básicas de diseño. Las herramientas de IA probablemente se basan en ChatGPT, por lo que puedes esperar resultados similares a los de FigjamAI o plugins similares. Es una ventaja contar con herramientas de IA nativas, aunque aún existe debate sobre su utilidad en el diseño.

El problema con la IA siempre reside en la incertidumbre de los resultados. Perder tiempo intentando obtener un resultado en lugar de diseñarlo desde cero puede ser frustrante. Por eso recomiendo usar la IA como herramienta complementaria para los diseñadores.

Actualmente hay 10 herramientas de IA integradas de forma nativa en Vilsly, pero cuatro son realmente importantes para ti como diseñador.

Captura de pantalla para diseñar

En Figma, uso mucho un plugin llamado “HTML to design”. Es genial copiar una URL, pegarla en el plugin y obtener una reproducción totalmente editable de esa página en Figma. Si no lo conoces, deberías probarlo. Es genial para aprender a organizar un diseño en Figma y para crear páginas para proyectos de rediseño.

Este complemento tiene un equivalente en Visily con la herramienta “Captura de pantalla a diseño”. No es exactamente lo mismo. Como su nombre indica, convierte una captura de pantalla de una página en un diseño editable. Lo probé directamente con la página de Visily y… ¡funciona! Aunque no a la perfección.

La IA confundió las flechas hacia abajo con la letra V. La fuente no era la misma que en la página original. Había tres tarjetas con imagen y texto; la del centro era más grande que las otras dos para darle un aspecto tridimensional. Las dos tarjetas laterales se convirtieron en imágenes con texto no editable, pero la del centro tenía texto editable en un contenedor sin la imagen principal.

Los resultados son un poco extraños, pero si mejoran será bastante agradable de usar:

Texto a diagrama

Generar un diagrama que represente el flujo de usuario de un producto es esencial para definir las diferentes pantallas a diseñar. Figma ha añadido recientemente esta funcionalidad a Figjam. El equivalente en Visily es “texto a diagrama”.

Al darle una indicación, generará automáticamente un diagrama bien elaborado con buena lógica. Debo señalar que los resultados siempre son limitados, al menos para mí. Esto se debe a que me gusta detallar las acciones que el usuario debe realizar, no solo lo básico. Al detallar, se comprende mejor el orden en que debe realizarse cada paso y por qué una opción es más lógica que la otra.

Escribí dos instrucciones. La breve improvisé algunas partes del flujo de usuario que no funcionaban como pretendía. La detallada dio buenos resultados y no olvidó ninguna instrucción. Si quieres probarla, intenta ser lo más detallado posible.

Generador de temas

Esta es divertida de usar. Me gusta ir a Pinterest y encontrar análisis de color. Esta herramienta te permite tomar una foto y extraer todos los colores.

Cualquier imagen se transformará en un conjunto de colores con colores principales, secundarios y “otros”. No estoy completamente seguro de cómo debería usarse ni con qué base. Si es para la marca, no se trata solo del color. Si se trata de seleccionar colores para crear una paleta de colores, generalmente se le da un resumen al diseñador. Yo lo usaría para un portafolio de un solo producto para combinar sus colores.

Imagen mágica

Otra función interesante de Figma es el complemento “unsplash”. Al añadir una imagen de un objeto, la IA lo reconocerá y ofrecerá una lista de objetos similares. Esto es útil para completar un diseño que requiere muchas imágenes, como una tienda online de zapatos.

Funciona muy bien con artículos comunes como chalecos, teléfonos o cafeteras. Llevé esta herramienta al límite con una foto de teléfono de una figura fea de un personaje de manga. El resultado fue divertido: tres chicas en forma, un chico acampando y un montón de locos. Úsala con productos normales y te ahorrará mucho tiempo.

Diseñando de 0 a 1

Después de probar las herramientas, quise hacer un diseño desde cero para ver cómo se compara con Figma.

Diseñé un sitio web sencillo de una sola página para un hotel en Irlanda. El objetivo inicial era tener un carrusel con la imagen de fondo.

Dibujé algo en papel y usé la herramienta “de boceto a diseño”, que me intrigaba más. Falló.

Para ser justos, esta función está en fase beta. Sin embargo, lo mejor es el flujo de trabajo para subir un boceto: puedes hacerlo desde tu PC, pero también desde tu teléfono escaneando un código QR, y se sugieren algunas plantillas. Me parece muy fluido, ya que pasar del papel a lo digital siempre es una tarea tediosa, pero no aquí.

Dibujé algo realmente simple con:

• Un titulo
• Una barra de navegación
• Una forma
• Y un fondo

El primer intento me dio algo indescriptible. Para el segundo, añadí un boceto y algunas sugerencias para la IA, y el resultado fue algo parecido en diseño, pero en general no es excelente. Sigue siendo inutilizable y me pregunto cómo puede funcionar la IA sin una indicación que describa al menos el tema del boceto.

Tras este fracaso, empecé desde cero con la biblioteca de componentes prediseñados. Las herramientas principales, e incluso algunos elementos como el contenedor, cuentan con breves videotutoriales que ayudan al usuario a comprender la lógica subyacente y el flujo a seguir.

La interfaz de usuario del software

El diseño de esta aplicación puede resultar inquietante. A la izquierda se encuentran el botón “Añadir” para crear rápidamente una pantalla vacía o usar una plantilla; el “Esquema” muestra los componentes prediseñados para diseñar; el “Diagrama” para crear flujos de usuario, etc.; y el botón “Guardado” muestra los componentes guardados, creados o modificados por el diseñador.

A la derecha encontrará “diseño” que brinda información sobre un elemento como su posición o ancho, capas que muestran cómo se imbrican los elementos, “tema del proyecto” que es la base del sistema de diseño con tipografía, colores, radio de las esquinas y “configuración de comentarios” para administrar el aspecto colaborativo de la aplicación.

Al colocar un componente de la biblioteca, aparece una barra de opciones para controlar los ajustes principales, como el tamaño, el color, las sombras, etc. La lógica de diseño no es la misma que en Figma y algunas herramientas importantes de los últimos años aún no están disponibles en Visily.

Al no usar un diseño automático, me sentí como en 2019. No es tan importante, pero los diseñadores que quieran usar Visily deben prepararse para reutilizar el atajo de teclado Ctrl+G para agrupar elementos y alinearlos manualmente. Lo más parecido a un diseño automático sería el elemento contenedor, que no existe en Figma. Crea una pequeña sección independiente donde se puede cambiar el fondo y colocar componentes dentro.

Se pueden encontrar algunos reflejos de diseñador rápidamente, pero la interfaz de usuario del software difiere de Figma y algunas acciones simples, como cambiar la opacidad de un color, serán molestas de encontrar al principio.

Otra cosa que se siente como en 2019 es tener que mover elementos uno sobre otro para lograr los resultados deseados. En mi caso, quería una imagen ilustrativa. No podía configurar el fondo de un contenedor como “imagen”. Necesitaba colocar una imagen en el contenedor, extenderla manualmente para que coincidiera con el borde, superponerla y moverla sobre la imagen.

Al final, terminé mi diseño en pocos minutos. Los controles son fluidos. No sé si crear un sistema de diseño sería fácil con este software. Lo único que lamento fue la parte del prototipo.

Cuando escribí este artículo, solo había un tipo de activador (el clic) y un único tipo de resultado (navegar). Para simular un carrusel con la imagen de fondo, tuve que duplicar mi pantalla, cambiar la imagen y hacer clic para simular el cambio. Un prototipo a gran escala requeriría duplicar muchas pantallas para cada pequeño cambio. Aunque mostrar diferentes estados es importante para la comunicación con los desarrolladores, tener páginas dinámicas como en Figma es aún más sencillo:

Conclusión

En mi opinión, Visily se convertirá en un serio rival para Figma en los próximos meses. Es fácil de usar para principiantes, y el uso de plantillas para elementos es una funcionalidad muy útil que ayudará a los equipos a ahorrar tiempo al inicio del proyecto al no tener que crear todos los botones de inmediato. Es colaborativo como Figma, y ​​la incorporación de funciones de IA sin necesidad de navegar por una página de la comunidad es una ventaja, incluso si nada parece funcionar a la perfección todavía.

No usaré esta herramienta de inmediato, pero el hecho de que esté conectada a Figma con funciones como “exportar a Figma” facilita el proceso. Quizás la use para bocetos rápidos o para diseñar con un cliente y obtener resultados rápidos para ajustarlos en Figma más adelante.

Si quieres conocer otros artículos parecidos a Uso de la inteligencia artificial de Visily para creación de wireframes y prototipos puedes visitar la categoría Guias.