Adobe XD vs Sketch – Enfrentamiento 2020

Dos contendientes de peso pesado continúan luchando para capturar el primer lugar para la herramienta de diseño favorita: Adobe XD vs Sketch. ¿Qué herramienta los gobernará a todos? La respuesta no es simple. Dado que ambos han logrado un progreso extraordinario en los últimos años, se ha retrasado una comparación exhaustiva de las herramientas de diseño en cuanto a características, rendimiento y facilidad de uso.

Sketch ya estaba años por delante antes del debut de XD: seis, para ser exactos. Tenía una base de fans amplia y dedicada, estaba repleto de características y tenía un extenso ecosistema de complementos. Pero Sketch tenía un talón de Aquiles: solo funcionaba en Mac.

En 2016, Adobe subió la temperatura y saltó a la palestra. No solo combinaron Sketch con características similares en XD, sino que también lo pusieron a disposición en Windows. Dado que aproximadamente el 78% de las computadoras de escritorio del mundo funcionan con Windows, este fue un movimiento audaz y competitivo.

Adobe XD también llenó un vacío sustancial en la línea de Creative Suite. Fireworks recibió el saludo dorado y las funciones que ofrece XD no estaban disponibles en otras aplicaciones como Illustrator o Photoshop. XD no solo es la misma herramienta de diseño ligera y basada en vectores que Sketch, sino que también se integra mejor con el resto del ecosistema de Adobe Creative Suite.

Sin embargo, entre los diseñadores, las opiniones aún varían sobre qué herramienta es mejor. La batalla se ha convertido recientemente en una guerra total, ya que las funciones se agregan rápidamente a ambas herramientas, a menudo jugando a ponerse al día y frecuentemente imitándose entre sí.

Profundicemos y comparemos las siguientes características en Adobe XD vs Sketch:

• Interfaz de usuario
• Trabajar con símbolos/componentes maestros
• Paneles de activos y componentes
• Escalado de capas y componentes
• Duplicar y distribuir elementos
• Herramientas de diseño responsivo
• Complementos
• Prototipos
• Colaboración en equipo
• Entrega del desarrollador
• Control de versiones y bibliotecas compartidas
• Modo oscuro

Interfaz de usuario

Aunque Sketch y Adobe XD comparten una interfaz similar, la interfaz de usuario de Sketch tiene ventaja sobre XD . Se siente más como una herramienta de diseño robusta y profesional, mientras que XD se siente como una combinación reducida de Illustrator y Photoshop.

Un inconveniente importante en Adobe XD es que muestra el panel de activos al abrirlo de forma predeterminada. Esto no es lo que la mayoría de los diseñadores esperan. Al iniciar un documento de diseño, la mayoría de los diseñadores esperan ver el panel de capas de inmediato, no los activos ni los complementos .

➠ +1 a Sketch por su interfaz intuitiva.

Trabajar con símbolos/componentes maestros

Los "símbolos" de la biblioteca de diseño reutilizable están disponibles tanto en Sketch como en Adobe XD (se denominan "componentes maestros" en XD). Cuando se actualiza un símbolo o componente maestro, todas las demás instancias de ese componente en el proyecto reflejan la actualización.

Sin embargo, a diferencia de Adobe XD, la función Smart Layout de Sketch es más poderosa cuando se trabaja con dichos componentes maestros. Permite una mayor flexibilidad y flujos de trabajo más rápidos.

En Sketch, podemos asignar un diseño particular a un componente → arrastrar el componente al lienzo → usar anulaciones para personalizar el contenido, y el componente cambiará de tamaño según su nuevo contenido.

➠ +1 a Sketch porque hace mejor los símbolos.

Paneles de activos y componentes

Sketch y Adobe XD comparten paneles de activos/componentes similares con algunas diferencias.

Para los activos, XD tiene un menú desplegable que brinda a los diseñadores la opción de ver solo categorías específicas, además de "Todos". Los diseñadores también pueden alternar entre una "Vista de cuadrícula" y una "Vista de lista". Estas opciones hacen que el panel de activos en XD sea significativamente más fácil de usar. Además, un menú desplegable para ver categorías específicas brinda más flexibilidad para agregar más categorías en el futuro.

Sketch es menos flexible. Muestra los activos del proyecto bajo un control segmentado de tres botones (para símbolos, estilos de texto y estilos de color). Con Sketch, los componentes se pueden buscar, pero no entre categorías. XD busca mejor al buscar a través de todos los componentes en todos los activos.

➠ +1 a Adobe XD porque administra mejor los activos.

Uso de componentes maestros de otras bibliotecas

