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.
Última actualización el
17/02/2022
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.
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 quiere asignar dos acciones en un solo activador como Pulsación, configure el primer botón Acción + en el Inspector de propiedades como Superposición, y configure el segundo botón Acción + con una acción no transicional 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 colocará 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.
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.
Para previsualizar 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?
- 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.
- Cambie al modo Prototipo para conectar la mesa de trabajo de origen a la mesa de trabajo de superposición.
- En el Inspector de propiedades, seleccione cualquiera de las siguientes opciones:
- Activador: Seleccione Pulsación.
- Acción: seleccione Superposición.
- Animación: Seleccione Disolver.
- Suavizado: seleccione Facilitar salida.
- Duración: introduzca 0,2 s.
- Conecte tantas mesas de trabajo de origen diferentes a la mesa de trabajo de superposición como necesite.
- 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:
- Elija una mesa de trabajo de origen y una mesa de trabajo de superposición que tenga una lista desplegable de elementos.
- Cambie al modo Prototipo para conectar la mesa de trabajo fuente con la mesa de trabajo de superposición.
- En el Inspector de propiedades, seleccione cualquiera de las siguientes opciones:
- Activador: Seleccione Pulsación.
- Acción: seleccione Superposición.
- Animación: seleccione Deslizar a la derecha.
- Suavizado: seleccione el efecto Facilitar salida.
- Duración: introduzca 0,3 s.
- Conecte tantas mesas de trabajo de origen diferentes a la mesa de trabajo de superposición como necesite.
- Utilice Vista previa de escritorio para previsualizar el efecto.
Más información
Para saber más sobre las superposiciones en XD, vea este vídeo.
Tiempo de visualización: 10 minutos
También puede acceder a la comunidad de XD para consultar más tutoriales y archivos de muestra.
Temas relacionados
Diseñar prototipos de experiencia de usuario con Adobe XD
Crea bocetos interactivos para sitios web y aplicaciones móviles.
