Spanish (Español) translation by Carlos (you can also view the original English article)
Adobe XD es una herramienta basada en vectores para el diseño de UI y UX y se puede usar para diseñar cualquier cosa, desde aplicaciones para smartwatches hasta sitios web completos. Veamos lo que ofrece a los diseñadores y por qué se ha convertido en una herramienta tan poderosa en la industria del diseño web.
¿Qué es XD?
Adobe XD se presentó por primera vez como «Project Comet» en la conferencia anual Adobe MAX en 2015. En aquel momento, significó una bocanada de aire fresco para cualquiera que aún estaba usando Photoshop o Illustrator para el diseño de interfaces de usuario. Después de todo, la web presenta desafíos de diseño muy diferentes a los del diseño impreso.
Yo mismo empecé diseñando sitios web en Photoshop, así que conozco todas las dificultades (especialmente en lo que respecta al diseño fluido y responsivo), pero XD es completamente diferente. Fue desarrollado desde cero, pensando específicamente en el diseño de UI y UX, por lo que tiene una gran cantidad de funciones que nunca existieron en otras aplicaciones gráficas.
¿Para qué se utiliza Adobe XD?
Es importante recordar que Adobe XD resuelve dos problemas principales que Photoshop y otras aplicaciones de gráficos no podían:
- El diseño de interacción no es estático. Un diseñador no puede comunicar un diseño fluido y dinámico usando solamente píxeles.
- Un proceso de diseño moderno implica más que un artículo acabado pulido. El wireframing, la iteración y el comportamiento forman parte de la toma de decisiones colaborativa con el diseño de UI y UX.
Adobe XD es ideal para el diseño de UI basado en vectores, wireframing, diseño interactivo, creación de prototipos, diseño web y diseño de aplicaciones de alta fidelidad. Es una herramienta tanto para diseñadores individuales como para equipos completos.
Plantillas gráficas de Adobe XD en Envato Elements
Puedes crear hermosos proyectos con las plantillas gráficas de Adobe XD de alta calidad que tiene Envato Elements. Las descargas son ilimitadas, una tarifa mensual, ¡todos los recursos de diseño que necesites!
Funciones de Adobe XD
Entre las funciones que tiene Adobe XD podemos encontrar las siguientes:
- Herramientas de diseño de prototipos
- Transformaciones 3D
- Animaciones y diseño de transiciones.
- Componentes (que son completamente fluidos)
- Soporte para plugins y extensiones de terceros
- Cambio de tamaño responsivo del contenido y el diseño
- Repeat grids
Estas son solo algunas de las excelentes funciones que se han podido incorporar a Adobe XD, pues se empezó desde cero.
Mis 3 funciones favoritas son:
1. Repeat Grids (Cuadrículas de repetición)
Las cuadrículas de repetición son impresionantes. Te permiten hacer copias de un elemento y organizarlas automáticamente en una cuadrícula. Usando los controles, puedes cambiar fácilmente el espaciado vertical y horizontal. Esto te puede ahorrar una gran cantidad de tiempo, ya que evita la necesidad de copiar y pegar (y cambiar) manualmente los elementos de tu diseño.
2. Componentes de Adobe XD
La segunda función en mi lista serían los componentes y los estados de los componentes. Un componente de Adobe XD es un elemento reutilizable que funciona con la lógica de «principal» e «instancia».
A una copia del componente principal se le denomina «instancia». Cualquier cambio realizado en el componente principal se refleja en la instancia, sin embargo, las instancias se pueden cambiar independientemente de componente principal. Los «estados» son variaciones del componente, y en Adobe XD puedes cambiar entre estados muy fácilmente tanto en el modo de diseño como en el de prototipo.
3. Activos de los documentos
Por último, tenemos los activos de los documentos, que te permiten guardar colores y estilos de caracteres en un solo repositorio y luego aplicarlos a otros elementos.
Estos, junto con los componentes, también se guardan en una biblioteca de documentos que se puede compartir con otras personas. Esta es una función realmente útil para crear sistemas de diseño, por ejemplo, o para colaborar en trabajos individuales.
Creación de prototipos en Adobe XD
Con esto finalizo mis tres funciones favoritas, pero para la mayoría de las personas, el poder hacer prototipos es la primera de la lista, y con justa razón. Con esta función, puedes crear animaciones realmente fluidas y demostrar tus diseños en un entorno más genuino; con transiciones, y múltiples pantallas, y estados de objetos. Dar vida a tus diseños de esta forma y permitir que los usuarios interactúen con ellos es muy valioso.
Precio y disponibilidad de la plataforma
Algo que me encanta de Adobe XD es que es gratis. Tiene un plan de pago para quien quiera acceder a las funciones de colaboración, pero la aplicación gratuita es más que suficiente para la mayoría de las personas. Otro punto a favor es que está disponible para Mac OS y para Windows, y también puedes guardar todos tus archivos XD en Adobe Cloud, lo que significa que podrás acceder a ellos desde múltiples dispositivos.
Para obtener Adobe XD, visita https://www.adobe.com/products/xd o, si tienes instalada la aplicación Creative Cloud y tienes una suscripción válida, puedes descargarla directamente desde allí.
Deberías probar Adobe XD
En síntesis, Adobe XD es una herramienta increíble para cualquier persona interesada en el diseño de UI y UX, y sin duda eleva tu trabajo más allá de lo que Photoshop o Illustrator son capaces de hacer. Es una herramienta rápida, fácil de aprender y se actualiza constantemente con nuevas funciones y mejoras.
En Tuts+ encontrarás muchos tutoriales y cursos de Adobe XD:
Adobe XDAdobe XD avanzado para todos
Adobe XDMejores sistemas de diseño con Adobe XD para Visual Studio Code
Adobe XDCómo crear un diseño de interfaz de usuario para reservaciones de hotel en Adobe XD
Adobe XDCómo crear el diseño de interfaz de usuario de una aplicación de finanzas en Adobe XD
Y también encontrarás recursos que se actualizan periódicamente:
