Guía del usuario Cancelar

Animar prototipos

  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 crear microinteracciones usando la animación automática.

Con la animación automática puede crear transiciones inmersivas para visualizar el movimiento de contenido a través de las mesas de trabajo.

En combinación con las posibilidades de los desencadenadores de Arrastrar y Tiempo, le ayudará a crear una amplia gama de efectos, como un deslizamiento y arrastre de YouTube, para contar una mejor historia de prototipo.

Interacciones de ondulación en un sitio web
Efecto de ondulación en un sitio web

Efecto de deslizamiento y arrastre en un dispositivo táctil
Efecto de deslizamiento y arrastre en un dispositivo táctil

Para crear un prototipo animado, siga estos pasos:

  1. Antes de comenzar, use estas sencillas reglas para conocer cómo se manejan los objetos durante la animación:

    • Si un objeto no está presente en la mesa de trabajo de destino, aparece progresivamente.
    • Si un objeto no está presente en la mesa de trabajo de origen, desaparece progresivamente.
    • Si un objeto tiene una coincidencia tanto en términos de su nombre de capa como de su grupo, los atributos se animan. Para obtener una lista completa de las propiedades y transiciones compatibles, lea Propiedades de objetos.
    • Si desea crear un prototipo con efecto de desplazamiento horizontal o vertical, utilice grupos de desplazamiento.
  2. Cablee las mesas de trabajo en el modo de prototipo. 

  3. Haga clic en el conector para ver el panel de interacción que aparece en Inspector de propiedades y configure las siguientes opciones:

    • Desencadenador: seleccione una opción para activar una animación. Por ejemplo, para simular una experiencia de tarjeta táctil, seleccione Tocar.
    • Acción: seleccione Animación automática. Ahora puede asignar dos acciones en un solo desencadenante, como Tocar. Para hacerlo, establezca el primer botón Acción + en el Inspector de propiedades  en TransiciónAnimación automáticaSuperposiciónDesplazarse aMesa de trabajo anterior y establezca el segundo botón Acción + en acción no transitoria como Reproducción de audio o Reproducción de voz. Tenga en cuenta que si selecciona Reproducción de audio o de voz como la primera acción, no puede agregar una segunda acción
    • Destino: seleccione la mesa de trabajo de destino para la transición de la animación.
    • Suavizado: seleccione una opción para simular efectos de suavizado. Por ejemplo, seleccione Suavizar salida si quiere que se suavice la salida de sus animaciones con respecto al prototipo.
    Flujo de trabajo de animación automática
    Flujo de trabajo de animación automática

    A. Seleccionar el tipo de desencadenador B. Seleccionar una acción para la animación automática C. Seleccionar la mesa de trabajo de destino D. Seleccionar los efectos de suavizado 

  4. Para definir más interacción para un objeto, seleccione el objeto con una interacción ya definida y haga clic en el botón + en la mesa de trabajo; como alternativa, también puede hacer clic en + en el Inspector de propiedad.

     Recuerde que puede aplicar los desencadenadores de Tocar, Arrastrar, Pasar por encimaHora una vez, y los de VozTeclas y mando de juego muchas veces. 

  5. Seleccione   Previsualizar las animaciones en navegadores compatibles

     Recuerde que XD no admite el desplazamiento mientras se realiza una vista previa de las mesas de trabajo animadas automáticamente.

Ejemplos y archivos de muestra

¿Quiere aprender las bases de la animación automática? Comience con este kit de interfaz de usuario que tiene las interacciones básicas, elementos de IU, ejemplos de arrastre, etc.

También puede usar más cosas, como archivos de muestra para probar la animación automática.

¿Quiere lograr un efecto de deslizamiento de YouTube sin la molestia de las líneas de tiempo y los fotogramas clave?

Conecte las mesas de trabajo y seleccione estas opciones en el Inspector de propiedades del prototipo:

  • Desencadenador: seleccione Arrastrar.
  • Acción: seleccione Animación automática.
  • Destino: seleccione la mesa de trabajo de destino para la transición de la animación.
  • Suavizado: seleccione una opción para crear efectos de suavizado. Por ejemplo, seleccione Suavizar entrada-salida si quiere que se suavice la entrada-salida de sus animaciones con respecto al prototipo.

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

Duración: 1 minuto.

¿Quiere aprender cómo crear un menú móvil animado con efecto de suavizado en la entrada? 

  1. Descargue los archivos de muestra.
  2. En el modo de prototipo, conecte el menú Hamburguesa a la mesa de trabajo home_expanded y seleccione las siguientes opciones en el Inspector de propiedades del prototipo:
  • Desencadenador: seleccione Tocar.
  • Acción: seleccione Animación automática.
  • Destino: seleccione la mesa de trabajo de destino para la transición de la animación.
  • Suavizado: seleccione el efecto Suavizar entrada.
  • Duración: cambie la duración a 0,8 segundos.

¿Quiere añadir animaciones avanzadas a los diseños? Mire este vídeo para trabajar con After Effects. 

Exportar desde Adobe XD a After-Effects (Duración: 1 minuto)

Más información

Para obtener más información sobre la animación automática en XD, vea este vídeo.
Duración: 6 minutos

Logotipo de Adobe

Inicia sesión en tu cuenta