Enfrentamiento de herramientas de diseño: Adobe XD vs. Sketch (2019)

Sketch, una herramienta de diseño bien establecida, ha disfrutado de un crecimiento fenomenal desde su presentación en 2010. En 2016, Adobe presentó XD como un competidor formidable. Después de casi tres años de desarrollo, ¿Adobe XD ofrece suficiente desafío para que los diseñadores consideren un cambio?

El proceso de diseño de UX es complejo y requiere el uso de herramientas, metodologías y marcos específicos. La investigación de usuarios, el análisis, la creación de esquemas, las maquetas, la iteración, las pruebas de usabilidad y la creación de prototipos de UI son solo algunos de los artefactos y procesos con los que trabajan los diseñadores mientras se comunican con los desarrolladores, las partes interesadas y otros miembros del equipo.

Dos herramientas de diseño ampliamente reconocidas en las que confían los diseñadores de UX son Adobe XD y Sketch.

Sketch se ha convertido en el estándar de facto para la gran mayoría de los diseñadores digitales debido a su interfaz simple, gran cantidad de complementos, funcionalidad completa del kit de herramientas y actualizaciones frecuentes.

Si bien Sketch se convirtió en la herramienta elegida por los diseñadores de UX, Adobe, conocido desde hace mucho tiempo por su galardonado software de diseño y sus profundos vínculos con la comunidad de diseño, no tenía una opción similar. Tenían Photoshop, Illustrator y Fireworks, pero los diseñadores no tenían ganas de usar tres herramientas para realizar tareas que Sketch podía proporcionar en una sola aplicación.

En 2016, Adobe presentó XD (Diseño de experiencia). Un competidor serio para Sketch, todavía tenían mucho por hacer. En ese momento, Sketch tenía seis años, tenía una amplia base de usuarios y un ecosistema completo de complementos, lo que lo convertía en una poderosa herramienta de diseño. La rivalidad se intensificó durante los siguientes dos años y Adobe XD pasó de ser un competidor ágil a una herramienta de diseño de gran prestigio que ha conquistado a muchos diseñadores profesionales.

El blog de diseño de Toptal publicó un artículo sobre Sketch vs Adobe XD en 2017 cuando aún estaba en versión beta. Ahora, dos años después, Adobe XD ha visto múltiples revisiones con un objetivo claro: Ofrecer todo lo que un diseñador de UX necesita de forma nativa y con un gran rendimiento.

¿Es hora de que los diseñadores de UX cambien de Sketch a Adobe XD?

Adobe XD frente a croquis

Exploremos cómo se compara Adobe XD con Sketch. Compararemos las siguientes características:

• Interfaz de usuario
• Repetir cuadrícula
• Símbolos y paneles de activos
• Herramientas de diseño responsivo
• Complementos y complementos
• Creación de prototipos con Auto-Animate
• Compartir y Comentarios
• Trabajar con desarrolladores
• Control de versiones y colaboración en tiempo real

Interfaz de usuario

Los diseñadores que están familiarizados con herramientas como Photoshop no deberían tener problemas para aprender Adobe XD o Sketch, ya que todos comparten una interfaz de usuario similar.

Una diferencia notable de la interfaz de usuario es la ausencia de una barra de herramientas en Adobe XD. La barra de herramientas, ubicada en la parte superior de la interfaz de usuario, es una función útil en Sketch con accesos directos personalizables a funciones y herramientas de uso común, como agrupar objetos. Adobe ofrece una característica similar, reducida, llamada caja de herramientas , ubicada en el lado derecho del software.

Sketch vs XD : Sketch tiene la ventaja por su útil barra de herramientas.

Repetir cuadrícula

Una característica notable en Adobe XD es la cuadrícula de repetición. Esta es una herramienta útil que permite la creación fácil de listas ajustables y pantallas basadas en cuadrículas. Si bien Sketch carece de esta función, se puede replicar más o menos con complementos.

