Guía del usuario Cancelar

Crear prototipos mediante vídeos

  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. Gestión de color
    5. Requisitos del sistema
      1. Requisitos de hardware y software
      2. Adobe XD, Big Sur y Apple Silicon | macOS 11
    6. Conceptos básicos del espacio de trabajo
    7. Cambiar el idioma de la aplicación en Adobe XD
    8. Acceder a kits de diseño de interfaz de usuario
    9. Accesibilidad en Adobe XD
    10. Métodos abreviados de teclado
    11. Consejos y trucos
  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
    14. Hacer copias de seguridad de recursos de XD o transferirlos
  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

Aprenda a crear prototipos de experiencias interactivas usando vídeos en Adobe XD.

Puede elegir una opción de reproducción predeterminada o personalizada para su vídeo y definir cómo funcionan otras interacciones con él. A medida que explora las opciones e interacciones de reproducción de vídeos, consulte algunos ejemplos realistas de creación de prototipos que tengan vídeos.

Antes de comenzar

Establecer una opción de reproducción

Configurar una opción de reproducción para el vídeo
Configurar una opción de reproducción para el vídeo

Después de importar el vídeo a XD, controle cuándo se reproducirá. Siga estos pasos para establecer una opción de reproducción:

  1. En el modo Diseño, seleccione el vídeo en el lienzo.
  2. En la sección Vídeo del Inspector de propiedades, escoja una de las opciones prestablecidas:

Opciones de reproducción e interacciones asociadas

Cuando configura una opción de reproducción para el vídeo en el modo Diseño, las interacciones asociadas se configuran automáticamente en el modo Prototipo.

Reproducir al tocar

Al seleccionar Reproducir al tocar, el desencadenador Tocar se configura automáticamente con la acción predeterminada Alternar reproducción/pausa.

Reproducir al tocar: modo de diseño

Reproducir al tocar: modo de prototipo

Reproducir automáticamente

Al seleccionar Reproducir automáticamente, el desencadenador Tiempo se configura automáticamente con una demora de 0 segundos.

Reproducir automáticamente: modo de diseño

Reproducir automáticamente: modo de prototipo

Sin reproducción

Al seleccionar Sin reproducción, no se crea ninguna interacción en el modo de prototipo.

Personalizar reproducción de vídeo

Elija Editar reproducción para personalizar la reproducción
Elija Editar reproducción para personalizar la reproducción

Para personalizar la reproducción de vídeos, en la sección Vídeo del Inspector de propiedades, seleccione Editar reproducción.

Si selecciona Editar reproducción, cambia automáticamente al modo Prototipo.

En el modo Prototipo, opte por cualquiera de estas personalizaciones:

Elija uno de estos desencadenadores: Tiempo (configurar Demora a más de 0 segundos), Teclas y mando de juego, o Voz.

Seleccione el desencadenador Tiempo con una demora de más de 0 segundos
Seleccione el desencadenador Tiempo con una demora de más de 0 segundos

Cambie la acción de reproducción de vídeo del desencadenador Tocar de Alternar reproducción/pausa a Reproducción Pausa.

Personalice la reproducción eligiendo el desencadenador Tocar con Reproducir o Pausar como acción
Elija el desencadenador Tocar con Reproducir o Pausar como acción

No puede configurar un vídeo para que se reproduzca con un desencadenador Arrastrar.

Usar la reproducción de vídeos con otras interacciones

Vídeo con un desencadenador Fin de reproducción que cambia a una mesa de trabajo
Vídeo con un desencadenador Fin de reproducción que cambia a una mesa de trabajo

Una vez que establezca una opción de reproducción para su vídeo, piense en conectarlo con otras interacciones:

  • Establezca una interacción Fin de reproducción para que el vídeo desencadene una acción después de su reproducción.
  • Reproduzca un vídeo y varios archivos Lottie al mismo tiempo.

Para obtener más información sobre la creación de prototipos en XD, consulte Crear prototipos interactivos.

Comprenda las interacciones y el comportamiento de reproducción de vídeos

Su vídeo se detiene o continúa reproduciéndose según las interacciones que estableció para otros objetos:

  • El vídeo deja de reproducirse cuando se desencadenan acciones que no sean Animación automática y Lottie.
  • Si desea que el vídeo continúe reproduciéndose cuando se desplaza o toca otros objetos, use Animación automática cuando se desencadene la acción Desplazar y tocar.

Desencadenadores de vídeo y tiempo

En cualquier mesa de trabajo:

  • Puede tener varios desencadenadores de tiempo en secuencia en función de su tiempo de espera.
  • Puede configurar un vídeo y varias animaciones de Lottie para que se reproduzcan juntos después del mismo tiempo de espera. También puede configurarlos para que se reproduzcan juntos automáticamente (tiempo de espera establecido en 0 s).
  • Si configura los desencadenadores de Tiempo con el mismo tiempo de espera en la mesa de trabajo, el vídeo y Lottie, la prioridad es: mesa de trabajo > vídeo > Lottie.

