Guía del usuario Cancelar

Usar guías y cuadrículas en XD

¿Busca información sobre la alineación de activos de diseño mediante guías y cuadrículas? ¡Ha venido al lugar correcto!

¡Hola, me llamo Jeanee! Diseñadora visual que trabaja en un proyecto de diseño de UX en XD con varias mesas de trabajo y objetos.

 
  • Está buscando recursos para diseñar y colocar rápidamente objetos mediante guías.

 

  • Necesita ayuda para alinear y definir la estructura de objetos dentro del proyecto de diseño mediante cuadrículas.

¿Le suena familiar? Si se tiene que enfrentar a desafíos de este tipo, siga leyendo para aprender a crear y utilizar guías y cuadrículas en las mesas de trabajo.

Antes de continuar

Crear y administrar guías

Una vez colocadas las mesas de trabajo en el lienzo del diseño, se agrega un área en la parte superior e izquierda de las mesas de trabajo que permite arrastrar las guías. Puede ajustar rápidamente a los centros horizontales y verticales, copiarlos y pegarlos en varias mesas de trabajo, eliminarlos y cambiar su visibilidad.

Siga leyendo para aprender a crear y administrar guías.

Añadir guías

Copiar-pegar guías

Eliminar guías

Borrar, ocultar y bloquear guías

Crear guías

¿Desea alinear y colocar los objetos dentro de las mesas de trabajo de arriba abajo? Utilice guías verticales. Si desea alinear y colocar objetos de izquierda a derecha, utilice guías horizontales. 

Guías verticales

Añadir guías dentro de las mesas de trabajo

Para crear una guía vertical, pase el puntero sobre el borde izquierdo de la mesa de trabajo hasta que aparezca el icono . Haga clic y mantenga presionado el icono y arrástrelo a la posición deseada.

Guías horizontales

Añadir guías dentro de las mesas de trabajo

Para crear una guía horizontal, pase el puntero sobre el borde superior de la mesa de trabajo hasta que aparezca el icono . Arrastre y suelte en la posición deseada.

Copiar y pegar guías

Ahora que ha creado guías, puede utilizar la opción Copiar/Pegar guías para duplicarlas rápidamente.

Copiar guías

Copiar guías dentro de una mesa de trabajo

Para copiar guías de una mesa de trabajo, selecciónela y haga clic en Ver > Guías > Copiar guías.

Pegar guías

Pegar guías dentro de una mesa de trabajo

Para pegar las guías copiadas, haga clic en Ver o haga clic con el botón derecho en la mesa de trabajo > Guías > Pegar guías.

Eliminar guías

Puede elegir eliminar una o varias guías a la vez.

Para eliminar una guía, haga clic y arrastre la guía fuera de la mesa de trabajo.

Para eliminar varias guías de una mesa de trabajo, selecciónela y haga clic en la opción Ver haciendo clic con el botón derecho en la mesa de trabajo. Seleccione Guías > Borrar guías.

Borrar guías añadidas a una mesa de trabajo

Ocultar y bloquear guías

¿Desea ocultar temporalmente las guías y activarlas cuando sea necesario? Utilice la opción Ocultar todas las guías.

También puede bloquear las guías en todas las mesas de trabajo para evitar que se muevan o ajusten accidentalmente.

Para ocultar y bloquear guías en macOS y Windows:

Ocultar guías

Ocultar guías

  • Haga clic en la opción Ver > Ocultar todas las guías en la barra de menú superior. También puede utilizar Comando + ; para ocultar las guías en macOS.
  • Haga clic con el botón derecho en la mesa de trabajo y seleccione Guías > Ocultar todas las guías. También puede utilizar Ctrl + ; para ocultar las guías en Windows.

Bloquear guías

Bloquear todas las guías en las mesas de trabajo

  • Haga clic en la opción Ver > Bloquear todas las guías en la barra de menú superior. También puede utilizar Comando + Mayús + ; para bloquear las guías en macOS.
  • Haga clic con el botón derecho en la mesa de trabajo y seleccione Guías > Bloquear todas las guías. También puede utilizar Ctrl + Mayús + ; para ocultar las guías en Windows.

