¿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!
Última actualización el
16 feb 2022
- Guía del usuario de Adobe XD
- Introducción
- Novedades de Adobe XD
- Preguntas habituales
- Diseñar, crear prototipos y compartir con Adobe XD
- Gestión de color
- Requisitos del sistema
- Conceptos básicos del espacio de trabajo
- Cambiar el idioma de la aplicación en Adobe XD
- Acceder a kits de diseño de interfaz de usuario
- Accesibilidad en Adobe XD
- Métodos abreviados de teclado
- Consejos y trucos
- Diseño
- Mesas de trabajo, guías y capas
- Formas, objetos y trazados
- Seleccionar, redimensionar y rotar objetos
- Mover, alinear, distribuir y organizar objetos
- Agrupar, bloquear, duplicar, copiar y voltear objetos
- Establecer el trazo, el relleno y las sombras paralelas de objetos
- Crear elementos repetidos
- Crear diseños en perspectiva con transformaciones 3D
- Editar objetos utilizando operaciones booleanas
- Texto y fuentes
- Componentes y estados
- Máscaras y efectos
- Maquetación
- Vídeos y animaciones de Lottie
- Prototipo
- Crear prototipos interactivos
- Animar prototipos
- Propiedades de objetos compatibles con la animación automática
- Crear prototipos con teclado y mando de juego
- Crear prototipos utilizando comandos de voz y reproducción
- Crear transiciones temporizadas
- Añadir superposiciones
- Diseñar prototipos de voz
- Crear vínculos de anclaje
- Crear hipervínculos
- Previsualizar diseños y prototipos
- Compartir, exportar y revisar
- Compartir mesas de trabajo seleccionadas
- Compartir diseños y prototipos
- Establecer permisos de acceso de vínculos
- Usar prototipos
- Revisar prototipos
- Trabajar con especificaciones de diseño
- Compartir especificaciones de diseño
- Inspeccionar especificaciones de diseño
- Controles de las especificaciones de diseño
- Revisar y comentar especificaciones de diseño
- Exportar activos de diseño
- Exportar y descargar activos de especificaciones de diseño
- Grupos compartidos para empresas
- Hacer copias de seguridad de recursos de XD o transferirlos
- Sistemas de diseño
- Documentos en la nube
- Integraciones y complementos
- Trabajar con activos externos
- Trabajar con activos de diseño de Photoshop
- Copiar y pegar activos desde Photoshop
- Importar o abrir diseños de Photoshop
- Usar activos de Illustrator en Adobe XD
- Abrir o importar diseños de Illustrator
- Copiar vectores de Illustrator en XD
- Complementos para Adobe XD
- Crear y administrar complementos
- Integración de Jira para XD
- Complemento Slack para XD
- Complemento Zoom para XD
- Publicar diseño de XD en Behance
- XD para iOS y Android
- Solución de problemas
- Problemas conocidos y resueltos
- Instalación y actualizaciones
- Inicio y cierre inesperado
- XD se cierra al iniciar la aplicación en Windows 10
- XD se cierra al cerrar sesión en Creative Cloud
- Problema con el estado de suscripción en Windows
- Aviso de aplicación bloqueada al iniciar XD en Windows
- Generación de volcados de fallos en Windows
- Recopilación y uso compartido de registros de errores
- Documentos en la nube y bibliotecas Creative Cloud
- Crear prototipos, publicar y revisar
- No se pueden grabar interacciones de prototipos en macOS Catalina
- Problemas con flujos de trabajo de publicación
- Los vínculos publicados no aparecen en los navegadores
- Los prototipos no se renderizan correctamente en los navegadores.
- El panel de comentarios aparece repentinamente en los vínculos compartidos
- No es posible publicar bibliotecas
- Importar, exportar y usar otras aplicaciones
Aprenda a importar y utilizar Lottie para diseñar animaciones exuberantes en Adobe XD.
Lottie es un formato de animación ligera que se puede exportar desde Adobe After Effects como archivo JSON. Los archivos Lottie son de menor tamaño en comparación con formatos como GIF y PNG animados. Los desarrolladores pueden reutilizar archivos Lottie en su código.
XD le permite importar archivos y controlar la reproducción de Lottie. Después de ajustar la reproducción de Lottie y conectar el prototipo, puede previsualizarlo antes de compartirlo.
Artículos recomendados
Importar archivos Lottie
Para importar su archivo Lottie a XD, arrástrelo a una mesa de trabajo. Otra opción es seleccionar Archivo > Importar.
Una vez importado, el primer fotograma de Lottie se muestra en el lienzo. Si el primer fotograma de Lottie está en blanco, verá un fotograma en blanco en el lienzo. En tales casos, use el panel Capas para localizar el Lottie.
Cuando seleccione el Lottie en el modo Diseño, verá un icono de reproducción en la esquina superior izquierda.
Después de importar el archivo de Lottie a XD, controle cuándo se reproducirá. Siga estos pasos para establecer una opción de reproducción:
- En el modo Diseño, seleccione el activo Lottie en el lienzo.
- En la sección Animaciones del Inspector de propiedades, escoja una de las opciones prestablecidas:
- Reproducir automáticamente (predeterminada)
- Reproducir al tocar
- Sin reproducción
- Reproducir automáticamente (predeterminada)
- Si desea que la Lottie se reproduzca en bucle, haga clic en el botón Reproducir indefinidamente .
Opciones de reproducción e interacciones asociadas
Cuando configura una opción de reproducción para la Lottie en el modo Diseño, las interacciones asociadas se configuran automáticamente en el modo Prototipo.
Al seleccionar Reproducir automáticamente, el desencadenador Tiempo se configura automáticamente con una demora de 0 segundos.
Al seleccionar Reproducir al tocar, el desencadenador Tocar se configura automáticamente con la acción predeterminada Alternar reproducción/pausa.
Al seleccionar Sin reproducción, no se establece ninguna interacción en el modo de prototipo.
Personalizar reproducción de Lotties
Para personalizar la reproducción de Lotties, en la sección Animaciones 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.
Cambie la acción de reproducción de Lottie del desencadenador Tocar de Alternar reproducción/pausa a Reproducir o Pausar.
Usar la reproducción de Lottie con otras interacciones
Una vez que establezca una opción de reproducción para su Lottie, piense en conectarlo con otras interacciones:
- Establezca una interacción Fin de reproducción para que Lottie desencadene una acción después de su reproducción.
- Reproduzca varias animaciones de Lottie automáticamente al mismo tiempo (máximo de 20).
- Reproduzca animaciones Lottie con un vídeo al mismo tiempo.
Para obtener más información sobre la creación de prototipos en XD, consulte Crear prototipos interactivos.
Ejemplos de creación de prototipos
Ahora que ya sabe cómo configurar una opción de reproducción para su Lottie y conectarlo con otras interacciones, probemos algunos ejemplos.
Practique la creación de prototipos con animaciones de Lottie utilizando los archivos de muestra:
Aprenda a animar una pantalla de carga usando Lottie.
Ej. 1-mesa de trabajo 1
- En el modo de diseño, importe plant-loading.json y colóquelo en la mesa de trabajo. Establézcalo en Reproducir automáticamente.
- En el modo Prototipo, conecte el Lottie con Ej. 1-mesa de trabajo 2 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.
Aprenda a animar los elementos del menú cuando se seleccionan.
Ej. 2-mesa de trabajo 1
- En el modo de diseño, importe los archivos de la planta 1 (menta verde) y de la planta 2 (sansevieria) y colóquelos en los contenedores correspondientes. Establézcalos en Sin reproducción.
- En el modo Prototipo:
- Conecte la planta 1 y su contenedor a la Ej. 2-mesa de trabajo 2.
- Conecte la planta 2 y su contenedor a la Ej. 2-mesa de trabajo 3.
Establézcalos en un desencadenador Tocar con Tipo de acción como Transición.
Ej. 2-mesa de trabajo 2
En el modo de diseño, cree una copia de la planta 1 colóquela en la mesa de trabajo. Establézcalo en Reproducir automáticamente.
Ej. 2-mesa de trabajo 3
En el modo de diseño, cree una copia de la planta 2 colóquela en la mesa de trabajo. Establézcalo en Reproducir automáticamente.
Cuando acabe con la conexión de las interacciones, obtenga una vista previa del prototipo y compruebe las interacciones.
Explore más ejemplos que incluyan vídeos, animaciones de Lottie y estados de componentes.
Obtenga una vista previa del prototipo y compártalo
Después de conectar el prototipo, use cualquiera de las siguientes opciones para acceder a la vista previa:
Cuando el diseño esté listo para compartirse con las partes interesadas, elija los permisos de acceso correspondientes y publique el prototipo o el vínculo de las especificaciones de diseño y compártalo.
Más información
Mire este vídeo de 2 minutos para ver algunas sugerencias profesionales sobre cómo trabajar con Lottie en XD.
- Solo puede importar archivos Lottie de menos de 15 MB a XD. No hay límites en la cantidad de archivos Lottie que pueden estar en un solo documento XD.
- Lottie no se reproduce automáticamente si un vídeo está establecido para reproducirse automáticamente.
- Lottie se detiene si se inician otros desencadenadores de prototipos.
- Si una animación de Lottie utiliza una fuente de escritorio, la fuente no se mostrará en la reproducción web.
- No se puede reemplazar un Lottie en una Cuadrícula de repetición.
- No se pueden importar animaciones de Lottie que hagan referencia a un activo externo, como una imagen.
- No puede importar un archivo JSON que no sea un JSON de Lottie.
Activos relacionados
¿Tiene alguna pregunta o idea?
