Figma: componentes interactivos

1. 01 introducción: Hola, bienvenidos a este curso. En este curso vamos a ver cómo funcionan los componentes interactivos. Visto fema, han estado por ahí un tiempo, pero en versión beta. Y por último, no hace mucho tiempo se implementaron en la versión final de Figma. Entonces estaremos aprendiendo qué son componentes interactivos, cómo hacerlos y para qué son buenos. Por lo que estaremos haciendo componentes interactivos para botones, radio sobre esos como litros, como principiantes. Cargando barras, incluso animaciones, creando, creativas, todas ellas con componentes interactivos. Y verás que estos harán que tus prototipos sean más vivos. Entonces si te interesa y profundizar en crear flujos de trabajo más consistentes en Figma me atrajo a este curso. 2. 02 botones: Oye, So, muchas gracias por las puntuaciones de la unidad dos. Como hemos visto en la intro, vamos a ver algunas interacciones. Podemos hacer. Contamos con componentes interactivos. Como se puede ver aquí en el botón de radio, tengo todos estos estados como Holger cuando hago clic en el mismo cuando estos botones que tengo, el estado homocigoso y el estado en todos ellos también. Tengo estos más ligeros que el fin de semana replicar y hacerlo interactivo también. Estas como BGR aquí, o estas pequeñas animaciones que podemos desencadenar cuando hacemos clic en algunos lugares también, estas barra de carga o incluso estos nombre de entrada, como pueden ver, cuando hago esto en el estado de hover o en el estado, tenemos estas animaciones cool con la barra de forro o la escritura como si estuvieras escribiendo también, estas animaciones en el nombre de entrada y cuando yo checkout o hover o pierdo el foco en la entrada, hará que estos. Así que empecemos y vamos a crear otra base aquí para crear nuestros componentes. Este va a ser el tutorial o bien? Entonces para estos, solo voy a empezar a calificar un, un marco. Recuerda que solo puedes presionar F. Y solo voy a añadir estos MacBook Pro. Por lo que estos van a ser nuestra interrupción los componentes. Y voy a crear otro marco aquí mismo para empezar esto. Componentes de horas. Entonces esto va a ser patio de recreo. ¿ De acuerdo? Entonces empecemos con los botones, que creo que son. Va a haber la más parecida. Entonces empecemos por crear un rectángulo de altura va a ser de 40. Y voy a aplicar un radio fronterizo de cuatro. Y vamos a crear algo de prueba aquí, que va a ser una botella. No importa. Y con estos, solo voy a crear un diseño automático. Recuerda que seleccionas los dos elementos y presiona Altoid, ¿de acuerdo? Entonces sólo voy a hacer como una bobina primaria o algo así, azul. Y esto va a ser blanco. Solo voy a crear un componente con esto, ¿de acuerdo? Y este va a ser nuestro botón. ¿ De acuerdo? Nuestro botón como predeterminado de pestañas, este va a ser nuestro estado por defecto. Simplemente lo voy a duplicar y lo holandés porque queremos crear baryones con este componente. ¿ De acuerdo? Y yo sólo voy a ir aquí y eso es HSL y sólo que me eliminen por esto y este va a ser nuestro estado hover. ¿ De acuerdo? Por lo que creamos así componente sí persona ahí dentro. Y ahora voy a adjuntarlo de nuevo y voy a crear una finca de camarilla, vale, Así que para B, así que sólo voy a hacerlo un poco más oscuro. Casi negro. Es igual de bueno. Entonces sólo voy a renombrar estos a Glick estate. Y este va a ser nuestro estado hover. ¿ De acuerdo? Entonces yo sólo voy a, como aquí, como pueden ver, todavía no es un componente. Entonces, y ahora es un componente. Y recuerda que invariantes. Qué tienes que hacer antes de crear cuerpo sobre semilla, seleccionando los elementos que quieras. Y aquí a la derecha, tú sí, seno combina variantes. Y lo que va a hacer es crear un componente con diferentes estados, vale, entonces en este caso, el inmueble uno es esta fecha. Y solo voy a poner el antes primero, luego el estado de hover y el click. Y ahora es donde entran en juego los componentes interactivos. Y si presionamos aquí en prototipo, y seleccionamos nuestro primer botón, lo que queremos es cuando pasamos el cursor estos fondos va a estos estado anidados. De acuerdo, Entonces en lugar de camarilla, lo que queremos estos salvajes rondando vienen a estas finca, al estado de los dos V hover. ¿ De acuerdo? Y luego una cosa bonita, es por defecto, creo que viene como instantáneo aquí en animación. Y lo que creo que es lo mejor es que te metes en un animate inteligente. Por lo que va a hacer una transición suave entre los dos estados. Y podemos poner aquí en lugar de 300 milisegundos, sí, llevarlo a 200. Está bien. Entonces hagámoslo igual con esto. Cuando la mitad, cuando, cuando nos geek en el, en el estado, lo que queremos hace esto mientras estás dando click viniendo a estos estado, ¿de acuerdo? Entonces mientras presiona, mientras hace clic presionando llega a estos estado, está bien. Entonces comprueba que como Martin, hizo estos activados y 200 milisegundos, tienes que sólo nosotros como quieras. Pero creo que es un bonito oscuro. Entonces probemos nuestro botón. Entonces para esto, lo que vamos a hacer es sólo mamar la vieja llave para traer como gas. O podríamos venir aquí a los bienes. Y en nuestro tutorial, solo certa sobre nuestro componente, nuestro componente de botón, y arrástrelo. Y veamos si está funcionando. Vengamos al patio de recreo. Y cuando rondamos, vemos que lo está haciendo. Y cuando hacemos clic, es negro. Entonces está funcionando. Nuestro primer componente interactivo. De acuerdo, Así que vamos a entrar en el siguiente. 3. 03 el botón de la radio: Entonces vamos por el borrador de anidación los componentes mientras tenemos este sonido interrumpido, horrible por ahí. Entonces el siguiente va a ser el botón de radio. Va a ser, va a tomar el mismo enfoque que es. Entonces para estos vamos a crear como un círculo 24. Y sí, y lo que queremos es crear siempre el componente más complejo posible. Y luego, y luego quitar algunas partes. Por lo que nos deja al banna acariciar, digamos algo así. Y el campo en este caso va a ser blanco. Y cosa importante. Como más adelante vamos a tener como todo un bonito efecto hover fresco. Yo sólo voy a duplicar esta elipse. Simplemente voy a empezar a renombrar. Por lo que este es el círculo seleccionado. Este va a ser nuestro fondo, nuestro círculo de fondo. Y estos, que está en el, en el fondo. Este va a ser nuestro estado hover. De acuerdo, así que voy a arrancar como fondo hover. Ya lo verás. Entonces ahora lo que queremos, Es también. Sí, selecciona estos colores, pon afuera y pon como tres. Entonces este va a ser nuestro estado hover. Vamos a conseguir algo más y no tan duro. Por lo que este sería nuestro seleccionado con una finca hover. A lo mejor pongo como aquí como cuatro en nuestro fondo Hubbard aquí, como cuatro para que podamos ver más. Y este sería nuestro gran componente con todos los elementos, con la selección de hardware, todo. Entonces lo que vamos a hacer aquí ahora es crear un componente y renombrarlo a botón de radio está seleccionado. Pasa el cursor. ¿ De acuerdo? Entonces tenemos nuestro primer componente y lo que queremos hacer es duplicarlo como podemos ver alguna instancia. Por lo que queremos conseguir Esa es esta instancia. Y ahora vamos a empezar a hacer cambios aquí. Entonces esto va a ser blanco. Vamos a crear el estado de hover, pero cuando no esté seleccionado. Entonces tenemos esto y nosotros también vamos a crear. Ahora un componente en el cráneo, en este caso no se selecciona. O por defecto. Puedes renombrarlo o nombrarlo como quieras. ¿ De acuerdo? Entonces sólo voy a duplicar nuevo estos y ahora vamos a crear el estado donde no se selecciona el estado por defecto y no es Hubbard nada. Entonces para D es lo que voy a hacer es estos trazos, sólo voy a ponerlo en blanco. De acuerdo, Entonces este sería nuestro botón de radio predeterminado. Por lo que no seleccionado. Por defecto o simplemente así. Y otro estado que no tengo es sólo un botón seleccionado, no con el estado de hover. Entonces sólo voy a duplicar estos deducidos. Entonces lo tenemos como un componente independiente a partir de ahora. Y de nuevo, estos antecedentes portuarios que tenemos, y eso lo va a llevar a blanco. Por lo que tenemos el defecto deseleccionado y el estado de hover. Y ahora voy a crear de nuevo, esto tiene un componente. Este es el seleccionado, no el puerto. Este es el estado predeterminado, lo que simplemente le cambiaremos el nombre. Y tenemos todas estas fechas aquí para el Holober. Yo quiero hacer algunos cambios en estos dos porque nosotros, el hover, me gusta marcar un poco más. Estos, ya sabes, ya sabes, esta frontera de aquí. Por lo que tenemos nuestros cuatro componentes creados. Por lo que de nuevo los vamos a combinar como variantes. Y sólo voy a reordenar un poco estos porque normalmente tienes su botón de radio así. Después se llega al estado de horror. Al hacer clic, llegas al estado pico y al estado de hover. Y luego cuando se aleja o se aleja el ratón, se llega a este estado. Y si hago clic aquí, o es probable que haya aquí, viene aquí. ¿ De acuerdo? Entonces empecemos de nuevo con nuestro prototipo aquí. Lo que queremos es cuando saltamos Aquí, se trata de éste. Por lo que en lugar de hacer clic, tendemos a hacer un rato rondando animate inteligente a unos 100 milisegundos. Cuando hacemos click aquí. Esto es bueno. Cuando hacemos click, queremos cambiarlo al estado, ¿de acuerdo? Y lo mismo aquí. Cuando puerto fuera, cuando ya no estamos sin puntero aquí lo que queremos, queremos llegar a este estado, vale, así que aquí es propia hoja de boca. Está bien, viene aquí. Y lo que queremos estos cuando los rondamos, se trata de este estado. Entonces, lo que hacemos es simplemente arrastrarlo aquí. Y mientras la putita llega a estas esperanzas seleccionadas. Entonces de nuevo, vengamos a nuestro patio de recreo y vengamos aquí a activos y traigamos nuestro nuevo botón de radio de filosofía. Y veamos si esto funciona. Cuando me muevo, hace que el hover. Cuando hago clic, es perfecto. Y me perdí uno. Me perdí un estado es cuando hago clic aquí, it, tiene que volver a la forma predeterminada S no seleccionada. Entonces venimos aquí otra vez. Entonces venimos aquí y cuando llevemos aquí, lo que queremos es venir a este estado, bien, entonces esto es a lo que vamos a hacer, en click va a cambiar aquí. Entonces volvemos aquí nuestro tutorial y ahora damos click y como puedes ver, lo tenemos ahí, ¿de acuerdo? Y falta algo porque ahora no estoy rondando. Y como se puede ver, el estado de hover está ahí. Entonces hay otro paso que tenemos que hacer es que tenemos, estamos rondando. Pero cuando lo que queremos aquí es cuando, cuando la hoja de Mao, cuando ya no estamos en esto, vuelve a venir a éste. De acuerdo, así que vamos a ver si funciona ahora. Está bien, esto está funcionando. Y cuando hacemos la hoja del ratón, como se puede ver, tiene un estado por defecto. Por lo que tenemos nuestro componente de interrupción ahora funcionando a la perfección. Entonces vamos a otro componente. Vamos con el componente de entrada. Éste es bastante complejo. Entonces vamos por ello. 4. 04 entrada: De acuerdo, Así que empecemos a diseñar nuestro insumo también. De nuevo, permítanme cambiar aquí a un lado en lugar de prototipo. Nuevamente, como hicimos con los botones, Pongamos una altura en 40. Pongamos nuestro radio de frontera en para lecitina un derrame cerebral. Aquí, puedes crear la entrada que quieras y su estilo que tú quieres aquí, vamos a con un blanco. Por lo general. Como digo, que me gusta crear los componentes más complejos, los más complejos al principio y luego empezar a quitar partes. Entonces empecemos. Esto va a tener como un tenedor de lugar. Y esto suele ser un poco, sí, no tan oscuro. Y además, otra cosa que queremos es tener aquí como, como el nombre del tenedor del lugar, como el nombre del o este insumo saber, por ejemplo, es etiqueta de importación, ¿vale? O llamémoslo solo etiqueta. En algunos insumos, como en material, lo que hace es el tenedor del lugar o la etiqueta suele estar dentro y luego viene, se convierte en la etiqueta. Entonces es el bebé de posición al principio y cadenas como el parto. Entonces esto es algo que vamos a hacer. Y for.org vamos a crear. Aquí hay un auto-layout. Y para eso solo presionas Shift a y ves que ahora estamos, tenemos aquí ahora auto-layout o puedes venir aquí y entrar y presionar click derecho y Alpha y auto-layout. Y lo que aquí queremos es ponerle como un fondo blanco. Entonces nosotros sí, pecho plus. Y podemos ver que esto es demasiado grande y no necesitamos tanto espacio aquí y allá. Entonces aquí lo vamos a poner en dos. Y esto va a ser en dos también. Entonces en este caso tenemos la etiqueta aquí es que no polariza en el soporte del lugar. Entonces y así como lo hicimos con estos botones de radio, cuando pasamos el cursor de éstos, queremos algún borde, hacer su enfoque en los componentes. Entonces solo lo voy a duplicar y estoy entrando aquí en, en cómo se hace esto. Por lo que a esto se le va a llamar etiqueta. Tenemos aquí el Marcador de posición R, entonces tengo nuestros antecedentes. Y este va a ser el fondo flotando. ¿ De acuerdo? Entonces este es el último. Este no es el fondo va a tener de nuevo estos cuatro en el exterior como lo hicimos aquí. Yo sólo voy a copiar el estilo. Entonces para eso respira Comando C. Y aquí lo vamos a pegar. ¿ Nuestro fondo se tamizó. Entonces sí, le pagan se basa en el estilo y sólo hacer eso. De acuerdo, así que casi tenemos todos los elementos. Entonces, sí, vamos a crear un componente ya con esto. Y estos van a ser nuestro flotante de entrada. Sí, hover el campo de entrada. De acuerdo, entonces otra vez, duplicemos esto y lo desconectemos. Y lo que queremos ahora, es bajar estos etiquetados, que va a ser nuestro positor. Recuerda que nuestro positor va a desaparecer. Entonces le vamos a dar la opacidad de 0. Y esta etiqueta va a tener el mismo tamaño que un tenedor de lugar. Entonces aquí tenemos 16, 24. Por lo que ahora vamos a aumentar estos a 16. ¿ De acuerdo? Y lo que queremos que sean estos, tenerlo en el mismo lugar aquí que estos posicionadores. Entonces para eso, y eso va a deshacernos de esto para que podamos alinearlo bien. Por lo que eliminamos estos auto-layout. Entonces ahora está en el mismo lugar, ¿de acuerdo? Y vemos aquí decir fecha y facilidad estos SAP. Por lo que los tenemos en el mismo lugar. Está bien. Por lo que estos serían el estado flotante, pero no el campo ni lo que sea. Sí, este sería el predeterminado, el estado de desplazamiento por defecto, está bien. Y solo voy a crear un componente con esto y luego duplicar esto de nuevo. El conjunto de datos, recuerda, me gusta Hacer estos y duplicar estos componentes. Porque a veces cuando duplicas estos componentes de detalles, cambiaron los nombres. Y necesitamos tener aquí los nombres exactos dentro del componente para poder hacer también la transición. De acuerdo, entonces el siguiente paso aquí va a ser nuestro estado por defecto. Son muy básicos la entrada, ¿de acuerdo? Entonces en este caso el trazo va a ser el pass-through. La opacidad de este trazo va a ser 0. ¿ De acuerdo? Entonces este es nuestro estado por defecto. Y este sería nuestro campo, ese estado en realidad. Entonces cuando, cuando la entrada ya es campo y queremos otro paso aquí, razón por la cual teclear. Por lo que vamos a replicar cuando hacemos clic en un importante estos mecanografiado. Siempre y cuando empieces a parpadear. Y queremos replicar eso también, ¿de acuerdo? Y al principio tenemos estos placeholder en, como ayudarnos. Entonces solo voy a copiar esto y pegarlo aquí. Entonces esto es bueno. Y del mismo color y, y este va a ser nuestro patrimonio de mecanografía. ¿ De acuerdo? Ya veremos ahora tal vez esto sea un poco loco. Ahora mismo la trama va a estar bien, Entonces, sí. Está bien. Entonces, así que estamos más o menos ya los tenemos todos. Entonces enlistar, nuevamente, seleccionar todos los componentes combinados como variantes. Este inmueble va a ser el estado. Este es el valor predeterminado. Y tenemos el exceso de estado. Tenemos estos whew este. No lo tengo como, lo siento. Olvidé comer, Eso es esto. Entonces lo voy a crear como componente y puedes arrastrarlo aquí. Y ahora tenemos otro descanso. Ya hemos visto. Vamos a ver que tenemos cuatro estados. Ellos son Falla, que es éste. Tenemos el estado flotante aquí o el default. Entonces estos podrían ser el campo cuando, cuando, cuando la entrada es campo, aquí vamos a tener este hover. Y este va a ser el foco uno cuando estemos escribiendo. De acuerdo, Entonces conectemos este prototipo para ver cómo funciona. Y más adelante, vamos a sumar algunas interacciones más a sus componentes para, así que en este caso, lo que queremos es mientras rondamos, queremos volver aquí. Onclick. ¿Por qué? Cuando, cuando hacemos click aquí, queremos volver a entrar en chicle a este estado. Entonces honestamente, vamos a ir aquí. Y sí, On Click out cuando se cierne esto, mientras se cierne sobre la hoja de Mao, queremos llegar a este estado, ¿de acuerdo? Y en este estado, lo que queremos esto, no queremos esta frontera. Entonces vamos a llevar la opacidad a 0. Entonces este es el campo que estado, ¿de acuerdo? Y esto va a ser que han sido patrimoniales. Y para el Día de la Diabetes hay algo interesante con estos efecto parpadeante. Entonces para estos, vamos a crear otros componentes interactivos. Va a consistir en una sola línea. Digamos que es algo alrededor de eso. A ver. Sí, algo alrededor de eso funcionará. Y para estos, solo queremos crear 22 componentes, uno con el negro y otro con el Norba, un ancho 0 basicidad. Entonces va a ser como hacer estos cambios. Vamos a verlo. Entonces llamémoslo pestañear, siendo negro. Y la otra va a ser, voy a ajustar esto y cambiar la opacidad a 0. Y vamos a crear un componente con él, que es la luz parpadeante. Y estos dos componentes, los vamos a combinar como el componente de parpadeo. Y tenemos aquí, esto se va a negro y esta va a ser la luz, y esta va a ser esta fecha. Y lo que queremos estos una animación continua entre estos dos elementos. Por lo que no es mientras hace clic no es un rato flotando hacia fuera. Nosotros sólo queremos que el final a plato por sí mismos. Entonces para eso, lo que hacemos es llegar al prototipo. Y tenemos estos, el otro componente, componentes invisibles. Entonces lo que vamos a hacer, es sólo para conectarlo. Y en lugar de hacer click, vamos a ir a después del retraso. Entonces, ¿qué queremos estos cuando estos componentes, está ahí, en el lienzo, Va a empezar por sí mismo a trabajar después de algún retraso. En este caso, lo que queremos que esto empiece de inmediato. Entonces eso se relaciona va a ser de un milisegundo es la cantidad mínima que podemos usar aquí. No podemos poner 0, Así que es un milisegundo y en las estrellas, la interacción diurna. De acuerdo, Entonces lo que estamos diciendo aquí es cuando este componente está en la pantalla va a comenzar en un milisegundo. Por lo que al instante va a empezar y luego cambiar a este otro estado con un animate inteligente. Y aquí voy a aumentar estos 232300 milisegundos. Y qué queremos esto después 300 milisegundos de este estado, queremos volver al primero. Por lo que creamos estas ilusión de parpadear como negro, opacidad, capacidad negra, negro. Ya sabes, vamos a ver cómo funciona eso ahora. Entonces en lugar de volver a hacer clic, vamos tras retraso y ponemos aquí como un milisegundo. Está bien. Entonces veamos cómo funciona esto. Justin, nuestro patio de juegos. De acuerdo, así que veamos cómo funciona esto. Entonces venimos aquí a nuestro patio de recreo, presionamos Play, y podemos ver es no hacer nada. No sé qué está pasando aquí. Sí. Ahora está funcionando. En ocasiones se necesitan algunas veces para que estos dos funcionen ya que, como pueden ver, sólo tenemos un marco y todo está funcionando aquí. Tenemos nuestro tipo parpadeante en estado. Entonces está funcionando. Entonces volvamos a nuestra interrupción este componente aquí. Entonces sólo voy a deshacerme de esto. Ya no lo necesitamos. Creo que vemos está funcionando. Y lo que hacemos, es que estoy en gas yendo de nuevo a arrastrar estos componente de vinculación o podríamos venir aquí a activos, sacar parpadeo aquí, y sólo voy a agregarlo a nuestra intuit, este componente, bien? Esto es cuando hacemos clic aquí y empezamos a escribir. Digamos que aquí tenemos este componente parpadeante. ¿ De acuerdo? Entonces veamos en nuestras capas, sí, tenemos nuestro parpadeo aquí. ¿ De acuerdo? Entonces veamos cómo nuestro insumo, está funcionando hasta ahora. Entonces, Volvamos y presionemos play. Entonces ahora tenemos sí, hay algo que no estoy haciendo bien aquí. Olvidé conectarlo. Esta no es la finca. Yo quiero la finca que quiero por defecto es el estado por defecto. Entonces sí. Y tengo algo aquí que realmente no está funcionando correctamente. Entonces sí, tenemos el estado por defecto. Veamos nuestro prototipo. Mientras se cierne las cadenas aquí, mientras se hace clic cambia a mecanografiar, ¿de acuerdo? Y al escribir aquí en la hoja del ratón va a cambiar aquí. De acuerdo, así que sí, está funcionando, está funcionando bien. Entonces exactamente cuando pasamos por aquí, vemos que tenemos estos estados. Cuando hacemos clic, es una estrella como estamos escribiendo. E imagina que hemos escrito algo dentro de la entrada y cuando salimos por su campo, ¿de acuerdo? Por lo que se hace la entrada. Y aquí, lo más interesante para mí, es cómo implementar estas propiedades parpadeantes dentro de estos entrada, vale, Así que puedes crear una interacción más compleja. Entonces vamos con un S1. En este caso va a ser d un spinner. Es una bastante bonita. Entonces vamos por ello. 5. 05 spinner: Oye, Así que pongamos un alto que sin un spinner para estos, solo voy a crear un rectángulo. Para poder ver también a nuestro spinner. Voy a crear el círculo contigo de 32 por 32 con este bonito tamaño para ello. Y sólo voy a sumar un derrame cerebral aquí. Bueno, aún no. Entonces aquí esto va a ser un trazo blanco. Para que veas que tenemos estos arco estando aquí. Entonces lo que podemos venir aquí. Y aquí, vamos a hacerlo como un 65 por ciento. Entonces vemos que tenemos esto y ya no necesitamos un derrame cerebral. ¿ De acuerdo? Para que veas que puedes moverlo y más adelante es lo que vamos a hacer. Y si puedes dejarlo así o si quieres crear como un radio de frontera aquí, solo puedes presionar entonces. O puedes hacerlo, ya sabes, puedes hacerlo como quieras, entonces es bueno para mí. Entonces este va a ser nuestro Primer Estado de estos spinner. Entonces este va a ser el spinner como último. O puedes llamarlo bien o arriba o lo que sea, Digamos escribirlos. De acuerdo, este va a ser nuestro primer estado. Otra vez. Nos tamizamos el pecho o Alt para duplicarlo y luego desprenderlo. Hacemos esto para que el nombre se quede igual, ¿de acuerdo? Elipse 1. Y aquí vemos el nombre de este elemento, el mismo, porque si duplicas al principio, va a cambiar el nombre a elipse 2 y 3 y 8, 4, y más adelante no va a escoger animación D. Entonces es importante que cuando vas a animar algo inteligente, necesites los mismos nombres, ¿de acuerdo? Y el mismo tipo de elementos aquí. Entonces, entonces, sí, lo que vamos a hacer es en el siguiente estado va a girar hacia abajo. Entonces para eso, lo que vamos a hacer, Es para rotar éste y éste. Nosotros lo queremos como menos 90 grados. Y este va a ser nuestro fondo, derecho, fondo. ¿ De acuerdo? Nuevamente, lo duplicamos con eso, eso es todo. Seleccionamos nuevamente el elemento y lo relacionamos más con un 180. Y esto va a ser nuestro arrepentimiento aquí. Y este va a ser nuestro fondo izquierdo. Y necesitamos el último estado. Ahí está, de nuevo, duplicar el holandés y seleccionar el elemento y luego película también, 90 grados. Y nuevamente, seleccionamos esto y creamos un componente a partir de él. Y esto va a ser LefTop. Y ya tenemos todo lo que necesitamos. Entonces déjame ajustar esto para que podamos animarlos mejor. Déjame alinear un poco esto. Y esos, Vamos a traer a estos dos aquí abajo. ¿ De acuerdo? Entonces vamos a crear un cuerpo y con todos estos componentes que los va a combinar como variante, esta va a ser la posición. ¿ De acuerdo? Entonces empecemos con éste. Nosotros queremos empezar aquí, ven aquí, ven aquí, ven aquí, ven aquí. Está bien. O simplemente podrías empezar aquí si quisieras. Pero esto es, empecemos con la a. Así que venimos aquí al prototipo. Y lo que queremos, recuerden lo que hicimos con el estado parpadeante. Queremos ser autónomos por lo que se anima por sí mismo. Entonces de nuevo, después de un retraso de un milisegundos, queremos en cambio S by smart animate este. Pero en lugar de ISI dentro y fuera, lo que queremos es un movimiento lineal. Entonces es lineal. No tenemos como allanamientos en toda la finca, así que lo tenemos, queremos el lineal aquí. Empecemos con 300. Ahora mismo en adelante, si vemos es hacia algo más bajo, podemos cambiar ese valor. Por lo que el siguiente paso sería cambiar a estos inmuebles. Y de nuevo, vamos a tras retraso, un milisegundo, lineal, 300 milisegundos en el Smart Animate. Y de este estado a éste, nuevamente, tras retraso, un milisegundos denier o 300. Y de nuevo, lo hicimos, esto va a ser un bucle. Entonces otra vez, tenemos aquí, queremos aquí tras retraso un milisegundos y 300 con uno lineal. De acuerdo, así que probemos nuestro spinner aquí. Por lo que venimos aquí a nuestro patio de recreo y mucho menos de nuestro spinner aquí. De acuerdo, entonces, bueno, voy a hacer algo, sólo voy a deshacerme de esto. Bueno, voy a cambiar estos demasiado azules. O incluso voy a ser un poco más creativo. Digamos. Y probemos algo diferente aquí. Escojamos este azul para que podamos deshacernos de esto. Y lo que queremos esto cuando estos movimientos va a ser un cambio de color. Entonces sí, dos, para ver una mejor animación aquí. Animación más fresca, mientras que los colores no son los mejores. Pero sí, salvará a nuestros barberos. De acuerdo, entonces aquí, quiero empezar con el DOP correcto. De acuerdo, así que empecemos con esto. Entonces veamos cómo funciona esto. De nuevo, lleva un tiempo. Por lo que la animación para iniciar. Y ahora vemos que tenemos nuestro spinner y está cambiando su color a la perfección. Es bastante bueno. Entonces volvamos. Y como puedes ver, es bastante bajo. Entonces si quieres que vaya más rápido, Es bastante sencillo. Pongamos este pedacito aquí. Entonces volvemos aquí al prototipo. Y lo que queremos hacer es cambiar esto por, digamos 150. Y de nuevo, vamos a seleccionar este, 150, 150, 150. Entonces volvemos aquí. Podemos ver que ahora esto es mucho más rápido. Es mejor. De acuerdo, entonces hemos creado nuestro spinner. Entonces vamos con un S1, que va a ser nuestra barra de carga, que es bastante similar a este ese componente que hemos creado ahora. Entonces te veré en la siguiente lección. 6. 06 bar de carga: Entonces vamos a crear una barra de carga. Entonces para eso solo voy a crear un bar sobre un gran asociado tienen razón. Y lo que queremos es tener como un fondo constante aquí. Entonces, ¿qué queremos que creen estos? Ya sabes, un bar con, con nuestro azul. Seleccionemos aquí nuestro azul. Y tenemos que crear diferentes fincas. De lo que queremos esto, esta barra hasta el principio de aparecer, luego mudarse aquí. Y luego el año despreciado por aquí, algo así. ¿ De acuerdo? Entonces, sí, entonces esto es lo que vamos a hacer. Entonces necesitamos diferentes estados para esto y estos bares, vale, esto va a ser, Vamos a venir aquí en capas. El gris va a ser nuestro trasfondo. Y necesitamos de éstos que va a ser nuestra barra de carga. ¿ De acuerdo? Entonces voy a crear, esto va a ser como el estado intermedio. Digamos. Voy a duplicar estos en este caso, como pueden ver, es mantener los nombres, así que no es la adición de uno o dos o tres, así que estamos bien para ir. Y la nuestra primera cita, lo que queremos es solo un vacío un sí vacío. Y barra vacía y vacía. Está bien. Entonces para estos, lo que voy a hacer, Es traer esto aquí y hacer este 0%, ¿de acuerdo? Y entonces como estado va a ser, lo que queremos es que esta barra se empiece a cargar. Entonces este va a ser nuestro primer estado. Este va a ser nuestro segundo estado. Entonces este bar va a venir a este estado. De acuerdo, entonces va a entrar en el medio y ser más grande. Y lo que queremos como estado final o estado intermedio es éste, y esta barra viene aquí, por lo que la barra se va a estirar un poco. Y el estado final, es bastante similar al primero. Pero a la derecha. Por lo que estos puntos de barra invisible, tenemos miedo. Nosotros queremos eso, lo queremos alineado al, a lo llegado. Entonces sólo me voy a alinear aquí a la derecha. Y ahora, como podemos ver, tenemos esta barra, barra invisible ahí. Entonces estamos bien para ir. Vamos a empezar a crear componentes con él. Vamos a crear este primer componente. Entonces vamos a crear este otro. Vamos a crear este. Creemos éste y éste. Entonces para esto, solo voy a ir a combinar esto como baryon ahora mismo y renombrar estos para cargar embark. ¿ De acuerdo? Y este va a ser el primer estado. Esto va, este va a ser el segundo. Este va a ser el tercero. Va a ser el cuarto, y éste va a ser el quinto estado. Está bien. Y esta va a ser esta fecha. Entonces solo voy a reordenar esto. No es importante y en realidad, sino mantener las cosas ordenadas. Y ahora es el momento de animar de esto. Entonces de nuevo, vamos a usar lo que hemos usado en el spinner. Estas interacciones, que es 1 después del retraso, nuevo, un milisegundo, queremos que sea tan inteligente. Y esto va a ser como 20 a 100, lo siento. Y esto va a ser lineal por ahora. Y de nuevo, hacemos las mismas cosas tras retraso un milisegundo que Martin, hizo lineal. Sí, entonces, y veamos, veamos cómo, cómo funciona. Un milisegundo. Recuerda que esto es importante. No sé por qué no es mantener el valor. Por lo que tengo que cambiarlo cada vez que vengo después de retraso. Entonces vamos a ver si todo está bien aquí. Sí, todo Es en un milisegundos. Entonces de nuevo, venimos aquí a nuestro patio de recreo, venimos a activos, y traemos aquí nuestra barra de carga. Algo importante. Para hacer esto como un bucle, necesitamos volver a conectar el último al primero. Vale, Así que otra vez, después de la capa un milisegundo lo, Vamos a ver cómo funciona esto. Nuevamente, tengo que presionar R Para reiniciar el componente. Wow, esto fue bastante guay. ¿ Ves? Por lo que está haciendo que este tipo de escalada en la animación en el medio y está desapareciendo. Es bastante bueno. Por lo que estoy bastante satisfecho con el resultado. Entonces, vamos a ver. Otro componente. En este caso va a ser y es más ligero. Entonces nos vemos en eso tiene menos que. 7. 07 Slider: Sigamos con nuestro viaje de componentes interactivos, y creemos tenis más tarde. Por lo que el deslizador es bastante similar a éste que hemos creado aquí. Entonces otra vez, vamos a crear como un rectángulo de una gran fuente. En este caso, vamos a otro radio fronterizo de 10. Por lo que se pone estos es mover tamaño allí. Entonces vamos a crear como 24. Por lo que es lo suficientemente grande para que trabajemos con esto y con el deslizador. Exactamente lo mismo que hace. La barra de carga tiene, necesitamos dos rectángulos, uno para el fondo y 14 cuando, cuando el deslizador es azul. Cuando hemos hecho esto y ya sabes, tenemos estos, estos como metro. ¿ De acuerdo? Entonces volvamos aquí a nuestras capas y veamos cómo va esto. Entonces lo que queremos aquí son nuestros antecedentes. Para renombrar esto a fondo. Este va a ser nuestro medidor. Puedes llamarlo como sea que sientas te va. Y este va a ser el aria arrastrable. Entonces sólo voy a llamarlo droga. ¿ De acuerdo? Entonces con estos elementos tenemos todo, bueno, y estos, sólo voy a hacerlo un poco más suave y esto va a ser un poco más oscuro, algo alrededor de eso. De acuerdo, entonces tenemos nuestro deslizador aquí. Entonces otra vez, lo que queremos que esto tenga nuestro lleno, es como si estuvieran hechos y luego comiencen a críticas. Para empezar a mover los componentes y revisiones o darles opacidad o con el fin de trabajar. De acuerdo, entonces tenemos nuestro slider completo aquí, así que vamos a crear un componente, ¿de acuerdo? Y en este caso, el deslizador estaría aquí. ¿ Y qué? Y luego vamos a duplicar esto como instancia. Recuerda que lo hicimos, Eso es todo. Y de nuevo, vamos a mover nuestros componentes a la cadera para reemplazar al estado inicial, digamos, vale. Entonces para d es lo que hacemos es sí, gran barra R aquí y empezar a revisarlo aquí. De acuerdo, entonces es el cielo. Y estos serían nuestros bienes iniciales. Creamos un componente de nuevo. Y tenemos dos componentes, y este es el fin, entonces este es un estado orientalista, ¿vale? Y nuevamente, los seleccionamos a ambos, las combinamos variantes masivas, un estado. Y la primera va a ser, así que esta va a ser la finca inicial o vía estrella, entonces esto se ha ido. Nuestro n, ¿de acuerdo? Y de nuevo, vamos a llegar a prototipar lo que quiero esto, estos círculo, cuando empiezo a arrastrar este círculo, se convierte aquí. Se convierte en el estado. ¿ De acuerdo? Entonces para esto, vamos a un inteligente animarlo también. Y en lugar de camarilla va a estar drogado, ¿de acuerdo? Cuando empecemos a conducir éste va a entrar al estado o simular como el estamos conduciendo esto. Y de nuevo, cuando caigamos estos balón o círculo a la izquierda, va a empezar a convertirse en estos estados. ¿ De acuerdo? Entonces en lugar de Glick, su propia droga, vale, así que veamos cómo estos resultados otra vez, llegamos a activos y empezamos nuestra ESL o simplemente voy a renombrarlo ahora. Entonces este es nuestro como más ligero. De acuerdo, entonces venimos aquí, llegamos al letrero y este componente, los vamos a leer en un slider. De acuerdo, entonces veamos cómo funciona esto. Otra vez. Entonces si empezamos con el Dr, vemos que funciona a la perfección. ¿ De acuerdo? Y si empezamos a arrastrar y vemos tenemos algo de ECM aquí, que es super cool. Por lo que ya está hecho. Así que vamos a ir a nuestro siguiente tutorial de ordenación sobre cómo hacer animaciones. Todos los campos, tres zonas o iconos o algo así. Entonces vamos por ello. 8. 08 ilustración de ilustración: Oye, así que vamos con nuestro último componente interactivo. En este caso, sólo voy a insertar un icono para animarlo. En este caso, vamos a utilizar el icono de Sparty que sólo voy a agregar desde un plugin cuantificado. Entonces solo voy a animar un poco DES. Para que podamos ver estos, cómo implementar estas animaciones en nuestro, en nuestros prototipos. ¿ De acuerdo? Entonces para estos, lo que voy a hacer es desagrupar esto y añadir esto a un fotograma más grande para que podamos animar mejor. Y podemos ver ahora que tenemos estos elementos dentro de un marco más grande. De acuerdo, entonces esta va a ser nuestra ilustración. Como último. Este va a ser nuestro, bueno, sólo voy a poner uno por ahora. Y como dije antes, es importante el nombre de las cosas. Por lo que se puede ver que este icono está compuesto por muchos vectores, pero todos, todos tienen el mismo nombre. Entonces esto es bastante tedioso, pero hay que renombrarlos para, para luego ser animados apropiadamente. Entonces en este caso, solo voy a arrancar como ser grande donde puedas, solo usa el nombre que quieras. Yo sólo voy a deshacerme de esto. Este va a ser el pico rojo. Puedes poner el nombre que quieras. ¿ De acuerdo? Por lo que ya he renombrado todo con nombres únicos. De acuerdo, entonces lo que podemos hacer aquí es duplicar, duplicar nuestra ilustración y ver cuáles son los estados que tenemos, queremos que tenga, ¿de acuerdo? Entonces desde el principio, lo que quiero es que todo su elemento sea más pequeño. Entonces van a venir de aquí, ¿de acuerdo? Y van a ser la mitad como una opacidad de 0. Entonces va a venir de aquí a aquí. Y entonces lo que quiero es como una explosión, digamos. Entonces todo va a ser como un poco más grande y como pop off. Algunos de ellos son más pequeños. Entonces ven aquí. Y éste otra vez, como algo así. Y llegar a ser mucho más grande si queremos. Nuevamente, sólo voy a ser aleatoriamente todos estos y bajar un poco más grande y luego empezar a posicionarlos aleatoriamente. De acuerdo, entonces vamos a ver como una súper parte D de confeti volar es bastante aleatorio. Veamos cómo estos cuenta. Entonces tenemos aquí estos estados. Y voy a añadir otro patrimonio final. Espero que las cosas no lo estén, cambiando. Los nombres no lo es. Entonces lo que queremos que esto se caiga, vale, así que queremos como, como caer en este año alto, algo alrededor de eso. Entonces esto va a estar haciendo como un giro. Entonces me siento así. Veamos cómo estos K-maps, porque otros como se puede ver, lo estoy haciendo súper aleatoriamente. Y lo que quiero que esto se llame estos elementos y los haga desaparecer. Por lo que empiezan como tipo de actualización muy empezando. Veamos cómo surge esto. Entonces voy a crear múltiples componentes de esto. Entonces para eso, sólo voy a ordenar. Voy a hacer esto un poco más grande. Entonces no somos restricción aquí. Y Hagamos esto algo bien, lo que sea. Entonces este es nuestro tercer estado. De acuerdo, Así que de todos modos, sólo voy a usar y ordenar un poco. Y podemos seleccionar todos estos marcos y crear múltiples componentes. Y estos componentes, podemos recombinarlos como varianza otra vez. Y esta va a ser nuestra ilustración. Entonces este es el estado inicial. Entonces sólo voy a decir, y este va a ser el estado inicial, el estado dos, el estado tres, y el estado cuatro. De acuerdo, Entonces esto es bueno por ahora. Entonces ahora tenemos que volver al prototipo y empezar a animar esto. Entonces de nuevo, lo que queremos es traer el retraso. Por lo que tras retraso un milisegundo estas estrellas van a empezar a funcionar. Por lo que queremos agregar inteligente, animarlo menos. Plomo. El plomo es no lineal por ahora para ver cómo funciona. Nuevamente, aquí, después de un retraso, llega un milisegundo a éste. Y nuevamente, después de un milisegundo, queremos que llegue al estado. Y lo mismo que queremos hacer con el último. En este caso, queremos crear un bucle para algunas animaciones como esta. Quizás quieras empezar y media y N. Así que en ese caso no quieres un bucle. Aquí importarás estas últimas acciones, vale, pero en este caso queremos ver este bucle, ¿cómo funciona? Entonces veamos cómo va a surgir esta ilustración. A lo mejor es horrible. No lo sé. Veamos cómo funciona. Estoy bastante emocionado de ver cómo, cómo surge esto. Tan bien. Es bastante peculiar. Sí, puedes ver la idea, ¿verdad? No es tan guay. O de todos modos, espero ayudar a ser mejor, pero a veces te llega la idea cuando entras a una transición a una página o algo así y quieres ver algo así. A lo mejor es bueno. Entonces sólo voy a hacer algunos cambios aquí. Para ver, bueno, esto está empezando a verse mucho mejor. Y probemos algo aquí. Veamos si en lugar de lineales, ponemos algunos fáciles, facilitamos transiciones, cómo funciona esto. Entonces veamos. Bueno esto está empezando a verse mucho mejor. Hacemos eso más estados intermedios para hacerlo más natural, algo así. Pero creo que tienes la idea. Entonces, sí, esta fue nuestra última lección de este tutorial. Entonces vamos al final de las anotaciones al video de felicitaciones. 9. 09 Outro: Oye, felicitaciones, llegaste hasta el final. Espero hacer la mitad aprender todo sobre los componentes interactivos. Te animo a tratar de replicar el, la ciencia que hemos visto en el tutorial también que sí crean las tuyas propias con el fin explorar otras posibilidades de los componentes interactivos. Por lo que espero que hayan disfrutado en general y tengan como el video, por favor deje una reseña. Incluso te gusta. Deja una reseña también. Y si tienes algún sitio sí, El él para más tutoriales o te interesa algo que no has encontrado un tutorial por ahí, solo avísame y elijo hacerlo. Y sí, si quieres que te notifiquen cuando salga otro pictórico sí. Espuma en la plataforma y se le actualizará. Por lo que muchas gracias por seguir el discurso y desearle un gran día.