Ajustar para alinear objetos mediante guías inteligentes

Una vez aprendidos los conceptos básicos de cómo crear y administrar guías, puede utilizar guías inteligentes para ajustar temporalmente las guías al crear o manipular objetos o mesas de trabajo. 

Guías inteligentes

Las guías inteligentes están habilitadas de manera predeterminada. Al mover un objeto o una mesa de trabajo, las guías inteligentes le permiten alinear, editar y transformar objetos o mesas de trabajo en relación con los demás objetos, mesas de trabajo o ambos mediante alineación de ajustes.

Colocación de objetos mediante cuadrículas

Una vez aprendidos los conceptos básicos de las guías en XD, siga adelante y aprenda a definir la estructura de diseño y a alinear objetos dentro de la mesa de trabajo con cuadrículas de diseño o cuadradas. 

Para añadir cuadrículas de diseño o cuadradas, seleccione una o varias mesas de trabajo. Vaya a la sección Cuadrícula en el Inspector de propiedades y elija Diseño o Cuadrada.

Cuadrículas de diseño

Colocación de objetos dentro de cuadrículas de diseño

Las cuadrículas de diseño son cuadrículas de columna, útiles para alinear objetos de diseño o diseñar diferentes tamaños de pantalla. Puede ajustarlos de forma rápida y sencilla en función de sus necesidades.

Cuadrículas cuadradas

Colocar cuadrículas cuadradas

Las cuadrículas cuadradas tienen líneas horizontales y verticales para ajustar el tamaño y la alineación de los objetos con precisión al diseñar aplicaciones móviles o iconos.

Establecer preferencias de cuadrícula

Una vez agregadas las cuadrículas de diseño y cuadradas a las mesas de trabajo, puede personalizar las opciones de visualización de las cuadrículas ajustando las preferencias en la sección Cuadrícula del Inspector de propiedades. Continúe leyendo para aprender a cambiar el tamaño de la cuadrícula, el número de columnas, las propiedades del medianil y los márgenes de las cuadrículas.

Preferencias de cuadrícula cuadrada

En función de sus necesidades de diseño, puede cambiar el tamaño de la cuadrícula para las cuadrículas cuadradas.

Cambiar tamaño de cuadrícula cuadrada

El tamaño de cuadrícula es la distancia entre las líneas de cuadrícula de la cuadrícula cuadrada. Para editar el valor del tamaño de la cuadrícula, introduzca el número requerido en el campo Tamaño de cuadrado del Inspector de propiedades.

Preferencias de cuadrícula de diseño

Con una cuadrícula de diseño aplicada a una mesa de trabajo, puede establecer el número de columnas, el ancho de columna, las propiedades de medianil y los tamaños de margen en la sección Cuadrícula del Inspector de propiedades.

Cambiar número de columnas

Cambiar número de columnas en cuadrícula de diseño

Introduzca el valor en el campo Columnas. Para diseños web, normalmente se utilizan cuadrículas de 12 o 16 columnas. 

Cambiar anchura de columna y medianil

Cambiar propiedades de medianil en cuadrícula de diseño

Para cambiar la anchura de las columnas, introduzca el valor en el campo Anchura de columna. Para definir su propia anchura de medianil, edite el campo predeterminado Anchura de medianil

Ahora que ha modificado el número de columnas, la anchura del medianil y la anchura de columna, aprenderá a ajustar los márgenes de la mesa de trabajo. Los márgenes son la distancia entre la cuadrícula de diseño y el borde de la mesa de trabajo. Siga leyendo para aprender a ajustar los márgenes en todos los lados.

Cambiar el margen izquierdo o derecho vinculado

Cambiar el margen izquierdo o derecho vinculado

Para ajustar el margen vinculado en el lado izquierdo y derecho, haga clic en el icono  y edite el valor.

Cambiar el margen de cada lado

