Guía del usuario Cancelar

Crear mesas de trabajo con desplazamiento

Descubra cómo crear mesas de trabajo con desplazamiento.

Cuando crea un diseño de XD, a veces una mesa de trabajo no es lo suficientemente larga para adaptarse al contenido. Al alargar una mesa de trabajo y elegir opciones basadas en sus necesidades de diseño, puede desplazar verticalmente una mesa de trabajo para adaptarse a diferentes tamaños de dispositivos.

El desplazamiento vertical ayuda a simular efectos de desplazamiento al diseñar listas desplegables o sitios web. Sin embargo, puede utilizar grupos de desplazamiento para agregar un nuevo nivel de interacción al diseñar interfaces, mapas y galerías de imágenes horizontales de varios paneles.

Mesa de trabajo con desplazamiento

Crear un desplazamiento vertical

  1. En mesas de trabajo preestablecidas: Arrastre hacia abajo el punto más bajo de la mesa de trabajo para aumentar su longitud más que la pantalla del dispositivo. Una línea de puntos indica el inicio del contenido desplazable. 

    Línea de puntos y contenido desplazable
    Línea de puntos y contenido desplazable

  2. En el modo Diseño, seleccione las siguientes opciones en el Inspector de propiedades:

    • Desplazamiento: seleccione Vertical o Ninguno
    • Fijar posición al desplazarse: seleccione esta opción para fijar los elementos de diseño en una posición fija y así evitar el desplazamiento con el contenido. 
    • Altura de ventana gráfica: especifique la altura de la ventana gráfica a través de la cual puede ver la mesa de trabajo. 

    Puede aplicar un efecto de desplazamiento vertical para mover el contenido de la mesa de trabajo hacia arriba y hacia abajo.

    Desplazamiento vertical en una mesa de trabajo de tamaño personalizado
    Desplazamiento vertical en una mesa de trabajo

  3. Cablee las mesas de trabajo en el modo de prototipo.

  4. En el modo Prototipo, seleccione las siguientes opciones en el Inspector de propiedades:

    • Preservar posición de desplazamiento: realiza la transición a la siguiente mesa de trabajo a la vez que mantiene la posición de la mesa de trabajo anterior. Vea esta publicación de Twitter para obtener más detalles. 
    • Fijar posición al desplazarse: fija los elementos de diseño en una posición fija para evitar el desplazamiento con el contenido. 
    Preservar posición de desplazamiento
    Preservar posición de desplazamiento

    Fijar posición al desplazarse
    Fijar posición al desplazarse

  5. Para previsualizar la mesa de trabajo, seleccione Vista previa de escritorio  . Arrastre la ventana de vista previa para ver el desplazamiento vertical.

Ejemplos y archivos de muestra

También puede acceder a la comunidad de XD para consultar más tutoriales y archivos de muestra.

Consejos y trucos

Para crear efectos de desplazamiento horizontal en los diseños, use grupos de desplazamiento. Los grupos de desplazamiento le permiten crear prototipos de ventanas de contenido que se pueden desplazar horizontalmente, verticalmente o en ambas direcciones.


Recursos relacionados

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