Clase magistral de movimiento en Figma: crea animaciones profesionales de UI

1. Bienvenido al curso y lo que vas a construir.
: Hola, y bienvenidos a Figma motion Master Class. Si alguna vez has diseñado hermosas interfaces y has deseado poder darles vida con animaciones e interacciones fluidas, entonces esta clase es para ti. Hola. Mi nombre es Ahmed Al Hassan, y soy diseñador de UIUX con más de cinco años de experiencia diseñando productos digitales, interfaces interactivas y Y a lo largo de mi carrera, he aprendido una cosa muy importante, y es que las grandes interfaces no solo son visualmente atractivas. Se sienten intuitivos e interactivos a través de un diseño de movimiento reflexivo. Y eso es exactamente lo que te voy a mostrar en este curso. Primero, comenzaremos entendiendo qué es realmente el movimiento Figma y cómo puede encajar en un proceso de diseño moderno o flujo de trabajo, involucrando crear archivos, preparar capas , organizarlas y configurarlas que podamos construir nuestras animaciones para ellos A partir de ahí, comenzaremos construyendo nuestras animaciones paso a paso, y eso incluye animaciones que se relacionan con el tamaño, la posición, la opacidad Se va a relacionar con el tiempo, la flexibilización. También discutiremos errores más comunes cuando se trata de diseño de movimiento y cómo los más mínimos ajustes pueden desempeñar un papel en mejorar drásticamente estas animaciones y hacerlas sentir más pulidas y naturales. Finalmente, aprenderás a exportar tus archivos, tus videos a diferentes formatos como regalos, MP fours, web y SVG Lo más importante, para que puedas seguir adelante y utilizarlos en tu portafolio para presentaciones, para desarrollo o para lo que sea para lo que quieras usarlo. Al final de este curso, aprenderás a diseñar animaciones de interfaz de usuario de aspecto profesional que aporten personalidad, claridad y pulido a tus diseños. Empecemos. 2. ¿Qué es el movimiento de Figma?: Hola, y bienvenidos a la primera clase de movimiento Figma. Así que solo voy a darte una breve idea de lo que es el movimiento de figma a través de esta moción hecha muy rápidamente, ¿de acuerdo? Entonces veamos cómo se ve este diseño de movimiento , y eso es todo. Sólo va a hacer un bucle un poco, pero este es el movimiento Figma Y lo que acabas de ver, si estás familiarizado con la propia Figma probablemente rompedor Esta es una característica extremadamente nueva si estás escuchando esto en cualquier momento alrededor de 2026, y esto es básicamente un complemento Probablemente ya lo sepas, pero en caso de que no lo hagas Figma es un programa de diseño para poner de manera muy general, mayoría de las veces se usa para fines de diseño UIUX Se utiliza para el diseño web, para el diseño de aplicaciones, para crear cualquier tipo de pantalla, cualquier tipo de prototipo de wireframe Pero en los últimos años, se ha expandido para incluir también muchas cosas diferentes. Creando diseños gráficos gráficos, carteles, además de crear presentaciones y ahora también se utiliza para redes sociales y mucho más. Ahora con esta nueva actualización, puedes crear estos gráficos, y no es solo un gimmick ¿Bien? Déjame decirte eso. Figma motion es una característica completamente nueva. Todavía se está poniendo de pie, diría yo, todavía está en una etapa temprana, pero se va a ampliar, se va a trabajar y ampliar para convertirse en una característica más completa. Así que volvamos un poco y discutamos lo que hace. Entonces, en caso de que no estés familiarizado con lo que es el diseño de movimiento, lo que acabamos de ver aquí, básicamente te da una línea de tiempo y te permite crear diferentes animaciones. No solo estás trabajando con visuales como estos elementos de texto, sino que estos elementos de texto en sí mismos son capaces de animarse a través del tiempo Esto no es algo completamente nuevo, debo decir. Esto es algo que hemos presenciado con otros programas como Photoshop. También tiene una línea de tiempo. No es exactamente un software de edición de video. Es más un software de edición de fotos. Se llama Photoshop, pero tiene esa característica incorporada. Eso es algo que Adobe hace mucho. Construye muchas características en sus programas. Puedes hacer tres D en casi todos sus programas, puedes hacer unas tres D modelando. Puedes hacer algunas animaciones y otras cosas, hay mucha profundidad Pero hasta ahora, FigMA ha estado tratando de mantenerlo mínimo, y así ahora que se les ocurrió esta característica realmente abrió muchas puertas Entonces en este curso, vamos a hablar sobre cómo podemos aprovechar esta nueva función para crear animaciones hermosas y fluidas. Estas animaciones son cosas que podemos exportar como videos. Podemos exportarlos como regalos. Hay mucho de lo que vamos a discutir con el tiempo, y te voy a enseñar cómo puedes integrar eso en tu solo para hacértelo saber, esto es completamente nuevo. Entonces la gente apenas está empezando a aprender sobre esto, y es por eso que estás obteniendo absolutamente una ventaja. Estás teniendo ventaja cuando estás escuchando este curso, lo estás tomando todo , y con esto, vas a tener una ventaja, como dije, ser un diseñador que conoce las características más recientes y que las características más recientes y también puede integrarlas en su diseño de UIO Hix Sin más preámbulos, comencemos. 3. Cómo se ajusta el movimiento al flujo de trabajo de diseño.: Ahora, antes de comenzar y antes mostrarte la interfaz de esta nueva característica, Figma Motion, me gustaría discutir cómo puedes usar esta función y cómo puedes integrarla en tu flujo de trabajo existente Entonces voy a seguir adelante y asumir que ya eres ávido usuario de Figma Ya sea que lo uses para tu diseño gráfico, ya sea para diseño web, diseño de aplicaciones, realmente no importa. Pero estás ahí, ya sabes cómo va, sabes cómo funciona. Con esa información, seguiría adelante y asumiría que sabes que cuando estás en Figma eres capaz de crear diferentes tipos de documentos Entonces Figma Motion no es un nuevo tipo de documento. Honestamente eso es lo que pensé cuando llegaron por primera vez con el largometraje cuando lo anunciaron por primera vez. Pensé que tendría una interfaz completamente diferente y estaría completamente separada de las herramientas de diseño que hemos conocido. En caso de que no los conozcas, tienes el archivo de diseño aquí, solo un archivo de diseño normal. Tienes un archivo FIG Jam donde puede Jam con sus colegas, puede hacer una lluvia de ideas diferentes, forma libre sin estresarse demasiado, y también puede crear diapositivas, presentaciones, básicamente la alternativa para PowerPoint Tienes Figma make, que es su propio tipo de IA, que también es muy interesante Figma buzz, que es para redes sociales, sitio Figma, no te voy a aburrir Básicamente, la forma en que vas a acceder a esto principalmente a partir de ahora, va a ser a través del diseño. Cuando sigas adelante y abres un documento de diseño como ya he hecho aquí, naturalmente vas a estar en el modo de diseño. Espero que también estés familiarizado con esto. Pero por si acaso no eres tan temprano, debió haber sido hace un par de años, básicamente introdujeron estos nuevos modos. Entonces en lugar de solo tener este conjunto de herramientas, modo completamente diferente con diferentes herramientas. Y también tenías modo Dev. Hemos tenido esto desde hace mucho tiempo, para ser sinceros. Tienes estas características, estos diferentes modos, y ahora Figma Motion es solo otro de estos modos Y ten en cuenta que esto sigue en su forma Beta. Entonces vamos a estar viendo muchos bichos, estamos viendo muchos problemas. Pero ahora volvamos a ello. Así es como accedes a él, pero ¿cómo lo usas? ¿O para qué lo usarías? Ahora, vamos a ver, como dije, dentro del curso, te voy a mostrar diferentes ejemplos o diferentes creaciones de lo que podríamos hacer con él. Pero esencialmente, lo que solíamos hacer antes con componentes y animaciones de componentes ahora va a simplificarse mucho más con esta nueva creación. Entonces, en lugar de tener que hacer un componente y luego usar cada variante de componente como fotogramas clave, vamos a poder mover las cosas más flexible y hay diferentes usos para Por ejemplo, si quieres crear una animación de notificación, quieres que se muestre como si alguien estuviera en una pantalla y repente reciba una notificación. Eso quieres demostrarlo. Quizás quieras compartir tu prototipo, no de la manera interactiva normal a través de Figma, sino más bien como un video Quieres mostrarlo exactamente de la manera que quieres en el flujo con el que quieres ir. Esto algo que he tenido personalmente que sentí la necesidad de usar personalmente con mis propios clientes es que a veces no son capaces de navegarlo. Clientes mayores, personas que no son tan técnicas, realmente no pueden usar Figma. No saben cómo usarlo. Se sienten abrumados. Simplemente guiarlos por el caso de uso o el flujo del usuario convirtiéndolo en un video es una forma de hacerlo. Pero aparte de eso, crear estas animaciones diferentes y únicas, no era imposible. Todos solíamos hacerlo pero ahora es mucho más fácil hacer esto. Esa es una manera de hacerlo. Puedes hacer notificaciones. Se pueden hacer diferentes animaciones en el fondo así como alguien está pasando por un prototipo. Podrías hacer muchas cosas diferentes. Incluso puedes hacer algo así como un video como si fuera un video real, pero en realidad es solo una animación que construías sobre Figma. Hay muchos ejemplos diferentes, pero la buena noticia es que no tienes que ir muy lejos, tienes que hacer todo lo posible para integrarlo en tu flujo de trabajo porque ya está aquí. Está disponible está en tu computadora, está en tu archivo Figma No es necesario crear otro archivo para ello. Solo tienes que ir a este modo. Entonces aquí hay un ejemplo que me gustaría mostrarles de algo que hice tan pronto como vi el anuncio sobre esta función tan pronto como se estrenó, y lamento que se haya enrollado tanto, pero básicamente es una idea muy simple Se ve simple, se ve limpio y liso, y esto es algo que hubiera sido tan difícil de hacer con Figma normal. Ahora mismo, con esta característica más avanzada, podemos crear estas animaciones de aspecto suave sin tener que ensuciar nuestros documentos de diseño. Aquí están pasando muchas cosas. Tenemos animación de posición, de tamaño, de escala, así como de opacidad y demás. Y esto es lo que tiene de genial. Puedes hacer muchas cosas complejas sin tener que preocuparte por el tecnicismo de la misma. Simplemente puedes tratarlo como un programa normal de edición de video. Como dije, para terminar esto, no necesitas hacer todo lo posible para integrar esta función en tu flujo de trabajo. Ya está ahí. Está justo donde quieres que esté, donde sabes cómo encontrarlo, y no es tan complicado. Pero aún tienes que aprenderlo, y es exactamente por eso que estás aquí viendo este curso. Empecemos. 4. Navegación por la interfaz y configuración del archivo de proyecto.
: Todo bien. Bienvenida de nuevo. En esta lección, vamos a familiarizarnos con la interfaz y vamos a establecer un archivo de proyecto Ahora bien, como mencioné en las lecciones anteriores, esto no es algo por lo que te vas a desviar, sino que es algo ya donde sabes dónde encontrar. ¿Qué significa eso? Vas a seguir adelante, abrir Figma e ir a Diseño Simplemente haz clic en Diseño y vas a abrir un archivo de proyecto de diseño clásico normal. Entonces así, tenemos un borrador libre. No necesitas una suscripción profesional ni nada el estilo para acceder a esta función al menos por ahora, ¿de acuerdo? Entonces ya puedes acceder a él, pero estoy seguro que van a agregar algunas cosas que van a estar bloqueadas para membresías pro, pero ese es otro tema para otro día Así que ahora que estás aquí, ahora podrías decirme ¿dónde está Figma Motion Está justo aquí. Cuando vayas a tu barra de herramientas ahí abajo, vas a ir a navegar. No vas a ir a dibujar, no a modo Dev, vas a ir a Figma Motion Como dije antes, todavía está en Beta, así que todavía está llegando. Hay muy pocas maneras confundirte sobre esto, para ser honesto Antes de que empecemos, tienes que saber que necesitas algo en lo que trabajar. Necesitas un archivo, necesitas un elemento, necesitas una capa para comenzar. Voy a seguir adelante y voy a agregar una pantalla de iPhone 16, así así, ya ves que las cosas empezaron a funcionar solo para mostrarte la diferencia. Cuando volví y seguí adelante, estaba vacío aquí y ahora se llenó, lo que te dice, bien, algo está pasando, algo está empezando. Sigamos adelante y creamos un artículo. Podría ser un texto, podría ser un objeto. Yo sólo voy a crear un cuadrado justo por aquí y voy a darle un color. Rojo. Y después consiguiendo la herramienta de texto, voy a escribir Hola mundo. Todo bien. Entonces ahora que tenemos esto, vamos a centrarlo. Todo bien. Perfecto. Ahora tenemos estos artículos, pero no van a aparecer aquí, ¿verdad? Eso es una lástima. Bueno, la cosa es que, para facilitar las cosas, no muestran todo aquí dentro. Esto es sólo para las cosas que realmente tienen movimiento, tienen animación. Esta área sólo está reservada para capas de objetos que ya tienen animaciones dentro de ellas. De lo contrario, verás las capas justo aquí en este panel tal como estás usado. Entonces, para que algo se muestre aquí, tenemos que ir a esta sección del panel del área de animaciones, quieras llamarlo, que es nuevo, y vas a agregar una animación. Y claro, solo puedes ver esto cuando eres Figma Motion Así que por favor asegúrate de estar en el modo de movimiento. Entonces ahora que agregamos esto, y no voy a meterme en la animación todavía, pero ya nos dio una animación de posición, ¿de acuerdo? Algo así como una animación de diapositivas. Y ahora de pronto tenemos algún artículo. Familiaricémonos con este dashboard con esta interfaz, ¿de acuerdo? Aquí tenemos un ítem que dice, T, es un ícono para texto, y tenemos Hello World. Entonces podemos eliminar esta animación o eliminar el texto, todo en conjunto, y se puede ver que dice posición. Entonces esto te está diciendo las animaciones que está teniendo este texto. Ahora bien, ¿y si decidimos agregar otro tipo de animación? Por lo que ahora se adelantó y agregó una animación a escala. Así que lo hizo ir más pequeño. Ahora puedes ver bajo Hola Mundo, tenemos dos animaciones diferentes puestas ahí. Podemos cerrarlos o abrirlos y mostrarlo. Aquí tienes posición, tienes escala, y cada uno tiene el suyo, no estoy seguro de cómo llamarías esto exactamente, pero tiene su propio bloque, digamos, con el que puedes jugar. Ahí está el bloque general. Esta zona, este objeto, mueve todo con ella. Si hacemos las animaciones muy cortas, tanto de posición como de escala, se va a cambiar. Pero si cambias uno de estos la posición, no va a cambiar a los demás. De esta manera, la posición va a cambiar, y entonces el tamaño todavía va a cambiar. La animación a escala va a suceder con el mismo tiempo, y viceversa. Podemos hacerlo ir más pequeño y continuar cambiando de ubicación. Eso es algo genial al respecto. No tienes una interfaz muy compleja. Es algo simplificado y una vez que hayas terminado con todas estas, múltiples animaciones, puedes simplemente eliminarlo, y luego solo ves esta ranura. Aquí tenemos nuestra línea de tiempo aquí mismo, todo esto con el que estábamos jugando, y te muestra la hora. Aquí tienes, creo, 200 milisegundos, 400 milisegundos, 600, 800 y 1,000 Básicamente, también puedes alejar usando esta función aquí, timeline Zoom, solo puedes hacerlo más pequeño y ahí tienes. Puedes hacerlo más pequeño o más grande con esta función, o simplemente puedes mantener presionado Control y desplazarte hacia arriba o hacia abajo, y luego lo hará por ti. Si ya eres editor, probablemente conozcas tu manera de evitar esto, no es tan diferente. También tenemos esta opción de línea de tiempo de colapso, que va a eliminar todas estas cosas justo debajo de allí en la línea de tiempo. Entonces, si solo quieres enfocarte en el marco aquí y no tienes mucho espacio, entonces hazlo. Pero si quieres entrar en los detalles, entonces quieres ver todo a tu alrededor. Entonces tenemos el botón de reproducción. Justo aquí. En lugar de eso, también puedes simplemente presionar el espacio. Eso es lo que me gusta hacer. Aquí mismo, tenemos algunas opciones, activar fotogramas clave auto Vamos a hablar de eso un poco más tarde. Y aquí tenemos la hora actual. Muy simple explicar. Es el momento en el que estás, si estás en un segundo o 2 segundos. Y aquí, claro, tienes tu tiempo máximo, la duración de toda la animación que tienes. En este momento está fijado en el 2000. Podemos hacerlo 3 mil y la unidad es milisegundos. Entonces puedes hacer eso o puedes expandirlo desde aquí. ¿Bien? Ahora, eso va a hacer que funcione. Aunque no haya animación, va a correr hasta el final. Todo bien. Entonces por supuesto, tenemos la opción de bucle. Está activado por defecto, pero puedes eliminarlo, y una vez que lo elimines, no va a bucle. Una vez que llega a su fin, sólo va a parar. Pero por lo general, cuando estás trabajando, quieres seguir viendo tus animaciones bucle una y otra vez, puedes asegurarte de que se vea muy bien Pero también tenemos una tercera opción, que se llama Ping Pong. Esta es una opción muy interesante, pero básicamente la lleva hasta el final y la devuelve, y así sucesivamente y así sucesivamente. Es como jugar al ping pong, lo cual es muy interesante. Nunca he visto esto en ningún otro programa, para ser honesto. No estoy seguro si es solo por diversión o si realmente sirve a un propósito, pero me imagino que puede ayudar de alguna manera. Tiene la opción de contraer capas. Si tienes múltiples capas y todas ellas se abren y todas tienen múltiples animaciones, entonces sería muy útil si puedes contraer todas las capas en. Este va a ser nuestro amigo. Para el resto del curso, nuestra línea de tiempo. Eso es lo que vamos a llamar a todo este panel. Pero recuerda que esta nueva sección de animación también es muy relevante porque ahí es donde vamos a agregar nuestra animación. Sólo para ilustrar esto más, cuando añadimos una animación para este rectángulo, vamos a ver aquí los dos objetos. Como puedes ver, puedes colapsarlos, puedes abrirlos y mostrar cada animación debajo de ella, o los tenemos ambos abiertos, podemos colapsar todas las capas, y podemos asegurarnos de alinearlas de la manera que queramos y de la manera que nos parezca adecuada. Ahora, hay mucho que aprender y explorar sobre esta herramienta, pero para ser honesto, en lugar de seguir adelante y contarte sobre todo y abrumarte, me gustaría que tomaras este viaje conmigo y aprendas como lo hacemos porque esa es la mejor manera de aprender. En las próximas lecciones estaremos hablando más detalles y estaremos haciendo mucho más y aprendiendo más a través de ellos. Muchas gracias por escuchar y nos vemos en la siguiente lección. 5. Cómo diseñar los componentes de la interfaz
: Bienvenida de nuevo. En esta lección, estaremos iniciando y dando el primer paso en la creación de estas animaciones. Pero antes de comenzar y crear animaciones, primero tenemos que configurar nuestras capas, configurar nuestro diseño y la interfaz de usuario. Y claro, tenemos que construir nuestro de una manera muy limpia y suave para que cuando queremos crear una animación, funcione sin problemas y sin complicaciones. Entonces hoy, vamos a crear una notificación de brindis. Podría tener otros nombres, pero es un banner y te va a mostrar la notificación. Ya te he mostrado un ejemplo de cómo se ve eso, ¿de acuerdo? Entonces la información que necesitamos transmitir con esto es que va a haber una imagen, va a haber un nombre y alguna información, tal vez un mensaje, qué tipo de notificación es esa voy a estar decidiendo en el camino. Sigamos adelante y empecemos a crearlo. Vamos a empezar por crear un marco que ya he creado aquí. Vamos a darle un relleno por ahora y luego le vamos a dar algunas esquinas redondeadas. Ahora, no me estoy apegando a ningún estilo específico ni a ningún tipo específico de diseño como el diseño de Apple o Android o algo por el estilo. Voy a crear algo propio. Así que tenlo en mente. Todo bien. Entonces ahora tenemos las esquinas redondeadas, y entonces lo que vamos a hacer es que vamos a colocar una foto. Entonces voy a hacer que también sea un marco y estoy sosteniendo turno. Voy a darle un relleno, uno rojizo sólo por ahora. También le voy a dar esquinas redondeadas, y voy a intentar colocarlo perfectamente, ¿verdad? Ahí lo tenemos. Y luego va a obtener un elemento de texto y luego va a escribir algún texto. Entonces el texto debería ser un poco más pequeño. Entonces hagamos 16 tal vez. 14, y luego vamos a escribir algo aquí. Entonces esta cosa podría ser, quiero decir, ¿qué tipo de notificación estamos recibiendo en realidad? Digamos que es un mensaje de alguien, y así esta persona se llama JACOB y nos están enviando un mensaje. ¿Bien? Entonces, una cosa a saber también es ¿desde qué tipo de aplicación se está enviando esta? Entonces lo que podríamos hacer es que también podríamos anotarlo. Entonces podríamos escribir solo el nombre que es Wettap por ejemplo Y entonces tenemos un mensaje de Jacob. Vamos a cambiar el color, hacerlo grisáceo, y luego vamos a empezar a escribir el contenido del mensaje Entonces como no es suficiente lugar, sólo vamos a poner algunos puntos. Aquí tenemos esto. Sigamos adelante e intentemos probarlo y tratar ver cómo se ve en un teléfono real. Voy a poner un dispositivo como 16, iPhone 16, ahí vamos ahí lo tenemos. Puedo ver que también podemos extenderlo a la derecha y a la izquierda también. Eso no sería un problema. Sigamos adelante y extenderla. Para que podamos escribir más. Entonces tenemos algo de terminación estoy punto, punto, punto. Entonces aquí tenemos una pequeña estructura agradable. Podríamos jugar con él, hacer que se alinee un poco mejor, y ver cómo podría quedar. También podríamos hacer otros elementos más grandes como este. Pero en realidad estoy totalmente bien con que se vea así. Todo bien. Y entonces lo que nos gustaría hacer es quizá agregar una imagen de Jacob aquí. Por lo que cualquier tipo de imagen haría cualquier tipo de persona. Entonces aquí tenemos una imagen, así que sólo voy a tomarla. Voy a copiarlo y pegarlo aquí. Este es Jacob, lo está enviando desde su teléfono. Nos está enviando un mensaje o algo así. Tiene aquí esta pequeña foto muy artística, puede parecer un poco espeluznante, pero así es. Entonces vamos un paso más allá es tal vez incluso mostrar de quién este mensaje o de qué plataforma se está enviando este. Ya dijimos WhatsApp pero a lo mejor podríamos agregar el ícono de WhatsApp. También podríamos agrandar un poco esta foto. Depende totalmente de nosotros. Pero lo que te gustaría hacer es asegurarte de que la distancia de arriba y abajo la misma, ¿verdad? ¿Todo bien? Entonces aquí tenemos el logo como imagen como PNG. Entonces me lo voy a llevar. Lo estoy recortando un poco. Ahí vamos. Y voy a traerlo aquí al encuadre. Para hacerlo más pequeño. Voy a ponerlo en este marco, pero voy a quitar el contenido del clip. Este sería un lindo arreglo donde lo colocamos aquí arriba, y luego se puede ver que dice WhatsApp justo al lado. Es bonito. O eso o podríamos tomar todo esto, sacarlo aquí y simplemente escribir WhatsAP así A lo mejor hacer el logo un poco más pequeño. También podríamos llevar esto completamente en esta dirección hacia la derecha. Esa es también una forma en que podríamos hacerlo. Creo que de esta manera nos ahorra mucho más espacio porque no tenemos que apilar las cosas de una manera y entonces esta zona estaría completamente vacía. Ahora mismo, estamos jugando con el layout, viendo lo que funciona, lo que no funciona de ninguna manera, necesitamos alinear estas cosas. Voy a elegir estos y ponerlos en un diseño automático juntos, y luego voy a ponerlos en un diseño automático con este para que estén alineados en el mismo nivel. Voy a ponerlos entonces en un autolayout con este elemento de texto, asegurarme de que no sean valores aleatorios, pero podrían estar en el cuatro, ocho, 60 y escala, y así Aquí los tienes en un auto, así que la distancia aquí es automática entre ellos, y estos tienen dos o podrían ser cuatro. Depende de nosotros. Pero voy a hacer dos, dos está bien. Entonces al final, tenemos todo este trazado. Tenemos todo este marco. También podemos hacer que sea un diseño automático y luego tenemos la imagen. Tenemos esto juntos, y solo necesitamos alinearlo correctamente. Entonces voy a hacer que se alinee a la izquierda y darle ocho, tal vez, y ahí vamos. Y así, tenemos una pequeña notificación agradable. Pero no estoy súper duper contento con todo lo que pasa aquí Déjame hacer que el espaciado sea un poco diferente. Y lo que puedes hacer es, quiero decir, puedes hacer que todo sea un poco más pequeño, y lo que podamos hacer, juguemos con él. Entonces en cuanto a espaciamiento arriba y abajo, voy a hacer cuatro y cuatro. No 44, cuatro y cuatro. ¿Bien? Y luego para éste, voy a hacer que bloquee la relación de aspecto, haga que llene el contenedor. Y entonces básicamente podemos decidir qué tan grande queremos que sea esta cosa y la imagen va a cambiar de tamaño con ella Entonces ahora me gustaría ir un paso más allá y profundizar en el diseño. Entonces me gustaría disminuir la opacidad aquí, obtener un bonito efecto poco transparente aquí Entonces esto es muy agradable, y esto es algo que a menudo hace Apple, y muchas UI hoy en día, hacen muchos softwares es que quieren asegurarse de que se pueda ver algunos de los antecedentes, pero no podemos hacerlo completamente transparente, así como así, ¿sabes? Y entonces el texto tiene algunas cuestiones en cuanto a legibilidad Así que vamos a construir vamos a agregar no un shader, sino más bien un efecto de vidrio o efecto de desenfoque de fondo Podemos seguir adelante y probar un efecto de vidrio aquí, aunque esto pueda causarnos problemas a la hora hacer esta animación y otras cosas Ahora mismo, esto se ve un poco vidrioso. Vamos a probarlo. Entonces, como pueden ver, esto es bastante vidrioso Lo cual es muy agradable. Y sigue siendo legible hasta cierto punto. Yo diría que este texto aquí o necesita ser negro o completamente blanco, pero hacerlo completamente blanco cuando el otro texto es negro tampoco tiene sentido. Entonces voy a hacerlo negro, pero le voy a dar 50 o 75%, que es un poco mejor que lo que teníamos, no perfecto, pero mejor. Bien, así que ahora lo tenemos. También puedes jugar, agregar algunas sombras, sombra paralela así. Hazlo 15. Entonces solo vamos a fingir que esta es una notificación que alguien recibió. Y digamos que está aquí en medio y estamos escribiendo el reloj. Entonces esto es solo algunas cosas de fondo, y luego tenemos nuestra notificación aquí. Entonces ahora que tenemos esto construido, ahora podemos jugar con él y asegurarnos de que sea adecuado para que empecemos a animarlo Ahora tenemos algo con lo que trabajar, ¿no? 6. Organización de capas para animación
: Bien, bienvenido de nuevo. Entonces, ahora que tenemos estas capas, creamos estas capas, estos diferentes elementos de diseño, estos diferentes elementos de diseño, y tenemos una pequeña configuración de notificaciones de tostadas de notificación de tostadas de notificación en curso. Funciona. Se ve bien. Pero hay una cosa. Cuando venimos a animar esto, podríamos tener problemas con una o dos cosas Y el tema radica en el layout y la organización de estas capas, diría yo. Para ilustrar mejor esto, tengo dos versiones aquí. Uno de ellos tiene diseños automáticos, mientras que el otro no tiene diseños automáticos. Básicamente se deja ahí afuera solo como un marco normal sin diseño automático. Espero que estés familiarizado con ello. Si no eres Autolayouts nos permite configurar ciertos espacios como margin, padding, y configurar cosas y organizarlas de cierta manera que las hace más receptivas y más automáticas receptivas Entonces, para ilustrar a lo que me refiero, si echamos un vistazo a ambos, se ven idénticos. Son exactamente iguales, o casi exactamente. Pero hay una diferencia. Uno de ellos tiene diseño automático y uno de ellos tiene diseño automático. Entonces podemos probar esto cambiando el tamaño. Y como puedes ver con éste, cuando cambias de tamaño, las cosas están por todas partes. No están correctamente configurados. Ahora, por supuesto, podemos configurar esto de manera agradable y ordenada, pero puede ser un poco difícil de hacer, ¿verdad? Como puedes ver, el texto se está envolviendo de cierta manera, y hay muchas cosas que podrían salir mal. Si intentas esto por tu cuenta, podría ser aún peor. Si bien hacemos esto con éste, se ve un poco más organizado, ¿verdad? Incluso podemos configurarlo para que sea un poco diferente. Incluso podría verse mejor si lo hacemos así, por ejemplo, se ve muy suave y tiene una animación suave. Si bien esta necesita algo de trabajo. Especialmente, estamos trabajando aquí con marcos. Si estás trabajando con grupos o si ni siquiera tenías ningún tipo de grupo, estás trabajando con objetos, capas y demás, esto habría sido mucho peor La clave aquí es crear y organizar tus capas correctamente antes de comenzar para que puedas tener una animación suave y agradable que no te haga caminar y correr por todas partes solo para asegurarte de que sea perfecto. ¿Bien? Entonces, la forma de hacerlo es, como dije, crear diseños automáticos. Entonces, ¿cómo lo haces vas a poner elementos que están muy juntos así Puede sostener los objetos que desea hacer clic derecho y luego ir a la selección de fotogramas o agregar Autoayout Vas a agregar un Autolayout directamente, y luego vas a agregar un autolayout y luego vas a agregar un Y luego vas a hacer todo este diseño automático haciendo clic aquí. Y entonces va a quedar un poco raro. Entonces lo vas a ajustar. Vas a escribir ocho, por ejemplo, vas a agregar un poco más de espaciado a la derecha, y puedes hacer este relleno si quieres. Depende de ti. Sigue pareciendo un poco problemático porque agregamos el relleno aquí, solo podemos hacerlo abrazar. Y entonces, como puedes ver, parece que ya sabes, mantener el turno y redimensionarlo se ve mucho más agradable Y eso básicamente hace que todo el proceso sea mucho más fácil de hacer cuando se trata de animaciones. Tienes todas tus capas organizadas. No hace falta que te preocupes por ellos. Y ahora comencemos con animate. 7. Cómo crear tu primera animación: Bienvenido de nuevo. En esta lección, vamos a crear nuestra primera animación, que tengo que decirte, tengo que estropearla para ti. No es tan emocionante. No es lo más difícil de hacer en el mundo. Y sobre todo si estás familiarizado con los programas de edición de video, esto va a ser un paseo por el parque. Empecemos. ¿Cómo lo hacemos? Ahora, hay muchas animaciones diferentes y diferentes fuentes que vamos a explorar. Pero primero, aprendamos nuestro camino. Ahora, ya lo sabemos para comenzar con la animación. Si estás buscando aquí algo sobre animaciones, no lo vas a encontrar. El primer paso que vas a hacer es ir al Motion o al modo Motion. Una vez que estás en él, ahora estás en el flujo de trabajo o espacio de trabajo de animación Entonces ya estás aquí. Tienes las cosas resueltas. Vas a ir de cabeza al panel derecho y vas a ir al área de animaciones aquí, la sección. Entonces tienes dos opciones. Se puede ir a animaciones. Así que esto te ofrece un conjunto de animaciones que tienen muchas opciones diferentes. Si estás familiarizado con PowerPoint o cualquier tipo de software de creación de presentaciones, también tiene una pestaña similar aquí con animaciones. O puedes seguir adelante y simplemente hacer clic en el Plus. Ahora, el plus, vamos a rebobinar. Da clic en el Plus. Te va a dar de inmediato una animación. Probablemente va a ser una animación de posición y es normal. Esa es la forma más sencilla de crear una animación. Pero como dije, como ya mencioné, puedes hacerlo alternativamente yendo aquí y eligiendo una animación. Ahora, puedes decidir desde los básicos. Se puede decir, Oye, quiero hacer uno relacionado con la posición a escala, a la rotación, el tamaño, la opacidad Hay burstgnit estos son presets. Así es como los llamamos, y son básicamente animaciones que ya están configuradas para que tengan diferentes tipos de movimiento, diferentes tipos de velocidades y demás Esa es una cosa muy importante para que entiendas. La animación no se trata solo de decir pasar del punto A al punto B. Podríamos tratarla de esa manera, pero en ese momento, no seríamos buenos diseñadores de movimiento. En este punto, esto es lo que deberías estar aspirando. Deberías tratar de conseguir un buen diseño de movimiento. La manera de hacerlo es entender que buenas animaciones son poco más que solo movimientos, simplemente yendo del punto A al punto B. Pero se trata de ¿ cómo se llega del punto A a que te exhilaren al principio ¿Te relaja al final? ¿Te ralentizas al final? O tal vez lo haces todo al revés. Aceleras muy rápido al principio y luego disminues la velocidad en el medio, disfrutas del momento, y luego aceleras al final. Lo terminas con una explosión. Hay muchas maneras de hacer esto. A lo mejor empiezas despacio y vas rápido y luego lento y luego rápido y luego lento. Hay muchas maneras diferentes de hacer esto, pero lo más importante es que debería haber una idea a veces incluso hay un rebote. Eso es algo que vas a aprender cuando se trata de animaciones, hay un rebote, ¿verdad? Es muy común que cuando va la animación, digamos, viene esta pequeña notificación y luego va a la derecha y luego vuelve, está rebotando como una pelota Golpea y vuelve un poco. Todos estos factores dan una impresión. Si estás creando una app que tenga pequeños personajes lindos y que tengan poco movimiento agradable. Tiene sentido hacerlo hinchable. Rebotar es divertido. Pero por otro lado, crear una animación que debería sentirse premium y elegante debería ser de ritmo más lento Esto es exactamente lo que vamos a aprender en la siguiente lección. Ahora mismo, hemos creado nuestra primera animación. La siguiente lección, vamos a explorar los diferentes tipos de animaciones. 8. Animación de posición, escala y opacidad: O Bienvenido de nuevo. Entonces, lo primero aprendimos a crear una animación en la última lección, pero no pudimos probarla, ¿verdad? Entonces sigamos adelante y tratemos de probarlo. Sólo voy a hacer click en más. Voy a conseguir la primera animación, y no voy a cambiar nada al respecto, ¿de acuerdo? Entonces, la forma de probarlo, como ya hemos aprendido antes, es caminar esta pequeña cosa del tiempo, y solo vas a hacer clic en el espacio, y luego vas a previsualizar cómo se ve, y solo va a estar en un bucle. Entonces como pueden ver, es movimiento. No es especial. No es una locura. Pero obviamente, no es bueno. Sólo va de aquí. Entonces este es un tipo de movimiento, y cuando entramos en los detalles del mismo, cuando haces clic en él, tienes muchas opciones bajando. No se sienta abrumado. No es tan complicado. El tipo de movimiento se elige para nosotros como deslizarse hacia adentro. Eso significa que es un tipo de animación de entrada. El objeto está entrando en el campo de visión. También podría deslizarse hacia afuera. Entonces comenzaría por donde está y luego saldría a la izquierda. ¿Bien? Entonces eso es una cosa que podemos configurar. También puede ser personalizado. Esto podría estar subiendo, abajo, derecha, izquierda, lo que queramos. Pero volvamos al tobogán porque esto es lo que vamos a buscar. Puedes elegir desde dónde quieres que se deslice. ¿Está a la izquierda, de la derecha, de arriba a la izquierda? Pero sigamos con la izquierda. La notificación viene de izquierda a derecha. Aquí, donde se pone interesante, también podemos decidir la distancia. Si pasas el cursor aquí con un mouse, también puedes simplemente arrastrarlo y puedes aumentar la distancia Entonces hagamos un poco más hasta que quede fuera de visión. Y como pueden ver, ahora, funciona mucho mejor. Entonces está fuera de visión, y luego entra en marco. Bien, entonces tenemos algunas opciones más que vamos a explorar un poco más tarde. Por ahora, esto es suficiente para nosotros. Esta es una pequeña y agradable animación de posición. ¿Qué más tenemos? Una vez que comenzamos a hacer clic en Plus, comenzamos a obtener diferentes tipos de animaciones como la escala, ¿verdad? Entonces la escala va a aumentar o disminuir, veamos. Entonces, cuando lo estamos previsualizando, parece que se está haciendo más pequeño Para que puedas hacer click en él y ver lo que dice aquí. Entonces está diciendo que se escala, ¿verdad? Entonces está entrando en marco y luego se escala. Pero parece que se está haciendo más pequeño. Así que vamos a probarlo y hacerlo 200%. Entonces sí, eso significa que fue 200%. Entra en marco, y luego se convierte en 100%. También podemos cambiarlo y escalar hacia fuera. Entonces pasa de 100% y escala a 200%. Así que tenemos más o menos la misma lógica dando vueltas con el tipo y la cantidad. Y esto es muy bonito porque tiene sentido. También puedes simplemente dar click en estos cuatro círculos y podrás elegir cuál quieres. Se puede hacer que gire. Veamos cómo se ve eso. Debe ser divertido. Perfecto. Entonces todos estos, pueden parecer un poco tontos ahora mismo, pero no deberían usarse así. Deberías estar pensando en ellos de manera más intencional. Y para cada tipo diferente de animación o para cada tipo de escena tipo de caso de uso, deberías tener una animación diferente. Entonces debes entender que para este caso de uso, rotación realmente no funciona, pero para otro, podría ser. También tenemos lados. Entonces, ¿de qué tamaño cambia las cosas? El tamaño funciona. Se podría decir, Oye, la escala y el tamaño son lo mismo. Pero cuando se trata de Figma, no lo es. Lo que hace aquí es que simplemente estira el marco en sí, ¿verdad? Así que solo lo trae y lo estira . Eso es lo que hace. Lo que hace la báscula es que la estira de una manera diferente. Es como si hicieras clic en K. Volvamos al editor normal y haces clic en K. Lo que hace K, te permite escalar Abre una herramienta que te permite escalarlo manteniendo la escala de todo. Todo sería redimensionado de la misma manera exacta, pero solo mucho más grande Pero si lo hacemos con el normal, si presionas V, obtendrías el mouse normal y de esta manera, puedes escalarlo la imagen podría hacerse más grande, pero el texto no lo haría y se coloca torpemente Esa es una diferencia. Así que ahora volviendo a las animaciones, hay mucho más por explorar. Ahí está la opacidad. Y como mencioné, todos estos presets que tenemos aquí Sigamos adelante y probemos uno de ellos. Voy a ocultar la posición donde por ahora y vamos a hacer estallar. Como puedes ver, con solo agregar burst, siguió adelante y agregó múltiples animaciones. Añadió cuatro para ser exactos, y todos están preestablecidos con diferentes tipos de velocidades y cosas y gráficas que pueden resultar un poco confusas. Agregué opacidad, rotación, escala y posición. Como puedes ver, también son todos los tiempos de manera diferente . Y así se ve así. Lo bueno de estos es que te ahorra mucho tiempo si no tienes tiempo en tus manos y solo quieres algo rápido y algo ya hecho. Pero si quieres hacer algo con tus propias manos, entonces te recomendaría aprender más, y eso es exactamente lo que vamos a hacer en las próximas lecciones. Gracias por mirar, y nos vemos en la siguiente lección. 9. Timing, duración y facilidades: Bien, entonces, bienvenido de nuevo. Así que ahora que hemos establecido una animación, ¿no? Hemos aprendido a crear una animación. Hemos aprendido a usar uno de los presets o a jugar con diferentes tipos de animaciones y también a usar y navegar por esta línea de tiempo y entender cómo funciona, ¿verdad Hemos hecho todo eso, pero ahora es el momento de hablar de los detalles. Entonces, cuando vas a la posición, bien, hemos hablado de cómo hay múltiples factores o múltiples variables con las que podemos jugar, si es posible. Algunas de estas variables son el tipo, por lo que el tipo de movimiento, ya sea un slide in o un slide out o personalizado, entonces tenemos la dirección. Hablamos de esto así como de la distancia. De lo que no hemos hablado es el retraso, la duración y la flexibilización. ¿Bien? Y estos no son tan fáciles de hablar. Ahora, sí, claro, el retraso es simple. Simplemente significa cuánto se va a retrasar este tipo de animación. Para que podamos cambiar esto. No es tan difícil. Como puedes ver, podemos, ya sabes, deslizarlo hacia arriba y puedes ver que la animación se está retrasando, ¿verdad? Tan simple como, ya sabes, tan simple como suena, simplemente se retrasa, ¿verdad? No es nada más, nada menos. Pero tenemos algo, ya sabes, tenemos algo más. Entonces, cuando volvemos a elegir este elemento y vamos a la animación, también hay duración, que también suena muy simple, ¿verdad? Entonces tienes 500 milisegundos aquí. Entonces podemos duplicar eso y decir mil y luego la animación simplemente va a ser más lenta. No hay sorpresa ahí. Eso también es muy sencillo. Donde puede complicarse un poco o desafiar es la flexibilización Ahora, por suerte, con otros programas, es más difícil Con Figma, se hizo o se simplifica para los usuarios con estos presets Nuevamente, tienes estos diferentes presets. Ahora, pienso que por defecto, se pone como facilidad, pero hay muchos tipos diferentes. Ahí está el tipo lineal, que es el tipo normal de movimiento. Es un movimiento que es lineal. No cambia, no acelera, no desacelera. Es solo constante, ¿verdad? Entonces tienes si hay un auto que va 10 millas por hora, 10 kilómetros/hora, simplemente sigue conduciendo exactamente a la misma velocidad, ¿ sigue conduciendo exactamente a la misma velocidad verdad? Piense en ello como un auto. Cuando dices facilidad, lo que pasa es que este auto arranca a la misma velocidad, se queda a 10 kilómetros, y luego al final, empieza a disminuir la velocidad, igual que lo haría un auto normal, ¿verdad No solo aprietas los frenos de repente, sino que empiezas a reducir la velocidad para desacelerar, ¿verdad Entonces eso es exactamente lo que sucede. Se va y luego empieza a flexibilizar. Lo siento mucho, eso fue facilidad en. Tenemos facilidad de salida. Ahí vamos. Entonces, como puedes ver, es como si entrara y empezara a estacionar ralentizado así así ¿Bien? Tenemos diferentes tipos. Hay facilidad de entrada y facilidad de salida. Así que la facilidad de entrada está al principio. Entonces cuando estás comenzando, arranca, el auto empieza a jalar. Comienza lentamente y luego se remueve, se vuelve más rápido. Y en este caso, no se está relajando, pero podemos hacer ambas cosas Entonces veamos cómo se ve. Entonces este parece un auto normal. Comienza lento y luego toma velocidad, y luego termina también lentamente. Así es como funciona normalmente. Ahora, tenemos muchas opciones diferentes donde introducimos algo llamado los límites Así que relaja hacia atrás, por ejemplo. Entonces aquí tienes un poco de equilibrio. Entonces entra y luego va un poco demasiado lejos a la derecha y luego vuelve. Es una especie de equilibrio, y eso es exactamente lo que se supone que debe ser, ya sabes, lo que se supone que está sucediendo. También tienes muchos presets diferentes. Así que adelante, ya sabes, trata de explorarlos, tratar de entender qué es lo mejor. Y lo genial de esto es que tienes estas opciones personalizadas. Entonces puedes decir, hagamos costumbre, y luego puedes personalizarlo. Ahora bien, no te aconsejo que sigas adelante y empieces a jugar con esto todavía si no estás familiarizado porque esto puede ser un poco complicado. Pero si quieres, si realmente quieres ir y probarlo, déjame explicártelo muy rápido. Bien, entonces tienes dos opciones distintas. Tienes una curva y tienes un resorte. El resorte está más relacionado con tener rebotes y otras cosas. ¿Bien? Así que vamos a probarlo con el resorte. Tienes este rebote muy rápido. Puedes hacer la velocidad, puedes hacer muchas cosas diferentes. Pero básicamente, configuras la misma animación de diferentes maneras. Entonces este, también está teniendo un rebote, pero es un tipo diferente de rebote. Veamos cómo se ve con la primavera. Así que parece un resorte como un resorte real que salta hacia atrás. Entonces tienes diferentes tipos de movimiento. La forma en que haces esto, tienes esta línea. Una vez que cruza esta línea, se convierte en un rebote. Entonces, si lo mantenemos bajo esta línea, hay un rebote muy, muy leve, como pueden ver, muy leve y es porque no podemos verlo. Entonces, si tratamos de disminuirlo, esto es tanto como podamos disminuirlo. Entonces tiene cero. Casi no tiene límites, ¿de acuerdo? Entonces esto es como un resorte. Como dije, hay que pensarlo con el rebote. El rebote está dentro de él, y puedes crear rebotes infinitos como este, por ejemplo, lo cual es una locura, pero puedes verlo graficar aquí Entonces es como un manantial. Para que puedas decidir cuántos rebotes va a tener derecha e izquierda aumentando esta cantidad Y una vez que tienes uno, eso es una locura. Ahora, volvamos un poco a la curva. Curva es cuando se pone más elegante. Todavía puedes tener un rebote, pero se pone un poco más elegante, ¿ Entonces ahora, como pueden ver, tenemos un rebote. Todo se trata de estos dos como esta curva, ¿verdad? Y aquí tienes dos opciones, dos curvas. Y deciden muchas cosas, como puedes ver. Como dije, la curva va por encima de la línea, va a ser un rebote. Entonces intentemos dejar esto abajo. Deja esto así, por ejemplo, ahí vamos. Entonces ahora no se supone que tengamos ningún límite, pero como puedes ver, es más como lineal, y es porque parece una línea recta, ¿verdad Entonces, ¿qué tal si nos relajamos en un poco, bien? Entonces, flexibilizando los medios, esta es la velocidad que va a recoger. Por lo que puede coger velocidad lentamente. Así es como lo hacemos flexibilizar, ¿de acuerdo? Así y luego coge velocidad. Entonces vamos a ver. Ahí vamos. Y luego cogió velocidad muy rápidamente. Ahora, podemos hacer que sea lo contrario. Podemos hacer que se apresure haciendo lo contrario. ¿Ves eso? Entonces lo mismo aquí, si queremos que se relaje, tenemos que decirlo de esta manera. Entonces, si queremos que se relaje, veamos cómo se ve. Entonces como pueden ver, se detuvo muy rápido. No se facilitó, pero se alivió mucho. Ahora hagamos lo contrario. Ahora lo que va a pasar es que va a tirar muy rápido y luego disminuir la velocidad en el medio y luego va a coger velocidad hasta el final. Entonces como puedes ver, muy rápido y luego lento y luego rápido. Y luego terminó la animación muy rápidamente. O sea, si lo configuramos para que no haga bucle, así es como se ve. Pero aquí es un poco demasiado rápido. Como hagámoslo así. Eso es. Entonces podemos hacer lo contrario. Podemos lograrlo si lo hacemos así y éste así. Entonces tenemos algo más como una facilidad en. Entonces como puedes ver, no es tan empinado y en el medio, se pone muy empinado, muy rápido y luego se ralentiza. Bien. Así que ya ves. Y así así , siguió adelante. Ya sabes, yo me relajé y se alivió. Deja todo eso a un lado y pregúntate, ¿para qué sirve esto? ¿Por qué estoy haciendo esto? ¿Cuál es el propósito de esto? Y déjame decirte la respuesta. La respuesta básicamente radica en el efecto que estás tratando de dar, la impresión. ¿Estás tratando de dar una impresión elegante y gentil? Entonces te recomendaría tengas estas animaciones fáciles porque quieres demostrar que las cosas son elegantes, las cosas son hlarating Hay mucha innovación y velocidad y acción, pero también hay desaceleración. Ya sabes, y eso aporta una especie de elegancia a cualquier marca, cualquier movimiento que intentes poner ahí fuera. Y luego cuando vas con la primavera, primavera es más una sensación divertida y caricaturesca al respecto En realidad no es tan malo, pero como que te dice, oye, todos nos estamos divirtiendo aquí. No tiene que ser tan suave y agradable y gentil, sino que puede ser hinchable. Puede ser divertido. Piensa en ello como personajes de animación, caricaturas que siempre están saltando y rebotando por todas partes, y eso es exactamente lo que estás haciendo Tienes animaciones hinchables. Me parece genial si está configurado de la manera correcta para el cliente adecuado o para la identidad correcta, ya sabes. Entonces, como que tenías que preguntarte, ¿qué tipo de marca o qué tipo de sitio web o aplicación estás construyendo? En caso de que las animaciones se vean divertidas, caricaturescas y amigables o deberían ser más suaves y elegantes y, ya sabes, de alta calidad Entonces hay que pensar en eso. Y claro, cada persona tiene su propio estilo diferente. Algunas personas hacen facilidad de entrada, facilidad de salida, algunas personas simplemente se relajan. Entonces la gente hace muchas cosas diferentes. Así que piensa en hacer tu propio estilo o hacer un estilo específico para la marca en la que estás trabajando. Y si ya hay movimientos de parada y videos y animaciones relacionados con la marca, entonces tal vez puedas intentar encontrar el estilo a partir de ahí y simplemente continuar con el mismo estilo Entonces muy simplemente explica así es como puedes cambiar el movimiento a la duración, la flexibilización, el retraso de tus animaciones para dar una cierta impresión y efecto Muchas gracias por escuchar, y nos vemos en la siguiente lección. 10. Secuenciación de múltiples elementos: Hasta el momento, tenemos esta pequeña animación que construimos aquí. Y ya hablamos anteriormente de flexibilizar los ajustes y demás. Vamos a tratar de no hacer mucho al respecto en esta lección. En esta lección, vamos a hablar más sobre múltiples animaciones dentro de una escena, que es algo que vas a estar haciendo y deberías querer hacer porque una animación es genial. Dos animaciones, aún mejor. Diez animaciones. O tal vez demasiado. Si lo haces de la manera correcta, entonces puedes multiplicar estas animaciones. Puedes ponerlos uno encima del otro y ponerlos en capas una manera que se vea suave y que funcione y se sienta profesional. Entonces esto es exactamente lo que estamos haciendo. Y si piensas en cualquier tipo de SO, cualquier tipo de sistema operativo con el que trabajes, te darás cuenta de que a menudo tienen estas animaciones en capas. No es solo una notificación que viene y como ding, sino más bien es más estratificada. Hay múltiples cosas sucediendo en el fondo. Bien. Entonces voy a tratar de demostrarlo y hacer esto con ustedes juntos paso a paso. Entonces ahora tenemos esta animación de posición. Se ve genial. Sigamos adelante y agreguemos otra animación. Entonces solo voy a hacer click en el botón Plus, y me va a dar una animación a escala, que no es realmente no se parece a lo que quiero estar haciendo. Así escala en 120%. En lugar de escalar, voy a seguir adelante y ver qué tamaño puede hacer por mí. ¿Bien? Entonces ahora estamos trabajando con el tamaño, y puedes ver que está cambiando el tamaño en Entonces es tener el tamaño normal y luego hacerse más grande. Queremos hacer lo contrario. Entonces vamos a hacer redimensionar. Entonces vamos a tener un tamaño diferente. Se va a dimensionar a lo que tenemos ahora mismo. Sé que es un poco difícil de entender, y siento que tal vez deberían reformular esto de alguna manera No lo pienses demasiado ahora mismo. Ahora que tenemos esto, en vez de redimensionar, voy a hacer costumbre Porque cuando lo haces a medida, te permite elegir si quieres hacer tanto X como Y o si quieres hacer ancho y alto, te da estas opciones. Muy bien, lo que vamos a hacer es que vamos a elegir el acceso y vamos a ir a X. Eso sólo va a cambiar el ancho para nosotros, que es lo que queremos. Entonces vamos a venir aquí y vamos a decir que el ancho antes será de diez, y el final va a ser de 100. Ahora veamos cómo se ve. No es exactamente lo que queremos. Entonces vamos a ponerlo el principio o aquí en el medio. Y voy a cambiar el tamaño del ancho al principio para que sea negativo, ¿de acuerdo? Y eso es porque creo que cero es tal vez el tamaño en el que empiezas. Y entonces necesitas que sea mucho menos que cero, ¿de acuerdo? Entonces ahora venimos aquí. Vaya, aquí está la animación de dimensionamiento. Por eso no estaba mostrando mucho. Entonces vamos a traer la animación de tamaño. Lo vamos a poner aquí. Vamos a extenderla. Ahora podemos echarle un vistazo. Entonces como pueden ver, se está abriendo. Va mucho más allá de lo que queremos. Entonces vamos a hacer que el ancho sea cero. Entonces como mencioné, cero está en el punto donde ese es el ancho ya. Entonces ahí fue donde estaba. Entonces va a pasar de negativo 244 a cero. ¿Bien? Ahora, voy a mover un poco la animación porque quiero que empiece un poco tarde, y voy a extender aquí la duración total de toda esta animación. Entonces quiero ver cómo se extiende desde este círculo. Así que voy a traerlo por aquí, tal vez o aquí. Bien. Y voy a hacerlo aún más pequeño al principio. Bien. Me acerco un poco. Entonces voy a hacer que sea negativo tres, uno, ocho. Creo que esto es bueno. No perfecto, pero bueno. Va a comenzar aquí y luego se va a abrir. Pero como puedes ver, hay un poco de rareza porque llegar aquí y parar aquí y luego se está abriendo. Lo que preferiríamos que pasara es que llegue a la mitad, ¿de acuerdo? Y luego se abre. Entonces, ¿cómo podemos conseguir que eso suceda? Esa es una muy buena pregunta. No es fácil de hacer, pero vamos a tratar de trabajarlo. Entonces, cómo me imagino que se haga es, para cuando esto llegue aquí, debería estar llegando en medio. Así que vamos a hacer exactamente eso, ¿de acuerdo? Entonces este marco debería estar en el medio. Entonces voy a dar click en el marco. Voy a ir al editor. Vamos a venir aquí. Y vamos a tratar de centrarlo. ¿Bien? Lo vamos a poner aquí en medio, pero no en este momento, más bien este momento. ¿Bien? Veo que algo va mal. Ve a ajustar esto un poco. Así que voy a traer esto va a elegir esto y traer en el medio, ¿de acuerdo? Entonces ahora esto es lo que va a pasar. Va a venir en medio y luego se va a abrir. Y para el momento en este momento, cuando la animación aquí llegue a su fin aquí y empiece a abrirse, voy a hacer esto. Una vez que termina, comienza la animación de tamaño. Y una vez que empiece a abrirse, va a gustar que va a haber una animación donde va a cambiar la posición. Entonces, ¿cómo hacemos eso? Sencillo, sólo vamos a ir click y click en posición aquí. Entonces vamos a agregar otra posición uno. Y vamos a hacerlo personalizado, porque solo queremos hacer una animación personalizada. Entonces va a comenzar desde cero y luego sólo va a ir a la izquierda, así que negativo 92. Entonces veamos si eso va a funcionar. Vamos a ponernos aquí hasta aquí. Veamos ahora. Como puedes ver, eso es exactamente lo que queremos, pero no el número correcto. Entonces intentemos que funcione. Y esto es apenas aproximar. Ahí vamos. Entonces vamos a ver. Todo bien. Eso es muy bonito. Ahora, todavía no es perfecto, y aún quedan algunas cosas por hacer. Pero creo que ya estamos avanzando mucho. Entonces, lo que aún podemos hacer, podemos, ya sabes, cambiar las animaciones para que podamos tener una agradable facilidad. Puedes hacerlo, ya sabes, más personalizado y puedes aumentar la flexibilización si lo deseas Y lo mismo con el tamaño, para que puedas hacerlo personalizado. Y si quieres, también puedes darle un poco de rebote. Veamos cómo se ve. No es la mejor montura, para ser sinceros. Entonces hagámoslo simplemente normal. Yo diría que es un poco demasiado lento, así que voy a hacerlo más rápido. Lo que es aún más genial es, ¿y si hacemos que se superponga con éste? Ahí es exactamente donde podrías empezar a ganar. Entonces no es perfecto, pero se vuelve más estratificado. Está ocurriendo al mismo tiempo. No es uno por uno, sino todo lo que sucede de una vez. Pero ahora mismo cuando hacemos algo como esto, no está funcionando muy bien. Vamos a retomarlo y veamos qué podemos hacer con él. Podemos empezar a cambiar el tamaño, podemos empezar a cambiar las cosas en diferentes momentos. Depende de ti, pero debería quedar bien. Como pueden ver, esto se ve apagado. Así que trata de asegurarte de que va bien. Entonces sí, ahora tenemos una pequeña y agradable animación en capas. Tiene múltiples factores entrando. Podemos ir un paso más allá y adentrarnos en los elementos individuales dentro de ella, como estos textos, por ejemplo. Lo que podemos hacer por ellos es que podemos agregar, por ejemplo, un efecto de opacidad Entonces vendría tenemos que simplemente alinearlo correctamente, y pasaría de tener cero opacidad a tener un poquito más pero como dije, solo hay que alinearlo correctamente Entonces esto se ve mucho más suave como si el texto se estuviera desvaneciendo y es realmente agradable También puedes, ya sabes, cambiar muchas cosas dentro de esta animación solo para que se vea más natural, colocándola en capas, como dije Cuanto más le pones, más sofisticado se ve. Y, por supuesto, al final del día, intentándolo estamos apuntando a la simplicidad. Estamos apuntando al minimalismo y mucho diseño. Pero también, sólo podemos alcanzar esa mirada simple, limpia haciendo muchas cosas complicadas de fondo. Entonces, adelante, pruébalo tú mismo y mira lo que puedes llegar a partir del tipo de animaciones en capas que puedes llegar a tener. Intenta hacer tantos como puedas. Pero lo más importante, asegúrate de que se vea normal. Parece armonizado como si estas animaciones estuvieran trabajando juntas. Muchas gracias por escuchar, y nos vemos en la siguiente lección. 11. Organización de la línea de tiempo: Hola, y bienvenidos de nuevo. En esta lección, vamos a hablar de organizar tu línea de tiempo. Entonces, lo que quiero decir sobre esto no es solo de organizar tu línea de tiempo, sino también de asegurarte de que las duraciones, las animaciones, estén bien cronometradas De eso se trata realmente la línea de tiempo. Se trata de cronometrar tus animaciones y asegurarte de que estén sincronizadas, armonizadas de una manera que se sienta natural y suave y todas las cosas buenas Entonces ahora, en las últimas lecciones, hemos creado esta pequeña y agradable animación. Y como pueden ver, jugamos un poco con las animaciones. ¿Bien? Jugamos con las duraciones de las animaciones y el tipo Y una cosa a tener en cuenta es que, ya sabes, los marcos están organizados de esta manera. Es una forma muy sencilla, intuitiva a la izquierda. Entonces básicamente, tienes el marco en el que estás trabajando. Entonces enmarca uno, por ejemplo, y luego tienes todos los tipos de animaciones que están ligadas a él. Y se puede ver la duración máxima. Entonces se puede ver que este es el tiempo que este elemento, este marco se mueve o cambia por dentro. Y luego puedes ver que la animación de posición va de este tiempo a aquí, y luego tienes la animación de tamaño sucediendo al mismo tiempo que otra animación de posición. Lo mismo con el fotograma cinco, pero el fotograma cinco solo tiene una animación de opacidad Entonces como puedes ver, cuando cambiemos la animación del fotograma cinco, va a arrastrar todos los demás con él. Y lo mismo aquí sólo va a estirar todas las demás animaciones con él. Hasta el momento, esto es claro. Entendemos cómo funcionan estos. Sigamos adelante y tratemos de meterse un poco más con ello. Aprendamos a hacer animaciones concurrentes así como animaciones que están sucediendo una tras otra sucediendo Básicamente, vamos a jugar con la línea de tiempo. Ahora bien, en términos de animaciones concurrentes, estas son algo así como concurrentes Entonces hablemos de crear una animación que suceda después de eso, ya sabes, extendiendo la escena. Entonces vienes aquí, recibes un mensaje, ¿verdad? Lo cual es muy agradable. Se ve genial. Ahora bien, ¿qué pasa después de recibir este mensaje, verdad? Entonces estoy pensando que otra animación que podría caber es tal vez se movió fuera del camino. A lo mejor el usuario a través de la izquierda. ¿Bien? Así que en vez de deslizarme, voy a hacer que sea un deslizamiento hacia fuera y voy a llevarlo todo el camino a la izquierda. Entonces ahora mismo no está haciendo ningún movimiento, y es porque supongo que la animación está fuera de la línea de tiempo. Entonces voy a extender la línea de tiempo aquí. Todo bien. Entonces ahora podemos ver la animación y puedo jugar con ella. Entonces la distancia, aumentemos la distancia para que desaparezca, y ahí vamos. Nuevamente, igual que aprendimos, vamos a seguir adelante, ir al puesto, y vamos a tratar de que sea más interesante. Veamos qué podemos hacer con hinchable. Este rebote no es muy hinchable de la manera que queremos que sea Yo solo voy a hacer facilidad y luego voy a hacer costumbre. Entonces voy a personalizarlo. Ahora, lo que es interesante, quiero que rebote al principio. Quiero que la persona lo lleve a la derecha y luego vaya a la izquierda. Veamos cómo se ve eso. ¿Ves eso? Se fue un poco a la derecha, reboté al principio y luego me fui Y ese tipo de le da un poco de carácter así como de identidad. O sea, cuando estás tocando la pantalla, tal vez vengas a tocar esta notificación, y luego por accidente, la tomas un poco a la derecha y luego llevas a donde quieres llevarla, que es a la izquierda. Y así como así, agregamos una animación diferente dentro de la línea de tiempo. Podemos seguir adelante y ampliar la línea de tiempo y hacer otra animación. Entonces podemos hacer eso podemos ir al modo de diseño. Voy a tomar esto. Voy a traerlo aquí y voy a, ya sabes, vamos a centrarlo. Y voy a escribir Bien. Ahora tenemos esto y mantengámoslo centrado. Entonces voy a volver a la animación al modo movimiento, y voy a quitar las otras animaciones que tiene esta. Como puedes ver, fue y copió todas las animaciones que tenía. Voy a eliminarlos todos y voy a crear los míos propios y voy a tener que sea un veamos qué tenemos aquí. Magnificar suena interesante. Eso se ve muy bien. Pero quiero que sea un poco más corto. A ver. Pero podemos seguir adelante y volviendo aquí, los voy a poner en el mismo nivel. Entonces voy a copiarlo y ponerlo aquí. Ahora esto también va a tener la misma animación. Voy a agregarlo aquí y veamos cómo se ve. Y lo que sería más genial, incluso, voy a traer esto por aquí. Voy a venir aquí y darle a esto otra animación. Voy a darle a este fotograma otra animación, y eso va a ser justo aquí. Vamos a darle una animación de posición. En lugar de deslizarme hacia adentro y deslizarme hacia afuera, solo quería ir con la Y y así comenzará en cero y luego irá por 100. Entonces no queremos bajar, sino todo lo contrario, queremos ir al negativo 100, digamos, eso es demasiado. Pero creo que ya sabes a dónde voy con esto, voy a darle click de nuevo. Hagamos 2030. Esto es bastante bueno, pero el momento no es perfecto. Y creo que necesitamos tener esto en la capa superior. Ahora voy a volver a fingir mi moción. A veces no ves la línea de tiempo y solo tienes que hacer clic en cualquier elemento. Ahora esto se ve mucho más bonito. Podemos hacerlo aún más perfecto llegando a la posición y jugando un poco con ella Ejemplo como este. Y se puede ver lo realmente agradable que es esta animación, los pequeños fotogramas pequeños, podemos ir a examinarlos. Ahora, claro, solo quiero hacérselo saber, puede ver la notificación entrando aquí. Es una animación diferente a lo que está pasando aquí. Pero eso es a propósito. Yo quería que se viera diferente. Pero obviamente, si estás diseñando algo como esto, las notificaciones deberían venir una manera más consistente. Pero veamos cómo se ve ahora. Bien. Se ve muy bien. Pero déjenme darle algo de tiempo. Siento que el mensaje está apareciendo es un poco demasiado rápido. Voy a venir aquí y voy a mover la posición a aquí y voy a mover estos aquí. Bien. Sí, esto se ve bastante bien. Ahí lo tienes. Oye, tío, ¿cómo te ha ido? Después se borra y luego dice, ¿no te atreves a eliminar mi mensaje? Ya veo lo que estás haciendo. Volvamos a verlo. Perfecto. Y esta es básicamente la forma en que deberías estar trabajando. Deberías estar viendo tu línea de tiempo como un Playground. Sigue adelante y crea diferentes animaciones en diferentes momentos. No te preocupes por hacer un lío. Solo asegúrate de que te estás divirtiendo. Y, ya sabes, al final del día, puedes hacer que tu línea de tiempo se vea más, no sé, organizada. Si simplemente colapsas, en lugar de tener todos estos colapsos, puedes volver a colocarlos, y luego puedes ver cada fotograma. Entonces ahora solo estamos viendo los marcos. No estamos viendo todas las diferentes animaciones que tienen estos fotogramas, y luego podemos moverlos. Podemos jugar con ellos de una manera mucho más fácil. Gracias por escuchar, y nos vemos en la siguiente lección. 12. Animaciones en bucle: Bienvenidos, nuevamente, en esta clase, estaremos creando animaciones que bucle. Crear animaciones en bucle no es tan difícil, pero es un arte sutil que no todos entienden el significado detrás y que todos pueden hacer sin problemas. En esta lección, te voy a explicar cómo puedes lograrlo y ¿de qué sirve realmente? Y, por supuesto, existen diferentes aplicaciones y casos de uso para este tipo de animación. Por lo que varía. No puedo darte una visión general de todo. Pero un claro ejemplo que podría darte son, ya sabes, los carretes o TikToks o cualquier contenido de forma corta que veas en el que los videos se repiten Ellos bucle. Y en realidad, todos los videos circulan en redes sociales. En este punto, ya sabes, aparte de YouTube, en Instagram, Tik Tok, otras plataformas de redes sociales, cuando termina un video, vuelve a retroceder y hace bucles. Pero de lo que estamos hablando es darle a tu video un aspecto sin fisuras en que no parezca que está en bucle Se siente como que sigue y sigue adelante si no estás prestando atención. Entonces básicamente es hacer que el final parezca el principio. Entonces déjame explicarte lo que quiero decir para ti. Entonces ahora mismo, en esta animación que hemos construido hasta ahora juntos, podemos ver un corte muy duro, ¿verdad? Así que vamos a encender el bucle desde aquí, y, ya sabes, ahora mismo, está en modo loop Entonces, cuando toquemos esta animación, vas a ver que suceden cosas, y luego hay un corte duro. El corte duro ocurre por aquí, como pueden ver. Entonces, una vez que llegas hasta aquí, las cosas desaparecen repentinamente abruptamente, hay una manera muy fácil de deshacerte de esto, de arreglarlo La forma de hacerlo, podemos extender un poco la línea de tiempo, y vamos a elegir ambos elementos y vamos a darles una animación. Volvamos. No queremos una animación de rotación. Queremos una animación de posición. Vamos a hacer que se deslice hacia fuera, y vamos a hacerla distancia a la izquierda. Vamos a elegir a los dos otra vez. Vamos a abrirlos. Éste, y aquel. Voy a elegir esta animación y esta y o distancia para que estén fuera del marco. También puedes seguir adelante y personalizarlo si lo deseas, depende totalmente de ti. Todo bien. Ahora lo que tenemos es esta animación que al final, estos dos que se van, podemos personalizarla un poco de una manera para hacer, por ejemplo, uno de ellos se vaya tras otro así. Podemos extenderlos un poco porque podrían ser un poco demasiado cortos. También podemos darles un poco de nosotros también podemos darles una facilidad en. Bien. Ahora mira lo que tenemos ahora. ¿Bien? Entonces obtienes esta animación, obtienes este mensaje, lo borras, obtienes estos mensajes, los borras, y luego hace un bucle, pero no sientes que se enrolla. Todo el secreto radica en el hecho de que estás haciendo el último fotograma aquí se vea exactamente como el primer fotograma. La forma en que lo hicimos es muy fácil. Simplemente hicimos desaparecer todos los marcos, todos los elementos, los elementos cambiantes. Ahora no hay nada, y luego volvemos al punto uno, obtenemos este mensaje, lo borramos, obtenemos estos mensajes, los borramos , y luego volvemos. Este es realmente el secreto. Es decir, realmente no importa lo que hagas aquí en el medio. Todo esto es irrelevante siempre y cuando al final, justo al final, te asegures de que los marcos finales sean los mismos que los marcos iniciales Ahora mucho haz esto, si tienes un video, si estás haciendo un video real, no un motion graphic, la forma de hacerlo es conseguir el video, poner el inicio del video aquí, y luego la continuación al principio. De esta manera, el video comienza aquí, y luego cuando llegues al final, va a hacer un bucle muy sin problemas. ¿Bien? Pero esto es hablar como si tuvieras un video. Pero en este caso, en Fegma no estamos tratando con un video, estamos tratando con un motion graphic ¿Bien? Entonces no importa qué colores tengas, qué animaciones tengas aquí siempre y cuando al final aquí, tengas el mismo marco. Entonces solo ilustra esto un poco más cuando vengamos aquí y obtengamos estos antecedentes, estoy eligiendo el fondo. Ahora, podemos darle a esto una animación de la opacidad, ¿verdad? Para que podamos hacer que se desvanezca. Entonces, ¿cómo sucede eso? Vamos a hacer que se desvanezca y vamos a traerlo por aquí. Y vamos a hacer que el fondo sea negro. Y cuando lleguemos a esta animación de fade out, vamos a hacerla 20%. ¿Bien? Así que mira lo que va a pasar ahora y lo vamos a hacer así. Entonces justo cuando recibas el mensaje, va a oscurecer como si te estuvieras enfocando en el mensaje. Y podemos seguir adelante y, ya sabes, personalizarlo, también. Así. Pero lo más importante, cuando llegues al final, puedes traer esta animación, pegarla aquí, y luego vamos a hacer que se desvanezca y luego vamos a volver al 100%. Y podemos poner esto al final mismo. Ahora mira cómo se ve. Bueno, eso no fue muy suave por alguna razón. Así que volvamos aquí y dice, se desvanecen en cantidad al 100%. Wh parece estar teniendo un problema. Entonces intentemos hacerlo personalizado, y va a decir empezar en cero y luego terminar 100, así que ahora está funcionando. Entonces ahora míralo. Entonces como puedes ver, no parece que haya un final y un comienzo y otras cosas Pero en este caso, podría quedar claro porque ponemos la opacidad sólo aquí al principio, ¿verdad? Entonces, lo que podríamos hacer al respecto, también podríamos copiar este efecto, traerlo aquí. Y cuando eliminemos este mensaje por aquí, podríamos hacer lo contrario. Podemos hacerlo, ya sabes, hacer personalizado 0-100% y traer así Y entonces también podríamos tener el desvanecerse por aquí. Entonces ahora vamos a ver. Antes y podemos hacer esto un poco antes también. A medida que estás borrando los mensajes, Muy bien. Entonces como puedes ver, lo hicimos de cierta manera donde no parece que el video esté en bucle, pero es, de hecho, en bucle Eso es exactamente lo que quieres hacer a veces. Ahora, hablemos de los beneficios. ¿Por qué harías esto? Una cosa es por la suavidad, quieres ser suave y tal vez tu objetivo es repetir el video Hay diferentes razones por las que quizás quieras repetir un video. Ahora, cuando estás en TikTok, estás en Instagram en cualquiera de estas plataformas donde tienen una función de bucle Una razón es que quieres que la gente vea el video una y otra vez. Quizás sin darse cuenta, tal vez con darse cuenta, pero obteniendo más vistas, ese es un objetivo Otro objetivo de hacer un bucle de un video o hacer que el video se repita una y otra vez. Podría ser solo un efecto. Quieres que parezca el día de la marmota si conoces la película Quieres que parezca que este día nunca termina. Sigue repitiendo y repitiendo y repitiendo. Espero que eso te haya ayudado alguna manera y que hayas aprendido a crear videos en bucle Muchas gracias por escuchar, y nos vemos en la siguiente lección. 13. Uso de fotogramas clave: Entonces en esta lección, vamos a hablar de fotogramas clave. Un fotograma clave es esencialmente un punto en el tiempo. Puedes pensarlo como un punto congelado en el tiempo en el que tu frame o cualquier elemento selecto está tomando una posición, opacidad, sea lo que sea Ahora, cuando se trata de fotogramas clave, una cosa más a la que hay que estar prestando atención Si no te has dado cuenta al cambiar entre la pestaña de diseño o el modo de diseño y el movimiento obtienes estos símbolos, estos pequeños cuadrados que obtienes en la mayoría de los campos que tienes. Y estos son lo que llamamos fotogramas clave. Ya los has visto aquí abajo. Y cuando haces clic en cualquiera de ellos en cualquier elemento, básicamente estás haciéndole saber a Figma que te gustaría agregar un fotograma clave de esta propiedad específica en este lugar específico Entonces déjame mostrarte lo que eso significa. Entonces ahora llegando a este objeto, cuando hago clic aquí, cuando agrego un fotograma clave, se puede ver el fotograma clave que se está agregando Y agrega una propiedad de animación, que es la escala. Entonces no teníamos esto antes. Teníamos posición, tamaño, posición, posición, y ahora tenemos escala. Para que podamos seguir adelante y cambiando directamente desde aquí, se puede ver que se está creando un fotograma clave Entonces esta es otra forma de usar fotogramas clave directamente desde este panel que ya conoces y amas y usas todos los días Entonces solo tenlo en cuenta, fotogramas clave no se limitan a esta área No solo tiene que usar fotogramas clave automáticamente, sino que también puede usar la función de fotogramas clave aquí mismo Entonces vamos a seguir adelante y encender fotogramas clave autos desde aquí Un clic lo va a activar. La forma de hacer esto, vamos al objeto aquí mismo, déjame mostrarte lo que quiero decir con esto. Ahora mismo, ya tenemos esta animación en marcha, se trata de un conjunto de fotogramas clave Por lo general, el fotograma clave está al principio aquí y al final Entonces puedes ver aquí la opacidad es algo aquí, y luego la opacidad cambia ahí, ¿ok Pero no estamos hablando de este elemento. Estamos hablando del elemento aquí mismo. Entonces ahora que lo tenemos aquí, podemos hacer es que podamos seguir adelante y cambiar algo, cualquier cosa sobre este objeto. Para que podamos seguir adelante y empujarlo hacia arriba. Justo cuando hacemos eso, eso se convierte en un movimiento registrado, un fotograma clave automático, si se quiere puede ver cómo se registra y crea una diferencia. Antes de eso, no había movimiento. Entonces lo que podemos hacer en este caso, podemos venir aquí, tomar el objeto, podemos centrarlo, o simplemente podemos moverlo un poquito y luego podemos moverlo hacia arriba y luego mover un poco la línea de tiempo y luego moverla de nuevo hacia abajo. Entonces ahora vamos a comprobar cómo se ve. Entonces viste eso. Fui arriba y abajo, y eso es básicamente lo que hicimos. Ahora bien, todo lo que vamos a hacer, ya sea que vamos a cambiar el tamaño o vamos a hacer alguna rotación, por ejemplo, veamos si podemos hacer alguna rotación así. Todo va a ser registrado como fotograma clave y va a tener un efecto Ahora bien, esto se ve horrendo. Esto no es algo que quieras hacer. Pero solo te estoy mostrando las posibilidades de lo que podrías estar haciendo. Y si fuéramos a copiar alguno de estos elementos, vengamos aquí y vamos a copiar uno de estos, voy a copiar éste, voy a ponerlo aquí, y vamos a tomarlo y quitar todas las animaciones que tenga. Y podemos intentar que sea puramente, ya sabes, usar fotogramas clave de auto, ¿de acuerdo? Entonces ahora vamos a iniciar el encuadre automático de claves. Y vamos a decir al principio, esto va a ser aquí a la izquierda. Y después de un rato, va a venir aquí. Y veamos con qué estamos trabajando. Entonces está justo aquí. ver los fotogramas clave aquí, ¿verdad Entonces digamos que quiero bajarlo. Puedo llegar al primer fotograma clave y también bajarlo en la misma dirección o mismo nivel, casi Entonces puedes ver que estoy recreando la animación similar que tuvimos, y luego puedo venir aquí También puedo agregar el fotograma clave por mi cuenta. No necesito tener este modo encendido. Puedo elegir el fotograma clave aquí y puedo decir y luego saldrá e irá a la izquierda ¿Todo bien? Entonces vamos a ver. A lo mejor debería llegar un poco antes. Podemos mover los fotogramas clave y traerlos aquí. Entonces una vez que tenemos eso, podemos hacer clic aquí y podemos elegir el tipo de curva que nos gustaría tener. Por ejemplo, aquí tuvimos un poco de rebote como recuerdo, así podemos hacer esto. ¿Ves eso? Es muy similar a la animación que teníamos aquí. No es exactamente lo mismo. Ese no es nuestro objetivo. Pero solo quiero mostrarte que también podrías estar haciendo esto con este tipo de, ya sabes, solo fotogramas clave porque es más intuitivo Se trata solo de mover el marco, ya sabes, poner el marco, mover el marco a donde quieras llevarlo. Como al principio, está aquí, y luego lo tomas aquí, y luego lo cambias de tamaño, sea lo que sea Y funciona. Y hagamos lo mismo con la talla, ¿verdad? Ahora voy a hacerlo más pequeño. No sé si esto es propiamente pequeño. Bien, podemos hacerlo un poquito más pequeño. Así se puede ver que aquí hay un marco diminuto que se convirtió en ancho. Voy a traerlo aquí. Déjame mostrarte. Este no lo queremos, lo vamos a eliminar y tomar este de aquí. A sólo va a hacerlo un poquito más pequeño? Bien, ahora cuando vengamos aquí, empezaremos a expandirnos. Vas a dar click aquí, puedes ver la animación de ancho y luego voy a hacer que se expanda. Todo bien. Pero ahora tenemos que cambiar esta, la posición uno. Puedes navegar a derecha e izquierda para que puedas ir al marco más cercano a la derecha o a la izquierda. Ahora llegué al fotograma clave aquí, voy a llevarlo al medio Entonces voy a llegar a este fotograma clave de aquí y también lo pondré en el medio Entonces podemos elegir ambos y hacer que entren y salgan fácilmente así. También podemos cambiar éste. Voy a hacer esto un poco más fácil. Descansa un poco más, sí. Y así, recreamos esta primera animación. No es perfecto. Eso se puede ver en el tamaño de este. Déjame hacerlo un poquito más pequeño. Para que puedas ver 72. Cuando vengamos aquí, también haré esto 72 o 73. Todavía no es perfecto. Déjame ver. Hagámoslo 70 o 69. Todo bien. Y luego voy a venir aquí y hago esto también 69, y ahí vamos. Así que así, puedes usar los fotogramas clave auto o simplemente puedes seguir adelante y usar los fotogramas clave por tu cuenta para seguir adelante y hacer todo un poco más manualmente Sé que se siente como que es trabajo manual, es trabajo manual, pero puede ser mucho más fácil. Y para las personas que ya tienen alguna experiencia en edición de video, esto probablemente sea más intuitivo y más fácil para ti trabajar. Solo para tener en cuenta, probablemente no podrás ver estos fotogramas clave a menos que enciendas este modo y ya comiences a cambiar las cosas. De lo contrario, cuando miras aquí la opacidad, no puedo establecer ningún fotograma clave Pero aquí, ya puedo jugar con él porque cambio la posición, cambio el ancho, y así sucesivamente. Solo asegúrate de tenerlo en mente cuando intentes probar esta función. Muchas gracias por escuchar y nos vemos en el próximo hijo. 14. Errores comunes en el diseño de movimiento: Si me preguntaras cuáles son los errores de diseño de movimiento más comunes que comete la gente, especialmente los novatos, yo diría que hay tres errores principales a los que debes prestar atención Ahora, por supuesto, hay una plétora, todo un mar de errores diferentes que podrías cometer, pero solo me voy a centrar en estos ahora, el primer error y para mí, es un pecado grave porque creo que si estás en el negocio de la edición de video, esto ya debería ser básico Estos son los fundamentos cruciales que ya deberían haber escrito es solo usar animaciones lineales. Para mí, eso es un pecado. Ahora, déjame decirte a lo que me refiero, pero ya hemos hablado de esto. Al hacer cualquier tipo de movimiento como esta posición, movimiento aquí mismo, siempre te recomiendo que sigas adelante y uses estas curvas y uses flexibilización, usa resortes y rebote y todas estas características diferentes porque están hechas para ese propósito exacto y están hechas para que sigas adelante y juegues Y uno de los mayores errores es seguir adelante y elegir lineal. Son muy pocos los casos donde lineal tiene mucho sentido, pero muchas veces no es la respuesta. Ahora bien, cambiando esto a lineal, probablemente puedas ver a lo que me refiero, comparando el primero, el de arriba con el de abajo, puedes ver lo desalmado que es el movimiento Se siente robótico y, en este caso, se detiene y se detiene, pero realmente no para porque aquí hay otro movimiento. Pero vamos a quitar este por ahora y ya puedes ver cómo se ve esto. Se ve súper mal. Simplemente se detiene de repente. No hay cambio en la velocidad, no hay euforia. Y con el otro, tienes mucho mejor flujo simplemente. Ya ves cómo se exhilara, entra, se desvía, y se toma su tiempo y Volvamos. Ya no quiero ver esto. Entonces ese es uno de los para mí, los mayores pecados que podrías cometer es usar estas animaciones lineales. No tienen carácter, son desalmados, y no son divertidos, y realmente no transmiten ninguna idea Así que por favor, por favor, trata entender estos diferentes movimientos y movimientos, ya sea que necesites poner un rebote o si necesitas facilitarlo dentro o fuera o ambos Intenta entender qué se ajusta a tu pase de marca, qué se ajusta a la funcionalidad o al video que mejor estás haciendo. Hay un personaje diferente o una elección estilística diferente para cada video Entonces solo tienes que entender eso y asegurarte de que lo estás haciendo con intención y no solo al azar. Especialmente manténgalo consistente. No lo sigas cambiando. Ese es uno de los mayores errores. El segundo error no es estratificar. Ya hemos hablado sobre la estratificación y lo crucial que es a la hora de crear un diseño de movimiento Lo que quiero decir con capas es jugar con múltiples objetos diferentes, así como insertar múltiples animaciones diferentes en el mismo objeto Así que ya hemos visto esto aquí al principio, y creo que lo demostramos muy bien, a pesar de que podría demostrarse aún mejor, ¿de acuerdo? Y la manera de mostrarte esto es cuando una animación se abre así, puedes ver, suceden múltiples cosas. Entonces ya se puede ver que el tamaño está cambiando. También hay cambio de posición. Se mueve hacia la izquierda, o se mueve hacia la derecha o lo que sea. Pero hay movimiento sucediendo al mismo tiempo, el texto aquí se está desvaneciendo No era visible. Ahora es visible. Y sí, en general, tienes múltiples cosas dando vueltas al mismo tiempo. ¿Bien? Y vemos este mismo ejemplo aquí de nuevo en esta parte otra vez. Y la forma en que ves esto es como el primer mensaje va subiendo, el segundo mensaje está apareciendo, está entrando así que esto te muestra, hay algún tipo de interacción Es un delicado baile de salsa o tango o cualquier baile que quieras hacer, pero es muy delicado, es muy agradable, y las dos personas que bailan necesitan estar jugando juntas. Eso es realmente lo que hace que un diseño de movimiento o motion graphic. Hace que cobre vida porque se siente como si estuvieran hablando entre ellos. Hay en la comunicación, un lenguaje hermoso que está pasando donde alguien canta, oye, ya voy, voy a aparecer de vez en cuando el mensaje arriba va un poco hacia arriba para que no se golpeen entre sí. Simplemente es perfecto. Simplemente armoniza El mayor error es no hacer eso. El mayor error es tener estas animaciones de aspecto muy estático que no se sientan armonizadas Se sienten más congelados, se sienten tímidos y se sienten animados. Esa es la mejor manera en la que podría describirlo. Eso es lo contrario de la animación, como palabra, estás teniendo algo inanimado, no se mueve A lo mejor ni siquiera es vivir, no está vivo. Está muerto. Sigue adelante y trata de asegurarte de que al crear un diseño de movimiento estés prestando atención a todos los detalles y estés superponiendo diferentes animaciones en cada objeto Y dentro de la misma línea de tiempo. Y ahora, llegando al último error, último error, en mi opinión, al trabajar con el diseño de movimiento, aparte de crear movimientos incómodos y demás, no es conseguir la velocidad correcta Estás viendo tu diseño de movimiento una y otra y otra vez y lo estás revisando. Al final del día, podrías estar inclinado a hacerlo súper rápido porque ya lo has visto todo antes. Ya no lees los mensajes . Tienes algún texto. Ya no lo lees porque piensas, Oye, ya he leído esto, sé exactamente lo que dice. Y así podrías estar más inclinado a hacer que tus animaciones vayan muy rápido. Y esto es algo que podríamos haber hecho en esta animación en particular, donde se puede ver que el texto viene súper rápido y no tenemos tiempo para leerlo. Ahora bien, mucha gente podría sentir la presión de hacerlo específicamente para las redes sociales porque entienden, bien, gente no tiene una duración de atención muy buena o muy larga, pero esa no es la forma correcta de hacerlo, ¿de acuerdo? Así que asegúrate de que al crear una animación, estés dando a tu espectador, a tu lector el tiempo suficiente para seguir adelante para ver las animaciones en todo su esplendor, toda su belleza, y poder leer los textos y las pequeñas notas y entender lo que está sucediendo. De lo contrario, te arriesgas a hacer demasiado. Estás moviendo las cosas demasiado rápido. Están sucediendo múltiples cosas. La opacidad del fondo está cambiando y los mensajes están entrando y saliendo y siendo borrados y demás. Y así esto puede ser muy confuso. Y puede arrojar a tu espectador, puede lanzarlos a un mundo donde no entienden lo que está pasando. Así que aprende de mí, aprende de nuestros errores, y trata de asegurarte de que estás dando a tus espectadores el tiempo suficiente para ver tus animaciones pacíficamente, pero al mismo tiempo, sin perder la atención o sin aburrirte Entonces hay que tener un equilibrio muy fino entre estos dos. En mi opinión, nunca vas a poder hacer felices a todos. Pero solo asegúrate de que funcione para la mayoría sí, estos son básicamente mi sugerencia o mi opinión de los tres errores más grandes de diseño o diseño de movimiento que podrías estar haciendo. Como dije, esta es mi propia opinión. Así que tómalo o déjalo. Ya sabes, esto es solo un consejo para mí y trata de tenerlo en cuenta a la hora crear diseños en movimiento solo para que no parezcas un novato, parezcas un aficionado, al mismo tiempo, para que puedas crear gráficos en movimiento impactantes que realmente gusten a la gente y que obtengan engagement y vistas y la atención de la gente Muchas gracias por escuchar, y nos vemos la próxima vez. 15. Exportación como GIF, MP4, WebM y SVG: Todo bien. Entonces, ahora lo has hecho y has terminado tu animación, y te sientes muy orgulloso de ello. Pero ahora te gustaría ir un paso más allá y simplemente hacer el último paso final, que es exportarlo para mostrarlo porque después de todo, si hicimos muchas de estas grandes animaciones, queremos mostrárselas a la gente. Queremos hacer uso de ellos. De lo contrario, esta característica de figma, todo este modo de movimiento es completamente inútil. Así que buenas noticias para ti. Podemos exportarlo, y es muy, muy fácil. Ahora bien, puede que no sea muy obvio cómo puedes llegar ahí, pero déjame explicarte. Y también te explicaré los diferentes ajustes de exportación que tendrás para poder exportar tu video en la más alta calidad, pero tampoco con el tamaño de archivo más grande absoluto. Entonces sigamos adelante y naveguemos hasta ese panel. La forma de hacerlo es seguir adelante y click en el marco que deseas exportar. Así que claramente no estás exportando todo el archivo. No estás exportando varios fotogramas a la vez. Estás exportando el fotograma en el que estabas trabajando, aunque probablemente puedas exportarlo desde múltiples fotogramas, pero solo va a ser video separado. Veamos el video de este fotograma. Sólo vas a elegirlo, vas a seleccionarlo. Entonces mientras aún estás en modo de movimiento figma, vas a desplazarte hacia abajo hasta Exportar, entonces va a tener algunas opciones para ti Hay animación y hay estática. Podría parecer que la estática está vacía, pero no lo es. Sólo tienes que hacer click en el más. Este es el panel de exportación normal o clásico que normalmente estás acostumbrado. Sabes de esto probablemente, puedes exportarlo como PNG, JPEG, SVG, PDF, y así sucesivamente. Pero lo que más nos interesa es en la función de exportación animada. Aquí está muy simplificado para la mayoría de la gente, lo cual realmente aprecio porque siempre me pierdo en estos detalles de las diferentes configuraciones de exportación, y no sé cómo exportar mis videos de la manera más óptima. Entonces Figma hace que esto sea realmente fácil para ti de entender y de moverte Entonces primero, te va a preguntar, ¿ cuál es el formato que necesitas? Hay diferentes formatos, y por supuesto, depende de tu uso. No soy un experto en video, así que realmente no puedo darte todos los detalles. Pero el formato más utilizado es MP4, yendo con este formato, no vas a estar haciendo nada malo. Ahora bien, lo que les puedo decir es que la web es más adecuada para la web. Pero claro, creo que esto es más adecuado para el sitio web específicamente, pero no estoy seguro de eso. Podría ayudarte a tener archivos de menor tamaño, aunque no estoy seguro. Ahora bien, cuando se trata de regalos, eso es algo de lo que te puedo decir. Probablemente conozcas de regalos. has usado y los usas en las redes sociales aquí y allá. Y los regalos son de mucha menor calidad. Por lo general, están comprimidos y se supone que deben estar sin audio y básicamente no son las experiencias de visualización más óptimas, digamos. No va a mostrar tu animación de la mejor manera, pero va a asegurar que el tamaño sea muy pequeño. Y como puede ver, también tiene velocidades de fotogramas más bajas. Obviamente puedes explorarlo con más velocidades de fotogramas, pero eso derrota el propósito Entonces con lo que te recomendaría ir, mantenlo simple es MP4. Si tienes casos de uso específicos para los otros tipos de archivos, entonces sigue adelante y pruébalos. Lo segundo es el tamaño, probablemente sepas de esto. Normalmente, solo lo haces una X como en una sola vez. Exportarlo exactamente en el mismo tamaño de este marco. Pero si dices que este marco es demasiado pequeño, quiero que sea más grande, entonces haces dos X, o incluso puedes llenarlo tú mismo, creo. Parece que esta es una característica profesional, pero solo tenlo en cuenta. También tienes diferentes configuraciones de exportación. Entonces tienes 1080 14 42,160. Estos son diferentes ajustes de exportación, y se relacionan con la calidad. Entonces tienes HD, fol HD, y así sucesivamente. Ahora bien, con lo que podrías seguir adelante es una X. Entonces, si sabes que este es el frame que quieres exportar, básicamente es una pantalla de teléfono, entonces debería ser más que suficiente. Si te preocupa, puedes salir dos o puedes elegir un tipo de calidad muy específico. Ahora mismo avanzando, también tenemos calidad. Ahora bien, esto también está hecho para que sea muy sencillo para ti. Entonces está configurado en bajo, medio o alto, y todos van a decir, Sí, quiero la más alta calidad absoluta, pero hay que tener en cuenta que esto va a resultar en un tamaño de archivo más grande. Ahora bien, para ser justos, dos MB no es tan grande. Supongo que tienen un método de compresión muy agradable. Ellos muy buena configuración. Esto es realmente bueno para la alta calidad, pero hay que tener en cuenta que este es un video muy corto. También tienes mediano, y sólo por ir a medio, puedes ver que ya ahorramos 25% del tamaño. Y si vamos a baja, entonces ahorramos más de la mitad. ¿Bien? Entonces, de mayor a menor, ahorramos más de la mitad del tamaño del archivo. Entonces realmente hay que pensarlo, aunque no estoy seguro cuál es la diferencia de calidad. Por supuesto, tienes velocidad de fotogramas. Ahora la velocidad de fotogramas se relaciona si no la conoces. Es la cantidad de fotogramas que tienes por segundo. Eso es lo que significa FPS. Por lo general, para las redes sociales, tienes 30 o 25, 24, por lo que yo sé. Si estás exportando algo para redes sociales, no vas a poder conseguir seis TFP no sirve de nada hacer eso Pero si quieres configurarlo para personas para sitios web u otros casos de uso, en realidad puedes mostrarlo como seis TFP y luego ir por ello. ¿Por qué no? Solo ten en cuenta que esto va a resultar en un mayor tamaño de archivo. Fuimos 50% más grandes aquí, como puedes ver, necesitas tener una cuenta profesional para eso. Si haces algo así como 12 FPS, va a parecer un poco entrecortado o como sea que lo llames un poco rezagado, aunque no lo sea, así que solo tenlo en cuenta Ahora, sigamos adelante y tratemos de exportar eso. Me gustaría mostrarte las diferencias entre la calidad. Sigamos adelante y hagámoslo. Entonces una X, y hagámoslo alto. También voy a seguir adelante y exportarlo como bajo. Y luego me gustaría exportarlo como regalo. Ahora vamos a ver el video. Primero tenemos una X de alto. Esto debería verse más o menos exactamente como lo vimos. Como se puede ver, tiene muchos marcos. Es muy suave. Aunque yo diría que la calidad podría ser mejor. Entonces puedo entender exportarlo como dos X. Ahora veamos como se ve bajo. Ya puedo ver que la calidad de la imagen es tan diferente. O sea, si también miras en el fondo, aquí se ve como más comprimido. Pero voy a tener que decir, no es una gran diferencia entre alto y bajo. Ahora, vamos a revisar el regalo. Entonces como esperaba, ya sabes, el regalo tiene cuadros más bajos por segundo, así que generalmente obtienes una vista más entrecortada Pero para ser justos, si quieres mostrarle esto a tu equipo, si estás mostrando un flujo muy simple y no hace falta que sea tan complicado, no diría, ya sabes, esto es realmente malo. Es traspasar la idea y, ya sabes, ellos pueden ver el movimiento general. No es una calidad súper increíble, pero oye, está difundiendo la idea. Ahora, como último, me gustaría probar exportarlo como dos X de alto y ver cómo se ve. Bien, así que aquí vamos. Veamos las dos X de alto. Entonces puedo ver que la imagen es un poco más nítida, definitivamente. Eso podría decir. Pero sobre todo aquí en las partes oscuras, siento que todavía estamos recibiendo esta distorsión aquí, que realmente no me gusta, pero también estoy siendo muy, muy particular sobre esto. Pero digo, la calidad que acabamos de conseguir se ve mucho mejor. Definitivamente se ve mucho mejor con la versión two x, pero sigue ahí, no donde quiero que esté. Y veamos el tamaño en cuanto al tamaño. Es de 3 megabytes tiene sentido. Es doble. Pero así es básicamente como puedes seguir adelante y exportar tu trabajo para mostrarlo, mostrarlo a otros y compartirlo con ellos. Muchas gracias por escuchar, y nos vemos en la siguiente lección. 16. Animar un círculo de carga: Hola, y bienvenidos a otra lección del curso Figma Motion Ahora, en las lecciones pasadas, aprendimos muchas técnicas diferentes, muchas cosas diferentes al usar paneles Figma Motion y herramientas y características Y hicimos una animación. Nos enfocamos en ello, y básicamente se trataba de recibir mensajes. Y en esta lección, vamos a hablar de un tipo diferente de animación. Que es una animación de carga. Ahora hay un montón de animaciones de carga, diferentes, pero vamos a comenzar con una muy sencilla que todos conocemos y es la animación circular giratoria. Ahora, por supuesto, hay diferentes tipos para esta animación. No siempre es lo mismo. Puedo tener diferentes estilos, diferentes colores, pero vamos a tratar de mantenerlo mínimo y sencillo. Lo primero que vamos a hacer es que vamos a seguir adelante y copiar y pegar este marco, y vamos a quitarlo, ponerlo a un lado. Justo aquí. Ahora, como pueden ver, cuando abrimos este marco, ya podemos ver que hay algunas animaciones configuradas para ello. Entonces para deshacernos de ellos, vamos a ir a la capa. Vamos a ir al marco, y vamos a comprobar las diferentes capas. Nos vamos a quedar con la imagen. Vamos a eliminar todo, todo lo que tenemos que hacer es hacer una animación de carga. Voy a mantenerlo lo más sencillo posible. Ahora, para crear una animación circular giratoria, vamos a ir al taburete de elipse y sosteniendo Shift, vamos a crear un círculo así, y lo vamos a poner en el medio En lugar de darle un relleno, vamos a darle en su lugar y puedes hacerlo un poco más grueso. Bien. Ahí vamos. Ahora tenemos una línea de tiempo vacía sin animaciones. Haremos clic. Vamos a recargarlo. Esto se ve bastante bien. Ahora, comencemos. Ahora, para que funcione, tenemos que dividirlo. No puede ser un círculo completo. Lo que vamos a hacer es que vamos a tocarlo, y vamos a ir al modo de diseño, y luego vamos a venir a ver esta pequeña pieza aquí y la vamos a cortar. Puedes hacer cualquier parte. Yo lleno podría ser medio uno. Podrían ser las tres cuartas partes. De verdad depende de ti hagamos algo como esto. Voy a hacer algo cercano a un cuarto, 25%, y entonces lo que vamos a hacer es que vamos a llegar al trazo. Se puede ver que hay diferentes tipos, pero todos están llevando a lo mismo. Lo que voy a hacer muy simple hablando, voy a hacer doble clic en él y luego voy a eliminar este punto aquí mismo. Bien, entonces ahora tenemos esta pieza aquí, y podemos seguir adelante y comenzar a hacer nuestra animación. Entonces vamos a llegar a nuestra parte de movimiento aquí mismo, y vamos a darle una animación. Ahora bien, esto podría ser una animación de rotación, pero hay un problema. Probablemente lo notes ahora, que es que está rotando de una manera bastante extraña, digamos, ¿bien? Entonces está rotando alrededor de sí mismo. Pero como se puede ver el centro de la misma, el ancla no se configura correctamente. Entonces lo que quieres hacer es que quieres seguir adelante y convertir esto en un marco. Queremos agrandar este marco y queremos ampliarlo como si fuera un círculo completo, no sólo una parte de él. Lo que vamos a hacer es que vamos a llegar a este ancho de parte, y lo vamos a multiplicar por dos, y aquí vamos a hacer lo mismo. La forma de hacerlo es que solo puedes poner un asterisco y dos después de él, entonces Figma va a hacer el cálculo por Entonces voy a sostener esto y volviendo a la sección de diseño, voy a alinearlo al fondo. Bien, ¿bien? Entonces ahora se siente como si hubiera un círculo completo aquí dentro. Y ahora cuando vayamos al panel de animación y añadimos una animación giratoria, vamos a ver algo increíble es que va a rotar como un círculo, ¿de acuerdo? Así que incluso sin tener círculo, lo hicimos rotar como si hubiera un círculo completo, pesar de que es sólo un cuarto. Entonces es muy sencillo, muy fácil, pero esto es lo que quieres hacer. Es posible que desee extender un poco la animación, y puede parecer demasiado lenta. Pero lo que quiero que hagas es quiero que sigas adelante al panel de rotación. Puedes hacerlo en el sentido de las agujas del reloj y hacerlo 360. Entonces esto es lo que va a pasar. Simplemente va a regresar exactamente al mismo lugar. Entonces ven aquí a flexibilizar el editor Curve, y luego quiero que lo hagas curvar, así como así En realidad, personalmente incluso disminuiría esto un poco y lo haría curvar de abajo. Lo que esto significa si aún no lo has descubierto, lo cual está totalmente bien, no es fácil. Esto se está relajando Lo que acabo de hacer, lo hice entrar fácilmente y luego aquí va a aliviarse mayormente Veamos cómo se ve. Muy bonito, muy agradable. Básicamente así es como muchos de ellos parecen a estas cosas giratorias, cargando círculos. Entonces veamos cómo se ve ahora, solo lo acorté. Es mucho más rápido, lo que me gusta. Entonces después de eso, ahora que tenemos esto, podemos copiarlo, pegarlo. No todo el fotograma, sino más bien la animación giratoria. Vamos a ponerlo aquí, y luego lo copiaré, lo pegaré aquí, y lo copiaré y pegaré ahí. Ahora mira. Simplemente sigue cargando. Es muy sencillo, muy agradable, muy ordenado. Si quieres ir un paso más allá, que quizás quieras, lo que también puedes estar haciendo es agregar un número. Por ejemplo, se va a sumar el 10%. Hazlo más grande, y sólo voy a ponerlo en la mitad de todo el marco. Volviendo al modo diseño, al mismo centro, y ahora podemos darle también un poco de sombra. Tenemos 10% pasando. Bien, genial. ¿Cómo animamos esto Bueno, no es lo más fácil que debo decir, pero hay una manera de hacerlo. Es un poco complicado, así que abróchate el cinturón. Pero básicamente, lo que quieres hacer es querer agregar una animación para esto, que es la opacidad Entonces quieres que esto aparezca, y luego quieres que esto también desaparezca. Entonces vamos a agregar dos animaciones. Entonces el primero es la opacidad, y en vez de que sea 500 milisegundos, podemos hacer diez Y luego vamos a seguir adelante y hacer otra animación de opacidad, pero esta va a ser un fade out, y va a tomar también diez milisegundos. Bien. Ahora que tenemos esto, podemos seguir adelante, copiar esto y vamos a pegarlo por aquí mismo. ¿Bien? Entonces copia pegarlo, puedes verlo pegado aquí, y luego lo voy a arrastrar aquí. Bien. Ahora que tenemos esto aquí, voy a cambiarlo hasta el 23%. Y sería bastante bueno que también los mantuviéramos todos centrados. Así que voy a venir aquí y mantener esto centrado también. Entonces se ve bien, pero vamos a tener que centrarlos a los dos, así que perfecto. Y ahora mira cómo se ve. ¿Bien? Pero eso fue un poco demasiado rápido, diría yo. Entonces podemos extender esto o podemos hacer otro. Hagamos otra. Entonces ahora tenemos el 23%. Estamos copiando, pegando, y vamos a tomar esto aquí, y luego se va a convertir en 49% y luego vamos a copiar y pegar Va a ser 83. Después, por último, copiar y pegarlo. Y va a necesitar 99. Bien, así que veamos cómo se ve. Muy mal. La razón es que no sincronizamos los extremos con los inicios. Entonces, ¿qué significa eso? Ahora tenemos aquí un final. Uno de ellos se desvaneció, y luego el otro se desvaneció. Ahora tenemos que hacer exactamente lo mismo, pero puede llegar a ser un poco complicado. Así que vamos a venir aquí y vamos a agregar el fade out justo por aquí. Así que haz clic en esto y arrástralo hasta aquí. Entonces mira. Aquí hay un desvanecido, una sección muy pequeña. Podemos, por supuesto, tratar de acortarlo o quitarlo arrastrándolo un poco más Puedes hacerlo también enrollando y luego puedes acercar el zoom. Se puede ver un poco la brecha. Ahora voy a llenar el vacío. Como pueden ver, ahí hay un pequeño milisegundo. Bien, ahora que tenemos esto, solo tenemos que sincronizar los otros como dije. Ahora vamos a venir aquí, vamos a traer esto aquí. Y lo hundirá. Y lo mismo al final. Simplemente se repite. Pero puede llegar a ser un poco complicado porque son muy cortos. Tienes que estar atento a eso, para ser honesto. Todo bien. Y como siempre acercar un poco más, acercar esto un poco más. Ahí vamos. Entonces ahora vamos a probarlo. Entonces para éste, no hace falta que se desvanezca. Yo sólo puedo quedarme ahí. Entonces solo voy a borrar esto. Para el último, puede quedarse al 99%. Se nota que aún no es perfecto. Hay algunos de ellos que aún podemos mejorar. Por ejemplo, el salto aquí, creo, no fue tan ideal. Y ahí lo tienes. No es perfecto, pero es una pequeña animación de carga agradable, y eso es todo lo que necesitas a veces. Y claro, puedes extender el tiempo aquí, así que se queda al 99% y no se repite. Y, por supuesto, puedes continuar con estos. Entonces como puedes ver, sigue cargando con 99% y así sucesivamente. Así es básicamente como puedes hacerlo. Es tan simple como eso, no demasiado complicado, y ahí lo tienes. En la siguiente lección vamos a estar explorando un tipo diferente de animación, que es una barra de carga. También es similar, pero funciona un poco diferente, pero entendiendo como funciona esta, no va a ser tan difícil entender al otro. Entonces te veré en la siguiente lección. 17. Avanzado: animar una ventana de progreso: En la última lección aprendimos sobre creación de estos diferentes estados de carga, y uno de ellos es este círculo de carga. En esta lección, vamos a aprender un tipo diferente, que es una barra de carga. Pero vamos a diseñar esto de manera diferente, no solo por cómo se ve la animación, sino también tratando de entender la experiencia de usuario detrás de ella y cómo puede ayudarte. Así que voy a copiar y pegar este fotograma exacto una vez más y voy a guardarlo solo para que no nos distraiga Y comencemos. Entonces voy a convertir esto en un punto de partida de flujo. Voy a configurarlo aquí para que podamos verlo. Entonces vamos a seguir adelante y eliminar estos elementos que hemos creado para que tengamos una pizarra limpia. Bien, ahora que tenemos esto, comencemos con nuestra animación. Lo que me gustaría hacer, y empecemos primero creando las imágenes para ello. Lo que quiero hacer es crear una barra de progreso, una barra de carga que vaya de izquierda a derecha. Al mismo tiempo, no quiero que sea solo eso. En cambio, quiero que también brinde alguna información adicional y retroalimentación al usuario, haciéndole saber en qué etapa se encuentran y qué hay que hacer o qué se está haciendo en qué etapa se encuentran y qué hay que hacer o qué se está actualmente en esta etapa y tal vez dando alguna información o alguna instrucción. Vamos a sumergirnos en ello, y entonces entenderás a lo que me refiero. Voy a crear un marco, antes que nada, y lo voy a poner aquí mismo. Voy a hacerlo blanco por ahora, y luego lo voy a hacer circular. Pero en realidad, en lugar de hacerlo completamente blanco, ¿qué tal si le damos un efecto de vidrio, bien? Ahí vamos. Ese es un efecto de cristal muy limpio. Y lo que me encanta de ello es que en realidad no necesitas trabajar duro para ello. Ya te hago muchos efectos diferentes, lo cual es muy agradable. Entonces ahora después de eso, queremos crear algún bar, ¿de acuerdo? Hay diferentes formas de crear estas barras, pero voy a crearlas con un marco una vez más. Y lo voy a dar para llenar. También voy a hacer que tenga algunas esquinas redondeadas. Pero le voy a dar una opacidad del 20%, ¿de acuerdo? Entonces pongámoslo aquí. O veamos, tal vez podamos hacerlo más pequeño. Voy a copiarlo y pegarlo y ponerlo ahí. Entonces esta sería básicamente nuestra barra de progreso, como pueden ver. Y podemos preguntarnos si queremos dejarlo abajo, si queremos ponerlo arriba o si queremos ponerlo justo en el medio, ¿verdad? Ese podría ser también un tipo diferente de carga. Y también podemos pensar en cómo nos puede ayudar o beneficiarnos de cualquier manera. También podemos extenderlo hasta el final. Lo que hacen algunas personas es que lo hacen realmente grueso o grande o lo que sea, así. Lo que hacen otras personas es que lo hacen realmente, muy, muy delgado. Creo que Apple hace eso, por ejemplo, si retrocedemos un poco, también lo hacemos realmente delgado así. A mí me gusta este look. No es demasiado fornido. Intentemos quedarnos con este look de aquí mismo y voy a ponerlos en un marco. Entonces ahora que tenemos esto, en realidad estamos mejor aún, voy a pegar esto en eso. Esto va a ser un marco dentro de ese marco, y vamos a darle esta opacidad al 100%, pero vamos a hacer que el relleno sea del 10% y de esta manera, podemos ver esto, ¿de acuerdo? Y claro, no tienes que hacerlo blanco. También puedes hacerlo azul o cualquier otro color que quieras, eso está totalmente bien. Es sólo un color que escogí por ahora. Ahí lo tenemos. El azul es más bonito. Y veamos cómo se vería si le damos a todo esto efecto de vidrio. Puede ser un poco exagerado para ser honesto contigo, pero podemos darle tal vez un trazo y hacerlo realmente delgado Hacer el trazo también 50%, 20%. Así que voy a convertir esto en un diseño automático, en realidad. Voy a extenderlo, y voy a hacer que el marco dentro de él sea más pequeño. Pero quería tener un contenedor de llenado para la altura, quería llenar solo la altura. Entonces en este caso, si decido que es demasiado pequeño, puedo hacerlo más grueso así sin problemas Ahora, déjame echarle un vistazo y ver cómo se ve en la pantalla de un teléfono. Esto se ve mucho mejor, un poco más grueso, para ser honesto, pero no estoy súper contento con este azul. A lo mejor lo que podríamos hacer con él, le podemos dar un gradiente, tal vez. Eso también mostraría el progreso que está ocurriendo. Y veamos cómo se ve. Se ve mucho mejor, pero todavía no está ahí. Me pregunto si tal vez podríamos darle un resplandor. Pero en este punto, estamos hablando de detalles, y para ser honestos, eso no es lo más importante que te quieras enfocar , ¿verdad? Así que tenlo en cuenta cuando estés diseñando tal cosa, y voy a hacer este contenido de clip de tuerca, y luego tenemos algún tipo de efecto de brillo pasando aquí. ¿Bien? Esto es bastante genial, bastante agradable. Voy a ir al vaso aquí y voy a tener algunas heladas que nos ayudarán con la legibilidad o ser claros Sólo voy a tratar de configurar este globo para no ser exagerado Bien. Esto se ve bastante bien. Esto se ve muy bien. Voy a añadir algo de texto ahora. Ahora que tenemos un poco de base, digamos, ahora podemos agregar algo de texto y hablar de lo que estamos haciendo aquí. Voy a escribir algo de texto aquí y voy a decir transfiriendo datos. Bien. Entonces podemos centrarlo o mantenerlo a un lado. De veras depende de nosotros. Pero lo que me gustaría hacer es, me gustaría copiar esto, y bajarlo un poco, hacerlo un poco más pequeño. Sabes lo que voy a hacer de todo esto un diseño automático. Bien. Y voy a hacer que el espaciado sea mucho más cercano entre sí y sobre todo estos deberían estar aún más cerca. Lo que me gustaría agregar es agregar un poco de explicación. Mantener al usuario informado. Quiero hacerles saber qué está pasando? Lo que está pasando ahora mismo. Voy a decir parcheando archivos, 50%. Bien. Entonces esto está destinado a que el usuario sepa lo que está sucediendo en este preciso momento. Así que no estoy hablando de todo, sí, estamos transfiriendo datos sobre lo que está pasando? ¿Estamos extrayendo? ¿Estamos poniendo archivos y archivos zip? ¿Los estamos comprimiendo? ¿Qué estamos haciendo exactamente? Eso es exactamente lo que necesitamos estar diciéndole al usuario. Eso es una cosa a tener en cuenta. Otra cosa a tener en cuenta es quizá sumar un número. Podemos hacer esto copiando este texto, pegándolo aquí, y luego tal vez agregándolo en auto layout con este , poniéndolo así Pero en lugar de tener un texto completo, solo puedes escribir el 10%. Y entonces podemos centrarlos así. Pero para ser sinceros, no estoy muy contento con esto porque no es simétrico. Un paso atrás. ¿Sabes qué? Mantengámoslo así y voy a dejarlo en su lugar. Veamos cómo se ve ahora. Además todavía no muy contento. Esto es un poco mejor, pero aun así no ahí. A lo mejor tiene que ver más con el espaciado. Esto es un poco mejor. Veamos qué pasa si lo ponemos a la izquierda o a la derecha? Sí, esto podría funcionar un poco mejor para mí, para ser honesto. Bien, así que ahora esto se ve bastante limpio. Sigamos adelante y comencemos con animarlo realmente. Entonces vamos a ir al panel de animación o al panel de movimiento, como quieras llamarlo. Y vamos a venir aquí y vamos a darle una animación solo para aparecer. Queremos que esto salga o queremos que esto salga a la pantalla. Sólo voy a hacer un poco de animación a escala, y voy a añadir a esa animación de opacidad, y podemos darle un poco de animación de posición Entonces vamos a hacer la posición desde abajo. Va a ser muy leve, tal vez 50. Vamos a darle una opacidad, desvanecerse, pero va a ser muy breve, y la escala va a estar Bien. Esto se ve bastante bien, pero vamos a hacer que la báscula sea 90%. Y vamos a elegir todos estos y darles este tipo de flexibilización Vamos a hacer que se relajen mayormente. Eso se ve bastante bien. Eso se ve muy limpio, muy suave, ¿de acuerdo? Incluso podemos seguir adelante, para ser honestos y darle un poco de rebote, aunque no estoy súper contento con los rebotes y otras cosas. A ver. Esto es lindo. A mí me gusta este rebote. ¿Y si lo hacemos con la posición también? Sí, eso también es agradable. Ahora, podemos poner la escala en posición para que sea más corta, por lo que es una animación más rápida, y luego obtienes la transferencia de datos. Y en vez de que empiece aquí, vamos a hacer que empiece en el 5%. Y en lugar de parchear archivos, voy a decir preparando archivos Todo bien. Entonces ahora tenemos transfiriendo datos, transfiriendo fotos y en lugar de datos preparando archivos, vamos a dejarlo claro. Y solo lo estamos manteniendo mínimo ahora mismo. Y ahora comencemos con animación de estos pequeños elementos pequeños Entonces, con lo que me gustaría comenzar primero es con la barra de carga en sí. Entonces con la barra de carga, es bastante sencillo. Lo que podemos hacer es darle una animación a tamaño o escala. Si le damos una animación a escala, veamos cómo se vería. Eso es exactamente lo que queremos ser honestos. Esto va a ser redimensionada. Hagámoslo más corto. Tráelo aquí. Obtenemos este pop up y luego va más rápido, pero no tan rápido. Esto es bastante agradable. Incluso podemos relajarnos un poco más si quisiéramos, o también podemos facilitarlo. No, pero me gusta sin flexibilizar. Cuando se acentúe, entonces va a haber una diferencia con el porcentaje ¿Bien? Entonces podemos tratar de hacer esto de diferentes maneras. Para que podamos hacer el mismo truco que estábamos haciendo en términos de opacidad Así que al igual que hicimos en la última lección, solo vamos a cambiar la opacidad en este caso La manera de hacerlo es básicamente bajar aquí o subir aquí y vamos a hacer opacidad ¿Bien? Así que vamos a hacer que se desvanezca así. Bien. Pero en lugar de que sea tan largo, vamos a hacer que dure diez milisegundos. Vamos a hacer que sea un milisegundo. Pero por alguna razón, no está pasando. Bien, eso es demasiado lento. Entonces lo que me gustaría hacer es que me gustaría hacerlo más corto, así que solo le voy a dar un milisegundo, que va a ser diez, y luego se puede ver que va casi instantáneamente, y sólo como medida extra, y sólo como medida extra, podemos seguir adelante y hacer esto a la gráfica, y esto va a hacer que desaparezca ¿Bien? Entonces ahora tenemos esto. Y si copiamos y pegamos este elemento y lo hacemos 25%, ¿bien? Y luego lo vamos a sacar adelante y le vamos a dar otra opacidad, pero se va a desvanecer, y también van a ser diez Entonces veamos cómo se ve. Así que vamos a mover este desvanecerse por ahí. Entonces, como puedes ver, no se ve bien porque están uno debajo del otro. Esto está creando más o menos un problema para nosotros, pero no es tan problemático, para ser honesto contigo. Vas a seguir adelante a estos juntos, y vas es simplemente ponerlos en un marco. Entonces selección de marcos, y luego los vas a poner justo delante uno del otro, justo encima uno del otro y solo vas a poner así. Ahora, llegaremos a estos números y nos aseguraremos de que estén todos alineados a la derecha. Y luego agregaremos otro, y lo llamaremos 64%. Y luego agregaremos otro y lo llamaremos 80%, y luego vamos a tener 97%. No lo sé. Solo estoy poniendo algunos números aleatorios y luego vamos a volver aquí y solo vamos a alinearlos correctamente. Así es como debería verse. Ahora tenemos los primeros alineados aquí. Entonces vamos a cambiarlo, traer esto ahí, esto ahí. En realidad, esto también debería estar aquí. Van a mover todo un poco más allá. Todo bien. Cambiamos los títulos, pero en realidad no cambiamos los contenidos, así que tenemos que encargarnos de eso. Sólo estoy cambiando el contenido ahora mismo. Entonces no lo puedes ver, pero muchas veces tienes que hacer las cosas a ciegas. Sólo tienes que hacer clic en lo que quieres cambiar. Haga clic en Entrar y luego podrá cambiar el texto. Ahora veamos. Es exacto. Solo voy a espaciar un poco más para que podamos divertirnos más con ellos. Y luego vamos a tratar de alinearlos correctamente, lo cual va a ser un reto. Lo que podemos hacer es que a lo mejor pueda cortarlo. Escogiendo esto, puedo intentar cortarlo, pero no corta. Simplemente puedes arrastrarlo así y luego alinearlo exactamente. Eso solo facilita mucho las cosas. Así que solo sosténgalo, tráelo y alinéelo exactamente debajo de él, y ya está listo para comenzar. Ahora pasando a la siguiente víctima, sosténgala, tráela de vuelta. Y luego para éste, sólo vamos a hacer que desaparezca mucho más tarde o nada en absoluto. Todo bien. Entonces ahora vamos a ver. Bien, perfecto. Ahora, parece que funciona. Solo necesitamos cambiar las animaciones de cambio de tamaño para que se adapten a ellas también para venir al mismo tiempo. Entonces vamos a ver. Entonces éste, por ejemplo, tenemos este 25%. Esto debería ser mucho más, así que le vamos a dar una cantidad de o incluso un poquito más. Dale otro aquí. Suena bien. Y el último aquí. Este va a ser un poco más. Ahora vamos a echarle un vistazo. Veamos cómo se ve. Lo que podría querer hacer es moverlos a todos un poco hacia atrás solo para permitirles tener su animación antes de que cambien los números. Ahora, veamos cómo se veía antes. Creo que antes era más agradable. Ahora parece que tiene rezago, pero de esta manera, es perfecto. Genial. Ahora que tenemos esto después de esta animación, va a terminar. Ahora normalmente te recomendaría que sí tengas una ventana de decir que todos los archivos han sido transferidos. Todo está bien. Pero eso no siempre es lo que hacen las empresas. Muchas veces acaban simplemente diciendo cualquier cosa. Lo que vamos a hacer es que vamos a hacer eso. Vamos a seguir las pistas de estas empresas, pero solo por el bien de mantener breve esta lección. Ahora voy a elegir todo este fotograma y le voy a dar las mismas animaciones que teníamos antes, pero todas van a ser invertidas de alguna manera. Así que vamos a comprobarlo. En lugar de escalar, va a escalar hacia fuera. En lugar de desvanecerse, se va a desvanecer. Y en lugar de deslizarse hacia adentro, va a deslizarse hacia afuera. Y traeremos esto aquí. Veamos cómo se ve. O lo traemos de vuelta. Ahí vamos. Todo bien. Ahora bien, lo único que necesitamos ajustar en este punto es la flexibilización porque ahora no está haciendo flexibilización muy eficiente de alguna manera Así que vamos a elegirlos a todos y vamos a decir facilidad en. En lugar de relajarnos, lo que tuvimos, tal vez hagamos facilidad en este tiempo Veamos cómo se ve, o tal vez nos relajaremos. Veamos cómo se ve eso. Se ve un poco mejor. Voy a ver qué podemos hacer con la opacidad. Intentemos relajarnos de nuevo. Creo que esto se ve mucho mejor. Todo bien. Esto se ve muy bien. Una cosa que nos falta, que es esta parte que nos dice lo que está pasando en este momento. Me gustaría cambiar esto un poco, hacer esto un poco más agradable. La forma en que me gustaría hacer esto es que voy a venir aquí a este cuadro de texto y voy a enmarcarlo también. Voy a copiarlo y pegarlo de nuevo, igual que lo hicimos antes, pero no todavía, voy a darle una animación. Esta animación, va a ser básicamente opacidad. Entonces se va a desvanecer. Se va a deslizar por la derecha. Vamos a hacerlo también muy mínimo. Veamos cómo se ve ahora. Esto es muy agradable. Vamos a darle facilidad. La posición es un poco demasiado. Voy a hacer 20. Todo bien. Esto se ve muy bien. Entonces le voy a dar lo contrario. Todo lo contrario. Copia, pega esto y lo voy a hacer aquí cuando se mueva. Así que vamos a poner esto de nuevo aquí. Lo pondremos desde el principio. Y entonces va a cambiar aquí. Como dije, se va a desvanecer y va a ser deslizarse y va a ser tal vez a la izquierda. A ver. Todo bien. Así que acabamos de hacer arriba a la izquierda. Debería ser justo a la izquierda. Todo bien. Y veamos acerca de hacer facilidad adentro en lugar de facilitar si eso lo hará mejor. Así que sólo voy a hacerlo liner. Sí, se ve mucho mejor, para ser honesto. A lo mejor se está relajando demasiado, pero vamos a ver. A lo mejor eso no estuvo bien. A lo mejor hacerlo un poco más rápido. Bien, esto se ve bastante bien. Ahora lo que vamos a hacer es que vamos a copiar este archivo y lo vamos a pegar y luego lo vamos a mover aquí mismo, ponerlo un poco antes. Y le vamos a dar un texto diferente. Entonces primero estamos preparando archivos y luego comprimiendo archivos y luego copiando y pegando, pero no desde aquí, sino más bien desde aquí. Entonces lo moveremos. Lo pondremos aquí. Entonces vamos a decir transfiriendo datos y luego aquí va a hacer algo también. Como dije, cópielo, pegarlo, y traerlo aquí, y luego podemos traer este fade out un poco aquí. No queremos que en realidad se superpongan, así. Entonces para la última animación, vamos a traer aquí. Y vamos a hacer que se desvanezca aquí. Perfecto, así como así. Entonces vamos a escribir rematando. Ahora, veamos cómo se ve desde el principio. Bien, de veras, de veras, me gusta como se ve ahora mismo. Mi único problema con ello, para ser honesto, es que va un poco demasiado rápido. Podemos intentar arreglarlo, pero puede que sea un poco tarde para eso, pero veamos qué podemos hacer por ahora. Bien. Bien, entonces ahora tenemos esto. Puede ser un poco complicado navegar por todos estos, pero trata de no preocuparte demasiado por ello. Así que sólo voy a traer estos aquí. Entonces veamos ahora. Bonito. Bien, creo que eso podría ser suficiente. Veamos ahora. No es 100% consistente, y creo que tenemos un retraso en el inicio seguro. Deberíamos comenzar a preparar expedientes. Quizá queramos arreglarlo un poco. Eso no estaría nada mal así. Entonces este es el resultado, y creo que hicimos un gran trabajo. La idea es, estamos haciendo una animación que no es solo aleatoria, no es sólo bonita, aunque sea bonita, en mi opinión. También es pensativo. También tiene algo de UX adecuado detrás de él, algo de pensamiento apropiado. Y esto es realmente lo que hace que tal cosa sea rica en contenido, en profundidad e inusabilidad Y ese es todo el punto. Entonces espero que hayas aprendido algo de esto adelante y pruébalo tú mismo, lo que se te ocurra. Muchas gracias por escuchar, y nos vemos en la siguiente lección. 18. Proyecto de clase: crea tu propia interfaz de usuario animada.: Y ahora es el momento de que crees tu propia interfaz animada. Para este proyecto de clase, crearás y animarás una pequeña interfaz de usuario o interacción usando las técnicas que has aprendido a lo largo de este curso Se puede elegir cualquier tipo de interfaz o animación para este proyecto. Podría ser una pantalla de aplicación móvil, una sección de sitio web, un componente de tablero o una simple animación de página de destino. Es tu elección. Comienza diseñando tu interfaz de usuario y organizando tus capas correctamente. Y luego darle vida usando animaciones relacionadas con la posición, la opacidad de escala y asegúrate de usar el timing y la flexibilización a tu favor para darle un aspecto más profesional y algo Ahora, recuerden, el objetivo aquí no es crear la animación más compleja que jamás haya existido. En su lugar, intente crear una animación limpia que funcione para mejorar la experiencia del usuario sin dejar de ser intencional, fluida y profesional. Ya terminaste, sigue adelante y exporta tu animación como regalo o video y subirla al proyecto Guild. Junto con el video, puedes seguir adelante e incluir una breve descripción de lo que hiciste, cómo lo creaste, qué técnicas de movimiento usaste para esta animación y cómo crees que esta experiencia de usuario mejorada. 19. ¡Felicidades!¿Qué sigue?: Enhorabuena por completar el curso. Ahora has aprendido a tomar el diseño de la interfaz de usuario estática y transformarlo en algo más interactivo e intuitivo que mejore la experiencia del usuario. diseño de movimiento y movimiento de Figma en general no se trata de hacer que las cosas muevan y se vean hermosas y brillantes, aunque eso es una gran ventaja, sino que se trata de guiar al usuario, comunicar comentarios y crear experiencias que generalmente son agradables e intuitivas A medida que continúas diseñando y aprendiendo, trata de enfocarte en las aplicaciones y sitios web que usas a diario y entiendas cómo usan y aprovechan animaciones que sean reflexivas, intuitivas e intencionales de una manera que te guíe como usuario y mejore tu usabilidad. Y si aún no lo has hecho, por favor sigue adelante y aplaude tus proyectos a la galería de proyectos Realmente me encantaría ver qué tipo de animaciones interactivas creativas se les ocurrió como siempre, si han disfrutado de esta clase, realmente agradecería que dejaran una reseña. Tener comentarios de ustedes siempre nos ayuda a mejorar y hacer mejor contenido para usted en el futuro, y también ayuda a otros diseñadores a descubrir nuestro curso. Muchas gracias por acompañarme, y nos vemos en la siguiente clase.