Cambiar el margen de todos los lados

Para ajustar los márgenes izquierdo, derecho, superior e inferior de forma individual, haga clic en el icono  y, a continuación, introduzca los valores.

Más posibilidades con las cuadrículas

Ahora que ya sabe cómo establecer las preferencias para las cuadrículas, siga leyendo para aprender a añadir colores de cuadrícula y controlar su visibilidad.

Añadir colores

Mostrar u ocultar cuadrículas

Añadir colores

¿Desea modificar el aspecto de las cuadrículas? Utilice el selector de color del Inspector de propiedades para añadir y cambiar el color de la cuadrícula.

Añadir colores en las cuadrículas de diseño y cuadradas

A. Campo de color B. Regulador de color C. Cuentagotas 

Haga clic en la casilla situada junto a Tamaño cuadrado para cuadrículas cuadradas y Columnas para cuadrículas de diseño. 

Desde el selector de color puede:

  • Ajustar el color usando el campo de color y el regulador de color.
  • Usar la Herramienta Cuentagotas para seleccionar un color de una mesa de trabajo.
  • Establecer la opacidad del relleno utilizando el regulador de color o escribiendo un valor en porcentaje. Si establece el valor en 0, la cuadrícula de diseño cambia a la vista de contorno.

Ocultar y mostrar cuadrículas

Puede controlar la visibilidad de las cuadrículas de diseño y cuadradas mediante la opción Ocultar cuadrículas de diseño/cuadradas o Mostrar cuadrículas de diseño/cuadradas.

Ocultar cuadrícula de diseño

Mostrar u ocultar cuadrículas de diseño

  • Elija Ver > Ocultar cuadrícula de diseño. También puede utilizar Comando + Mayús + ' para ocultar las cuadrículas de diseño en macOS.
  • En el Inspector de propiedades, seleccione un tipo de cuadrícula de la lista desplegable Cuadrícula y seleccione la casilla próxima a la lista desplegable. También puede utilizar Ctrl + Mayús + " para ocultar las cuadrículas de diseño en Windows.

Mostrar cuadrícula cuadrada

Mostrar u ocultar cuadrículas cuadradas

  • Seleccione Ver > Mostrar cuadrícula cuadrada. También puede utilizar Comando + ' para mostrar cuadrículas cuadradas en macOS.
  • En el Inspector de propiedades, seleccione un tipo de cuadrícula de la lista desplegable Cuadrícula y seleccione la casilla próxima a la lista desplegable. También puede utilizar Ctrl + " para mostrar cuadrículas cuadradas en Windows.

Vídeo: ¿Cómo puedo añadir guías y cuadrículas de diseño?

Consejos y trucos

  • Para ajustar un objeto a una cuadrícula de diseño o cuadrada, arrastre un objeto hacia la cuadrícula hasta que uno o más de los bordes del objeto estén dentro de la zona de ajuste de la cuadrícula.
  • Las guías se ajustarán a los objetos seleccionados o a los objetos de nivel superior dibujados en el lienzo. Para deshabilitar el comportamiento de ajuste, presione  (en macOS) o Ctrl (en Windows). 
  • Para colocar la guía en incrementos de 10 píxeles en el lienzo, pulse Mayús.
  • Para volver al aspecto predeterminado de cuadrícula cuadrada o de diseño, haga clic en la opción Usar predeterminado en la sección Cuadrícula del Inspector de propiedades.

¿Qué viene después?

Hemos aprendido a colocar y alinear objetos dentro de las mesas de trabajo con guías y cuadrículas. Dé un paso más y aprenda a utilizar cuadrículas de repetición para crear objetos con elementos repetitivos.

¿Tiene alguna pregunta o idea?

Pregunte a la comunidad

Si tiene alguna pregunta que hacer o una idea que compartir, venga y participe en la Comunidad de Adobe XD. Nos gustaría conocer sus comentarios y ver sus creaciones.

Obtén ayuda de forma más rápida y sencilla

¿Nuevo usuario?