Con Sketch, los diseñadores pueden agregar símbolos maestros a las mesas de trabajo desde una multitud de bibliotecas vinculadas, locales o compartidas en línea, de forma rápida y sencilla. En Adobe XD, los "activos vinculados" se pueden colocar en diseños desde la "nube de XD" (componentes, colores y estilos de carácter), pero debido a este flujo de trabajo incómodo, Adobe XD es mucho menos flexible.

➠ +1 a Sketch para una mejor UX al trabajar con componentes maestros.

Edición de estilos de color

Una vez agregado a la biblioteca de activos, Adobe XD permite a los diseñadores editar estilos de color y observar el cambio de color en tiempo real en las mesas de trabajo. En Sketch, hay una solución para editar colores globalmente, pero no es tan intuitiva como Adobe XD.

➠ +1 a Adobe XD para una mejor edición de estilos de color.

Configuración de un sistema de diseño

Sketch tiene una excelente manera de organizar componentes al crear sistemas de diseño (iconos, botones, estilos de color, estilos de texto, etc.). Usando una barra inclinada '/' al crear y nombrar estos activos, se agrupan en el panel de componentes y se organizan jerárquicamente en el menú de inserción. Es un método excelente para organizar componentes de forma lógica y tiene sentido para los diseñadores que trabajan con cientos de elementos de diseño.

Adobe XD no ofrece esta flexibilidad.

➠ +1 a Sketch para una fácil gestión de los activos de diseño.

Escalado de capas y componentes

Adobe XD no maneja bien el escalado de objetos que contienen múltiples componentes. En general, Sketch maneja esto mucho mejor. Conserva muy bien el espacio proporcionado entre los elementos al escalar un símbolo, por ejemplo.

Además, Sketch tiene una función útil de Escalar capas ( Comando+K ) en la que se puede escalar un grupo de elementos usando porcentajes o números mientras se especifica desde qué origen escalar. Sketch cambia el tamaño de las capas seleccionadas, mientras que los atributos de estilo, como el grosor del borde, el tamaño de la sombra y el radio, se escalarán adecuadamente.

Otra característica útil de Sketch es la capacidad de cambiar el tamaño de los elementos en el inspector por números o porcentajes. Esto es ligeramente diferente del comando Escalar capas anterior. Al agregar las siguientes letras a los porcentajes o números (c/m, t, b, r ), Sketch escalará el elemento seleccionado desde ese origen. Por ejemplo, " 50%c " escalará el elemento seleccionado un 50% desde el centro.

• c/m: escala desde el centro
• t: escala desde arriba
• b: escala desde abajo
• r: escala desde la derecha

Nota : la opción "escala desde la izquierda" no se muestra porque es el comportamiento predeterminado en Sketch.

Vea cómo funciona el escalado de capas en Sketch→

➠ +1 a Sketch para más versatilidad y precisión al escalar elementos.

Duplicar y distribuir elementos

Repetir cuadrícula en Adobe XD es una característica útil que convierte un grupo de elementos en una cuadrícula que repite esos objetos. La mayoría de los diseñadores probablemente lo probaron varias veces al explorar XD, pero ¿cuántas veces lo usarán los diseñadores? Y desafortunadamente, Repeat Grid no se ajusta a las capas, una deficiencia importante.

Con Sketch, por otro lado, podemos mantener presionada la tecla Opción y arrastrar una capa para duplicarla (mantenga presionada la tecla Shift también para restringirla). A continuación, Comando+D repite el elemento tantas veces como desee con el mismo espacio exacto entre duplicados.

Además, Sketch acelera los flujos de trabajo de diseño con Smart Distribute . Brinda a los diseñadores más control sobre la creación de cuadrículas, el ajuste del espaciado y el reordenamiento de las capas. Además de las muchas pequeñas cosas útiles que hace Smart Distribute , tiene un botón mágico "Ordenar" en el inspector.

Después de colocar varios objetos al azar en una mesa de trabajo, podemos hacer clic en el botón Ordenar y mágicamente los distribuirá uniformemente en una cuadrícula. Podemos hacer ajustes adicionales al espaciado arrastrando los controladores que aparecen (al pasar el mouse sobre el grupo) o ingresando valores manuales para una precisión absoluta.

Se han creado varios complementos de Sketch para ayudar a los diseñadores con cuadrículas, guías y distribución, además de Smart Distribute . Aquí hay tres:

Distribuir capas • SketchDistributor • Guías distribuidas uniformemente

➠ +1 a Sketch para duplicar y distribuir mejor los elementos.

Herramientas de diseño responsivo

Tanto Adobe XD como Sketch tienen características de respuesta automática similares. Ambos permiten el control manual del ancho y la altura fijos de un elemento mientras fijan el elemento a un origen particular del cuadro delimitador. Adobe XD también tiene una herramienta inteligente de "cambio de tamaño sensible" que determina automáticamente el cambio de tamaño de elementos y grupos, pero no es perfecta.

