Guía con las mejores herramientas de diseño UI

Empieza un nuevo año y con él nuevos propósitos. Quizás es el momento de revisar las herramientas con las que trabajas y darle una oportunidad a otros programas. Quién sabe, puede que encuentres tu nuevo favorito. 

Hoy vamos a hablar de las tres aplicaciones más populares para el diseño de interfaz: Sketch, Figma y Adobe XD.  

Ahora mismo, las tres tienen características muy parecidas. Lo básico (diseño y prototipado) lo podemos encontrar en cualquiera de las tres, y animación nativamente en dos de ellas (pero gracias a plugins, también está disponible en la que no lo tenía), aunque tendrán algunas diferencias. Dependiendo de cómo sea tu flujo de trabajo, las necesidades de tu proyecto y de qué otros programas utilices, seguro que encuentras la opción perfecta para ti. 

Sketch 

Sketch es una herramienta muy consolidada en el diseño de interfaces. Lleva disponible desde 2010 y tiene una gran comunidad de diseñadores que se ha ido formando desde entonces.  

Ventajas y desventajas de usar Sketch

Una característica que te puede ayudar si tienes archivos muy grandes es el uso de páginas, donde dentro de cada página podrás tener diferentes artboards. Esto nos servirá para ordenar nuestro proyecto y no tener todos los artboards sueltos. Otra opción práctica es la de sustituir los iconos (convertidos a símbolos) dentro de elementos de diseño como CTAs (que se tendrán que convertir a símbolo también, pero podremos editar tanto el icono como el texto). 

Si trabajas con Illustrator para crear iconos y assets más elaborados, se pueden pegar en Sketch y seguir trabajando como vectores, pero funcionan como si tuvieran una máscara de recorte. Pero no se pueden abrir archivos ni de Figma ni de Adobe XD. 

Las opciones de exportación también son bastante completas, pudiendo personalizar tus tamaños y formatos de exportación y exportar todos los archivos a la vez con las características que has indicado. 

Sketch ha añadido en su actualización de diciembre la colaboración con otros usuarios en tiempo real (todavía en beta).  

No tiene animaciones de manera nativa, pero se puede solucionar con plugins. 

Tiene una app para previsualizar el diseño desde un smartphone, pero solo para iPhone (y con valoraciones más bien malas…). Existe una aplicación para Android, pero no es oficial. Ambas funcionan tanto por WiFi como por USB.  

¿Cuál es el coste de Sketch?

Tiene un precio de $99. Puedes decidir hacer un solo pago y Sketck será tuya para siempre, aunque a partir de un año después del pago dejarás de recibir actualizaciones. Si no, puedes renovar la licencia una vez al año por $79. 

¿La parte mala? Solo está disponible para Mac. 

Figma 

Figma es una herramienta relativamente reciente (2016) y la preferida de cada vez más diseñadores. No solo tiene versión gratuita, sino que además también se puede trabajar desde su web sin tener que descargar nada. Solo loguearse y trabajar. Además, también es colaborativa, puedes trabajar con otra persona sobre el mismo archivo y ver los cambios en directo. 

Ventajas y desventajas de usar Figma

Entre sus muchas opciones, nos deja exportar un prototipo con enlace, y también nos da un código para embeberlo en otra página. También soporta animaciones y plugins.  

También se pueden copiar archivos vectoriales desde Illustrator, pero igual que Sketch, también funcionan como si tuvieran una máscara de recorte, aunque su herramienta de Pluma es un poco mejor que la de Adobe XD. 

Tiene una app para poder previsualizar el diseño en directo desde un móvil sin necesidad de cables. 

Figma puede abrir archivos Sketch, así que si estás pensando en probar esta herramienta puedes hacer el cambio de tus proyectos con facilidad. Lo malo es que no nos deja hacer lo mismo con los archivos de XD.  

¿Cuál es el coste de Figma?

Figma es gratuita, pero cuenta con planes de pago (desde $12 al mes) que ofrecen más opciones. 

Adobe XD 

Y por último pero no menos importante, la herramienta de Adobe, Adobe XD (que no, no es una risa, viene de eXperience Design 😂). Esta herramienta tuvo unos inicios bastante humildes en 2016, siendo la menos escogida de los tres, pero sus actualizaciones constantes han hecho que cada vez más gente la pruebe y se quede con ella. Tiene opción de prototipoado y animaciones, y se puede exportar tu trabajo para visualizarlo online de múltiples maneras: como prototipo, para revisión, para desarrolladores (esta última opción muestra los tamaños, colores, tipografías, etc, de todos los elementos de la pantalla). Un problema que encontramos con Adobe XD es que tiene herramienta de Pluma (vectorial), pero el control y las opciones podrían ser mucho mejores. Una característica práctica es la cuadrícula de repetición, que nos servirá para repetir elementos horizontal y/o verticalmente sin tener que duplicarlos uno a uno. 

Ventajas y desventajas de usar Figma

Adobe XD no trae muchas opciones de inicio, pero se le pueden instalar plugins y está disponible para Mac y Windows (solo para Windows 10, eso sí). Es un programa muy ligero, con una interfaz muy limpia y muy fácil de usar. Al ser de Adobe, también tiene compatibilidad con otros programas como Illustrator (puedes copiar tu elemento de Illustrator y pegarlo en XD y podrás modificarlo completamente, sin las restricciones de Sketch o Figma, aunque como dijimos antes la herramienta Pluma es un poco limitada). 

Entre sus últimas actualizaciones se encuentra la transformación de gráficos 2D con efectos 3D. Adobe XD admite archivos Sketch, pero no archivos Figma. También nos deja editar un documento de manera colaborativa en tiempo real. 

Adobe XD también tiene app para previsualizar el diseño en tiempo real, aunque necesita que el smartphone esté conectado al ordenador por USB. 

¿Cuál es el precio de Adobe XD?

Tiene versión gratuita y versión de pago desde 12€ al mes (o si tienes la licencia completa de Creative Cloud, te viene incluida la versión de pago). 

La verdad, tenemos que decir que en Wired somos Team Adobe XD, pero pronto abriremos nuevos horizontes. 😉 ¿Y vosotrxs?