Spanish (Español) translation by Luis Chiabrera (you can also view the original English article)
En este tutorial vamos a enfocarnos en Adobe XD y sus características nuevas, estas son, "restricciones y cambio de tamaño responsive". Estas características, añadidas en septiembre de 2018, permiten una escala real de los diseños dentro de Adobe XD, lo que nos brinda capacidades genuinas de diseño web responsive.
Para este tutorial Adobe XD demostraré estas nuevas funciones, usaré el Bones iOS wireframe kit disponible en Envato Elements:
Mira el video
Cambiando el tamaño antes de la actualización de XD
Antes de que Adobe XD introdujera sus nuevas funciones de cambio de tamaño, cambiar el tamaño de un diseño significaba reposicionar manualmente todos los elementos necesarios. Por ejemplo, harías tu mesa de trabajo más grande, luego reubicarías, realinearías y cambiarías el tamaño de los elementos de la barra superior y todos los demás objetos en consecuencia. No es ideal.
Cambio de tamaño responsive actual
El cambio de tamaño responsive toma todo ese trabajo manual y arregla las cosas automáticamente. Abre un documento en Adobe XD y notarás una palanca de cambio de tamaño responsive en el panel de propiedades:
Ahora, cuando cambio el tamaño de la misma mesa de trabajo, verás que los objetos alineados en el centro permanecen en el centro, los objetos alineados a la derecha se quedan a la derecha y los objetos alineados a la izquierda permanecen a la izquierda. Del mismo modo, cuando alargo la mesa de trabajo verticalmente, la posición de los elementos de la interfaz de usuario se mantiene perfectamente.
Alineación adaptable
La alineación y el espaciado de los objetos se pueden adaptar a tus necesidades. Por ejemplo, si observas los cuatro elementos en la parte inferior de nuestra pantalla de demostración, verás que cuando cambias el tamaño, las entradas de correo electrónico y contraseña están demasiado separadas entre sí (como sabemos, la proximidad es un factor importante en el diseño de relaciones visuales).
Al agrupar primero las entradas, podemos informar a Adobe XD que queremos que estén conectadas visualmente, de modo que se mantengan más juntas al cambiar el tamaño (observa la línea rosa alrededor del grupo):
Restricciones
Las restricciones manuales llevan las cosas un paso más allá al permitirnos ser aún más específicos con la forma en que Adobe XD maneja el cambio de tamaño responsive.
Debajo de la palanca de cambio de tamaño responsive hay un botón para hacer que el proceso sea manual, en lugar de automático. Los controles que tenemos nos permiten especificar, para cada objeto, a qué bordes de la mesa de trabajo queremos que se adhiera, y si queremos mantener fija su altura o ancho.
Por ejemplo, aquí hay una interfaz en la que los objetos se redimensionan automáticamente de manera responsiva. No está nada mal, pero podría ser mejor:
Con uno o dos de los elementos restringidos manualmente, podemos asegurarnos de que el botón follow se mantenga en el borde superior, las pestañas hagan lo mismo y el contenido de la publicación permanezca alineado a la izquierda.:
Conclusión
Descarga la última actualización de Adobe XD y juega con la nueva configuración de cambio de tamaño responsive. ¡te garantizo que te gustará lo que encuentres! Con esta actualización, Adobe ha hecho que lo que era un proceso muy tedioso sea extremadamente intuitivo y rápido, y combinado con funciones como Repeat Grid encontrarás el diseño responsive en Adobe XD especialmente poderoso para el diseño de interfaces de usuario complejas.
Aprende más sobre cómo usar Adobe XD y sus características
Si te gustó este tutorial de Adobe XD, te encantará nuestro curso gratuito sobre animación automática de Adobe XD, característica simple pero poderosa que te permite vincular mesas de trabajo en un prototipo con una animación hermosa y auténtica. O echa un vistazo a los siguientes tutoriales y cursos:
By
