Adobe XD, el nuevo competidor de Sketch

Oriol Quílez
Blog de Interactius UX
5 min readDec 5, 2017

En Interactius nos apasiona aprender y este mes nos hemos propuesto aprender a utilizar la nueva herramienta de Adobe, la cual pretende revolucionar el mundo del wireframming y prototipado, Adobe Experience Design.

Primeras impresiones

Lo primero que sorprende al abrir por primera vez la aplicación, y después de haber pasado la pantalla de inicio, es su formato minimalista. Es muy fácil de entender y utilizar, lo que nos ayuda a fijar la mirada en la zona central y dejar en un segundo plano todas las herramientas, las cuales han sido reducidas (solventando así uno de los mayores problemas en los productos de Adobe). Esto, también ha sido uno de los detonantes por los que muchos diseñador@s se han pasado a programas más “user friendly” y fáciles a la hora de diseñar, como lo es Sketch.

El layout de la pantalla está dividida en tres zonas:

  • La zona de las herramientas de dibujo, gestión de capas y gestión de símbolos, en la parte de la izquierda.
  • La zona de trabajo en la parte central.
  • La zona de propiedades de herramientas en la parte derecha.

Además, en la parte superior encontramos unas pestañas que nos permiten mover entre la parte de diseño y prototipo.

Homescreen Adobe XD

Después de un rato utilizándolo, se hace muy fácil y rápido crear contenido de calidad.

Funcionalidades Destacadas

Adobe está intentando ofrecer nuevas funcionalidades a las ya existentes en otras aplicaciones para que ayuden a la creación de contenido.

  • Una de las más destacadas es la herramienta Repeat Grid, la cual nos permite hacer tantas copias como queramos de un mismo elemento simplemente arrastrándolo.
Repeat Grid
  • Adobe ha querido facilitarnos aún más el trabajo añadiendo una funcionalidad extra al elemento Repeat Grid, el cual nos permitirá añadir un set de imágenes sobre un grid y que este gestione automáticamente la posición de las mismas.
Add Image
  • Y finalmente, otra de las funcionalidades más destacadas de la aplicación es Mask with shape, donde podemos adaptar la forma y tamaño de una imagen a nuestro gusto. Tan solo tenemos que crear una capa con la forma deseada y después mover la imagen para acabar de encajarla.
Mask with Shape

Prototipado

Por si misma, la opción de prototipado no nos ha sorprendido demasiado. Por el momento se limita a las transiciones básicas de cualquier programa de este tipo y no creo que en versiones posteriores acaben añadiendo muchas más funcionalidades, dado que Adobe pretende asimilar más su funcionamiento a programas como InVision y no a otros más robustos como Axure RP o Just in Mind (los cuales nos permiten realizar un prototipo más avanzado y fiel a la versión de producción).

Aunque no todo está perdido, ya que Adobe se ha guardado un AS en la manga para las personas que requieran de un prototipo con transiciones más elaboradas … (redoble de tambores) Adobe After Effects. Así que si tenéis conocimientos previos de este programa, podréis animar vuestros trabajos de forma sencilla.

La gran pregunta es: ¿Vale la pena aprender a utilizar Adobe After Effects para lograr mejores transiciones y animaciones en nuestros prototipos?

Mi recomendación es que NO. La mayoría de proyectos de UX no requieren de grandes producciones a la hora de prototipar, y la mayoría se pueden realizar con las transiciones estándares. En caso contrario, como hemos comentado en el apartado anterior, podemos utilizar programas más avanzados que solventan sin problemas las exigencias demandadas por el cliente.

Prototipo Adobe Experience Design

Adobe XD prototype

Las interacciones son más limitadas: no permiten hacer efectos entre elementos de un mismo artboard ni puedes mantener el header siempre fijo, las transiciones solo son entre artboards.

Prototipo Adobe After Effects

After Effects prototype

Puedes conseguir transiciones más fluidas y reales.
Las interacciones pueden ser elementos en una misma pantalla, pero el coste en tiempo es elevado.

Ventajas y Desventajas

pros and cons

Conclusiones

Adobe Experience Design es una herramienta útil y fácil de utilizar que nos ha permitido disfrutar diseñando y prototipando nuestra web. A su vez, se aleja de todos los otros productos de Adobe, los cuales requerían de un exhaustivos conocimiento para sacar partido total a la aplicación.

Por otro lado, Adobe sigue con su política de subir todo al Cloud, lo que dificulta la implantación de su software en empresas dónde haya contrato de confidencialidad o simplemente no quieran que sus proyectos sean subidos a la nube.

El precio hará que mucha gente se lo piense dos veces a la hora de utilizar la herramienta. Y aún más, teniendo en cuenta que en unos meses aparecerá en el mercado el nuevo producto de InVision llamado InVision Studio, el cual pretende hacer frente a Sketch y Adobe ofreciendo una aplicación para diseñadores que, a su vez, permita hacer rapid prototyping con animaciones avanzadas.

Y para terminar, desde Interactius os animamos a que probéis el programa y nos comentéis cuáles han sido vuestras impresiones. En unos meses os traeremos el análisis de InVision Studio. ;-)

--

--

Oriol Quílez
Blog de Interactius UX

Lead Project Manager and Senior UX Designer at Interactius. Tech enthusiast. You can find me at www.linkedin.com/in/oriol-quilez