Añadir superposiciones

Descubra cómo añadir superposiciones para simular efectos de deslizamiento interactivos.

Adobe XD le permite apilar contenido sobre otra mesa de trabajo, en lugar de duplicarlo en múltiples mesas de trabajo para simular efectos como listas desplegables, teclados deslizantes y más. 

El teclado aparece como una superposición en la mesa de trabajo
El teclado aparece como una superposición en la mesa de trabajo

  1. En el modo Diseño, seleccione una mesa de trabajo de origen y otra que la superponga. Puede volver a utilizar una mesa de trabajo de superposición varias veces.

  2. En el modo Prototipo, arrastre y suelte el conector de la mesa de trabajo de origen a la mesa de trabajo con el contenido de superposición. Haga clic en el conector para ver el panel Interacción que aparece en Inspector de propiedades y configure las siguientes opciones:

    • Desencadenante: seleccione una opción.
    • Acción: seleccione Superposición. Si desea asignar dos acciones en un solo activador, como Tocar, establezca el botón de la primera Acción + en el Inspector de propiedades en Superposición, y establezca el botón de la segunda Acción + en una acción sin transición como Reproducción de audio o Reproducción de voz.
    • Animación: seleccione el tipo de animación. Si selecciona Deslizar hacia arriba o Deslizar hacia abajo, XD coloca automáticamente la superposición en el borde de la mesa de trabajo de origen.
    • Suavizado: seleccione una opción para simular efectos de suavizado.
    • Duración: introduzca la duración. El tiempo máximo que puede establecer para la transición entre dos mesas de trabajo es de cinco segundos.
    Añadir teclado como superposición en la mesa de trabajo de origen
    Añadir teclado como superposición en la mesa de trabajo de origen

  3. Para ajustar la posición de una superposición en la mesa de trabajo de origen, haga clic en el botón de posición verde (+), arrástrelo y suéltelo.

  4. Para previsualizar sus superposiciones en los navegadores compatibles, haga clic en .

Superposiciones anidadas

Adobe XD no admite superposiciones anidadas en las que una superposición se aplica sobre otra superposición. En estos casos, cuando se conecta la primera mesa de trabajo de superposición a otra mesa de trabajo, la transición de la primera superposición se produce antes de la transición de la segunda. 

Ejemplos y archivos de muestra

¿Desea crear superposiciones interactivas utilizando los efectos de desenfoque de fondo?

  1. Elija una mesa de trabajo de origen y una mesa de trabajo de superposición con un desenfoque de fondo. Para obtener más información sobre cómo agregar desenfoque de fondo, consulte Trabajar con efectos de desenfoque en XD
  2. Cambie al modo Prototipo para conectar la mesa de trabajo de origen a la mesa de trabajo de superposición.
  3. En el Inspector de propiedades, seleccione cualquiera de las siguientes opciones:
    • Desencadenar: seleccione Tocar.
    • Acción: seleccione Superposición.
    • Animación: seleccione Disolver. 
    • Suavizado: seleccione Facilitar salida.
    • Duración: introduzca 0,2 s.
  4. Conecte tantas mesas de trabajo de origen diferentes a la mesa de trabajo de superposición como necesite. 
  5. Utilice Vista previa de escritorio para previsualizar el efecto.

Para obtener un tutorial detallado y archivos de muestra descargables, consulte Crear una superposición interactiva.

¿Quiere aprender a usar superposiciones para crear un efecto de lista desplegable deslizante? Consulte el tutorial que aparece al final de este ejemplo y siga estos pasos:

  1. Elija una mesa de trabajo de origen y una mesa de trabajo de superposición que tenga una lista desplegable de elementos.  
  2. Cambie al modo Prototipo para conectar la mesa de trabajo de origen a la mesa de trabajo de superposición.
  3. En el Inspector de propiedades, seleccione cualquiera de las siguientes opciones:
    • Desencadenar: Seleccione Tocar.  
    • Acción: seleccione Superposición.
    • Animación: seleccione Deslizar a la derecha.
    • Suavizado: seleccione el efecto Facilitar salida.
    • Duración: introduzca 0,3 s.
  4. Conecte tantas mesas de trabajo de origen diferentes a la mesa de trabajo de superposición como necesite. 
  5. Utilice Vista previa de escritorio para previsualizar el efecto.

Más información

Para obtener más información sobre superposiciones en XD, vea este vídeo.
Duración: 10 minutos

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

Prácticas recomendadas

“La superposición es una función muy potente que tiene muchos usos. Las tareas que los usuarios intentan realizar son cada vez más complejas y las superposiciones pueden resultar de gran ayuda para eliminar la presión”, asegura Oliver Lindberg. Consulte su blog sobre mejores prácticas para el diseño de superposiciones.