Ejemplos de creación de prototipos

Ahora que ya sabe cómo configurar una opción de reproducción para su vídeo y conectarlo con otras interacciones, probemos algunos ejemplos.

Descargar archivos de muestra

Ejemplo 1: Prototipo de botón de maximizar para vídeos

Aprenda a crear un prototipo de botón de maximizar para vídeos.

Ej. 1-mesa de trabajo 1

  1. En el modo de diseño, importe el vídeo de la Sugerencia 1 y colóquelo en la mesa de trabajo. Establézcalo en Reproducir con un toque.
  2. Coloque el icono Maximizar (que se muestra en la sección Iconos situada a la derecha de las mesas de trabajo) en la esquina inferior derecha del vídeo. 
  3. En el modo Prototipo, conecte el icono Maximizar con Ej. 1-mesa de trabajo 2 y establézcalo en un desencadenador Tocar con el Tipo de acción como Animación automática.

Ej. 1-mesa de trabajo 2

  1. En el modo de diseño, importe el vídeo de la Sugerencia 1 y colóquelo en la mesa de trabajo (vídeo en pantalla completa). Establézcalo en Reproducir con un toque.
  2. Coloque el icono Minimizar (que se muestra en la sección Iconos) en la esquina inferior derecha del vídeo. 
  3. En el modo Prototipo, conecte el icono Minimizar con Ej. 1-mesa de trabajo 1 y establézcalo en un desencadenador Tocar con el Tipo de acción como Animación automática.

Cuando acabe con la conexión de las interacciones, obtenga una vista previa del prototipo y compruebe las interacciones.

Ejemplo 2: Reproducción de prototipos

Aprenda a reproducir vídeos consecutivos en XD.

Ej. 2-mesa de trabajo 1

  1. En el modo de diseño, importe el vídeo de introducción y colóquelo en la sección Introducción. Establézcalo en Sin reproducción.
  2. Importe los vídeos de Sugerencia 1 y Sugerencia 2 y colóquelos en la sección Sugerencias. Establézcalos en Sin reproducción.
  3. Coloque una copia del botón Reproducir (que se encuentra en la sección Iconos) en todos los vídeos.
  4. En el modo Prototipo:
  • Conecte el botón Reproducir del vídeo de Introducción al Ej. 2-mesa de trabajo 2.
  • Conecte el botón Reproducir del vídeo de Sugerencia 1 al Ej. 2-mesa de trabajo 3.
  • Conecte el botón Reproducir del vídeo de Sugerencia 2 al Ej. 2-mesa de trabajo 4. 

Establézcalos todos en un desencadenador Tocar con Tipo de acción como Transición.

Ej. 2-mesa de trabajo 2

  1. En el modo de diseño, importe el vídeo de introducción y colóquelo encima de la sección Sugerencias. Establézcalo en Reproducir automáticamente.
  2. En el modo Prototipo, conecte el vídeo con Ej. 2-mesa de trabajo 3 y establézcalo en un desencadenador Fin de la reproducción con el Tipo de acción como Transición.

Ej. 2-mesa de trabajo 3

  1. En el modo de diseño, importe el vídeo de Sugerencia 1 y colóquelo encima de la sección Sugerencia 1. Establézcalo en Reproducir automáticamente.
  2. En el modo Prototipo, conecte el vídeo con Ej. 2-mesa de trabajo 4 y establézcalo en un desencadenador Fin de la reproducción con el Tipo de acción como Transición.

Ej. 2-mesa de trabajo 4

  1. En el modo de diseño, importe el vídeo de Sugerencia 2 y colóquelo encima de la sección Sugerencia 2. Establézcalo en Reproducir automáticamente.
  2. En el modo Prototipo, conecte el vídeo con Ej. 2-mesa de trabajo 1 y establézcalo en un desencadenador Fin de la reproducción con el Tipo de acción como Transición.

Cuando acabe con la conexión de las interacciones, obtenga una vista previa del prototipo y compruebe las interacciones.

Más ejemplos

Explore más ejemplos que incluyan vídeos, animaciones de Lottie y estados de componentes.

Más información

Mire este vídeo de 2 minutos para ver algunas sugerencias profesionales sobre cómo trabajar con vídeos en XD.

Activos relacionados

¿Tiene alguna pregunta o idea?

pregunte a la comunidad

¿Tiene alguna pregunta o idea para compartir? Entre y participe en la Comunidad de Adobe XD. ¡Nos gustaría tener noticias suyas y ver sus creaciones!

 Adobe

Obtén ayuda de forma más rápida y sencilla

¿Nuevo usuario?