Animaciones avanzadas

Clase 29 de 32 • Curso de Adobe XD 2019

Alexander Moreno

student•

ahora con los estados de componentes no es necesario crear varios artboards para simular una interacción. https://www.youtube.com/watch?v=qlPnwvMjfXU&t=3s&ab_channel=FranciscoAguileraG.

Luis Rodríguez

student•

Exactamente, yo di el mismo comentario en la clase anterior, sería bueno que agregaran la parte de estados de componentes. Yo también lo aprendí con Francisco (y).

jorge tapia

student•

gracias buen dato

Daniel Zuluaga

student•

En las nuevas actualizaciones tenemos un scroll horizontal de una manera más fácil.

Seleccionamos los objetos.
Vamos al siguiente panel en la siguiente opción sin tener que duplicar el artboard para animar.

Juan Fernando López Hernández

student•

Wow que genial esto ahora mucho trabajo.

Uldis Cristina Gomez Rojas

student•

Muchas gracias :D Super dato!!

Usuario anónimo

user•

Otro ejemplo de Drag: https://www.youtube.com/watch?v=c4wJH-DoUuc

Jhon Alexander Romero Gonzaga

student•

Me estallara la cabeza con estas animaciones, son tan simples en adobe XD y no tan simples cuando las haga en desarrollo, creo que debo calmarme a la ho de hacer los prototipados :o

Richard Alejandro Avendaño Valenzuela

student•

Jaja me pasa lo mismo. Todo bien hasta que presentas el prototipo al cliente y lo acepta, ahi te das cuenta que todas esas interacciones hermosas las debes hacer en codigo.

Alejandra

student•

Estoy contigo ajjajaja, al pasarlo al codio ya no solo es poner y poner ajjajaja :(

Tania Ramírez

student•

Para visualizar rápidamente, seleccionamos un artboard y después cmd+enter

Daniel Morales

student•

Lo mejor fue como se escala la imagen al hacer el drag.

Juan Sebastian Lopez Diaz

student•

Cierto, fue genial... Porque le da una mejor animación cuando se está interactuando con la aplicación

andrés eduardo betancourt bescanza

student•

Una duda, digamos que tengo 100 peliculas, tendria que repetir esto 100 veces?

Elias Ojeda Medina

student•

Eso sería muy triste hacerlo xD, como es un prototipo y no es una aplicación real, considero que no tiene caso hacerlo con 100 elementos, sólo sería una pre-visualización de como quedaría.

Roger Carlos Ariel Alba

student•

Hola!

No, recuerda que tu estas haciendo solo el prototipo. Ese sería trabajo del equipo de desarrollo. Pero aún como desarrollador lo que se me ocurre es algo como un ciclo o una animación cuando este en cierta posición en "X".

Ares Alberto Vázquez Bravo

student•

¿Cómo cambio la opacidad en un elemento mientras hago scroll? Lo quiero aplicar en mi header justo en el icono de regresar para que no se pierda con los demás elementos, esto lo pueden ver en Netflix

Enrique López

student•

Por ahora, si no me equivoco, no hay un "trigger" de scroll para Auto-animate de algún elemento. Puedes hacer algún truco para simularlo, como poniendo un recuadro con el color de fondo de relleno y que quede fijo en su posición, para que cuando hagas scroll se ponga encima de lo que quieres ocultar. No sé si me doy a entender, pero te dejo un tutorial en el que además de explicar sobre los Anchor Links, el autor muestra ese truco que te menciono.

Enrique López

student•

https://www.youtube.com/watch?v=CpfKVTkPbgg

Tania Ramírez

student•

Woooow gran clase! :D

Cesar Eduardo Velazco Medel

student•

La verdad si, ya había tomado un curso de Adobe XD pero esto no venía, y esta muy chido...

Christian Alberto Niño Galvis

student•

woooooowww jajaja es muy simple pero le da un detalle del carajo al prototipo. A pesar de que ya manejaba XD, este curso me ha brindado atajos y claves para ser más pulido en mis prototipos y facilitar la comunicación con el equipo de programación.

Brian Robert Polo Lazo

student•

Un gran paso para seguir creciendo con la infinitas variedades en las animaciones, excelente y motivadore lecciòn!

Nelson Enrique Guerra Díaz

student•

Esta es otra forma de realizar este efecto swipe horizontal https://www.youtube.com/watch?v=-ZUMPhHQIes

Oscar Marcelo Rivadeneira Cevallos

student•

Hola, alguien podría ayudarme tengo un carrusel de 10 productos, y no puedo hacer la animación de adelante y atrás por cada uno de ellos?, alguien puede ayudarme gracias

Josué Rivera

student•

Puedes usar los nuevos scroll groups que fueron añadidos a mediados de este año. Solo tienes que agrupar todos los cards del carrusel y habilitar scroll groups.

Lo que está en rojo son todas las opciones de scroll que tiene Xd, en amarillo está la opción de scroll horizontal que supongo que es el que andas buscando. Espero que te sirva ;)

