Animaciones fáciles de Figma para que destaquen en las redes sociales

1. Introducción a las clases: Todos sabemos que el contenido es el rey. En la palabra de hoy la gente es bombardeada con toneladas de imágenes, por ejemplo, en Instagram Entonces tenemos que llamar su atención. Necesitamos algo que detenga el pergamino y los mantenga comprometidos. Aquí es donde entran las animaciones y los videos. ¿Cómo aprenderlo? Bueno, mi nombre es Aga, y soy diseñadora, y voy a mostrarte que no es tan difícil como pensabas. En estas clases, te voy a llevar por todo el proceso paso a paso, así lo terminarás con al menos tres animaciones listas para ir que podrás publicarla en tu plataforma de Instagram como historia de Instagram o incluso publicación de Instagram que esté animada. Y la buena noticia es que no es necesario luchar con los efectos posteriores u otros por lo que eso requiere un conocimiento de diseño. Con Smart animate en Figma, podemos prototipar rápidamente ideas interesantes para nuestras animaciones, y luego podremos grabarlo y tener el archivo listo para publicar lo que quieras Entonces, ¿estás listo para comenzar tu viaje con animaciones? Empecemos. 2. Proyecto de clase: ¿Cuál es el proyecto de clase? Bueno, hay que presentar al proyecto de clase al menos una de las animaciones que vamos a hacer durante el curso. Por supuesto, si quieres experimentar, si quieres hacer algo diferente, eres más que bienvenido, por favor recuerda enviar el proyecto a esta sección. Y la bondad es que preparé un precio especial para las tres primeras personas. Estas personas que presentarán su proyecto como primero, obtendrán tres consultas una y una conmigo que tardarán media hora. Entonces, si quieres discutir sobre tu carrera, sobre tu creatividad, sobre tus ideas, sobre mis otras clases de codificación, siéntete libre de ser rápido y presentar tu proyecto lo antes posible en la sección de proyectos para aquellas personas que no podrán obtener el precio. Yo solo quería decir que es genial mostrar tu trabajo. Es genial pedir comentarios. También los demás miembros de la comunidad. Así que te animo totalmente a pasar por los ejercicios y luego mostrar a la palabra lo que has preparado. 3. Comenzando con Figma: Todo bien. Así que vamos a saltar a Figma en el primer ejercicio Pero antes de eso, déjame contarte rápidamente sobre los planes de Figma La buena noticia es que no necesitas ningún upgrade o no necesitas comprar una suscripción. Está totalmente bien usar el plan Figma gratuito, el starter, un llamado starter, y será totalmente suficiente para nuestros experimentos y también para exportar el archivo que cree Así que ahora cambiemos a la aplicación Figma. Te recomiendo totalmente que uses FGMA en la app independiente, no en el navegador Porque puede haber algunos problemas con la instalación de los fondos externos. Creo que la app está más optimizada, así que definitivamente aprovéchala. Puedes descargar Figma Four Windows, también puedes descargar FMF MAC Puedes hacerlo desde figma com. Entonces me estoy cambiando a la app que tengo actualmente descargada. Y lo que puedes ver aquí es el estado en blanco, digamos, tengo el proyecto de equipo creado, pero no importa. Lo más importante es que hay que crear el archivo de diseño, no la placa Fike JM Pero claro que puedes echar un vistazo a FikJM después. Es súper genial. Es la Pizarra. Se puede utilizar para talleres, para reuniones con otras personas en línea. Es realmente genial. Pero hoy, nos vamos a centrar en diseñar en FIG Map, así que necesitamos hacer clic en Diseño. Expediente. Y lo que podemos ver aquí es que podemos titular nuestros archivos, por ejemplo, ejercer uno. Y vamos a comenzar con la creación del primer fotograma. Para mis propósitos, voy a cambiar al archivo que ya he creado, y también te pido que lo dupliques. Por lo que nos será más fácil trabajar en el archivo que ya tiene algunos activos sería mucho más eficiente estar ahí. Entonces actualmente estoy en mi archivo Figma. Y lo que te voy a pedir es que dupliques este archivo en tu espacio de trabajo. Entonces significa que puedes editar fácilmente todo lo que quieras y que los cambios serán visibles solo para ti. Así que sólo para tu cuenta. Por supuesto, si quieres compartir este archivo con otras personas invita a otros coautores o colaboradores, ellos también podrán editar. Pero no quiero que este archivo esté abierto para todos porque todos los proyectos estarán aquí. Así que asegúrate de crear tu archivo individual duplicando particular este archivo de mi parte. Entonces, una vez que dupliques esto, estamos listos para comenzar y estamos listos para comenzar y crear nuestro primer marco. Antes de saltar al primer ejercicio al primer paso, veamos cómo se verán las animaciones en las que vamos a trabajar tan básicas como un arrancador. Entonces estoy haciendo clic en play. No te preocupes por, ya sabes, nada de lo que esté haciendo aquí. Sí. Esta es la animación. Entonces ves que algunas imágenes están rotando. También están cambiando sus posiciones. Entonces vamos a empezar con eso. Necesito cerrar el prototipo, y estoy en mi archivo de diseño. Puedes ver aquí que ya he creado todos los activos para ti. Puedes usarlo fácilmente para tus necesidades, y estamos listos para crear nuestro primer marco. Así que enmarca igual que un lienzo. Es algo que solo usas como elemento principal en el que vas a crear otros artículos y luego exportar. Entonces es algo así como mesa de trabajo, si estás familiarizado con illustrator o photoshop Entonces navego hasta la parte superior izquierda, de la interfaz, y veo que hay un frame. Entonces una vez que haga clic en él, voy a ver que a mi derecha, tengo la lista de todos los formatos disponibles que están predefinidos para mí. Y lo que me interesa particularmente son los formatos de redes sociales, y estoy buscando una historia de Instagram porque nos vamos a centrar en la historia de Instagram. Y una vez que hago clic en él, veo que mi marco está creado. Puedo cambiar su posición muy fácilmente. Así que una vez que estoy dentro, puedo empezar a recrear lo que ya tengo aquí Entonces cambio la pestaña a diseño. Y lo primero que tenemos que hacer es cambiar el color de fondo de amarillo, perdón, de blanco a amarillo. Entonces este es el color que ya preparé para ti. 4. Animación inteligente: Vamos a utilizar masivamente en las clases es característica de animación inteligente en Significa que tal vez use las definiciones que tomé del sitio web, del sitio web de FigMas, que Smart animate busca capas coincidentes, reconoce diferencias y anima capas entre marcos y Puede sonar un poco complicado para algunos de ustedes que aún no lo han probado, pero no se preocupen. Te voy a mostrar todo. Así que aprovechamos que smart animate es inteligente, y busca algunas diferencias Entonces, una vez que tengamos dos fotogramas y los conectemos en el modo prototipo, ya verás qué pasará. Entonces imaginemos que tenemos un rectángulo. Yo sólo estoy dibujando un rectángulo aquí. Puede ser de color rojo igual que éste. Podemos, por supuesto, centrarlo usando la función de alineación del elemento. Bien. Está centrada horizontalmente y está centrada. Verticalmente. Todo bien. Así que vamos a copiar el mismo elemento en mi marco. Entonces lo que hago es hacer clic en Comando C en Mac. Puede hacer clic en Control C en PC. Este es el rectángulo. Lo puedo ver en el panel izquierdo, que muestra todas las capas que tengo. Entonces tengo mi rectángulo copiado. Marco el marco en el que quiero pegar este rectángulo y hago clic en Comando V o Control V para pegar. Y verás que va a tener la misma posición. Entonces imaginemos que me gustaría tener este rectángulo más pequeño. Entonces estoy cambiando su tamaño solo pero arrastrando su altura. Y quiero animar estos dos fotogramas. Entonces necesito hacer clic en el primero. Cambie la pestaña de diseño a prototipo. Simplemente arrastra desde el punto donde veo el ícono más hasta el marco que quiero combinar. Y luego aparecerá la pieza de interfaz responsable de configurar interfaz responsable de configurar la animación. Entonces, lo que puedo ver aquí es que tengo marcada la opción de función de animación inteligente Animación inteligente Probablemente instantáneo sería el que está por defecto, por lo que debe hacer clic y cambiar a Smart animate. Verás la demo de esta animación y timing. Entonces, si tomamos por ejemplo, 1 segundo, entonces son 1,000 milisegundos, será un poco más largo Contamos con Smart Animate. Entonces estoy dando click aquí, veo que se crea el nuevo flujo. Doy clic en el icono de reproducción y veo mi animación. Bueno, no va, no se mueve porque necesitamos hacer click. Una vez que hago clic, veo que Smart Animate entra en acción. Entonces Smart animate busca las diferencias, y las diferencias entre estos dos marcos es la altura de este rectángulo, ¿verdad? Porque cambiamos su altura. Si tenemos un rectángulo totalmente diferente, y por ejemplo, nos gustaría, ya sabes, tener las animaciones de este rectángulo a ese, verás que no funcionará así porque este rectángulo gris es un elemento nuevo que no aparece. Entonces este es el llamado rectángulo diez, y no aparece en el primer fotograma. Entonces Smart animate busca solo los mismos objetos dentro de dos fotogramas Entonces es por eso que busca capas coincidentes, y el rectángulo diez no es una capa que se empareje en el primer fotograma. Si queremos tenerlo también en el primer fotograma, solo necesitamos copiarlo y pegarlo en el mismo lugar, podemos, por ejemplo, cambiar su altura y posición, y ya verás qué pasará. Se ve bien. Quiero decir, atractivo al menos para algo que podamos hacer en un minuto. Y quiero mostrarte por este ejercicio que puedes experimentar mucho con esta característica porque es realmente genial. Entonces no necesitas crear todos los estados de animación, solo el de entrada uno y el final, y todo, lo que hay entre fotogramas lo hará automáticamente Figma. Así que recuerda tener los objetos coincidentes. Esto es importante. Y la otra cosa es que necesitaba hacer clic en el en el fotograma aquí, dos para iniciar la animación. Y así es como podemos cambiarlo. Una vez que hagas clic en él, en la configuración de la animación, verás que tenemos la opción de click. Podemos cambiarlo. Y hay varias opciones. Son geniales para simular los comportamientos del tapping o cambiar el curso en el sitio web, por ejemplo, tienes mouse enter, mouse leave, pero también podemos tener transición automática de frame uno a otro eligiendo después de delay Entonces, después de algún tiempo, el frame pasará al siguiente automáticamente Podemos cambiar por supuesto a 0 segundos, por lo que se hará instantáneamente. Tenemos la configuración de animación inteligente, el tiempo y veamos qué pasará Una vez que juego, comienza la animación. Entonces es muy, muy agradable, y podemos aprovecharlo y configurar nuestro video, nuestra animación en consecuencia. Bien, entonces esto es algo muy, muy sencillo. Solo quería explicarte qué es Smart Animate, cómo funciona Pero volvamos a la animación que tengo aquí. Entonces este movimiento de las imágenes, déjame simplemente quitar los rectángulos que tengo, y comencemos 5. Primeros pasos con la animación en Figma: Entonces tomaré los artículos, los elementos que tengo, y los elementos que realmente creé para ti. Necesito hacer click en el grupo, y luego veo que tengo frames. Entonces ya reconociste que el letrero es marco, y tenemos fotos gratis. Puedo marcarlos. Estoy usando turno. Y con un turno, puedo puedo marcar lista más larga de archivos. Doy clic en Común C para copiarlos, y luego lo pego en mi marco, y tengo fotos gratis. Yo creo que deberían ser más grandes. Así que déjame hacer clic en Shift. Y con turno, solo estoy, no funciona así. Oh, porque están en marcos. No son la imagen en sí misma. En cada fotograma, tenemos una imagen. Bien, entonces para ampliar los elementos que están en marcos, necesitamos usar la opción de enlace de escala Te voy a enseñar cómo usarlo. Por lo tanto, debe hacer clic en K presione la letra K en su teclado. Y verás que las flechas han cambiado. Las flechas dobles. Y una vez que haga clic en Shift y empiece a redimensionar el marco, veré que mantiene las proporciones. También está marcado aquí. Si cambio para moverme y comenzar y empiezo simplemente usando el botón de cambio de tamaño sin turno. Simplemente me permitirá manipular la altura y el ancho, pero no van a estar conectados así no mantendrán proporciones que configuré. Entonces puedo hacerlo más grande con el k uno cíclico cambia aquí, en la izquierda. Así que déjame hacerlo un poco más grande y ver si está bien, tal vez Quizás este tamaño estaría bien. Y necesito cambiarlo con lo mismo. Así que puedo empezar a redimensionar, pero queremos mantener las mismas tallas. Entonces tal vez hazlo más fácil de hacer, lo voy a cambiar a cien 9.590, así que solo puedo cambiar esta talla y tenemos las mismas tallas. Bien Si hago clic en él así, verás que el marco está agrandado, pero la imagen que está dentro, no. Así que probablemente necesitaremos cambiarlo también. Y estamos listos casi porque veo que no llena todo el fotograma, así podemos dar click sobre la imagen y agrandarla un poco. Oh, sí, genial. Podemos navegar dentro del marco y ver cómo se posiciona, pero estoy satisfecho con este. Bien, así que vamos a comprobar si tienes todo igual. Entonces tenemos una, dos y tres fotos. Cada uno está en un marco separado, y tenemos el de la historia del marco. Entonces lo que vamos a hacer es que necesitamos apilar todo. Voy a apilar, por ejemplo, esta imagen de aquí. Voy a comprobar si está en el centro. Voy a apilar esta imagen en el mismo lugar. Pero lo que hay que tener en cuenta es que por lo general si colocas un elemento sobre el otro elemento, que es un marco, el marco saltará dentro de él dentro. Y no queremos tener tal efecto. Entonces necesito tomarlo y llevarlo a otra capa. Entonces sigue siendo un marco separado. Y tengo foto, número uno, y va a pasar lo que va a pasar es en realidad lo mismo. Pero no quiero tener la primera foto en el frente. Entonces lo cambio. Este es mi punto de entrada. Déjame simplemente quitar este marco. Lo que es más fácil de jugar con Smart animate es crear el primer fotograma que esté terminado, y luego rápidamente puedes simplemente copiarlo y pegarlo Comando C y Comm para Mac, y puedo jugar con ambos fotogramas son en realidad los mismos. Entonces nosotros mientras busco esta hoja de trampa, digamos, veo que las imágenes se cambian su posición. Entonces déjame tomarme la foto tres. Y cámbiala. Déjame dar click en la foto uno y cambiarla en algún lugar de aquí, ¿verdad? Entonces tenemos posición de estos elementos, y vamos a conectarlos en la pestaña prototipo. Entonces estoy en el prototipo. Yo sólo lo arrastre. Haga clic en Navegar dos. Sí, eso es cierto, inteligente animado. Mantengámoslo 1 segundo. Está bien. Pero queremos tenerlo puesto después de un retraso. Entonces, después de 0 segundos, comience. En realidad, tenemos que dar algo más que cero, pero un milisegundo, como nada Así que todavía está bien para nosotros. Y veamos la animación. Bonito. Entonces tenemos las fotos moviéndose. Entonces tenemos una imagen la principal en el frente, y luego aparecerá la otra. Bien, así que hagamos el otro paso, que es cambiar la posición de la imagen que están en la parte superior y en la parte inferior. Yo hago lo mismo, así que solo copio el marco. Y para mantener la misma posición, y yo solo, ya sabes, la cambiaré , puedes ir así. Hay que tener en cuenta que si lo arrastras demasiado lejos, saldrá del marco original. Entonces, si quieres guardarlo adentro, solo necesitas ponerlo aquí y se recortará Sólo te voy a mostrar una cosa. Si tenemos activado el contenido de este clip. No va a mostrar todo que está fuera del marco. Pero una vez que lo desmarquemos, se mostrará así Pero para nuestros propósitos, queremos que se revise el contenido del clip. Todo bien. Entonces también queremos rotar estas imágenes un poco así, y por supuesto, cambiar al modo prototipo. Y sí, navegar está bien. Después de un retraso, multa de un milisegundo. Animado inteligente Genial. Y juguemos a Cool. Lo que también es interesante en el panel de animación es que puedes cambiar la dinámica de la animación, por lo que puede ser hinchable, por ejemplo Veamos cómo va a afectar. Sí. Para que veas que esta imagen acaba de rebotar Oh, dejémoslo solo por agregar algo nuevo. A lo mejor esta imagen estaría oculta así. Y el siguiente movimiento es tomar las fotografías desde la posición superior e inferior hasta la posición central. Entonces, una vez más, copio pegar. Y déjame llevar este marco a la cima. Oh, en realidad queríamos quedarnos con la diferente. Entonces, si quieres quedarte con el diferente, solo necesitas cambiar la posición del cuadro, y está en la parte delantera. Entonces, algo así. Y a continuación, tenemos que hacer un prototipo aquí. Si no ves la opción, solo comprueba si estás cambiado al modo prototipo. Todo bien. Entonces estoy arrastrando estoy arrastrando la flecha, Smart animate, tal vez cambiemos a Va a suceder después del retraso, 1 segundo, un milisegundo, perdón. A ver. Dispara. Sí, va así. Realmente agradable. Y queremos rotarlo. Entonces lo siguiente, copiar. De hecho hice la copia de la barra de fotogramas anterior haciendo clic en ella y también haciendo clic en Opción en Mac en Windows. Opción A. Arrastrando, y estoy copiando el terrible que soy que escogí antes Entonces tenemos el mismo marco que es antes. Y ahora estamos listos para cambiarlo un poco, así por ejemplo, podemos rotarlo. Y claro, necesitamos conectarlo después del retraso, un milisegundo Y vamos a ver. Fresco. Por supuesto, se puede hacer más con él. O sea, puedes, por ejemplo, cambiar su tamaño, estamos en la P tres. Pero recuerda mantener la escala si quieres cambiar tanto el fotograma como las proporciones de la imagen que hay dentro. Para que podamos hacer algo como esto. Y puedes agregar texto. Por ejemplo, Hola. Aquí no hay nada original, pero sí, estoy usando la fuente Clash grow test, y pero solo dame un segundo. Voy a meterme en ello. descargarlo e instalarlo en tu sistema. Bien. Intentemos algo más grande. Hola. Como puede ver, el texto se encuentra dentro del cuadro P tres. Entonces es por eso que está enmascarado. Pero una vez que la arrastremos fuera de aquí y la mantengamos en el espacio general del marco siete, aparecerá así. Entonces tenemos hola. Podemos cambiar su relleno de color usando el color P superficial Estoy pinchando el color que preparé para ti, y tenemos señal de hola. Bien, vamos a combinar switch a prototype. Después de retraso un seg Leche segundo. El siguiente. Y vamos a ver. Oh, necesitaba darle click. Sí, probablemente, sí, debería ser después del retraso. Sí. Entonces es muy sencillo. A lo mejor ya sabes, podemos hacer más para hacerlo aún mejor, pero quería mostrarte que, ya sabes, dentro de realmente, como, un par de minutos, podemos hacer algo que no requiera habilidades de nuestra parte, habilidades avanzadas. Ya sea en Figma en animaciones en general. 6. Creación de la primera animación: Todo bien. Así que vamos a comprobar cómo se ve la animación a la que estamos apuntando. Estoy dando click aquí a la opción de jugar, y esto es lo que ves. Espero que te guste. Solo quería mostrarte que también puedes cambiar el tamaño de esta ventana porque no lo hice antes. Así que una vez más, una vez que haga clic en Reproducir en el flujo, verás la animación que vamos a preparar. Espero que también estés emocionado. Bien, así que recreemos el efecto que tenemos. En primer lugar, pensemos en lo que acaba de suceder. A lo mejor podemos ralentizar un poco la animación, por ejemplo, a 20 segundos, que es un poco larga y ver qué está pasando. Entonces la imagen se está encogiendo y el texto, tanto en la parte superior como en la inferior, cambian sus posiciones Y podemos ver el amarillo romper alrededor. Entonces, ¿qué tenemos que hacer? Estoy tomando un nuevo frame e historia de Instagram. Tenemos el marco listo. Hagámoslo en la parte inferior aquí y cambiemos el fondo a amarillo. Cumplir, ya tengo amarillo amarillo en el color del documento, así puedo seleccionarlo. Mi marco de historia de Instagram está listo. Por supuesto, puedes seguirlo, por ejemplo, cambiarlo para guiar a animación millon para que sea más fácilmente reconocible para Por supuesto, mantener el orden y los nombres propios de las capas, súper importante. No voy a mostrar todo aquí porque no es el tema. No es tema de figma, pero supongo que mantener buenas prácticas, aunque estés experimentando, vale la pena hacerlo Bien, entonces tenemos el marco, y queremos usar la imagen que tenemos. Entonces vamos a copiar el que desde el marco superior. Pero tenemos que cambiarlo un poco. Entonces estoy haciendo clic en K para escalarlo un poco para cumplirlo al fotograma completo. Así. Y quiero encogerlo en el siguiente. Entonces con K, aún así, estoy cambiando el tamaño de la imagen. Simplemente mirando más o menos en las proporciones de la animación. Sí, puede ser algo así, y queremos centrarlo. Genial. Entonces conectemos el cambio al prototipo. Elegir Smart Animate. A lo mejor podamos mantenerlo en click. Tenemos 10 segundos. Todo bien. Entonces, hagamos clic en Reproducir y veamos. Estoy haciendo clic y la imagen se está reduciendo. Veo algo de espacio aquí. Veamos qué tipo de animación se utiliza aquí suave. No recuerdo cuál usé aquí. Así que déjame comprobarlo rápidamente. Aquí no vas a tener las soluciones. Entonces sí, gentil también. Entonces supongo que necesitábamos hacerlo porque hay un pequeño cambio entre estos bordes. Entonces lo hago así. Entonces el marco sería un poco más grande. Pero el cuadro lo sentiría así. Todo bien. Genial. Y vamos una vez más. Hago clic y la imagen se está reduciendo. Derecha. Es un poco más lento que en la versión original, pero no te preocupes, cambiaremos el tiempo después. Bien, entonces el siguiente paso es el texto. Y lo que tienes que hacer es por favor descargar el fondo grotesco de choque Es gratis. Es de código abierto. Una vez que navegues hasta el texto y haces clic, el navegador debe estar abierto y tienes la opción de descargar clash grotesco Entonces por ejemplo, puedes Um, probarlo, pero no queremos hacerlo ahora mismo. Déjame solo sí, necesitas hacer clic en él y verificar puedes agregar todos los mosaicos todo porque creo que cada estilo es agradable. Y una vez que marcharemos a todos ellos, tú los seleccionas a todos. Solo estoy comprobando si tienes la opción de seleccionar todos a la vez. Pero no lo veo, desgraciadamente. Entonces necesitas seleccionar estilo por estilo, y luego tienes que descargar familia. Una vez que descargas familia, necesitas instalar los fondos. Si ya tienes la aplicación Figma, eso es genial. Pero si no lo haces, por favor instala la aplicación FDMA en lugar de jugar con ella en el navegador web porque de lo contrario, podría haber algunos problemas con los fondos Y también, lo importante es revisar al agente de Figma. Instalador. Entonces esta es la app que también tienes que descargar e instalar. Sí, ya ves instaladores de fuentes. Así que por favor instala el instalador de fondos, gracias a ellos. Gracias al instalador, podrás usar los fondos que son externos, no los fondos típicos del sistema, sino algunos fondos que descargaste de los fondos de Google o de cualquier otra fuente. Así que vaya a cualquiera de Mac OS o Windows dependiendo de su sistema e instálelo después de que realmente antes instalar nuestros fondos sería mejor probablemente. Entonces también estoy tomando este enlace, y agregaré este enlace a Figma. Puedo agregar un enlace aquí. Y Oh, por qué no funciona. Por Sí, así. Sí. Y también te diviertes instalador. Genial. Entonces, por favor, hazlo. Tanto instalando como divertido instalador de Figma. Todo bien. Entonces, una vez que instale el fondo, y podamos verificar si es reconocible por FGMA a partir del texto, necesita tipos Y estoy escribiendo guía tal vez dos M vamos a pegarnos al texto que está en nuestro ejemplo. Si no tienes clash grotesco en tu lista, cierra la aplicación, cierra la aplicación Figma. Instale el instalador de fuentes de Figma. Comprueba si la tarea de crecimiento de choque está en los fondos de tu sistema, y luego lanza el Figma una vez más, y el fondo debería estar aquí Por lo general, los problemas aparecen si usas un navegador web o tal vez a veces piensas que la fuente ya está instalada, pero no lo está, o no has instalado ese instalador de fuentes. Bien, entonces tengo mi guía de texto para millon quiero hacerla más grande, así que hago clic en K y solo, ya sabes, agrandarla También quiero cambiar su relleno a rojo, y puedo colocarlo impuesto en alguna parte. Probemos con 160 tal vez hasta 300. Sí, algo así. Entonces lo que está pasando aquí es que tenemos, por ejemplo, texto que está transitado, así Y el mismo texto, lo copié con opción con llave vieja. Y podemos tener guía para que me guste esto. Algo así. Bien. Entonces tenemos dos líneas de texto, y veamos qué pasará. Una vez cambio al modo prototipo y cambio la animación. El texto simplemente se desvanece. Es un poco diferente a lo que te mostré. Entonces volvamos al original. Entonces el texto está apareciendo aquí. Como sabemos por el Smart animate, tenemos que tener los mismos objetos Los objetos tienen que coincidir entre sí, comparando los dos fotogramas. Entonces, como pueden ver, tenemos texto de gimnasio, pero no lo tenemos en nuestros primeros fotogramas. Así que vamos a parar aquí un rato. Si queremos tener el efecto de este texto de que está siendo transiciones de izquierda a derecha y de derecha a izquierda, necesitamos copiar exactamente los mismos objetos y tenerlos en el primer fotograma. Entonces, para que sea más fácil identificar estos objetos y marcos, voy a renombrarlo. Entonces, perdón, este es el segundo, ¿verdad? Y ésta debería ser la primera. Entonces estoy cambiando los nombres de las capas, y haré lo mismo con el texto. Entonces este es texto en la parte superior, y esto está en la parte inferior, Y estoy copiando dos de los objetos haciendo clic en ese primer fotograma. Y sólo lo estoy paseando. Entonces veo el texto. Y eso es genial. Entonces veamos, por ejemplo, con shift hold, sostengo la tecla Mayús para que el texto solo pueda ser transitado de izquierda a derecha y el eje x Entonces, si mantengo turno, me será más fácil solo mantener la misma posición en cuanto a la posición vertical, y puedo desplazarlo horizontalmente con shift. Entonces déjame hacer la transición. Bien. Y veo que salió del segundo cuadro, ¿verdad? Este es el segundo marco y el texto está afuera. Entonces tengo que arreglarlo. Genial. Y en realidad, no sé por qué tenemos dos oh, perdón, lo puse en el marco equivocado equivocado. Sí. Este es el primero, así que necesito poner esto en la guía superior al primer cuadro. Espero que te quede claro. Entonces tenemos el texto en el primer fotograma. Ha cambiado su posición. Entonces veamos cómo se verá. Lo siento, solo tal vez lo cambiaré a Después de retraso, tengo 7 mil segundos. Podemos sumar dos milisegundos y C. Si. Se parece al primer ejercicio el primer video que te mostré , volvamos a ello. Estas son las manifestaciones. Todo bien. Bonito. Entonces podemos hacer lo mismo, pero necesitamos cambiar la posición. Debería estar oculto. Sí. Entonces tenemos que llevarlo a la derecha. Nuevamente, sucedió que salió del marco, así que tenemos que ponerlo al primero, y tenemos que ver con el texto inferior. Entonces va de derecha a izquierda, así que necesito cambiar su posición. Y otra vez, salió, así que necesito ponerlo debajo de arriba solo para mantener los mismos órdenes de las capas. A ver. Sí. Esto es exactamente lo que quería lograr. Entonces estamos contentos de que esta animación se vea como la original que te mostré, y ahora es el momento de grabar esta animación para luego poder exportar este video y publicarlo en historias de Instagram. Veamos cómo podemos hacerlo. 7. Usuarios de Mac: exporta animación como video con QuickTime: Bien, entonces cómo grabar la animación, cómo exportar el video. Soy usuario de Mac, así que hace que la cosa sea un poco simple porque no necesito instalar ninguna otra aplicación externa. Entonces, si usas Mac, vamos a usar Tim rápido. Y para el usuario de Windows, recomiendo encarecidamente usar la descripción del proyecto de la clase Lom Ida, tendrás el enlace y también en Figma. Es muy agradable porque lo que me gusta de esta herramienta es que puedas grabar la parte de la pantalla. Entonces, después, te mostraré cómo hacerlo. Pero ahora vamos a saltar a la grabación de la pantalla para los usuarios de Mac. Así grabando y Quicktime. Queremos grabar el tamaño específico de las historias de Instagram. Entonces veamos cómo podemos hacerlo con Quick Time. Así que estoy descansando QuickTime. Y lo estoy haciendo con la llave correcta. Estoy tomando nueva grabación de pantalla. Y lo que veo es que ya tengo cierto tamaño. Así puedo hacer clic en grabar. Y mientras tanto, también puedo dar click en la animación. Bueno, déjame dejar de grabar. Porque veo que tenía un escenario diferente en mi prototipo. Quiero así que quiero decir, la ficha prototipo. Y lo que me gustaría hacer es que me gustaría cambiar la configuración. Entonces no quiero tener este dispositivo, sino solo el modo presentaciones, está bien. Genial. Entonces lo que voy a hacer es que necesito verificar si las Proporciones del tiempo rápido coincidirán con mis gráficos, coincidirán con mi animación. Veo que debería ser más grande, estoy tomando el tamaño completo de los gráficos. Bien. Y puedo grabarlo. Pero como ya sabéis, la animación ya se ha ido porque se reprodujo sólo una vez. Entonces lo que podemos hacer es ahorrar el espacio dado, así podemos hacer clic en grabar y detener y no preocuparnos por ello por ahora. Pero necesitamos establecer algún tipo de retraso una vez que encendemos el tiempo rápido. Necesitamos tener algún tipo de retraso cuando comience la animación. Entonces déjame agregar aquí un tiempo más largo, por ejemplo, 4 segundos. Bien. Así que tomando nueva grabación de pantalla , grabación, y estoy reproduciendo la animación. Creo que debería ser, así. Y se graba la animación. A ver. Este es el archivo que fue grabado por Quicktime. Juguemos. Por supuesto, esta es la pieza de la interfaz que estábamos grabando también. Estaba cambiando pero la posición de la ventana, bien. Tenemos listo el video. Buena característica en QuickTime es que podemos recortar el video para que podamos c la primera parte Sí, creo que sería éste. Y así ahora puedo exportar el archivo, así que archivo exportar como 1,000 ADP está totalmente bien Y podemos llamar a esta guía de Milán, y la estoy guardando. Este archivo, puedo transferirlo a mi móvil, y luego lo puedo publicar en Instagram. 8. Usuarios de Windows: exportación de animación como Vdeo con Loom: Bien. Bien, así que tengo telar instalado como aplicación. Te recomiendo encarecidamente que lo hagas porque es fácil. Acabo de abrir telar y tengo la interfaz. Lo que puedo hacer aquí es que puedo grabar ya sea para pantalla o el tamaño personalizado, que es lo más importante para nosotros porque necesitamos ajustar el tamaño de la grabación a nuestro prototipo. Entonces déjame primero el prototipo. Y gracias a ello, podré personalizar el área de tamaño para la grabación. Sí, así, y puedo grabar esta parte de la animación. Como puedes ver, faltan 3 segundos antes se vaya a grabar la pantalla, y este es el momento. Yo puedo, por supuesto, detenerlo. Y aquí se generará mi telar. Puedo descargar este archivo o guardarlo en la nube. Pero volvamos a hacerlo. A lo mejor agregaré fotograma adicional para que sea más fácil comenzar a grabar, así como un fotograma inicial para que pueda darle al click, flujo comenzará aquí, y después del retraso puede comenzar después de 15 milisegundos Entonces déjame el prototipo. Una vez que haga clic dentro, comenzará la animación. Así que de nuevo, estoy buscando telar de tamaño personalizado, empezar a grabar. Bien. Estoy dibujando el tamaño personalizado. Está bien. Empezar a grabar. Estará contando tres a uno, y luego podré dar click en el prototipo, y la animación está lista. Sí, cambio a esta cuenta para que veas la opción de edición, recorte y puntada. Esto es algo que te gustaría usar, y luego podemos recortar el video. Por lo que partirá de la animación dada. Y luego puedes exportar el clip, guardar el existente y luego exportarlo, digamos que está terminado. Y puedo descargar el video con solo hacer click en más acciones y aquí descargar el video. Bien. 9. Creación de una segunda animación - parte 2: Todo bien. Entonces cambiemos al segundo ejercicio, que también va a ser emocionante. Entonces tenemos que cambiar a Figma. Bien, entonces estamos en Figma. Y déjame presentarte la animación en la que vamos a trabajar ahora. Como puedes ver, hay muchos colores y muchas animaciones diferentes. Estoy súper feliz de mostrarte algunos trucos. Entonces, como de costumbre, tienes todos los activos creados, y necesitamos descargar e instalar un nuevo fondo. Este es el teléfono que en realidad se puede descargar de G Road. Sí, de GM Road. Lo siento, estaba pensando si esta es la dirección correcta, pero, si. Entonces Kina, y necesitas descargar este fondo telefónico de este mercado. Por supuesto, se puede pagar por ello. También puedes escribir cero. Si quieres tenerlo gratis, es gratis para uso personal y comercial, lo cual es súper agradable. Me gusta mucho esta fase tipo, así que siéntete libre de descargarla. Luego instale, y por favor verifique si funciona en Figma. Si no, por favor apague la aplicación, Figma app y luego ejecútela una vez más. A veces tengo esos problemas, así que solo estoy, ya sabes, dando este consejo por ti. Tenemos un conjunto de colores, y también este icono, que vamos a utilizar en algunos de los marcos. Todo bien. Entonces comencemos. Ya sabes como empezar. Tenemos que ir al diseño de marcos y crear la historia de Instagram. Plantilla. Para tu relleno, vamos a usar el fondo base. Y solo echando un vistazo, tenemos consejos para creativos Entonces estoy haciendo este texto consejos Yakhina. Ya lo he elegido en mi lista de la lista de fondos. Hagámoslo más grande con K. Tips. Veremos si es crear es. No recuerdo cómo dividí esta palabra. A ver. Creativos. Creo que este tamaño está bien, y queremos agruparlos y tener los mismos espacios entre todos ellos, para que podamos usar distribuir espaciado vertical. Oh, no lo sé. No se ve Esto es lo mismo. Así que hazlo una vez más. Tomaré este marco solo para tenerlo de manera similar. Veo que los fondos deberían ser más grandes, así que lo hago un poco más grande T cuatro creativos Permítanme verificar qué fondo utilicé para el medio con fines de demostración. Es medio, está bien. Todo bien. Será algo así. Creativos y vamos a ordenar un poco. Todo bien. Creo que nosotros que los consejos cuatro es un poco más grande aquí. Entonces sí, hagamos algo así. Entonces la composición es fina, más o menos. Y lo que podemos hacer aquí es que podemos crear un componente. Entonces siempre que decidamos que no sé, queremos hacer esta diversión más grande, va a cambiar en todas las instancias de este componente. Entonces, primero vamos a crear el componente, y ya verás a lo que me refiero. Selecciono todos los elementos que necesitan estar en el componente, y luego puedes hacerlo rápidamente con este componente de concreto. Y podemos nombrarlo sección de punta, por ejemplo, Y una vez que copie, ya sabe, el fotograma para las siguientes etapas de la animación. Pero mientras tanto, yo decidiré que, bueno, en realidad estos fondos deberían ser mayores. Puedo, ya sabes, tener influencia en mi componente, puedo cambiar algo en mi componente, y se reflejará en todas las instancias de este componente. Entonces creo que esto es muy útil, sobre todo si estás experimentando mucho, Y en general, mantener artículos repetitivos en componentes en Figma es Bien, entonces tengo consejos para creativos. Puedo quitar estos marcos por ahora. Quiero copiar el icono de flecha y hacerlo un poco más grande Bien. Entonces tenemos consejos para creativos. Y como recuerdas de la animación, tenemos varias franjas de combustible de color que aparecerán de varios sitios. Entonces necesitamos crear las franjas, y lo hago lo hago con un marco, así hago clic en frame, y lo dibujaré, pero cuidado. Esto está sucediendo dentro del componente, así que necesitamos arrastrarlo y sacarlo del componente. Comprobaremos la altura porque posteriormente estas franjas cubrirán el texto. Entonces hagámoslo un poco más grande, así que voy a decir 180. Y queremos llenar este marco con un color. El primer color será el amarillo, éste. También puedes consultarlo aquí. Puedes usar el selector de color, y queremos que sea redondeado Entonces aquí, podemos tomar 100, por ejemplo, para ver que se ve bien, está completamente redondeado. Entonces tenemos la primera raya. Pero tenemos que replicarlo para más artículos. Entonces tenemos otro, el azul. Debería estar dentro de este marco. Cambiemos el nombre a Tips para creativos y cambiemos el color a azul Estoy dando click en él y con la llave antigua o de opción, y necesitamos cambiar el color a rosa, derecho. Nuevamente, cambiando agregándolo al marco. Podemos llamarlo rosa. Este, podemos llamarlo azul y amarillo. Todo bien. Y supongo que sería la última. El verde. Sí. Bien. Oh, no. En realidad, no es el último, lo siento. Es naranja, ¿verdad? Y el último estaría en alguna parte de aquí. Será verde. Entonces esta es la etapa de la animación, una etapa. Pero en realidad, es el medio. Entonces queremos tener el punto de arranque. Se verá así. Lo voy a copiar. Entonces todos estos marcos estarían ocultos. Asegúrate de que aún permanezcan justo en el marco. Por cierto, no le cambié el nombre. Perdón por eso. Todo bien. Entonces estamos haciendo prototipo. No, ésta también. Lo siento. Bien. ¿Verdad? Y este sería uno de los pasos más allá de la animación. Y vamos a copiar. Vamos a copiar. Todo bien. Tan amarillo. Amarillo. Voy a cambiar al diseño. Aparecerá amarillo. La siguiente etapa. Cuál es el siguiente. Calzado ser cuatro, entonces el azul, ¿verdad? Asegúrate de que estás, ya sabes, editando el marco apropiado. Bien. Entonces azul, luego rosa, supongo, o es rosa. Está aquí. Y La siguiente etapa es verde. Naranja. Lo siento. Lo siento. Sí. Es naranja. Por supuesto, por tener más y mejor contenido organizado, te recomiendo encarecidamente que cambies el nombre de los marcos. 10. Creación de una segunda animación - parte 1: Todo bien. Entonces creo que podemos intentar conectarlos en el prototipo y ver cómo irá la animación. Todo bien. Animar inteligente Yo lo mantendría corto, así que tal vez 600 milisegundos. Después del retraso, vamos a mantenerlo muy rápido, 50 milisegundos, y hagamos lo mismo con el otro En realidad, podemos hacer que sea un bulto en él Entonces solo estoy combinando, y luego seleccionaré. Mm hmm. Seleccionaré todas las flechas con shift. Y entonces puedo cambiar lo siento, no este, pero aquí, pero aquí después de retraso, 50 milisegundos, ¿verdad? Es correcto. Y veamos. Fresco. Voy a usar este recrear el último porque vi que había algunas inconsistencias, dame un saco. Estamos tomando el verde del número siete. Cambiando al diseño para que pueda cambiar su longitud. Y creo que sería mejor hacerlo más dinámico. Esto es lo que vi. Pero digámoslo una vez más. Sí. Tenemos que esperar un poco más para el rosado. No sé por qué. Entonces, esta es una para la rosa. Oh, porque no cambió a 50 milisegundos y probablemente lo mismo con este A veces esta edición masiva no funciona tan bien. Todo bien. Y veamos. Bonito. Puede ser más rápido en general. Entonces tal vez no 600, sino 400. Hagámoslo por los diferentes. Sí. Y veamos. Sí. Es más dinámico. Es. El siguiente fotograma fue que la flecha giró También podemos el Ron giró, pero también hubo algunas otras rayas. Entonces recomendaría hacer algo como esto porque si cambiamos la preocupación, necesito ir a la zona. Para el fondo completo, cubriremos el mundo de los tips. Entonces me gustaría el texto de consejos, pegado de la misma manera Para hacer esa transición suave entre los marcos. No podemos hacer smart animate esta vez, sino solo conexión instantánea Así que no es inteligente animar, sino instantáneo aquí, y puede ser bastante rápido Entonces no en click, sino después de retraso, un milisegundo, y copiamos este porque queremos hacer uno nuevo Entonces como propinas, ¿verdad? Solo estoy comprobando si, propinas será en el Oh, como pueden ver, no logré cubrir el texto aquí también. Entonces ojalá podamos agregar el componente, el componente principal para que estas letras puedan ser un poco más pequeñas, por ejemplo, así. ¿Y cambió algo? Y creo que en esta situación, lo pondría un poco, sí, porque esta es la segunda fila. Entonces lo puse un poco a dos, tres pixeles. Cuatro. Sí. Y ahora está oculto. Necesito también copiar esta una vez más y pegarla aquí para que sus posiciones sean las mismas pegándola también y agregando la conexión Entonces conectando. Y ahora puedo agregar lo siento, smart animate. Después de un retraso de un milisegundo ver. Sí. Bonito. Y después de esto quiero que esta flecha muestre consejos. Otro que necesito para conectar con smart animate después de delay, un milisegundo Pero en realidad, puede ser más rápido. Y esto también, porque era demasiado largo. Bien. Y lo que está pasando es que estamos teniendo algunas palabras apareciendo, veamos. Se puede hacer de tal manera que estemos cubriendo una palabra, y luego estamos cambiando el tamaño del rectngle que está cubriendo la Ahora vamos a crear las otras palabras. Entonces mira esto. Tenemos este marco. Pero tenemos que cubrir estas palabras. Entonces copié el dirtungle pero necesito ponerlo por adelantado. También copia uno rosa. Necesito copiar este azul y pegarlo una vez más. Si quieres que sea la primera capa, solo tienes que seleccionar el marco y luego pegarlo. Lo mismo con el rosa selecciona el marco, y el texto es. Y naranja también. Genial. En los siguientes pasos, vamos a cambiar la altura de este rectángulo. Por lo que disminuirá a casi cero. Lo mismo con el rosa, lo mismo con el naranja , y lo conseguimos. Genial. Así que ahora podemos conectarlo en modo prototipo, Check y smart animate. Tal vez hacerlo un poco más rápido. Oh, olvidé cambiarlo también. Después de un retraso, lo mismo con este. Después de demora milisegundos. Y con éste. Después de un retraso, un milisegundo. Bien. Tengo mucha curiosidad por esta animación. Entonces vamos a ver. Fresco. Pero creo que es demasiado rápido, ¿verdad? Debería ser un poco más lento. Déjame revisar esta. Entonces tal vez cambiemos a 600. Y vamos a ser mejores. Ya sabes, el cronometraje y la animación es súper importante porque se trata de la experiencia. No queremos lastimar sombreros de nuestros. Bien. Entonces aquí hay un problema, ya veo. Creo que es cuestión de aquí, tenemos smart animate. Y en mi opinión, veamos si es bueno. Voy a añadir un tiempo más largo. Si quieres verificar algo, puedes agregar más tiempo. Y éste es Smart Mate. Y éste también debería ser inteligente Mate. Bien. Entonces voy a comprobar lo que está pasando aquí. Juguémoslo una vez más. Esto se ve bien. Esto también se ve bien. Bien, entonces tuvimos un problema supongo después de este marco. T o éste. Porque no estoy seguro de si este marco coincide con este marco. Tenemos consejos aquí en la parte superior. Pero las puntas en los diez diez fotogramas en un spot diferente. Hay que tener mucho cuidado al respecto. Por supuesto, ya sabes, se trata de buscar los errores o lugares para mejorar. Entonces sí, creo que tenemos que cambiarlo a instantáneo. Y además, este icono debería ser el mismo. Y veamos si funciona. Bien. Sí, es mejor. Definitivamente es mejor. Genial. Entonces tenemos consejos. Echa un vistazo a esto. Y la última etapa de la animación, la última etapa que hicimos. Oh, en realidad, es echarles un vistazo. Bien. Yo lo corregiré. Tenemos diversos antecedentes, pero como pueden ver, van a cambiar de inmediato, y hay una transición. A lo mejor te voy a mostrar en más tiempo 2 segundos, digamos. Ahí está la ronda esa raya que va de arriba a abajo. Vamos a hacerlo. 11. Creación de una segunda animación - parte 3: Tenemos que copiar este marco y agregar un nuevo marco que sería lo lamentable. Hagamos este marco afuera sería el, la raya bash que va en el texto Debería estar a su alrededor también. Fresco. Puede ser más largo, y lo metemos en el marco 14, se ve así, yo llamaría a la raya Así que por ahora, podemos esconderla. Pero en el siguiente fotograma, la mejor raya va todo el camino hacia abajo. Bien. Conectar. Solo para mostrarte por qué agregué esta mejor raya tal manera que esté oculta en la parte superior, y luego aparece porque queremos usar smart animate aquí una vez más Y entre estos fotogramas, porque no queremos, ya sabes, agregar esta raya bash a todos los fotogramas antes, porque queremos tener las capas coincidentes para que el smart animate funcione Solo quiero tener una transición que sea instantánea, y no hace falta que coincida con las capas entre dos fotogramas. Todo bien. Después del retraso, puede ser uno, correcto, y luego el siguiente , Smart animate. Podemos hacerlo un poco más largo. A ver. Oh. Sí. Lo siento. Sí, se me olvidó entre los fotogramas, agregar Es después de un retraso, así que está bien. Después del retraso, está bien. Necesitaba hacer clic en una capa, así que me pregunto. Después de un retraso. No sé por qué apareció este flujo. Acabo de quitar este flujo. Y para mí, este debería ser más largo, así que agreguemos 2 segundos. L ver. Bien. Bien. Entonces creo que este es el lugar donde tenemos Después de retraso. Todo debería funcionar aquí. No sé por qué necesito hacer clic. A lo mejor es Bog o algo así. Ojalá no. Aquí tenemos al click. Lo siento. Entonces tenemos que cambiar después del retraso de un milisegundo Y hay una cosa más que quería comprobar, pero déjame lanzarla una vez más. Bien, esto se ve genial. Queríamos tener la palabra ellos. Entonces también es una buena práctica hacer componentes de esta palabra para tener más flexibilidad porque como puedes ver, quería cambiarlos, y, ya sabes, porque no es un componente, tuve que cambiarlos en tres lugares en tres fotogramas. Todo bien. Así que ahora solo estamos copiando esto Este último fotograma y cambiar el color simplemente cambia el color de la raya. Entonces sería amarillo. Sí, raya bash, raya bash, se vuelve amarilla, luego en azul ¡Vaya! Lo siento. Necesito marcar la franja de bash. Sí. Asegúrate de tener seleccionado el marco adecuado. Y por cierto, veo que es por las rondas, tenemos que estirarlo un poco. Así que lo estiraré también. La mejor raya. Debería bajar y esto también, ¿verdad? Entonces rosa, supongo. Y naranja y verde. Bien. Bien. Entonces lo último que tenemos que hacer es conectar el resto de los frames, smart animate. En realidad, no importa si es smart animate. Se puede disolver porque nosotros simplemente, sabes, cualquier objeto no se moverá, ¿verdad? No se trata de cambiar de lugar, es posición. Se trata sólo de cambiar el color, así que sería simplemente, ya sabes, desvanecerse dentro y fuera. Podemos dejar 600 después del retraso. Un milisegundo. Yo haría lo mismo por todos ellos. Después de retraso tras retraso. Y después del retraso. Pero deberían ser 600. Sí. Bien. Veamos qué tenemos. Bien, entonces este debería ser definitivamente más rápido porque nos tomó algún tiempo después del retraso, uno tal vez 200. Bien, creo que hay un lugar más. Tenemos que cambiarles esto porque si escondemos esta raya rosa. Tenemos esto y ahora tenemos DM y debería estar bien. Por eso es mejor tener componentes porque en tales situaciones, todas las ediciones serán replicadas a todos los demás Todo bien. Así que vamos a revisar la animación. Bien. Creo que todavía hay un lugar. Este es el último fotograma donde tenemos. Aquí los tenemos o tal vez ese. Sí. Vamos por un segundo. En este marco 15, escondamos a Bart y tenemos esto. Entonces tenemos que revisarlo a través de ellos y escondernos e ir una vez más prototipo. Bien. Esto se ve bien. Sí. Esto es genial, pero creo que tenemos que esperar un poco. Tenemos 2 segundos aquí, así que cambiemos a 200 y ahora va a ser bueno. Oh, no, creo que es demasiado rápido. Definitivamente demasiado rápido. Entonces tal vez 1 segundo. Y para este 600 600 instantáneo 600. Bien. La final final final. Sí, creo que debería ser más rápido, en realidad. Cambiemos a 300 y sería perfecto. Bien. Y ahora, una vez más, podemos crear la grabación. Entonces lo importante aquí es que la primera animación comience después, no lo sé. Digamos 5 segundos o siete segundos. Bien. Entonces tenemos 400 pero necesitamos copiar y cambiar la conexión. Puede ser instantáneo disolver segundos y estoy agregando reproductor de tiempo rápido nuevo registro de grabación de pantalla, y yo, fue bastante rápido, ¿verdad? Entonces déjame detenerlo y comprobarlo. Oh, necesitamos cambiar la posición inicial del flujo porque partió de este marco, no de ese. Y volvamos a hacerlo. Grabar Bueno espera un poco y empezará a animarse Bien. Ahora podemos detenerlo y recortarlo y recortarlo en tiempo rápido. Espero que tengas también, como una manera sencilla de cortar el video en windows. Todo bien. Bien, vamos a recortar, y vamos a exportar el archivo. Y podemos mostrar esto en nuestro Instagram. Por supuesto, puedes rehacer este ejemplo, hacer algo diferente, cambiar los colores, cambiar el texto Este es uno de tus proyectos de clase, así que estaré feliz de ver tu arte. 12. Creación de una tercera animación - parte 1: Bien. Todo bien. Entonces vayamos al tercer ejercicio. Vamos a Figma. Pero antes, te pediré que descargues la fuente ZT Chins. Entonces el enlace debería estar en la Figma que preparé para ti. Y también hay algunos videos para descargar los cuales vamos a utilizar en el ejercicio. Tú, por supuesto, tienes el espacio para usar para los experimentos. Y ya es hora de mostrarte qué vamos a trabajar. Entonces estoy iniciando la animación. Vamos. Bien. Entonces, como puedes ver, se trata de enmascarar el video, lo que nos está dando nuevas oportunidades y nuevas ideas para presentar nuestro trabajo o para presentar el trabajo de nuestros clientes, todo lo que queremos hacer en las historias de Insygram Entonces, profundicemos en lo que está sucediendo aquí. Así que necesitamos, como siempre, crear un nuevo marco, hacer clic en el marco, recoger la historia de Insygram, y estamos tomando el color azul bebé azul También tenemos el título ABC de la Cerámica usando la fuente Zenz. ABC de la cerámica vamos a probar la fuente de latas. Quiero tenerlo delgado y un poco más grande. Entonces voy a usar K para escalar. Y creo que necesitamos cambiar la altura de la línea a tal vez esta. Y también utilicé en el ejemplo, usé algunas variantes de la fuente para la cursiva para O y E e I y, supongo. Así que juguemos un poco con él. Voy a mi expediente, así que marco C y uso cursiva ligera delgada. A lo mejor F, veamos si se ve bien. Ya sabes, sólo para jugar un poco con la tipografía también. Algo así. Podemos hacerlo un poco más grande. Y supongo que a lo mejor no es súper legible, así que me volveré a la luz. A lo mejor estarías mejor. A lo mejor R, Si, se ve bien. Bien, entonces tenemos el título, y lo que está pasando aquí es que estamos agregando videos. Necesito agregar el video. Déjame ir a la carpeta con los videos, y voy a agregar el primero. El primero intro Todo bien. Y por ejemplo, lo estoy agregando aquí. Si hacemos clic en prototipo, no pasará nada porque no hay otra pantalla. Entonces hagamos otro solo por el bien de conectarnos a las pantallas. Y lo que verán es que estamos teniendo el sonido del video, ¿verdad? Y se juega en el prototipo. Entonces es una buena práctica. Por supuesto, dependiendo de lo que quieras hacer para silenciar el video, y puedes hacerlo encendiendo este ícono. Todo bien. Entonces el Video está silenciado, y necesitamos crear la máscara Entonces nuestra máscara es un rectángulo. Con las esquinas redondeadas. Imaginemos que esta es nuestra máscara, quiero redondear esquinas. Mi única vuelta a las esquinas en la parte superior y en la parte inferior se quedará muestra así. Esta será nuestra máscara. Cómo hacerlo, necesitamos tener una forma y luego hacer clic y luego hacer clic en el uso como máscara. Actualmente, es una máscara, pero el video no está enmascarado. Entonces tenemos que tomarlo, arrastrarlo y ponerlo después de la máscara dentro de su grupo. Ahora se ve bien. Déjame comprobar cómo se veía. Bien, entonces era más grueso. La máscara era más grande así que la podemos estirar un poco. Pero también necesitamos estirar el video con estoy haciendo clic en turno para que pueda ser máscaras correctamente. Bien. Así que estamos creando otro marco, y estamos cambiando el tamaño de la máscara. Entonces tenemos que ir al rectángulo. A lo mejor sería cambiarle el nombre para enmascararlo. Así que estamos tratando de mantener el orden. La máscara cambiará será más pequeña y ambas. A lo mejor hagamos esto y veamos el modo prototipo, cómo se ve. Por supuesto, smart animate. A ver. Bonito. Podemos hacerlo un poco más largo para que veas la diferencia. Hago clic. Y lo que realmente me gustó de esta técnica es que el video se está reproduciendo y la máscara está animando, por lo que da un efecto realmente interesante Bien. Entonces ahora vamos a crear el tercer fotograma. Y vamos a cambiar la máscara. Entonces podemos hacerlo más pequeño. Además, también podemos cambiar la dinámica, cómo funcionará la animación inteligente, cuál será la dinámica de la animación Y sugiero que los cambios sean rápidos. Entonces conectemos con el siguiente. Será rápido, bien. Y vamos a comprobarlo. Me gusta este efecto que esta máscara está rebotando un poco. Entonces podemos cambiarlo a después después de un retraso. Después de 100 Meliscond Veamos. Fresco. La siguiente etapa es cambiarlo a de rectángulo con esquinas redondeadas a realmente a un círculo. Así que es genial que tener una máscara no signifique la misma forma todo el tiempo. Entonces podemos agregar 500 tanto a arriba como a abajo. Entonces se convertirá en un círculo. Y entonces esta máscara también puede cambiar su posición, por lo que puede ir a la parte superior y ser un poco más pequeña. Oh, en realidad, se hizo más pequeño en el fondo. Pero mantengámoslo así. Veremos lo que es más interesante. Lo que se ve mejor. Entonces prototipo. Podemos vivir en click por ahora y cambiarlo después. Entonces vamos a ver. Bien. Definitivamente aquí. Es rápido. Pero tal vez cambiaría esta posición. Cambiaría de posición de esta máscara, por ejemplo, a la cima, así. Y esto sería más pequeño, así. Y luego podremos volver a jugar con la forma de esta máscara. Podemos hacer algo así y luego agrandar por ambos lados. Ojalá esté en el centro. Sí. Bien, entonces ahora tenemos que conectarlo y ver cómo se ve. Fresco. Esto me gusta cuando el video se acerca, y al mismo tiempo, la máscara está cambiando Bien, así podemos cambiarlo a después del retraso. Por ejemplo, este puede ser después de 300 milisegundos. Después de retraso 200. Y al siguiente, estamos teniendo algunos elementos de texto que aparecen. Así que vamos a crearlo rápidamente. Yo soy el marco y tomando, por ejemplo, unirse a clases. Y cambiemos el texto a la fuente para ingresar tal vez, tal vez 50 o 50 estarán bien, pero yo lo cambiaría a minúscula. Y como se podía ver, parecía un pequeño botón, como un elemento redondo redondeado. Para que podamos enmarcarlo con un clic derecho. Selección de sección de marco. Bien. Y podemos agregar un layout. Por lo que establecerá dinámicamente el ancho y alto de este botón. Si agregamos relleno, verás que, ya sabes, el margen, el paddingth en realidad dentro de este fotograma es de 100 pixeles, pero queremos mantenerlo no tan grande, más bien pequeño Y aquí me quedaría 15, digamos, también redondeándolo a esquinas. Y lo cambiaría a 40. Inscribirse a clases. No recuerdo el color. Lo siento. Se me olvidó prepararlos aquí. Entonces es gris y amable de hombre. Inscribirse a clases. Todos los martes, Ahora, estoy cambiando el texto. Puedo usar lo que quieras. Y para éste, cambiaremos el color a éste. Y esto podría ser gris. A lo mejor voy a ordenar. Bien. Y vamos a ver. De hecho volvamos al original porque quería comprobar cuál era la idea detrás del texto? Entonces, cómo aparecerá. Bien, entonces no importa porque el texto acababa de aparecer. Animado inteligente. Ya veremos qué va a pasar. Vamos a revisar. Uh, eh. 13. Creación de una tercera animación - parte 2: Si quieres hacer algo más elegante. Podemos copiar el texto. Ya está dentro de la máscara, así que también podemos pegarle a esta máscara, y podemos cambiar su posición. Por supuesto, tenemos que volver a arrastrar dentro de la máscara, así que está aquí, ¿verdad? Está en esta máscara. Y también coincide con el siguiente fotograma. Por lo que tiene un interesante de hecho. Sí. A mí me gusta. Y nosotros también en la versión anterior, la original, agregué otro video para mostrarte que, ya sabes, podemos mezclar los videos. Podemos cambiarlos. Entonces voy a agregar otro. Y por ejemplo, puedo drogarlo en la máscara y ya veremos qué pasará. Bien. Puedo ver este video. Probablemente no esté conectado. Bien. Entonces una cosa más, necesitamos conectarla, ¿verdad? Animado inteligente. Vamos a hacer clic o tal vez después de un retraso. Bien. A ver. Simplemente lo llevaré rápidamente aquí solo para ver cambiar esos dos fotogramas. Bien. No es nada espectacular, digamos. Si quisieras tenerlo más interesante, yo pondría aquí el mismo video, cambiaría su posición. Pero sí, es algo que podemos dejar o, o. Podemos copiar este marco. Agregado aquí. Quiero decir, toda la máscara. No está mal, así que podemos jugar un poco. También podemos hacer esta máscara. Entrando a más área, así que cada vez más grande. Pero presta atención a que tu video lo corta aquí, tiene que ser la posición del mismo necesita ser cambiada. Veremos cómo se ve en el prototipo. No está conectado. Olvídate de ello. Espera un segundo. Bonito. A mí me gusta. Entonces creo que podemos hacer máscara aún más grande puede crecer así, así. Y el video puede ir como aquí. A ver. Fresco. Así. Entonces, al final, podemos irnos como un impuesto corto corto. Esperando por ti, algo pequeño que agregará un toque agradable el toque visual también. Podemos hacer que sea súper rápido. Y cambio tras retraso cambiar todas las secciones anteriores a después de retraso. Bien. Oh, tenemos muchos, muchos fotogramas, pero creo que el hecho parece ruido. Después de retraso. Bien. Este es después del retraso, e. Entonces iniciaremos el flujo. Lo estoy reemplazando al primer cuadro. Bien. Fresco. Me gusta mucho. Espero que también te guste. Entonces, por supuesto, puedes usar los videos frontales si quieres, pero todos los dos videos en realidad están en la carpeta drop box. Entonces ahora, grabándolo con tiempo rápido, al menos para mi caso. Y para éste, comencemos después de 6 segundos. Bien. Entonces tu tarea ahora es crear el video. Te puedo ayudar rápidamente con una cosa. Por favor, copie el primer fotograma. Entonces tenemos un margen de tiempo una vez que comenzamos a grabar la pantalla. Yo diría que la mitad del segundo y prototipo. Yo lo haría, voy a empezar por aquí. Vista previa. No sé por qué la vista previa acaba de escapar de mi prototipo. Pero agregué un nuevo punto de partida de flujo. Entonces intentemos grabarlo. Estoy pinchando tiempo rápido, nueva grabación de pantalla. El prototipo, y está siendo animado. Impresionante. Bien. Olvidé apagar el sonido en el video en el último video. Entonces déjame corregir esto. A lo mejor se puede escuchar porque me cambio bajé el volumen. Pero una vez que ingreses al prototipo y haces clic en el video, verás que el sonido está encendido. Y vamos a revisar también los fotogramas anteriores anteriores. Sí. Sólo tres fotogramas, ojalá. No mucho trabajo. Bien. Y ya estamos listos. La animación debe estar lista. Espero que te haya gustado jugar con el enmascaramiento y el video. Es un arma realmente poderosa. Espero que tengas algunos experimentos, sobre todo con este enfoque con las técnicas, y quiero verlas todas en el proyecto de clase. 14. Bono: otro tipo de animación: También preparé un video bonus, un tipo bonus de animación. Entonces veamos de qué se trata. Déjame cambiar al prototipo y jugar. De hecho puedo crear el punto de partida. Para que lo veas, y a veces es la carga. Y como ves, tenemos el video que está enmascarado y también otro video, y esta es la grabación de pantalla desde solo la nota en mi mac Y estoy escribiendo algo, escribiendo algo. Y creo que se ve realmente genial. Y vi algunas historias de Instagram y este tipo de animaciones. Entonces creo que llama la atención de la gente porque quiere ver lo que vas a transmitir. ¿Cuál es tu mensaje? Entonces, cómo hacerlo. Bueno, no es tan difícil. En realidad, podemos mirar dentro de lo que sucede en este marco. Entonces tenemos varios marcos como pegatinas, ¿verdad? Así que deseo las pegatinas creadas dentro de otros marcos. Entonces yo solo, ya sabes, le agregué algunos colores. Si entramos, verás que tenemos el texto, y cada fotograma tiene un relleno diferente, el color de fondo diferente, y también está redondeado. Entonces tenemos ciertas pegatinas. También otro con una sonrisa. Pero creo que lo más interesante serían los dos elementos. Entonces el grupo que está enmascarado. Entonces tenemos un rectángulo con esquinas redondeadas y en su interior, tenemos algunos grupos. En realidad, no necesita ser un grupo, no importa. Es solo un video puro. Entonces tal vez lo siento. Voy a sacar este video de este grupo, así quedaría más claro. Y como veis, puedo manipular con este video, puedo hacerlo más pequeño. Puedo cambiar su posición. Una vez que cambies al modo prototipo, una vez ejecutes la animación, verás que se está reproduciendo el video. Y lo mismo sucede con esta nota, esta animación de mecanografía. Tenemos un rectángulo que es redondeado, ya que te voy a mostrar que, ya sabes, podemos cambiar la forma del mismo fácilmente. Entonces es redondeado, y tenemos el video que grabé usando QuickTime en mi Mac Si quieres recrearlo, ya sabes, solo tienes que cambiar a tu app de notas favorita en Mac, estoy usando QuickTime Y eligiendo la nueva grabación de pantalla. Por supuesto, podemos cambiar el tamaño de la misma así. Puedo cambiar la posición, hacer clic en grabar e ir a notas, y puedo comenzar a escribir. Mi día fue terrible. Déjame compartir mi historia contigo. Lo que sea. Entonces simplemente guardamos el este video. Bien, estoy listo para guardar el video, para exportarlo. Esta resolución debería estar bien. Vamos a agregarlo al bono. Lo nombraré escribiendo. Todo bien. Entonces se está salvando. Y puedo agregar rápidamente el nuevo marco. Entonces en la historia, puedo agregar un fondo, puedo crear rectángulo. Intentemos con diferentes colores para que sea más reconocible, tal vez más grande Bien, entonces estoy listo para agregar mi video. También ya está recortado. Así que solo he grabado este escrito y notas. Así que solo estoy arrastrando y soltando el video, y queremos mantenerlo en esta máscara Así que estoy usando esta función de uso como máscara. También puedes usar los atajos y mi video es máscara, lo cual es genial. Puedo cambiar un poco el tamaño. Para que sea para ajustarla al tamaño de la máscara. O también puedo hacer una operación diferente. Puedo deshacerme de la máscara. Así que solo puedo agarrar el video, quitar la máscara y cambiar el relleno de color del fondo para que coincida con el relleno del video. Entonces tenemos este efecto de toda la ventana visible. Pero hay una sombra de otro artículo, supongo, y buscador. Así que aún, creo que sería mejor agregar algún tipo de máscara, Gracias a ella, vamos a cortar un poco la sombra. Entonces esto es máscara y t gato. Se ve mejor. Entonces este es nuestro marco completo. Y se puede agregar otra, por ejemplo, redondeada una máscara. Entonces tenemos que tomarlo del grupo de enmascaramiento existente, y tal vez lo agrupe y lo ponga debajo de esta elipse Y a esta elipse, puedo agregar otro video presentándome, por ejemplo Ya lo grabé. Entonces estoy tratando esta elipse como una máscara. Bueno, eso se ve extraño. Pero, tal vez. A lo mejor tal vez. Y puedo, por supuesto, cambiar el tamaño del video, y también puedo cambiar la posición de la máscara. Puedo marcar dos de estas capas agruparla y ponerla en alguna parte por aquí, dependiendo de lo que se quiera lograr. Y veamos qué tenemos. Iré al prototipo. Sí, esta es en realidad un poco más grande. Entonces quería mostrarte cómo se ve. Sí, es algo interesante, ¿verdad? Porque ves la cara de una persona y ves un mensaje. Entonces, para mí, está atrayendo la atención del usuario. Es algo que me atrae. Y creo que en las historias de Instagram, este tipo de contenido, este tipo de animación podría ser valioso. Y claro, puedes agregar, por ejemplo, yo uso las pegatinas aquí. Así que solo los copio y los pegué para agregarlos como algo más colorido Pero lo único que hay que tener cuenta es que actualmente estamos dentro del grupo de enmascaramiento, así que queremos asumirlo, tomarlo un baño en nuestra jerarquía de capas. Y nuevamente, podemos ver tal vez vamos a crear el punto de partida bajo. Aquí no tenemos interacciones. Pero lo que quería mostrarte como un bono que puedes usar también el prototipo del dispositivo, el marco del dispositivo, que se ve muy bien. Entonces, por ejemplo, P , bien, y esto sería algo así. Y aquí, puedes imaginar cómo verían tus historias de Instagram, además, te recomiendo encarecidamente que revises configuración de este prototipo porque puedes jugar fácilmente con diversos antecedentes. Es decir, las diversas simulaciones del dispositivo, incluso el color del iPhone, que es súper pequeño detalle Si quieres tener algo agradable a tu portafolio o presentar tu trabajo en la derrame de móvil También puedes usar la opción para grabarlo, así también puedo tomarme un tiempo rápido, y ajustarlo para que pueda grabar todo este fotograma con el móvil así, y pueda comenzar a grabar y tendremos animaciones así. Espero que disfrutes de estas clases. Espero que aprendas algo nuevo y no puedo esperar a ver tu proyecto de clase. 15. Recapitulación: Así que recapitulemos rápidamente lo que has aprendido y lo que has hecho durante las clases Entonces, antes que nada, ya tienes los conocimientos básicos de la interfaz FINMA A lo mejor no sabes a fondo cómo deliig y dónde están todas las características, pero más o menos con mi ejercicio, podrás crear algunas historias de Instagram Lo segundo es que sabes que Smart animate, es una característica de Figma realmente genial porque te ayuda a animar lo que pase Entonces, por ejemplo, si tenemos frame A y free B, todo lo que esté entre ellos lo hará Figma automáticamente en base a comparar esos dos fotogramas Entonces todos sabemos que Smart animate busca las diferencias y las similitudes en cuanto a las capas Entonces es por eso que a lo largo del curso, te estaba mostrando que, ya sabes, el orden de las capas es importante y, ya sabes, duplicando algunos elementos De un marco dado a otro es importante. Y también sabemos cómo crear componente, lo cual es súper importante, sobre todo cuando tienes animaciones más complejas, así que no tengas miedo de eso. Y claro, te invito totalmente a que revises otras clases de FINMA Y si tienes algunas peticiones especiales para las futuras clases de mi parte, házmelo saber en la sección de comentarios, estaría muy feliz de revisarlas todas. También puedes contactarme en Instagram en h5d awesome o puedes consultar mi cuenta de Twitter, que es Agana Ploha Este es Y espero verte ahí. Gracias por unirte, y estoy cruzando los dedos para tu proyecto de clase. Solo como recordatorio, tu proyecto de clase es recrear una de las animaciones que te estaba presentando o crear algo totalmente fresco, totalmente nuevo basado en las técnicas que estabas aprendiendo conmigo Por favor aplaudan el trabajo que preparaste en la sección de proyectos de clase Puedes pegar el enlace al video o incrustar el video. Si tienes alguna duda, solo avísame. Entonces primero, tres personas que presentarán su trabajo en las secciones del proyecto de clase tendrán una sesión exclusiva uno a uno conmigo que ayudará media hora. Entonces, si quieres hablar sobre tu carrera o tal vez técnicas en Figma o tal vez cosas diferentes relacionadas con la codificación o el diseño, estaré encantado de responder a tus preguntas Así que recuerda, primero, gente libre, te estoy esperando, y ojalá te diviertas para disfrutar del proceso creando las animaciones.