Sketch tiene una herramienta de respuesta inteligente llamada Smart Layout . Los diseñadores pueden crear componentes receptivos y cada vez que se ajusta su contenido, los componentes se adaptan al cambio, lo que permite una mayor flexibilidad y flujos de trabajo más rápidos.

Con Smart Layout , los diseñadores pueden crear fácilmente botones que cambian de tamaño automáticamente mientras mantienen márgenes y relleno consistentes, sin importar cuán largas sean las etiquetas de texto. Smart Layout también funciona con grupos.

Adobe XD ha implementado recientemente una función de "cambio de tamaño sensible", pero aún va a la zaga de Sketch.

➠ +1 a Sketch para funciones de diseño receptivas rápidas y sencillas.

Complementos

Entre una sobreabundancia de herramientas de diseño digital, Sketch tiene uno de los ecosistemas de complementos más sólidos. Tener miles de complementos es una de las características más atractivas de Sketch, y los desarrolladores continuamente crean complementos útiles que amplían la funcionalidad de Sketch.

La colección de complementos de Adobe XD palidece en comparación. Incluso si el mismo desarrollador crea una versión XD de un complemento de Sketch, XD es demasiado reciente para que el complemento sea ampliamente adoptado. Además, muchos complementos nuevos de XD no agregan suficiente valor para que los diseñadores los acepten.

➠ +1 a Sketch por su extenso ecosistema de complementos.

Prototipos

Con Auto-animate , Adobe XD ha subido la apuesta por la creación de prototipos. Con la función de animación automática "inteligente", los diseñadores pueden crear transiciones atractivas en prototipos para visualizar el movimiento del contenido a través de las pantallas. XD también puede agregar sonidos a los prototipos con una nueva "acción" que reproduce efectos de sonido y otros archivos de audio en respuesta a activadores.

Sketch tiene algunas transiciones básicas entre pantallas para la creación de prototipos, pero no ofrece la misma fluidez con las microinteracciones. No es seguro cuándo Sketch puede agregarlos. El enfoque, al parecer, está más en la incorporación de otras características valiosas, como los Asistentes en Sketch.

Lo más probable es que los creadores de Sketch sientan que existen muchas otras herramientas para crear prototipos con microinteracciones muy detalladas, como ProtoPie. Es potente y puede importar fácilmente diseños de Sketch, Figma y Adobe XD.

Tanto Sketch como Adobe XD están codo a codo cuando se trata de proporcionar aplicaciones para previsualizar prototipos en dispositivos móviles: Sketch Mirror y Adobe XD . Las aplicaciones llevan el prototipo diseñado en un escritorio a la pantalla del móvil a través de un cable USB o wifi.

➠ +1 a Adobe XD para transiciones autoanimadas para visualizar prototipos.

Colaboración en equipo

Ambas herramientas ofrecen colaboración en equipo. Sketch tiene Sketch for Teams donde los diseñadores que usan un espacio de trabajo en la nube compartida pueden compartir ideas, mantenerse sincronizados con las bibliotecas de la nube compartidas , verificar el progreso de otros proyectos del equipo y dejar comentarios sobre los diseños, todo en un solo lugar.

Además, las partes interesadas y los colaboradores invitados que no tienen acceso a la aplicación Sketch pueden ver, inspeccionar y comentar los diseños en el navegador. El traspaso del desarrollador también está integrado en Sketch mediante Sketch for Teams .

En el momento de escribir este artículo, la versión premium de Adobe XD permite a los equipos editar archivos XD junto con otros diseñadores (en línea y fuera de línea) a través de Creative Cloud, compartir archivos para su revisión y entregar fácilmente las especificaciones a los desarrolladores. Todas estas funciones se encuentran actualmente en versión beta .

➠ +1 a Sketch para una colaboración en equipo sencilla.

Entrega del desarrollador

Entregar los diseños a los desarrolladores es un paso crucial, y tanto Adobe XD como Sketch lo manejan igualmente bien. Al compartir proyectos a través de plataformas en línea, los diseñadores pueden generar especificaciones y colaborar con los desarrolladores para ayudarlos a convertir los diseños en sitios web y aplicaciones.

➠ +1 a Adobe XD y +1 a Sketch para la entrega del desarrollador.

Control de versiones y bibliotecas compartidas

El control de las versiones del archivo de diseño es esencial cuando se trabaja con otros diseñadores en el mismo proyecto. También facilita la colaboración en equipo y la retroalimentación del diseño de manera más eficiente. Sketch ha integrado recientemente estas funciones en Sketch for Teams . Con Sketch Cloud , los diseñadores pueden compartir archivos de diseño y bibliotecas que facilitan el trabajo con sistemas de diseño en equipos distribuidos.

