Aprenda a 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 obtener una vista previa de 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

¿Desea trabajar con mesas de trabajo predefinidas para crear una lista vertical desplegable y desplazable?

  1. Use la herramienta Seleccionar para hacer clic en el nombre de la mesa de trabajo o arrastrar por las mesas de trabajo. También puede hacer clic en el nombre de una mesa de trabajo en el panel Capas para seleccionarla en la ventana Documento.
  2. Para alargar la mesa de trabajo seleccionada, arrastre hacia abajo el punto inferior de la mesa de trabajo. Una línea de puntos indica la altura original de la mesa de trabajo.
  3. Puede obtener una vista previa del desplazamiento en una mesa de trabajo directamente en XD, usando la opción Vista previa de escritorio.

Descargue los archivos de muestra y pruébelos o vea este vídeo para obtener más información.

Tiempo de visualización: 1 minuto.


A medida que va creando sus diseños para escritorio o dispositivos móviles, ¿le gustaría ver partes del sitio web solo cuando se desplazan y fijar los elementos de diseño sin que floten? Vea este vídeo para obtener más información sobre mesas de trabajo con desplazamiento y elementos fijados. 

Tiempo de visualización: 1 minuto.


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

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

Prácticas recomendadas

“Los encabezados permanentes y otros elementos fijos son como las señales de la carretera: los usamos para garantizar que continuamos aportando información relevante a la sección correspondiente o ayudando a los clientes en su viaje a través de llamadas a la acción”.  Palabras de Oliver Lindberg. Consulte el blog sobre prácticas recomendadas para el diseño de encabezados permanentes y otros elementos fijos.