Josué Rivera

student•

Miguel Ángel Torres Vargas

student•

Intento hacerlo de regreso y no funciona

Jonathan David Olivos

student•

Hola @mavsters, ¿Qué no te funciona específicamente? Cuéntamen en qué paso no te funciona

María Angélica Lizarazo

student•

El drag no funciona, he intentado seleccionar solo el poster de la derecha o todo el carrusel pero la acción no funciona. Curiosamente con el tap si logro entrar a la siguiente pantalla.

¿Alguna sugerencia?

Erik Elyager

student•

En la sección de Archivos y Enlaces tienes el ejemplo del profesor, bájalo para que puedas comparar con el tuyo y así ver qué te falta.

Lady Arbeláez Gómez

student•

Hola, tuve el mismo problema y lo solucione arrastrando la imagen del segundo artboards y dejándola en todo el centro. Te dejo una imagen para que me entiendas mejor. Espero te sirva. ![](

Alma Belen Robles Valencia

student•

Hola, hice lo de escalar las imágenes y no vi diferencia y en la demostración ni en mi archivo, alguien podría explicarme en que cambia o cual es la diferencia?

Moises Gregorio Briceño Ramirez

student•

logro colocar comandos para múltiples funciones pero una de las interfaces o pantallas el fondo pasa a negro y no entiendo porque

Cristian Ramos

student•

superr

Nelson Rodríguez

student•

JAJAJAJAJA como se dicen en el lenguaje popular estudiando cualquiera sabe una muy buena clase saludos comunidad

Williams Jhair Parra Arenas

student•

Una pregunta me permite solo arrastrar hacia la izquierda pero no hacia la derecha, y el elemento que arrastre se apaga o “parpadea” igual que los demás elementos, el unico elemento que no apaga es una palabra escrita ahí con XD el resto elementos SON traídos de Ilustrador hacen un parpadeo, el tutorial CARLOS J. muestra que el arrastra hacia la DERECHA Y HACIA IZQUIERDA sin PARPADEAR EL RESTO DE ELEMENTOS

Animaciones avanzadas

Conocer la importancia de utilizar una herramienta especializada en el diseño de interfaces

Actualización de curso

Qué es AdobeXD y por qué usar AdobeXD

Instalación

Crear y configurar un nuevo proyecto

Creación de un documento

Interfaz y navegación

Atajos de teclado

Artboards

Grids y layouts

Utilizar las herramientas de Diseño

Formas

Alinear y combinar formas

Diseñar icono

Textos y tipografía

Imágenes y máscaras

Pluma

Optimizar el trabajo con herramientas avanzadas

Repeat grid tool

Cargar contenido en repeat grid tool

Componentes

Panel de assets

Responsive Resize

UI Kits

Diseñar una app

Wireframes del proyecto:sección cartelera

Wireframes del proyecto: menú inferior

Mockups del proyecto

Definiendo la paleta de color para el mockup del proyecto

Teoría del color para el diseño de interfaces

Agregar contenido al mockup del proyecto

Crear prototipos interactivos

Prototipado

Animaciones automáticas con Adobe XD

Animaciones avanzadas

Aplicar las mejores prácticas y herramientas para exportar los proyectos

Exportado

Compartir

Conclusiones