Adobe XD también tiene un sistema de versiones de archivos en la nube con Adobe Creative Cloud. Si bien el sitio web de Creative Cloud mantiene versiones de archivos XD, no es posible volver a versiones anteriores. Para volver a una versión anterior, los diseñadores deben abrir el archivo en Adobe XD a través del sitio web de Creative Cloud y luego copiar y pegar el contenido en el documento actual. Las versiones de archivos también se eliminan automáticamente después de 30 días, a menos que se nombren o se marquen como favoritos. En otras palabras, no es un proceso continuo.

Al igual que Sketch, XD también facilita a los equipos el uso de activos compartidos mediante Creative Cloud Libraries. Los diseñadores pueden traer colores, estilos de caracteres y gráficos a XD desde estas bibliotecas.

➠ +1 a Sketch para una fácil versión de archivos y bibliotecas compartidas en la nube.

Modo oscuro

Se ve genial y hace que los diseños se destaquen.

Muchos diseñadores prefieren trabajar en habitaciones con poca luz para poder ver sus creaciones en la pantalla sin reflejos ni deslumbramientos. Una interfaz de usuario en modo oscuro encaja bien en ese entorno. Proporciona un excelente contraste para casi todos los colores y hace que el contenido visual sea más llamativo.

El modo oscuro no solo se ve genial, sino que se sabe que minimiza la "fatiga visual digital". Seamos realistas, los diseñadores miran las pantallas la mayor parte del día. La fatiga visual digital es una condición común que afecta a millones de personas. Causado por todo, desde el uso excesivo de la computadora hasta la exposición regular a la luz brillante, puede causar dolores de cabeza, dolor de cuello, visión borrosa y ardor/escozor en los ojos.

Colores acentuados y resaltados

Sketch admite el modo oscuro desde Sketch 52 (octubre de 2018). También es compatible con las preferencias globales de color Accent and Highlight de macOS Mojave. Las opciones seleccionadas que están resaltadas en el panel Capas, el Inspector y en otras partes de la aplicación coincidirán con las preferencias del sistema.

El modo oscuro no está disponible en Adobe XD, ni siquiera en macOS.

➠ +1 a Sketch para modo oscuro.

El ganador de Adobe XD vs Sketch Showdown es… Sketch

Sketch gana la batalla por la supremacía de las herramientas de diseño con una ventaja significativa sobre Adobe XD.

En algunos escenarios, la elección es obvia: Sketch no está disponible para Windows. Una ventaja notable para los suscriptores de Adobe Creative Cloud también es que el "plan de inicio" de XD es gratuito, aunque tiene limitaciones considerables.

La versatilidad de Sketch debería obligar a los diseñadores en macOS a elegir Sketch sobre XD. Su interfaz, complementos, funciones de colaboración, herramientas de diseño adaptable, símbolos reutilizables, bibliotecas compartidas y otras funciones útiles superan a las de Adobe XD.

Vale la pena señalar que no es posible mover archivos de diseño de XD a Sketch . La transición de Sketch (y Photoshop o Illustrator) a XD es más fácil porque XD puede abrir archivos de Sketch. Pueden surgir algunos problemas al usar complementos solo de Sketch como Abstract o InVision Craft, pero esto se puede evitar con un poco de limpieza.

A algunos diseñadores les encanta Adobe XD por su función de animación automática. Es una característica atractiva que hace que los prototipos se vean geniales. Sin embargo, los diseñadores deben tener en cuenta que es solo un atributo elegante. Teniendo en cuenta las ventajas de Sketch vs XD, las compensaciones no valen la pena. Hay disponibles muchas herramientas sofisticadas de creación de prototipos que funcionan a la perfección con Sketch.

La batalla aún no ha terminado. Los próximos años deberían ver una guerra intensa y total entre Adobe XD y Sketch. Al final, son los diseñadores quienes se beneficiarán a medida que se agreguen más capacidades a ambas herramientas de diseño. Hará que su vida laboral diaria sea mucho más fácil, y eso es algo que esperamos con ansias.

¡Háganos saber lo que piensas! Por favor, deje sus pensamientos, comentarios y comentarios a continuación.

• • •

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

• Diseño con precisión: una revisión de Adobe XD
• Explorando el diseño multimodal: un tutorial de Adobe XD
• Forma y función: una guía de las principales herramientas de estructura alámbrica
• Domina tu oficio con estas herramientas UX superiores
• Los mejores portafolios de diseñadores de UX: estudios de casos y ejemplos inspiradores