Sketch vs XD : Adobe XD tiene la ventaja con la cuadrícula de repetición que es nativa del software.

Símbolos y paneles de activos

Los símbolos fueron una característica temprana que tuvo una contribución significativa al éxito de Sketch. Los símbolos son para Sketch como CSS (hojas de estilo en cascada) para el diseño de sitios web. Permiten a los diseñadores reutilizar y editar en masa fácilmente los activos, lo que ahorra mucho tiempo, ayuda a crear un sistema de diseño listo para usar y proporciona coherencia en todas las pantallas.

Adobe comenzó con símbolos básicos y luego introdujo el panel de activos que combinaba símbolos, fuentes y colores en una sola ubicación. La edición de cualquiera de estos elementos muestra las actualizaciones resultantes en tiempo real. Sketch tiene estas características, pero Adobe XD ha brindado una experiencia de usuario más cohesiva y mejorada.

Sketch vs XD : Adobe XD tiene una ligera ventaja debido a los elementos combinados de la interfaz de usuario dentro del panel de activos.

Herramientas de diseño responsivo

Adobe XD proporciona un sólido conjunto de herramientas de diseño adaptable. Una característica destacada, el modo automático receptivo, adivina cómo debe responder la pantalla a los diferentes tamaños de dispositivos.

Esta es una característica increíblemente útil que se puede activar y desactivar con un simple botón deslizante. Si el modo automático no cumple con su comportamiento esperado, un diseñador puede cambiar las propiedades de respuesta manualmente.

Sketch no tiene esta función incorporada, pero tiene muchos complementos como Anima Toolkit que hacen bien el trabajo.

Sketch vs XD: Adobe XD tiene la ventaja aquí. Ofrecen una forma integrada de ver los efectos de respuesta en los elementos de la interfaz de usuario.

Complementos y complementos

El ecosistema de complementos dentro de Sketch es posiblemente una de sus mejores características. Hay cientos de complementos que amplían la funcionalidad de Sketch y permiten a los diseñadores usar funciones mejoradas mientras permanecen dentro del ecosistema de Sketch.

Los complementos son el equivalente de Adobe XD a los complementos. Adobe comenzó su ecosistema de complementos en 2018, por lo que no es tan sólido como Sketch. Eso no es una preocupación para Adobe, ya que su objetivo es tratar de reducir la necesidad de complementos y centrarse en crear funciones integradas en el software.

Sketch vs XD: Sketch tiene la ventaja con su extensa biblioteca de complementos.

Creación de prototipos con Auto-Animate

Adobe actualizó recientemente XD con una característica increíblemente útil para los diseñadores de UX: animación automática . Funciona haciendo transiciones suaves e inteligentes entre elementos de diferentes pantallas. Los resultados son impresionantes, lo que hace que la creación de prototipos sea una experiencia agradable con la que captar clientes potenciales. Sketch no ofrece esta funcionalidad, incluso con un complemento.

Otra gran función de creación de prototipos que introdujo Adobe es la compatibilidad con microinteracciones, por ejemplo, tirar de un panel desde el borde de la pantalla o hacer que aparezca un teclado. Adobe XD también admite la creación de prototipos de interfaces de usuario basadas en voz (como Alexa o Google Home).

Sketch vs XD: Adobe XD tiene la ventaja aquí con funciones de animación automática que ahorran tiempo y soporte para microinteracciones de las que carece Sketch.

Compartir y comentar

Los diseñadores interactúan con frecuencia con otros miembros del equipo, desarrolladores y partes interesadas: la capacidad de compartir diseños y recibir comentarios es una parte crucial del proceso de diseño. Como tal, Adobe XD incluye una funcionalidad integrada para que las maquetas y prototipos se compartan en línea para que cualquiera pueda agregar comentarios generales o señalar ubicaciones específicas en un diseño y dejar comentarios.

