Adobe XD vs. Sketch vs. Figma – Las mejores herramientas de diseño IU/UX

Herramientas de diseño IU/UX. Entre los mayores acontecimientos de interés para los diseñadores web en este año fue la explosión de las herramientas de diseño de interfaz de usuario. Estas herramientas de diseño IU/UX señalan una transición en la forma de crear interfaces de usuario modernas. Podría ser que los días de crear maquetas de PSD en Photoshop estén llegando a su fin.

¿No estás convencido? Tanto Sketch como Figma han conseguido seguidores muy fieles en los últimos años. Pero quizás el mayor desarrollo es que Adobe, el gigante del software de diseño, saltó al juego con su producto XD. Esto demuestra que la forma en que trabajamos está cambiando hacia herramientas de diseño IU/UX más especializadas.

Con esto en mente, echemos un vistazo a cada una de estas «tres grandes» aplicaciones. Cubriremos algunas características principales así como otros factores que pueden influir en cuál es la que mejor se ajusta a sus necesidades.

¿Qué hace que las herramientas de diseño IU/UX sean únicas?

Durante muchos años, los diseñadores web usaron el ya mencionado Adobe Photoshop para crear maquetas de sitios web. Esto era preferible a saltar directamente al código ya que nos permitía construir una interfaz muy detallada y hacer ediciones fácilmente – sin tener que destrozar el HTML, CSS y similares.

Mientras que eso puede ser un flujo de trabajo efectivo, esta nueva clase de aplicaciones tiene características específicas para el diseño web. Los elementos de la interfaz, como los menús en una página web y los botones, son interactivos: puedes ver los efectos dinámicos o hacer clic para ir a otras páginas.

Además, las interfaces construidas con una aplicación de diseño IU/UX son responsive. Esto significa que puedes ver cómo funcionan en diferentes resoluciones de pantalla. Ya no es necesario crear un archivo PSD completamente separado para teléfonos, tabletas y dispositivos de escritorio.

Te recomiendo leer  7 reglas del diseño web que siempre hay que cumplir

Y hay una tonelada de kits y plantillas de interfaz de usuario prefabricadas disponibles, lo que proporciona una ventaja en el proceso de diseño.

En esencia, ya no estás creando una pantalla estática, sino un prototipo totalmente realista. Ahora, veamos las aplicaciones!

Sketch (herramientas de diseño IU/UX)

Sketch herramientas de diseño IU/UX

La primera de estas nuevas herramientas que llegó al mercado, Sketch, fue lanzada inicialmente en 2010. Esto le dio a la aplicación una ventaja sobre las otras en este resumen. Por lo tanto, también significa que hay una tonelada de recursos disponibles.

Hay una biblioteca de varias extensiones que traen nuevas capacidades y mejoran el flujo de trabajo. La funcionalidad puede ir desde el ajuste de varios elementos de diseño hasta la vinculación con servicios de fotografía de stock para facilitar las importaciones.

Entre sus principales características, encontrarás:

Edición de imágenes vectoriales;
Diseños sensibles a través de Smart Layouts;
Soporte para fuentes variables;
Colaboración con colegas y clientes;
Añade fácilmente datos basados en texto e imágenes a tu demo;
Servicio Sketch Cloud para compartir sus creaciones;
Bibliotecas para compartir recursos (símbolos, imágenes, texto, estilos) en los documentos;
La posibilidad de crear y utilizar plantillas;
Un gran número de plugins disponibles;

Sketch es una aplicación de escritorio que ofrece una prueba gratuita de 30 días, pero que cuesta 99 dólares por una licencia comercial. Las renovaciones anuales están disponibles a un precio de descuento.

Una gran advertencia aquí es que Sketch solo está disponible para MacOS. Si usas Windows o Linux, no podrás unirte a la diversión.

Figma (herramientas de diseño IU/UX)

Figma herramientas de diseño IU/UX

Lanzada por primera vez en 2016, Figma es una aplicación basada en un navegador que promueve un enfoque de colaboración en el diseño. La ventaja es que se puede acceder fácilmente en cualquier momento, independientemente del sistema operativo.

Además, cuando compartes proyectos con otros, lo haces con un enlace en vivo. Esto significa que no tendrás que exportar primero a un PDF u otra imagen. Lo que están viendo es exactamente lo que has creado.

