Sketch vs Adobe XD

Hoy en día diseñar una web no es sólo crear una página bonita. Además del diseño como tal, hay que pensar en el diseño adaptativo, en definir bien la estructura, crear la arquitectura, pensar muy bien la usabilidad de cada página, … toda una serie de elementos a diseñar para poder completar el flujo de trabajo UX. Para crear este tipo de proyecto se necesita algo más que Photoshop. Si realizas tus diseños en un PC, probablemente te sientas obsesionado por la mención constante de utilizar Sketch, sin duda el más popular editor de gráficos vectoriales optimizado con innumerables complementos útiles que se ha convertido rápidamente en un estándar de la industria, aunque solo esté disponible en Mac (iOS). Esto significa que, a menos que tengas un Apple, te quedarás fuera. 

Pero… Adobe se ha dado cuenta que Sketch es la mejor alternativa para los diseñadores UX. Así que se ha puesto a trabajar activamente en un competidor adecuado de Sketch. El gigante Adobe, el creador de Photoshop, e Illustrator, de  InDesign, … ha creados Adobe XD. Y seguramente no ha defraudado.

¿Qué es Adobe XD? 

Adobe Experience Design CC, o Adobe XD, es un editor de gráficos vectoriales ligero y una herramienta de creación de prototipos que se anunció en Adobe MAX 2015 como Project Comet.

Aunque el software se lanzó en versión beta a mediados de 2016 como parte de Creative Cloud, ha ido incorporando actualizaciones casi mensualmente hasta día de hoy. Antes de eso, Adobe estaba trabajando para agregar funciones para diseñadores de UX en sus herramientas establecidas como Photoshop e Illustrator. Aunque los 2 programas eran y son excelentes piezas de software, no son livianos ni optimizables para este tipo de trabajo. Es decir, la apuesta salió rana.

A lo largo de estos últimos años, y especialmente después de la desaprobación en 2013 de Adobe Fireworks (la clásica herramienta de creación de prototipos orientada a la web adquirida de Macromedia), cada vez más diseñadores de UX sintieron que Creative Cloud no cumplía con las expectativas del mercado. 

Así, que los diseñadores se pasaron a Sketch, pero eso sí, como he comentado anteriormente, solo si tenías una Mac. Si bien la respuesta de Adobe ha sido un poco tardía (Sketch se lanzó ya hace 6 años), valía la pena esperar, especialmente si se ha limitado a usar herramientas menos adecuadas en tu PC. 

Adobe XD con Sketch. Interfaz de usuario y funciones exclusivas 

La primera impresión que tienes cuando abres Adobe XD es que la interfaz es muy familiar, tanto para los usuarios de Sketch como para los fanáticos de Adobe desde hace mucho tiempo. Adobe se aparta de los esperados botones y menús más oscuros de Creative Cloud y opta por ofrecer lo mejor de los dos mundos. 

A diferencia de Sketch, verás un conjunto de herramientas en el lado izquierdo de la pantalla, pero también el panel de capas más alto y las propiedades dinámicas a la derecha, como se ve en Sketch. Es muy fácil de usar y fácil de aprender, independientemente de la herramienta que hayas utilizado anteriormente. 

Adobe XD también tiene un conjunto de características únicas como Repeat Grid (Repetir cuadrícula), una herramienta que te permite replicar un grupo de objetos como una tarjeta de Material Design con datos variables y espaciado configurable entre las copias.

Puedes crear un prototipo interactivo sin necesidad de complementos de terceros como lo haría en Sketch. El editor de prototipos de Adobe permite a los diseñadores conectar visualmente áreas interactivas a otras pantallas mediante cables y configurando transiciones. Con el prototipo interactivo listo, puedes publicar y compartir el prototipo, que se puede ver en la web o con la aplicación móvil Adobe XD. 

Los prototipos de XD, sin embargo, aún no tienen soporte para gestos o secciones fijas como encabezados, algo que es posible en InVision y otras herramientas de solo prototipos que se conectan con Sketch.

La respuesta de los diseñadores es muy buena, y parece que Adobe va recuperando terreno respecto a Sketch. Así que Adobe se ha puesto las pilas y ya anunció nuevas funcionalidades que aparecerán en XD en el blog del producto. Uno de ellos amplía la función Activos, lo que permite al diseñador publicar la guía de estilo del proyecto con fuentes descargables, activos y los códigos hexadecimales de colores, junto con el prototipo interactivo y una función de inspección para el estudio de los elementos dentro del prototipo por parte del desarrollador. 

Esto se denomina «transferencia para desarrolladores» y ya es posible en Sketch (y Photoshop) utilizando complementos como Zeplin.

Otra característica futura que se está mostrando es la colaboración en tiempo real dentro de XD, algo que se asemeja por ejemplo a la característica de colaboración presente en Google Docs y ya disponible en otras herramientas de diseño de UX como Figma.

Crear prototipos con Adobe XD y Sketch, un regalo para los programadores

Gracias al XD se puede crear un prototipado interactivo sin tener la necesidad de ayudarte de otras plataformas como hace su competidor, Sketch. En la sección de editar la creación de prototipos en Adobe XD, nos permite, sobre todo, a los diseñadores, crear conexiones entre diferentes áreas interactivas, pantallas, botones, etc. usando “cables”, que son los que nos permiten conectar las 2 partes, y con estos “cables” se pueden configurar transiciones.

También con la herramienta que nos proporciona el programa de Adobe CC, una vez listo el prototipado interactivo, lo podemos publicar y/o compartir, y ver en la web o a través de la aplicación móvil de XD.

Aunque hay que tener en cuenta que los prototipos que nos proporciona XD no tienen un soporte para gestos o secciones fijas como lo son los encabezados. Esto se puede conseguir gracias a InVision u otras herramientas de solo prototipos que se conectan con la herramienta Sketch.

¿Cambiamos a Adobe XD o seguimos con Sketch?

Como comentaba al inicio, Adobe XD es principalmente para usuarios de Windows que no pueden utilizar Sketch (Mac) y los suscriptores actuales de Adobe Creative Cloud (que no tienen que pagar más por XD además de Photoshop, Illustrator, etc.). 

Si eres un usuario experimentado de Sketch, disfrutarás de una mejor interfaz en general, características únicas de XD, pero también tendrás que lidiar con las limitaciones actuales y la falta de compatibilidad con complementos. 

Hay muchos diseñadores de UX que ya están dando el salto, ya sea porque son suscriptores de Creative Cloud incluso en macOS, o porque creen que XD será el próximo estándar y están satisfechos con el conjunto de funciones actual. 

Enero 2021
Jordi Granell / Creative Manager en Pukkas