Guía del usuario Cancelar

Usar guías y cuadrículas en XD

  1. Guía del usuario de Adobe XD
  2. Introducción
    1. Novedades de Adobe XD
    2. Preguntas habituales
    3. Diseñar, crear prototipos y compartir con Adobe XD
    4. Requisitos del sistema
      1. Requisitos de hardware y software
      2. Adobe XD, Big Sur y Apple Silicon | macOS 11
    5. Conceptos básicos del espacio de trabajo
    6. Cambiar el idioma de la aplicación en Adobe XD
    7. Acceder a kits de diseño de interfaz de usuario
    8. Accesibilidad en Adobe XD
    9. Métodos abreviados de teclado
    10. Consejos y trucos
    11. Opciones de suscripción de Adobe XD
    12. Cambios en el plan de inicio de XD
  3. Diseño
    1. Mesas de trabajo, guías y capas
      1. Empezar a usar mesas de trabajo
      2. Usar guías y cuadrículas
      3. Crear mesas de trabajo con desplazamiento
      4. Trabajar con capas
      5. Crear grupos de desplazamiento
    2. Formas, objetos y trazados
      1. Seleccionar, redimensionar y rotar objetos
      2. Mover, alinear, distribuir y organizar objetos
      3. Agrupar, bloquear, duplicar, copiar y voltear objetos
      4. Establecer el trazo, el relleno y las sombras paralelas de objetos
      5. Crear elementos repetidos
      6. Crear diseños en perspectiva con transformaciones 3D
      7. Editar objetos utilizando operaciones booleanas
    3. Texto y fuentes
      1. Trabajar con herramientas de dibujo y texto
      2. Fuentes en Adobe XD
    4. Componentes y estados
      1. Trabajar con componentes
      2. Trabajar con componentes anidados
      3. Añadir varios estados a componentes
    5. Máscaras y efectos
      1. Crear una máscara con formas
      2. Usar efectos de desenfoque
      3. Crear y modificar degradados
      4. Aplicar efectos de mezclas
    6. Maquetación
      1. Redimensionado interactivo y restricciones
      2. Establecer relleno fijo para componentes y grupos
      3. Crear diseños dinámicos con pilas
    7. Vídeos y animaciones de Lottie
      1. Cómo usar los vídeos
      2. Crear prototipos mediante vídeos
      3. Usar animaciones de Lottie
  4. Prototipo
    1. Crear prototipos interactivos
    2. Animar prototipos
    3. Propiedades de objetos compatibles con la animación automática
    4. Crear prototipos con teclado y mando de juego
    5. Crear prototipos utilizando comandos de voz y reproducción
    6. Crear transiciones temporizadas
    7. Añadir superposiciones
    8. Diseñar prototipos de voz
    9. Crear vínculos de anclaje
    10. Crear hipervínculos
    11. Previsualizar diseños y prototipos
  5. Compartir, exportar y revisar
    1. Compartir mesas de trabajo seleccionadas
    2. Compartir diseños y prototipos
    3. Establecer permisos de acceso de vínculos
    4. Usar prototipos
    5. Revisar prototipos
    6. Trabajar con especificaciones de diseño
    7. Compartir especificaciones de diseño
    8. Inspeccionar especificaciones de diseño
    9. Controles de las especificaciones de diseño
    10. Revisar y comentar especificaciones de diseño
    11. Exportar activos de diseño
    12. Exportar y descargar activos de especificaciones de diseño
    13. Grupos compartidos para empresas
  6. Sistemas de diseño
    1. Sistemas de diseño con Bibliotecas Creative Cloud
    2. Trabajar con activos de documentos en Adobe XD
    3. Trabajar con Bibliotecas Creative Cloud en Adobe XD
    4. Migrar activos vinculados a Bibliotecas Creative Cloud
    5. Trabajar con tokens de diseño 
    6. Usar activos de Bibliotecas Creative Cloud
  7. Documentos en la nube
    1. Documentos en la nube en Adobe XD
    2. Colaborar y coeditar diseños
    3. Coeditar documentos que compartan con usted
  8. Integraciones y complementos
    1. Trabajar con activos externos
    2. Trabajar con activos de diseño de Photoshop
    3. Copiar y pegar activos desde Photoshop
    4. Importar o abrir diseños de Photoshop
    5. Usar activos de Illustrator en Adobe XD
    6. Abrir o importar diseños de Illustrator
    7. Copiar vectores de Illustrator en XD
    8. Complementos para Adobe XD
    9. Crear y administrar complementos
    10. Integración de Jira para XD
    11. Complemento Slack para XD
    12. Complemento Zoom para XD
    13. Publicar diseño de XD en Behance
  9. XD para iOS y Android
    1. Vista previa en dispositivos móviles
    2. Preguntas frecuentes de Adobe XD para dispositivos móviles
  10. Solución de problemas
    1. Problemas conocidos y resueltos
      1. Problemas conocidos
      2. Problemas resueltos
    2. Instalación y actualizaciones
      1. XD aparece como incompatible en Windows
      2. Código de error 191
      3. Código de error 183
      4. Problemas al instalar complementos de XD
      5.  Solicitud para desinstalar y volver a instalar XD en Windows 10
      6. Problemas con la migración de preferencias
    3. Inicio y cierre inesperado
      1.  XD se cierra al iniciar la aplicación en Windows 10
      2.  XD se cierra al cerrar sesión en Creative Cloud
      3. Problema con el estado de suscripción en Windows
      4. Aviso de aplicación bloqueada al iniciar XD en Windows
      5. Generación de volcados de fallos en Windows
      6. Recopilación y uso compartido de registros de errores
    4. Documentos en la nube y bibliotecas Creative Cloud
      1. Problemas con documentos en la nube de XD
      2. Problemas con componentes vinculados
      3. Problemas con bibliotecas y enlaces
    5. Crear prototipos, publicar y revisar
      1. No se pueden grabar interacciones de prototipos en macOS Catalina
      2. Problemas con flujos de trabajo de publicación
      3. Los vínculos publicados no aparecen en los navegadores
      4. Los prototipos no se renderizan correctamente en los navegadores.
      5. El panel de comentarios aparece repentinamente en los vínculos compartidos
      6. No es posible publicar bibliotecas
    6. Importar, exportar y usar otras aplicaciones
      1. Importar y exportar en XD
      2. Archivos de Photoshop en XD
      3. Archivos de Illustrator en XD
      4. Exportar a After Effects desde XD
      5. Archivos de Sketch en XD
      6. Aplicaciones de terceros que no aparecen en Exportar

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

Cuando trabaja en los diseños, puede utilizar guías para alinear objetos o administrar el espaciado entre elementos de una mesa de trabajo. Las cuadrículas sirven de marco para organizar los elementos de diseño (imágenes, pictogramas, párrafos) y garantizar la simetría del diseño.

¿Qué son las guías?
Guías en XD

¿Qué son las cuadrículas?
Diseño y cuadrículas cuadradas en XD

¡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.

¿Es la primera vez que usa Adobe XD?

Obtener prueba gratuita

Pruébela

Archivo de muestra

.xd;  6 MB

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?

“Cuando trabaje en proyectos de diseño, introduzca guías para ayudarle a alinear los objetos o para asegurarse de que los elementos están espaciados correctamente”, afirma Howard Pinsky, promotor experto en XD.

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.

Logotipo de Adobe

Inicia sesión en tu cuenta