Cómo usar guías y cuadrículas en Adobe XD

Ethan Parry explica cómo usar guías y cuadrículas para crear prototipos exitosos al diseñar interfaces UX con Adobe XD

El UX crece para desempeñar un papel más importante en la forma en que los diseñadores, desarrolladores y empresas atienden las necesidades de sus usuarios, la capacidad de repetir fácilmente y probar nuevas soluciones se ha vuelto invaluable.

Como el software de diseño líder para interfaces UX, Adobe XD hace que sea fácil y rápido crear prototipos y probar diferentes diseños UX. Más allá de dominar sus funciones básicas, comprender cómo usar las guías y cuadrículas del software es crucial para crear prototipos que sean efectivos, estéticamente agradables y consistentes en toda la experiencia del usuario.

Ethan Parry (@ethanparry), diseñador de servicios y consultor de investigación de UX, utiliza regularmente Adobe XD en su trabajo. A continuación explica las diferentes funciones de las guías y las cuadrículas (guides y grids), y cómo usarlas para aprovechar al máximo tu trabajo.

Guías en Adobe XD

Las guías o grids son líneas que puede superponer en la mesa de trabajo y que ayudan a dar forma a tu diseño y planificar dónde se colocarán los elementos. Al definir ciertos diseños de guía en tu proyecto, podrás lograr consistencia entre diferentes pantallas.

1. Para crear una guía vertical, desplaza el puntero sobre el borde izquierdo de la mesa de trabajo hasta que se convierta en dos flechas. Luego haz clic y sostenlo, arrástralo a la posición deseada y suéltalo. Puedes agregar tantas como quieras.

2. Para crear una guía horizontal, repite los mismos pasos, pero comienza colocando el puntero sobre el borde superior del tablero, haciendo clic, manteniéndolo presionado y arrastrando hacia abajo.

3. Si ya has agregado elementos a tu mesa de trabajo, puedes ajustar su posición con la herramienta Seleccionar. A medida que arrastras elementos de diseño al borde de las líneas, por ejemplo cuadros de texto, verás que se ajustan a la guía.

4. Hay algunas formas de transferir guías a otra mesa de trabajo. Si copias y luego pegas tu mesa de trabajo, además de copiar todas sus formas y texto, también copiarás sobre todas las guías. Si tienes una segunda mesa de trabajo en blanco y solo deseas copiar sobre las guías, simplemente selecciona la mesa de trabajo con las guías y en el menú superior dirígete a Ver > Guías > Copiar guías. Luego selecciona la mesa de trabajo en blanco y en el menú ve a Ver > Guías > Pegar guías.

5. Para bloquear las guías para que no se puedan mover o ajustar, selecciona la mesa de trabajo y dirígete a Ver > Guías > Bloquear todas las guías. Si quieres cambiarlas más tarde, puedes desbloquearlas yendo a Ver > Guías > Desbloquear todas las guías.

6. Para eliminar guías, desplaza el puntero sobre una guía hasta que veas aparecer las dos flechas. Si se trata de una guía horizontal, arrástrala hacia la parte superior de la mesa de trabajo hasta que vea un ícono de la papelera junto al puntero. Para guías verticales, arrástralos hacia la izquierda.

Cuadrículas en Adobe XD

Para ayudarte a garantizar que tus trabajos estén bien diseñados, Adobe XD ofrece dos opciones de cuadrícula o grids: cuadrículas cuadradas y cuadrículas de diseño. Parry recomienda el uso de cuadrículas de diseño cuando desees asegurarte de definir la estructura subyacente del diseño y ver cómo cada componente responde a diferentes puntos de interrupción, lo cual es particularmente importante al diseñar un proyecto responsive.

1. Para ver estas cuadrículas, selecciona tu mesa de trabajo y ve al inspector de propiedades. En la parte inferior, verás la selección de Cuadrícula, con una lista desplegable con Layout y Square (cuadrado). Si seleccionas el cuadro a la izquierda del menú desplegable, harás que el tipo de cuadrícula seleccionado sea visible. Puedes activar ambos simultáneamente y cambiar entre cada uno, si lo deseas. Además del menú desplegable, otra forma de controlar qué cuadrícula es visible es ir a Ver en la navegación del menú superior.

2. Una vez que una cuadrícula es visible, sus propiedades aparecerán en el inspector de propiedades. Para el layout, consiste en información como el número de columnas, el ancho del canal, el ancho de la columna y los márgenes, todo lo cual puedes ajustar. Para el cuadrado, será el tamaño del cuadrado.

Si quieres obtener más información sobre cómo usar Adobe XD para diseñar y prototipos de diseños de UX, apúntate al curso en línea de Ethan Parry, Introducción a Adobe XD.

También te puede interesar:

- 5 libros perfectos para iniciarse en UX.
- Tutorial Adobe XD: Funciones básicas.
- Recursos y herramientas gratis para diseño web.