Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Adobe XD
Webdesign

Cómo utilizar el ajuste responsivo y las restricciones en Adobe XD

by
Difficulty:BeginnerLength:ShortLanguages:

Spanish (Español) translation by Carlos (you can also view the original English article)

En este tutorial vamos a explorar algunas características nuevas en Adobe XD, es decir, "ajuste responsivo y restricciones". Estas características, agregadas en septiembre de 2018, permiten una escala real de los diseños dentro de Adobe XD, lo que nos brinda capacidades de diseño web realmente responsivos.

Para demostrar estas nuevas funciones, utilizaré el kit de Bones iOS wireframe disponible en Envato Elements:

Bones IOS Wireframe Kit
Kit Bones IOS Wireframe

Mira el video

Cambiando el tamaño antes de la actualización de XD

Antes de que Adobe XD presentara sus nuevas funciones de cambio de tamaño, cambiar el tamaño de un diseño significaba volver a colocar manualmente todos los elementos requeridos. Por ejemplo, hacer que tu artboard sea más grande, luego reposicionar, realinear y cambiar el tamaño de los elementos de la barra superior y todos los demás objetos en consecuencia. No es ideal.

Resizing Before the XD Update

El ajuste responsivo ahora

Ajustar el tamaño responsivo toma todo ese trabajo manual y arregla las cosas automáticamente. Abre un documento en Adobe XD y verás un cambio del tamaño responsivo en el panel de propiedades:

Responsive Resize toggle Adobe XD

Ahora, cuando cambies el tamaño del mismo artboard, verás que los objetos alineados centralmente permanecen en el centro, los objetos alineados a la derecha se mantienen a la derecha y los objetos alineados a la izquierda permanecen a la izquierda. Igualmente, cuando extiendo la mesa de trabajo verticalmente, la posición de los elementos de la interfaz de usuario se mantiene perfectamente.

Original and resized UI in Adobe XD
UI original y redimensionado en Adobe XD

Adaptando la alineación

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 se redimensiona el correo electrónico y las entradas de contraseña están demasiado alejadas unas de otras (como sabemos, la proximidad es un factor importante en el diseño de relaciones visuales).

email and password inputs are spaced a bit too far away from one another

Al agrupar primero las entradas, podemos informar a Adobe XD que queremos que estén conectadas visualmente, para que se mantengan unidas más cerca 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 respecto a cómo Adobe XD se ocupa del cambio de tamaño responsivo.

Debajo del cambio de tamaño responsivo, hay un interruptor para hacer que el proceso sea Manual, en lugar de Automático. Los controles nos permiten especificar, para cada objeto, a qué bordes de la mesa de trabajo queremos que se pegue, y si queremos mantener su altura o anchura fija.

Manual constraints in Adobe XD

Por ejemplo, aquí hay una interfaz en la que los objetos se redimensionan de forma automática. No está nada mal, pero podría ser mejor:

automatic resize
Cambio de tamaño automático

Con uno o dos de los elementos restringidos manualmente, podemos asegurarnos de que el botón de seguimiento se pegue al borde superior, que las pestañas hagan lo mismo y que todo el contenido de la publicación permanezca alineado a la izquierda:

Manual constraints much better
iRestricciones manuales: mucho mejores!

Conclusión

Descarga la última actualización de Adobe XD y juega con la nueva configuración de cambio de tamaño de respuesta. ¡Te garantizo que Te gustará lo que encuentres! Con esta actualización, Adobe ha hecho que un proceso muy tedioso sea extremadamente intuitivo y rápido, y combinado con una funcionalidad como Repeat Grid, encontrarás que el diseño responsivo en Adobe XD es especialmente poderoso para el diseño complejo de UI.

Aprende más sobre Adobe XD

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.