La creaci贸n de prototipos es un paso crucial en el proceso de dise帽o de UI/UX.聽Y, como todo en UI/UX, existen innumerables herramientas para ayudarte a hacer el trabajo.聽

prototipos para dise帽adores UI/UX en 2022

Si tienes muchas opciones y tienes dificultades para reducirlas, esta gu铆a es para ti.聽Hemos compilado聽las mejores herramientas de creaci贸n de prototipos de UI UX para dise帽adores UI/UX para 2022, completas con una explicaci贸n de c贸mo funcionan.聽

Cuando llegues al final, tambi茅n encontrar谩s algunos consejos sobre c贸mo elegir la herramienta de creaci贸n de prototipos adecuada para tus necesidades.聽

Figma

Figma聽es una herramienta de dise帽o todo en uno que maneja todo, desde la creaci贸n de esquemas, la creaci贸n de prototipos y el dise帽o de la interfaz de usuario hasta la colaboraci贸n, la gesti贸n del sistema de dise帽o y la transferencia del desarrollador.

Herramienta de creaci贸n de prototipos ui ux

Figma de un vistazo:

  • Precio:聽Gratis para siempre con el plan Starter;聽12鈧 por editor/mes con el plan Profesional;聽45鈧 por editor/mes con el plan de Organizaci贸n
  • Funcionalidad:聽Wireframing, creaci贸n de prototipos, dise帽o de interfaz de usuario, colaboraci贸n
  • 驴Qui茅n puede usar Figma?聽隆Cualquiera!聽Figma tiene una interfaz f谩cil de usar y puede crear prototipos sin ning煤n conocimiento de codificaci贸n
  • Ideal para:聽crear r谩pida y f谩cilmente prototipos interactivos de fidelidad media聽
  • Funciona con:聽MacOS y Windows, o en el navegador

驴C贸mo funciona Figma como herramienta de creaci贸n de prototipos?

Con Figma, puedes convertir archivos de dise帽o est谩ticos en prototipos interactivos, sin necesidad de conocimientos de programaci贸n.聽

Con el generador intuitivo, simplemente puedes conectar varios elementos de la interfaz de usuario y elegir tus interacciones y animaciones.聽Una vez que hayas construido tu prototipo, puedes verlo en el m贸vil usando la aplicaci贸n Figma (disponible para iOS y Android) o compartir un enlace para verlo en el navegador.聽

Obten m谩s informaci贸n sobre la creaci贸n de聽prototipos con Figma aqu铆.

Adobe XD

Adobe XD聽es una potente herramienta basada en vectores que se utiliza para el dise帽o colaborativo y la creaci贸n de prototipos.

Herramienta de creaci贸n de prototipos ui ux

Adobe XD de un vistazo:

  • Precio:聽9.99鈧/mes como herramienta independiente, o 52.99鈧/mes como parte del conjunto completo de Adobe Creative Cloud
  • Funcionalidad:聽Wireframing, creaci贸n de prototipos, dise帽o de interfaz de usuario, colaboraci贸n
  • 驴Qui茅n puede usar Adobe XD?聽Todos y cada uno de los dise帽adores UI/UX;聽no necesita ning煤n conocimiento de programaci贸n, y la interfaz es bastante f谩cil de manejar
  • Ideal para:聽Crear dise帽os est谩ticos y convertirlos en prototipos interactivos, todo en una sola herramienta聽
  • Funciona con:聽MacOS (v10.15 o posterior), Windows 10 y la mayor铆a de los navegadores

驴C贸mo funciona Adobe XD como herramienta de creaci贸n de prototipos?

Con Adobe XD, hay 2 modos en los que puedes trabajar: modo de dise帽o y modo de prototipo.聽En el modo Dise帽o, creas dise帽os est谩ticos y agregas varios elementos a las mesas de trabajo.聽Las mesas de trabajo representan las diferentes pantallas de aplicaciones o p谩ginas de sitios web.聽

