Guía del usuario Cancelar

Crear grupos de desplazamiento en Adobe XD

Aprenda a crear grupos de desplazamiento que se desplazan de forma independiente del resto de la mesa de trabajo.

Los grupos de desplazamiento en Adobe XD permiten definir áreas dentro de una mesa de trabajo que se desplazan independientemente del resto de la mesa de trabajo para crear efectos de desplazamiento horizontales o verticales. Los grupos de desplazamiento resultan prácticos para diseñar elementos de la interfaz de usuario, como carruseles de imágenes, reguladores de productos o mapas interactivos.

Continúe leyendo para aprender a utilizar grupos de desplazamiento horizontalesverticales y una combinación de ambos, horizontal y vertical en XD.

Efecto carrusel creado con grupos de desplazamiento
Efecto carrusel creado con grupos de desplazamiento

Antes de continuar

Asegúrese de estar familiarizado con los modos de diseño, prototipo y uso compartido en XD.

Limitación

Los grupos de desplazamiento no funcionan en las especificaciones de diseño. Como solución alternativa, agregue grupos de desplazamiento en una mesa de trabajo independiente y publíquelos como parte de las especificaciones de diseño.

Crear un efecto de desplazamiento horizontal

¿Desea crear un prototipo de carrusel con desplazamiento horizontal? Vea esta ilustración animada y siga los pasos para aprender a crear un efecto de desplazamiento horizontal.

desplazamiento horizontal

  1. En el modo Diseño, seleccione los objetos que desea convertir en un grupo desplazable.
  2. Haga clic en el icono  del Inspector de propiedades. La ventana gráfica ajusta automáticamente sus dimensiones para proporcionar una experiencia de previsualización instantánea. También puede utilizar ⇧⌘H en macOS y Mayús + Ctrl + H en Windows para crear un efecto de desplazamiento horizontal.
  3.  Para previsualizar el efecto de desplazamiento horizontal completo, seleccione  .

Crear un efecto de desplazamiento vertical

¿Desea crear un prototipo del carrusel con desplazamiento vertical? Vea esta ilustración animada y siga estos pasos para aprender a crear un efecto de desplazamiento vertical.

desplazamiento vertical

  1. En el modo Diseño, seleccione los objetos que desea convertir en un grupo desplazable.
  2. Seleccione el icono  del Inspector de propiedades para desplazarse hacia arriba y hacia abajo. La ventana gráfica ajusta automáticamente sus dimensiones para proporcionar una experiencia de previsualización instantánea. También puede utilizar ⇧⌘V en macOS y Mayús + Ctrl + V en Windows para crear un efecto de desplazamiento vertical.
  3. Para previsualizar el efecto de desplazamiento vertical completo, seleccione  .

Crear un efecto de desplazamiento horizontal y vertical

Una combinación de desplazamiento horizontal y efectos verticales resulta útil al crear objetos que le permiten desplazarse en todas las direcciones, como mapas interactivos. Vea esta ilustración animada y siga estos pasos.

horizontal y vertical

  1. En el modo Diseño, seleccione los objetos que desea convertir en un grupo desplazable.
  2. Seleccione el icono  del Inspector de propiedades. La ventana gráfica ajusta automáticamente sus dimensiones para proporcionar una experiencia de previsualización instantánea. También puede utilizar ⇧⌘D en macOS y Mayús + Ctrl + D en Windows para crear una combinación de efectos de desplazamiento horizontal y vertical.
  3. Para previsualizar el efecto de desplazamiento horizontal y vertical completo, seleccione  .

Más información

Para obtener más información sobre los grupos de desplazamiento horizontal y vertical en XD, vea este vídeo.

Duración: 6 minutos

Sugerencias y trucos

Ahora que sabe cómo crear efectos de desplazamiento horizontales y verticales en XD, aquí hay algunas sugerencias y trucos útiles:

  • Al ver una vista previa del prototipo en Windows y la web, use la almohadilla táctil o la rueda del ratón y haga clic y arrastre para comprobar los efectos de desplazamiento horizontal y vertical.
  • Con la vista previa en macOS, utilice la almohadilla táctil o la rueda del ratón y haga clic y arrastre para comprobar los efectos de desplazamiento horizontal y vertical.
  • Combine grupos de desplazamiento con estados de componente y tipos de acciones como Superposición, Animación automática y Desplazarse a
  • Utilice el relleno para agregar mejores controles de desplazamiento para los grupos de desplazamiento.
  • Utilice grupos de desplazamiento anidados cuando cree varios niveles de desplazamiento en los diseños.

¿Qué viene después?

Ya conoce la forma de efectos de desplazamiento horizontales y verticales. Dé un paso adelante y obtenga más información sobre cómo crear prototipos interactivos y compartirlos con diseñadores o partes implicadas para obtener comentarios.

¿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?