Guía del usuario Cancelar

Añadir superposiciones

  1. Guía del usuario de Adobe XD
  2. Introducción
    1. Novedades de Adobe XD
    2. Preguntas habituales
    3. Diseñar, crear prototipos y compartir con Adobe XD
    4. Requisitos del sistema
      1. Requisitos de hardware y software
      2. Adobe XD, Big Sur y Apple Silicon | macOS 11
    5. Conceptos básicos del espacio de trabajo
    6. Cambiar el idioma de la aplicación en Adobe XD
    7. Acceder a kits de diseño de interfaz de usuario
    8. Accesibilidad en Adobe XD
    9. Métodos abreviados de teclado
    10. Consejos y trucos
    11. Opciones de suscripción de Adobe XD
    12. Cambios en el plan de inicio de XD
  3. Diseño
    1. Mesas de trabajo, guías y capas
      1. Empezar a usar mesas de trabajo
      2. Usar guías y cuadrículas
      3. Crear mesas de trabajo con desplazamiento
      4. Trabajar con capas
      5. Crear grupos de desplazamiento
    2. Formas, objetos y trazados
      1. Seleccionar, redimensionar y rotar objetos
      2. Mover, alinear, distribuir y organizar objetos
      3. Agrupar, bloquear, duplicar, copiar y voltear objetos
      4. Establecer el trazo, el relleno y las sombras paralelas de objetos
      5. Crear elementos repetidos
      6. Crear diseños en perspectiva con transformaciones 3D
      7. Editar objetos utilizando operaciones booleanas
    3. Texto y fuentes
      1. Trabajar con herramientas de dibujo y texto
      2. Fuentes en Adobe XD
    4. Componentes y estados
      1. Trabajar con componentes
      2. Trabajar con componentes anidados
      3. Añadir varios estados a componentes
    5. Máscaras y efectos
      1. Crear una máscara con formas
      2. Usar efectos de desenfoque
      3. Crear y modificar degradados
      4. Aplicar efectos de mezclas
    6. Maquetación
      1. Redimensionado interactivo y restricciones
      2. Establecer relleno fijo para componentes y grupos
      3. Crear diseños dinámicos con pilas
    7. Vídeos y animaciones de Lottie
      1. Cómo usar los vídeos
      2. Crear prototipos mediante vídeos
      3. Usar animaciones de Lottie
  4. Prototipo
    1. Crear prototipos interactivos
    2. Animar prototipos
    3. Propiedades de objetos compatibles con la animación automática
    4. Crear prototipos con teclado y mando de juego
    5. Crear prototipos utilizando comandos de voz y reproducción
    6. Crear transiciones temporizadas
    7. Añadir superposiciones
    8. Diseñar prototipos de voz
    9. Crear vínculos de anclaje
    10. Crear hipervínculos
    11. Previsualizar diseños y prototipos
  5. Compartir, exportar y revisar
    1. Compartir mesas de trabajo seleccionadas
    2. Compartir diseños y prototipos
    3. Establecer permisos de acceso de vínculos
    4. Usar prototipos
    5. Revisar prototipos
    6. Trabajar con especificaciones de diseño
    7. Compartir especificaciones de diseño
    8. Inspeccionar especificaciones de diseño
    9. Controles de las especificaciones de diseño
    10. Revisar y comentar especificaciones de diseño
    11. Exportar activos de diseño
    12. Exportar y descargar activos de especificaciones de diseño
    13. Grupos compartidos para empresas
  6. Sistemas de diseño
    1. Sistemas de diseño con Bibliotecas Creative Cloud
    2. Trabajar con activos de documentos en Adobe XD
    3. Trabajar con Bibliotecas Creative Cloud en Adobe XD
    4. Migrar activos vinculados a Bibliotecas Creative Cloud
    5. Trabajar con tokens de diseño 
    6. Usar activos de Bibliotecas Creative Cloud
  7. Documentos en la nube
    1. Documentos en la nube en Adobe XD
    2. Colaborar y coeditar diseños
    3. Coeditar documentos que compartan con usted
  8. Integraciones y complementos
    1. Trabajar con activos externos
    2. Trabajar con activos de diseño de Photoshop
    3. Copiar y pegar activos desde Photoshop
    4. Importar o abrir diseños de Photoshop
    5. Usar activos de Illustrator en Adobe XD
    6. Abrir o importar diseños de Illustrator
    7. Copiar vectores de Illustrator en XD
    8. Complementos para Adobe XD
    9. Crear y administrar complementos
    10. Integración de Jira para XD
    11. Complemento Slack para XD
    12. Complemento Zoom para XD
    13. Publicar diseño de XD en Behance
  9. XD para iOS y Android
    1. Vista previa en dispositivos móviles
    2. Preguntas frecuentes de Adobe XD para dispositivos móviles
  10. Solución de problemas
    1. Problemas conocidos y resueltos
      1. Problemas conocidos
      2. Problemas resueltos
    2. Instalación y actualizaciones
      1. XD aparece como incompatible en Windows
      2. Código de error 191
      3. Código de error 183
      4. Problemas al instalar complementos de XD
      5.  Solicitud para desinstalar y volver a instalar XD en Windows 10
      6. Problemas con la migración de preferencias
    3. Inicio y cierre inesperado
      1.  XD se cierra al iniciar la aplicación en Windows 10
      2.  XD se cierra al cerrar sesión en Creative Cloud
      3. Problema con el estado de suscripción en Windows
      4. Aviso de aplicación bloqueada al iniciar XD en Windows
      5. Generación de volcados de fallos en Windows
      6. Recopilación y uso compartido de registros de errores
    4. Documentos en la nube y bibliotecas Creative Cloud
      1. Problemas con documentos en la nube de XD
      2. Problemas con componentes vinculados
      3. Problemas con bibliotecas y enlaces
    5. Crear prototipos, publicar y revisar
      1. No se pueden grabar interacciones de prototipos en macOS Catalina
      2. Problemas con flujos de trabajo de publicación
      3. Los vínculos publicados no aparecen en los navegadores
      4. Los prototipos no se renderizan correctamente en los navegadores.
      5. El panel de comentarios aparece repentinamente en los vínculos compartidos
      6. No es posible publicar bibliotecas
    6. Importar, exportar y usar otras aplicaciones
      1. Importar y exportar en XD
      2. Archivos de Photoshop en XD
      3. Archivos de Illustrator en XD
      4. Exportar a After Effects desde XD
      5. Archivos de Sketch en XD
      6. Aplicaciones de terceros que no aparecen en Exportar

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, cambie el botón de la primera Acción + + en el Inspector de propiedades por Superposición y cambie el botón de la segunda Acción + por 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 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.
    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 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 acceder a la comunidad de XD para consultar más tutoriales y archivos de muestra.

Temas relacionados

Logotipo de Adobe

Inicia sesión en tu cuenta