Estas funciones, combinadas con el modo de creación de prototipos dinámicos de Adobe XD, también se pueden probar en teléfonos móviles con la aplicación nativa de Adobe XD, o incluso grabarse para demostraciones no interactivas.

Sketch puede compartir y comentar usando herramientas de colaboración como Zeplin o integraciones con herramientas de terceros como Invision.

Sketch vs XD: Adobe tiene una ligera ventaja aquí con el uso compartido y los comentarios en línea integrados.

Especificaciones de diseño

En el transcurso de un proyecto de diseño, los diseñadores de UX a menudo necesitan compartir especificaciones de diseño con los desarrolladores. Adobe incluyó esta funcionalidad en XD, mientras que los usuarios de Sketch necesitarán usar integraciones como Zeplin o InVision.

Sketch vs XD: Adobe tiene una ventaja sobre Sketch porque las especificaciones de diseño están integradas y no requieren integración de terceros.

Control de versiones y colaboración en tiempo real

Dos funciones importantes en las que confían los diseñadores y desarrolladores son el control de versiones y la colaboración en tiempo real. Los grandes equipos de diseño que trabajan juntos en el mismo proyecto deben poder ver cuándo se han realizado cambios y acceder a un historial de esos cambios.

Adobe abordó la colaboración con la introducción de documentos en la nube . Esto brinda a todos los miembros del equipo, incluidos los desarrolladores, un lugar central para trabajar. Según Adobe, el siguiente paso para la función de documentos en la nube será el control de versiones.

Sketch ofrece control de versiones y colaboración en tiempo real con complementos, pero estas funciones no están integradas en el producto.

Sketch vs XD: Sketch gana este. Tienen control de versiones, aunque con complementos; esto no se ofrece actualmente en XD.

Resumen de funciones: Adobe XD frente a Sketch

Existen similitudes y diferencias entre la versión actual de Adobe XD y Sketch. Aquí hay una comparación de cada producto:

¿Es hora de cambiar las herramientas de diseño de UX?

Comparando características, Sketch y XD están cerca. Sketch carece de algunas características como la animación automática, el diseño de respuesta automática y la cuadrícula de repetición que son todas nativas de XD.

Lo único importante que aún le falta a Adobe XD es el control de versiones, que Sketch tiene gracias a los complementos. Espere que esto llegue a XD pronto, ya que Adobe continúa desarrollando el conjunto de funciones de documentos en la nube.

Es más fácil pasar de Sketch (y Photoshop o Illustrator) a XD que al revés, ya que XD puede abrir archivos de Sketch con una fidelidad excelente. Podría experimentar algunos problemas si depende de complementos solo de Sketch como Abstract o InVision Craft.

En algunos escenarios, la elección es obvia: para los usuarios de Windows, Sketch no está disponible y para los suscriptores de Adobe Creative Cloud, XD se incluye de forma gratuita con prototipos compartidos ilimitados. Eso no sucedió por accidente.

Pero Sketch está contraatacando. La empresa cerró recientemente una financiación de 20 millones de dólares y promete características importantes como la colaboración en equipo, la transferencia nativa y una versión web de la aplicación en 2019.

Si el control de versiones no es un problema crítico, entonces nunca ha sido un mejor momento para considerar el uso de Adobe XD. El compromiso de Adobe con la comunidad de diseño de la experiencia del usuario es evidente con funciones como el modo de respuesta automática, la cuadrícula de repetición y la creación de prototipos integrados. A pesar de su comienzo tardío, Adobe ha demostrado que puede representar un desafío formidable para Sketch.

Lectura adicional en el blog de diseño de Toptal:

• Adobe XD vs. Sketch: ¿Qué herramienta UX es adecuada para usted?
• Atomic Design and Sketch: una guía para mejorar el flujo de trabajo
• Diseñe con precisión: una revisión de Adobe XD
• Cosas que quizás no sepas sobre la tipografía en Sketch
• Familiarizarse con el desarrollo del complemento Sketch