Te recomiendo leer  Cómo diseñar para la web en 2019 / Nuevas tendencias

Además, Figma ha sido construida para soportar la colaboración en tiempo real. Los miembros del equipo pueden comunicarse entre sí y gestionar sus propias tareas del proyecto. El historial de versiones incluido te permite retroceder los cambios, si es necesario.

Más allá de eso, encontrarás:

La capacidad de crear estilos consistentes y aplicarlos a través de los proyectos;
Copiar CSS directamente de los archivos de diseño;
Una biblioteca de recursos de búsqueda;
Permisos de usuario;
Crear prototipos animados e interactivos;
Función de autodiseño para diseños sensibles;
Una biblioteca de plugins, y la posibilidad de crear tus propios plugins;

Figma tiene un plan gratuito que permite 3 proyectos, 2 editores y un historial de versiones de 30 días. Los planes comerciales completos empiezan en 12 dólares al mes (facturados anualmente).

Adobe XD (herramientas de diseño IU/UX)

Adobe XD herramientas de diseño IU/UX

Ahora, por el chico nuevo del barrio. Adobe XD, que salió de la versión beta en octubre de 2017, está dirigido a diseñadores que quieren crear sitios web, aplicaciones para móviles o incluso juegos. Cuenta con un sistema incorporado para la colaboración, llamado «Coedición», y la posibilidad de que los clientes y colegas proporcionen comentarios.

Al igual que sus competidores, XD permite reutilizar los componentes de diseño una y otra vez. También puede editar un componente una vez y empujarlo a todas las instancias, permitiendo una mejor consistencia en su diseño.

Tal vez la mayor ventaja aquí es el hecho de que Adobe XD juega bien con otras aplicaciones de Adobe. Puedes, por ejemplo, abrir y editar imágenes en Photoshop directamente desde XD (sólo tienes que hacer clic con el botón derecho del ratón en la imagen para abrirla). Cualquier cambio que hagas en la imagen se reflejará automáticamente en XD también. También importa archivos de Adobe Illustrator, Photoshop e incluso Sketch.

Otras características que vale la pena explorar incluyen:

Los estados permiten editar los componentes del diseño en base a las interacciones del usuario, como el hover o el click;
Replicar fácilmente los elementos de diseño;
Integración de fuentes de Adobe;
Crear interacciones y disparadores para sus prototipos;
Previsualizar aplicaciones para móviles en dispositivos reales a través de una aplicación complementaria;
El historial de documentos te permite volver a las versiones anteriores;
Activos fáciles de desarrollar como CSS, colores, activos descargables;
Extensiones que refuerzan la funcionalidad y se vinculan con servicios de terceros;

Te recomiendo leer  Cómo usar fuentes variables en la web 2018

Adobe XD es un software de suscripción. Requiere una membresía completa de Creative Cloud o, puedes elegir suscribirte a XD por sí mismo por $9.99 al mes. Si quieres probarlo primero, hay un Plan de Inicio de XD gratuito que te permitirá experimentar con algunas limitaciones. Puedes ejecutar la aplicación en MacOS o Windows.

Tomando la decisión correcta

Cada una de estas herramientas tiene su propio y convincente conjunto de características. De esa manera, es difícil decir que te equivocarás con alguna de ellas.

Pero, para reducir las opciones, piensa en cómo y dónde planeas usar la aplicación. Por ejemplo, si eres usuario de Windows, no podrás usar Sketch. Si prefieres algo basado en un navegador y/o usar Linux, entonces Figma es tu elección. Si eres un usuario de Mac que quiere algo con muchas opciones de plantillas y plugins, Sketch es el ganador. A los clientes fieles de Adobe les encantará la interoperabilidad de XD.

De lo contrario, encontrarás una serie de similitudes. Cada aplicación tiene al menos alguna capacidad de colaboración. Todas crean gráficos vectoriales y ofrecen bibliotecas de activos. Todas son expertas en crear un sistema de diseño. Además, todas son extensibles en un grado u otro.

Independientemente de la dirección que tomes, puedes estar seguro de una cosa. Estarás a la vanguardia del diseño web.

Deja un comentario

Háblame ;)
¿Necesitas ayuda?
Hola! Necesitas ayuda? hablemos por WhatsApp :)