Para convertir tus dise帽os est谩ticos en prototipos interactivos, cambia al modo Prototipo.聽Aqu铆, puedes dibujar enlaces interactivos entre tus mesas de trabajo (es decir, pantallas) para simular el flujo de tu sitio web o aplicaci贸n.聽

Puedes compartir tu prototipo con otros a trav茅s de una URL o un c贸digo de inserci贸n.聽Si habilitas la funci贸n de comentarios, las partes interesadas pueden dar su opini贸n directamente en el prototipo.聽

Puede obtener m谩s informaci贸n sobre聽c贸mo crear prototipos interactivos con Adobe XD aqu铆.

Sketch

Sketch es otra plataforma de dise帽o digital todo en uno que se utiliza para crear dise帽os y prototipos est谩ticos, y para el traspaso del desarrollador.

Herramienta de creaci贸n de prototipos ui ux de Sketch

Sketch de un vistazo:

  • Precio:聽9鈧 por editor/mes con el plan Est谩ndar (para individuos y equipos)聽
  • Funcionalidad:聽Wireframing, creaci贸n de prototipos, dise帽o de interfaz de usuario, colaboraci贸n
  • 驴Qui茅n puede usar Sketch?聽La interfaz de Sketch es ideal para principiantes, pero solo est谩 disponible con MacOS
  • Ideal para:聽prototipos ligeros聽
  • Funciona con:聽Mac OS

驴C贸mo funciona Sketch como herramienta de creaci贸n de prototipos?

Primero, crea tus dise帽os est谩ticos en el lienzo utilizando las herramientas flexibles de edici贸n de vectores de Sketch.聽A continuaci贸n, utiliza la funci贸n de creaci贸n de prototipos para obtener una vista previa de tus dise帽os y navegar entre mesas de trabajo (es decir, pantallas) con interacciones animadas.

La forma m谩s r谩pida de convertir tus pantallas est谩ticas en prototipos interactivos en Sketch es agregar enlaces entre dos mesas de trabajo.聽Luego puedes ajustar tus prototipos agregando puntos de聽acceso聽(谩reas en las que se puedes hacer clic), arreglando ciertos elementos en su lugar y聽estableciendo puntos de inicio聽para determinar con qu茅 mesa de trabajo comienza tu prototipo cuando lo previsualizas.聽

Hay 3 formas de obtener una vista previa de tus prototipos de Sketch: directamente en la aplicaci贸n Sketch (para Mac), a trav茅s de la aplicaci贸n Sketch Mirror en un dispositivo iOS o en la aplicaci贸n web.聽

Puede obtener m谩s informaci贸n sobre c贸mo usar las herramientas de creaci贸n de prototipos de Sketch aqu铆 .

Framer

Framer es una herramienta gratuita de creaci贸n de prototipos de aplicaciones y sitios web ideal para crear r谩pidamente dise帽os y animaciones realistas y de alta fidelidad.

Sitio web principal de la herramienta de creaci贸n de prototipos Framer UI UX

Framer de un vistazo:

  • Precio:聽Gratis con hasta 2 editores y 3 proyectos, o 19鈧/editor al mes con el plan Pro (proyectos ilimitados)
  • Funcionalidad:聽Wireframing, creaci贸n de prototipos, dise帽o de interfaz de usuario, pruebas de usuario, colaboraci贸n
  • 驴Qui茅n puede usar Framer?聽Principiantes y dise帽adores UI/UX avanzados por igual.聽Una vez que est茅 familiarizado con la interfaz, esta herramienta sin c贸digo es relativamente f谩cil de usar.
  • Ideal para:聽Crear y probar prototipos basados 鈥嬧媏n c贸digo interactivos de alta fidelidad en minutos, todo en un lienzo
  • Funciona con:聽MacOS, Windows, iOS, Android y en el navegador

驴C贸mo funciona Framer como herramienta de creaci贸n de prototipos?

Con Framer, puedes crear prototipos interactivos arrastrando y soltando componentes interactivos prefabricados y construyendo animaciones y transiciones.聽Basado en tus dise帽os, Framer genera prototipos basados 鈥嬧媏n c贸digo que se comportan y se sienten como una aplicaci贸n o sitio web real.聽

Framer tiene un mont贸n de herramientas y caracter铆sticas para construir prototipos enriquecidos, incluidos dise帽os adaptables que sirven como base para su dise帽o, componentes interactivos totalmente personalizables y herramientas integradas para paginaci贸n, desplazamiento y navegaci贸n. 

Tambi茅n puedes crear聽transiciones de Magic Motion聽donde las capas que existen tanto en el origen de la transici贸n como en su destino se animar谩n en su nuevo estilo y posiciones.聽

En pocas palabras, Framer tiene que ver con la creaci贸n r谩pida de prototipos de alta fidelidad a trav茅s de componentes listos para usar y una funcionalidad de arrastrar y soltar f谩cil de usar. 

Para obtener una gu铆a para principiantes sobre la creaci贸n de prototipos con Framer, consulte este tutorial .

ProtoPie

ProtoPie es una herramienta de creaci贸n de prototipos flexible pero poderosa elogiada entre la comunidad de dise帽o por su interfaz f谩cil de usar y su curva de aprendizaje casi inexistente.

ProtoPie ui ux herramientas de creaci贸n de prototipos

ProtoPie de un vistazo:

  • Precio:聽11鈧/mes con el plan Individual, o 41鈧 por editor/mes con el plan Team.聽Ambos planes vienen con una prueba gratuita de 30 d铆as.
  • Funcionalidad:聽Prototipado.聽Tambi茅n se integra con Sketch, Figma y Adobe XD
  • 驴Qui茅n puede usar ProtoPie?聽Tanto dise帽adores UI/UX individuales como equipos.聽ProtoPie es especialmente bueno para principiantes, ya que es muy f谩cil de aprender y usar.
  • Ideal para:聽Principiantes que buscan una poderosa herramienta de creaci贸n de prototipos casi sin curva de aprendizaje
  • Funciona con:聽MacOS, Windows, iOS, iPadOS y Android

驴C贸mo funciona ProtoPie como herramienta de creaci贸n de prototipos?

A diferencia de otras herramientas en nuestra lista, ProtoPie se enfoca 煤nicamente en la creaci贸n de prototipos, por lo que primero deber谩 importar sus dise帽os est谩ticos desde otra herramienta. ProtoPie tiene complementos para Figma, Adobe XD y Sketch.

Una vez que hayas importado tus estructuras, las convertir谩 en prototipos interactivos agregando disparadores, respuestas y objetos.聽El activador es la acci贸n del usuario que 芦provocar谩禄 la interacci贸n.聽El objeto es el elemento con el que el usuario interactuar谩 para poner en marcha el gatillo.聽La respuesta es el resultado de la interacci贸n, por ejemplo, abrir un enlace o saltar a otra p谩gina.聽Puedes crear estas interacciones simplemente seleccionando activadores y respuestas prefabricados en el men煤 desplegable de la barra de herramientas.聽聽

A partir de ah铆, puedes utilizar una variedad de funciones y herramientas adicionales para hacer que tus interacciones sean m谩s complejas y precisas.聽Luego puedes obtener una vista previa de tus prototipos en la ventana de vista previa, subirlos a la nube y compartir un enlace, o generar un c贸digo QR que puedes escanear para ver el prototipo usando tu smartphone.聽

Es cierto que聽crear prototipos UI/UX聽puede ser desafiante y confuso en un principio, pero para eso estamos, para聽ayudar. Contacta hoy para programar tu聽sesi贸n de estrategia聽y dejar que comience la lluvia de ideas.

Deja un comentario

Tu direcci贸n de correo electr贸nico no ser谩 publicada.

Ir arriba