Figma: técnicas de prototipos y animación para UX/UI

1. Introducción: bienvenidos a los puntajes y estas escuchas rápidas. Vamos a aprender a mejorar tus prototipos sobre habilidades de animación en FEMA. Mi nombre es Bruno nosotros el firmante fuera de ese diseñador de frijol aprox para ahí desde hace 20 años . Y creo y aprendiendo haciéndolo en este curso Destructor es como vas a ser que te vas a ir del dedo del pie. Vamos a ver, como, como, un par de clases de teoría y luego nos movemos dedo del pie hacer, como cinco muestras o interacciones diferentes. ¿ Cuántos? Algunos sensibles. Entonces si de verdad sabes algo sobre prototipado y animaciones se escogió de mi lado. Los sqs guardan los dos primeros videos y luego van directamente a los ejemplos. Entonces tal vez aprendas eso un poco más. Algo más Concéntrate por ti mismo si estás comprando, no sabes usar Pick. La MMA es perfecta. Perfectamente bien. Simplemente puedes seguir adelante y aprender un poco sobre el costado mientras aterrizas la base del prototipo en una animación. Entonces esto es para todos es para tus vies. Para las personas que son estas? No, algo. Entonces sigamos adelante y empecemos por el tipo y animándolo. Fichman. Entonces tú eres yo al discurso. You 2. Prototipos básicos: Oye, gracias por tu dentro de estos curso, y vamos a ir una recta adelante para ver um, cómo la guerra con integraciones básicas en ficc mop. Ah, estigma es bastante recto para, como sabrán, herramienta de creación de prototipos de diseño. Entonces vamos a ver lo básico fuera de la creación de prototipos. Entonces cuando haces click aquí en, um, en un en un marco o en arbor, si vienes de un boceto o adobe 60 que ves aquí por defecto, tendrías, como, conocido en alguna dejar de pasar aquí como la interacción, el comportamiento de desbordamiento conocido. Y esta parte con este tipo de importante, muestran configuraciones de prototipo prototipo. Muy bien, así podemos ir aquí e indefinido qué tipo de dispositivo estamos usando si quieres que se importara más o paisajista más el móvil. En este caso, vamos a usar Silber, y puedes ajustar el fondo fuera de él. Como puedes ver aquí, realmente la vida, podemos ajustar el fondo, el prototipo y el marco de partida. Como pueden ver aquí tenemos, como yo para ocho más uno, y esta es la misma obra de arte, vale, el mismo marco. Entonces esto es algo que necesitas configurar la primera vez. Y una vez que no lo haces, no tienes que volver de nuevo. Casi nunca. Um, dependiendo tal vez si tienes diferentes prototipos en el mismo, um, en el en el mismo documento, tendrás que venir aquí y ver si necesitas cambiar. Esto, por ejemplo, se ha venido aquí a otro. Entonces puedes ver los marcos que tienes aquí. Entonces es una buena práctica no tener, um, diferentes prototipos en una misma página. Se puede tener, como, varias páginas, y se paga. Se puede tener. Al igual que, como se puede ver, este es una especie de punto de partida. Este tipo de indicador de juego azul y así si venimos aquí a este otro prototipo se puede ver aquí es el cuadro de partida. Lo mismo aquí, y en este caso, no lo tengo. Consíguelo porque no tengo ninguna interacción aquí, Vale, Pero así es una buena práctica. Digo no poner diferentes prototipos porque si duplico estos y tengo este prototipo aquí en otro prototipo aquí imaginando que queremos hacer, como, dos prototipos en la misma página, vas a ser, um, Sweeting, escuchar el prototipo del prototipo en establecer dedo apestoso I blues tres. Por lo que empieza aquí, por lo que es una buena práctica mantenerlo en páginas separadas. Está bien, así que vamos a hacer esto, y vamos a empezar a trabajar con estos, Uh, veamos qué tenemos aquí. Ah, estamos aquí en el primer fotograma, y he aplicado Like like, um, e c interacción aquí. Y veamos qué pasa si pudiera escuchar este tipo de empuje, Ah, animación. Y entonces si pudiera oír hay como una morfina entre nuestra primera caja fuerte en el segundo escape. De acuerdo, entonces vamos a romper ¿qué está pasando aquí? Entonces para prototipo significado, Fichman, lo que haces, es Puedes venderlo el ARB o si quieres, oh, todo el aeropuerto para interactuar. O puedes presionar diferentes elementos de la página que tienen thes interacciones en estos chicos . Escojamos esto con selva, y como pueden ver aquí, tengo, como, encima. Entonces cuando haces clic o te arriba naveggato iPhone ocho más dos. En este caso, se puede ver que el nombre fuera del cenador aquí, animación derecha y auditiva como se puede ver hay mucho off option institute. vamos a ver a todos. Entonces no se preocupe por eso. Y luego puedes cambiar el tipo de animación que puedes ver aquí abajo. ¿ Qué está pasando? Se puede cambiar el tipo del trabajador básico de animación que está pasando. Veamos las diferencias entre esto. Pongamos como un segundo con él, como 1000 milisegundos. Está bien, así que va a ser un más lento ahora mismo. Entonces si rápidamente aquí, como pueden ver, toma como un segundo. Ah, aquí. A lo mejor es No podemos apreciar tanto lo fácil de entrar y salir, um, Animation Type Corp pero normalmente me veo usando esto. La mayoría de las veces. Parecía salir. Um, sugiero, nunca se usó lineal porque lineal es una especie de dedo recto por lo que pero lo veremos en detalle. Entonces veamos las diferencias de los rusos que tenemos aquí. De acuerdo, entonces tenemos top telefónico, podemos ver aquí, pateamos y está pasando. De la misma manera podemos seleccionar de nuevo aquí en droga. Entonces cuando empieces a arrastrar esta cosa, animación va a funcionar. A ver si traje esto. ¿ Qué está pasando? ¿ Por qué no? ¿ Por qué estás trabajando tan bien? Arrástrelo. ¿ Es para cuándo? Cuando elijo thes y quiero arrastrar y arrastre, debería funcionar como se puede ver para que repita la animación. Entonces si recojo estos y arrastre, se puede ver estos empieza a venir. Um, ¿por qué albergar? Es pre terminado. Esto es lo que hace. Vayamos al principio. Entonces cuando yo Khobar aquí, la animación, comienza cuando me acabo de ir de ahí parte de la Sape Obtener estos años felices. Está bien, vamos con el siguiente con esto mientras presionamos. Entonces si presiono en esto, funciona. Cuando suelto mi trasero, vuelve. Entonces esto es bueno para algunas animaciones. A lo mejor este no es el mejor ejemplo de animación para esto, Pero se puede ver bien. Um qué? ¿ Qué? Hace las partes del juego clave, ¿ O simplemente seleccionas la clave? Digamos T, por ejemplo. Y cuando presioné aquí funciona, como puedes ver, bien, bien, y mi centro, Prio Pío. Entonces cuando el ratón entre aquí. Por lo que siempre está entrando porque tengo que hacer clic aquí, entonces Pero se obtiene área. ¿ Verdad? Entonces esto es para mis centros. Lo mismo cuando viven las millas. Entonces cuando salga de estos rectángulo va a funcionar la animación, Um, eso es abajo. Como se puede imaginar. Sí, presiono sólo en el sonido superior. Hace la animación y esa tienda. Lo mismo. Ahí es cuando suelto el toque. Entonces comienza la animación. De acuerdo, entonces tenemos estos pre partido Kober. Nosotros lo vemos todo. Todas las interacciones que tenemos usan solo hay una que aquí está desactivada, como puedes ver es este es un retardo posterior. Ya lo vamos a usar. Entonces, lo que hace después de DeLay no se puede aplicar al elemento tipo de, um, sólo se aplica dedo del pie, um, dos marcos. ¿ Y qué es eso? Vamos a mirarlo. Um, te queremos después de un segundo aquí abajo. Imaginemos que tenemos como, um, pongamos esto aquí. Vamos a duplicar thes. Y entonces digamos que tenemos, como en su cebo plus. Está bien, así que vamos a poner el dedo a poner aquí como un chapoteo. Yo, parece estar firmado molde. Se ha apagado. Estamos al suspirar con Así que imagina que tenemos como nuestra chispa Esta página más super fantasía, algunos que son animaciones de jitomate. Entonces digamos que empezamos aquí ahora y tenemos el cebo X más, ¿ verdad? Y lo que queremos el usuario entra a través de esta página y luego después de un segundo sin ninguna indirección, luego pasa al al al siguiente, um, al siguiente fotograma. De acuerdo, entonces eso es lo que vamos a hacer es ir el prototipo de dedo llegando después de relevo? Por lo que sólo vamos a poner estos 800 millones de milisegundos. Está bien. Entonces vamos a decir que navegar a través del cual significa ir al sobrecuadro. Sea lo que sea que elijas aquí, y vamos a elegir el marco libre, que es éste. Y sí, somos más o menos buenos para lucir. Entonces si venimos aquí así tenemos que reiniciar el y podemos ver ahora que después de un rato se queda , y luego se anima a sí mismo. De acuerdo, así que puedes usar estos dedo del pie pueden enfriar animaciones como yo voy a hacer algo rápido en drash. Entonces lo que puedes hacer aquí, esto es genial. Si quieres simular, digamos, como, como, cargando barra algo. Entonces eso es Ah, sí, eso no es borrar. T un chapoteo para que podamos ver qué está pasando aquí. Lo que podemos hacer aquí, es, Ah, crear como círculo. De acuerdo, Y luego volvamos a la señal. Y pongamos un trazo como necesitan sentir. Digamos que no nos gustará 10. Me siento así. Y entonces Uh eh digamos que vamos a hacer es así, OK, OK, y descansar pre rizado, no de fantasía en absoluto. Realmente no importa demasiado solo para propósitos diseñados. Está bien, entonces vamos a duplicar estos dos elementos, que se les llame igual porque vamos a ver un tipo de animación mutilar. Ahí está, también. Tenemos Vamos a combinar el after DeLay después de un segundo de descuento entrar en esta página. Pongamos un poco más de tiempo. Digamos, sí, es bueno y esto va a ser toe iPhone blast para bien. Y lo que vamos a hacer aquí, es rotar este elemento. Otra vez el letrero. Vamos a rotarlo como 90 grados. A lo mejor no podemos apreciarlo porque las flechas, ya sabes, no las flechas. Las líneas están de la misma manera. Pero hemos girado 90 grados, ¿verdad? Entonces, ¿qué vamos a hacer? Se ha ido de nuevo al prototipo. Por lo que ya hemos configurado nuestro after DeLay uno que estaba en 500 navigato Tesis Pantalla Más Cuatro. Y vamos a decir en esta parte de animación, vamos a poner un animate inteligente y este es un mejor instalador para la animación. Esa cifra proporciona. De acuerdo, entonces veamos qué pasó. Seamos hermano estrella tipo aquí y después de uno. Lo has visto después de un segundo en arranques y ve tenemos aquí otro tras retraso que va a la siguiente pantalla que hemos configurado previamente? Podemos ver qué está pasando aquí. Entonces no estamos tocando nada. El pantalla tras tiempo, está girando. Y luego viene la animación. Por lo que estas sirvienta de miel inteligente, es un pie súper fresco. Er, estás viendo realmente justo aquí que cuando presiono aquí en este tipo de círculo eran círculo Bueno, no, tengo que volver a configurar esto a la pantalla. Entonces cuando presiono aquí y vuelvo a presionar aquí, el círculo, como se puede ver, tiene otro es smart animate. Lo que hace son sus cambios. Su mono como super orgánicamente dedo del pie se convierten en esta forma. Entonces a medida que Martin emita, lo que hace es recoger dos elementos que se nombran igual. Y lo que hace es hacer una transición entre, ah, estas formas a ésta a esta otra forma. Hagamos lo mismo. que ya estamos medio como aquí thes, inteligentes , animamos , activados, , activados,vamos a hacer esta prueba más grande y así podemos ver aquí como vamos a hacer esto y vamos a ponerla aquí. Y vamos a la otra cosa, que es que va a rotar y va a ser más grande. Y va a ser esta cosa masiva aquí para que podamos ver qué, um, este tipo deanimación tipo apagado, animación tipo apagado, esta muerte de sirvienta de miel inteligente. Está bien, podemos ver que todo se hace más grande, y luego la otra animación empieza, y luego hago clic hace como una transición, y luego hago clic. Y luego un smart animate estrellas de nuevo para que puedas hacerte inteligente, animar lo que quieras. Y esta es la corbata de animación más importante para mí E en fig, MMA o derecha? Entonces esto es más o menos que base de lo básico fuera de él. Veamos otro tipo de transición. Veamos que si cambiamos estas animaciones en lugar de smart, animate, tendimos dedo del pie La animación instantánea de tres está llegando a ser amable rápido. Entonces sí, pop. Y luego viene aquí porque previamente tenemos la película en animación. ¿ Qué? Hace esto apagado. Te puedes imaginar que las mezclas 11 están apagadas, un marco con el otro. Está bien, así que veamos qué hace. Esperamos un poco, y luego hizo, como, el tipo de fe de una pantalla a otra. De acuerdo, veamos qué está marcado en los ojos del Medio Oeste. Martin. Miel mucama, ya sabemos lo que hace. Moverse como se puede ver. Ah, aquí. Se puede cambiar. Y se puede ver la tipode animaciones que tenemos frijol viendo aquí. El movimiento un increíble ya. Está bien, pero vamos a ver cómo funciona aquí. Por lo que después de un segundo, Theis plus page entra a la izquierda. ¿ De acuerdo? Y éstos, está entrando desde ahí desde abajo. Por lo que contiene aquí. El tipo off entrando Esto es genial cuando quieres dedo del pie. A lo mejor llevar un menú o algo a la página. Está bien. Y aquí hay otra cosa, estos comportamientos de desbordamiento. Nosotros lo vamos a ver, pero tenemos algunos de ejemplos más adelante. Por lo que estos son los pre horneados es a cualquier hecho que puedas en algo importante. Importante. Me olvido cuando seleccionas el artículo en este prototipo top seleccionado. Ya ves que estos tipos apagados, um, caja limitadora con este círculo aquí aparece para que puedas venir aquí y luego conectarte a cualquier cuerpo nuestro. Uno. Está bien. Entonces, como puedes ver y cuando lo tengas conectado, puedes presionar y seleccionar el tipo de interacción que quieras en la parte superior del Dr lo que sea. A continuación, seleccione la animación. Um, la mayoría de las veces, te verás usando un animate inteligente, algunos otros que solo quieres, como una animación oriental, algunos fuera del extranjero. Me veo más o menos usando el dinero inteligente hecho para casi todo. Pero depende de la aplicación que intentes hacer. De acuerdo, así que vamos al siguiente capítulo. Nos vemos más tarde. 3. Tipos de animación: Oye, así que aquí es como recordamos cómo hacia tenemos prototipos dentro de Fatemeh. Tengo aquí un sujetador marco en blanco, y es una buena práctica empezar dedo del pie. Ponga su configuración su configuración de prototipo, así que vamos sólo a ir de pie para configuración de prototipos. Y aquí puedes ver que tienes múltiples dispositivos para elegir. Parece que tengo thes en la misma parte. Se puede ver el ancho y la altura de nuestro nuestro tablero o marco en configuraciones de prototipo. Sé que es un iPhone ocho plus, así que tengo que usarlo, y luego se puede a algún otro. Para que puedas cambiar todo eso esto. Simplemente puedes ponerlo en negro lo desearás. Entonces para el segundo, solo ir a un con un super que obtienes queda el fondo con tu prototipo. Si haces cuatro presentaciones o grabas algunos videos, y esto es lo importante es un marco de partida. Podríamos enviar otros cuadros por ahí, pero para este caso en particular, queremos animación y muestras. De acuerdo, así que eso está bien. Volvamos al letrero y está bien. Entonces me voy de pie, creo un rectángulo, sí, para ver tipos básicos fuera de la animación, y voy a duplicar a este amigo por eso. Ya sabes, Simplemente selecciona su marco. Y luego con la tecla desactivada, solo lo mueves. Nos vamos con el dedo del pie. Hago estos porque para poder ver a Tom, algunas animaciones en particular, son inteligentes, animadas. Lo que necesitamos es tener los mismos elementos en los marcos en el bowl. Entonces este es el marco de partida, y también tenemos esta retórica. Y aquí en el fotograma, renombrando a muestras de animación. Esos dos Lo sentimos, Um, tenemos el mismo ángulo de respiración, así que esa es una buena práctica tener los mismos elementos. Entonces vamos aquí a la interacción y a lo que queremos. Está arriba. Cuando hacemos clic en lo que queremos, es navegar con el dedo del pie. Entonces vamos a esta pantalla. En este caso, es animación animada en muestras a, y si nosotros y lo que queremos cuando pateamos aquí, está volviendo aquí. Simplemente puedes pulsar en el círculo de la izquierda y crear otra animación. De acuerdo, Entonces en este caso en particular, como se puede ver como Martin preso tiene frijol activado por defecto, a veces se pondrá instantáneo o disuelto. Pero los vamos a ver. Está bien. Entonces para esta animación en particular on para ver las transiciones entre una una una pantalla en la otra, sólo voy a ya que los colores sí, seleccione su color no tan pesado aquí. Y aquí vamos a cambiar las radios fronterizas para poder ver la transición entre ambas . Entonces ahora si puedo escuchar y presiono, como pueden ver, está haciendo una transición, y está marcada animación entre la caja fuerte en el color de la caja fuerte. Podemos hacer lo mismo con lo que dijo en pantalla. Entonces si hacemos clic aquí como puedes ver, se mueve. OK, entonces esto es bastante sencillo. Esto es lo que hace. ¿ Es inteligente, animado? Entonces volvamos aquí. Podemos aumentar el tiempo. Pongámoslo como un segundo. Podría ser como 1000 milisegundos. Entonces como puedes ver ahora, la transición cuando tendimos aquí es mucho. Esto es más bajo y esto es bueno. De acuerdo, A Así podemos ver que tenemos aquí. El escenario está fuera está dentro y fuera y lineal esto son Vamos a ver qué hace como se puede ver aquí. Nosotros no está dentro. El animación no es orgánico isjusto como entonces nombre dice's lineal. Um, bueno, está en No lo siento. Entonces vamos a ver qué hay en EU Así que protagoniza un poco a poco y luego se especie de conseguir mucho más rápido Movimiento del fin, aunque lo contrario sería está fuera por lo que se iniciará. Empezará como primero, y luego se ralentiza. Como podemos ver, comienza primero y luego se ralentiza en lo que usualmente uso es fácil de entrar y salir, lo que significa estrella más rápido de lo que se ralentiza, luego va más rápido de nuevo. Para mí es más, Ah, animación orgánica y luego los más aburridos fuera todos ellos es lineal con Es justo, continúo. El movimiento no es aceleración, ninguna aceleración en absoluto es sólo eso. OK, entonces estos son los básicos, um, um, tipos fuera de curso fuera de la animación. Y luego tenemos Vamos a probar otro tipo de animación para, por ejemplo, el instante lo que hace es sí, ya sabes, va de un lugar a otro. No hay nociones transitorias de fronteras que encadenan nada así de apagado. Es sólo ah, fe entre esta pantalla en la otra, así que no tenemos ninguna animación entre ambos fuera de ellos si vamos dedo del pie moviéndose, Uh, veamos qué hace. Lo que hace es que la pantalla entra desde la izquierda. Podemos cambiarlo en hazlo para entrar desde la de la forma en que entraba desde la derecha, y luego está entrando desde la izquierda para que lo podamos ver ahora. Está viniendo de la izquierda y te imaginas qué? ¿ Qué? Esto. Eso es así que viene de arriba y luego de la frontera. Muy bien, entonces y esto es algo interesante esto puedes inteligente, animar mucho en capas y así puedes revisar diferentes tipos. Por supuesto. En este caso, voy a usar lo visto on out. Entonces veamos qué hace. Entonces es hacer que el tipo fuera igual. Una cosa inteligente, animada que tenemos antes. De acuerdo, entonces para esa animación en particular, podría simplemente ir con un animate inteligente Ok, después de que tengamos estos mudarse, déjame solo ir con y quitar esto para que podamos ver qué hace. Entonces como puedes ver este tipo de transición, esto es bueno. Si quieres dedo del pie simular algún tipo off de efecto de paralaje, estos se mueven y se mueven con el trabajo. Tenemos a Bush. De qué hace. ¿ Es tipo apagado el Este marco sube y este marco sube, así que es una especie de carrusel en lugar de un marco, Um, yendo al frente, fuera del otro. Entonces eso es lo que empujó eso y está forrando. Es una especie de efecto similar. Más sutil. Digamos que sí. Como puedes ver hay se puede especie fuera de un gran Bagram cuando hacemos la animación aquí. Sí, así que es amable empujando el otro fotograma, el primer fotograma y luego están siendo algún tipo de fondo. Por lo que esto podría ser una ligera entrada y deslizarse hacia fuera. Es una especie de lo mismo. OK, así se puede ver que viene de abajo, pero comprometido y conseguir estos fondo gris. Entonces esto se trae mucho de ella, y vamos a ver finalmente, ejemplos de Theo. De acuerdo, todo este tipo fuera. Muy así aplica a algunos ejemplos geniales que puedes replicar para tu portafolio y toe master Estas animaciones y prototipado características en Fichman. De acuerdo, Entonces nos vemos en el primer ejemplo 4. Alterna con animación inteligente: Entonces vamos a empezar a replicar nuestro para la luz aquí. ¿ De acuerdo? Entonces para eso, solo voy a crear ah ah ah, frame. Vayamos al foso de señal. Y es para iPhone ocho plus. De acuerdo, así que déjame preguntarle Cierra esta parte y luego nos vamos de los pies a crear como, tango. Y sólo vamos a poner, como un Grady dentro, como con él ahí. OK, así que a algo alrededor de eso en vez de lamentar, digamos lineal en su caso, van a ser 100 y luego vamos a poner como, voy a cambiar estos colores y luego vamos a poner como un naranja son que él está bien. Esto es genial. Entonces solo voy a copiar este texto para no tener que volver a crearlo. Sólo texto. Y luego voy a crear una charla sobre lo largo, que es algo bastante sencillo para ir. Sí, crea algo que sea. Ponemos un libro para las radios como 100 pero este Dwight, ya tengo algunos llamantes creados, y entonces vamos a poner como un círculo aquí y digamos que sí, eso está bien. Y la sensación del círculo va a ser nuestro principal médico, o esto es bueno. De acuerdo, hagámoslo un poco más grande. Entonces tenemos, como, encendido y apagado siguiente. Aquí. Está bien. Y voy a replicar este texto y ponerme como, y lo pone con nuestro color primario aquí, también. Está bien, esto es bueno. Tenemos Ah, veamos si hay lugar fuera de esto. Y decíamos antes que eso que necesitamos tener para un trabajo inteligente, animado del dedo del pie. Necesitamos los mismos elementos y vamos a hacer esto un poco más pequeño, algo al revés. Y necesitamos los mismos elementos a la izquierda que a la derecha. Correcto. Entonces necesitamos el texto de las buenas noches aquí, así que sólo voy a sobrellevarlo, y voy a ponerlo así y está bien, está bien. Y necesitamos aquí como un texto fuera también. Porque como hemos visto aquí, tenemos como suficiente texto que se mueve de izquierda a derecha. Se puede ver que se van van dos. Entonces vamos a posponer aquí como fuera. Y como podemos ver, el color es algo alrededor de ese poco más oscuro. Está bien, así que vamos a hacer esto. Está bien. Entonces para esta pantalla, lo que necesitamos son buenas noches y fuera para ser justo Nos rasgamos, ¿de acuerdo? Tenemos que comer. No, no presente. Al igual, está ahí pero no está ahí. De acuerdo, entonces vamos a duplicar esta pantalla. Tenemos todos los elementos. Nosotros camino. Necesitamos dos para hacer esta animación. Digamos que es el filtro menial. En este caso, vamos a ir por el azul, Digamos azul oscuro y este amarillo, digamos otro azul aquí y por este de la doctora. Bueno, este no es el mismo bote tutorial de todos modos. Entonces lo que necesitamos aquí, Es ah, son textos buenos días bajando y se pone el dedo cero. OK, así como pueden ver, tengo mi tex anterior aquí, allá. Ah, prueba de buenas noches. Sólo voy a seleccionarlo. Y lo que queremos fuera de este escritorio es venir aquí al 100 y luego voy a simplemente, uh, aliarlos a las tapas para el año en la misma página y lo mismo aquí. Voy a alinear estos al fondo. Por lo que ambos nos prueban nuestra línea y los buenos días van a desaparecer. De acuerdo, El en texto queremos desaparecer y pasar a la derecha. Seleccioné el texto fuera, así que sólo voy a sacarlo. De acuerdo, así que solo lo voy a mover como 30 pixeles, unas fotos ahí y lo que vamos a hacer su mover la botella propia aquí, el texto propio porque queremos querer May para hacer la animación que va a la otra lado, y ese es nuestro círculo va a venir aquí y va a ser dulces fuera. Entonces cambiamos ya que el color es bastante sencillo. Y entonces venimos aquí y esta siguiente lo vamos a poner aquí y el botón encendido, Digamos allá y es solo pero la capacidad es de 20 Vale, así que tenemos nuestro marco de partida y queremos que todo el dedo del pie se mueva y se transforme en estos, haciendo algunas animaciones. De acuerdo, entonces tenemos nuestros escenarios de gira o un punto de partida, nuestro punto final, y veamos cómo funciona esto. Entonces vamos a seleccionar usando vamos a prototipo, y en este caso, vamos a seleccionar el iPhone uno plews uno Así que es nuestro asiento de camino de marco inicial aquí. Elección. Pero hacemos click y todo se está moviendo. Entonces lo que queremos es cuando hacemos click en este círculo, hagámoslo como aquí. Está en la cima. Queremos navegar dedo del pie iPhone, más dos con su escuela. A la animación ponemos un animate inteligente en orden, todo para moverse. Empecemos con esto apagado. Veamos qué hace. ¿ De acuerdo? Y vamos a aplicar aquí cuando hacemos clic en el botón aquí, otra transición disolver. De acuerdo, en lugar fuera. Entonces veamos cómo parece esto. Como puedes ver, está haciendo como un desvanecido súper largo. Es que va se está llevando para siempre esto. ¿ Qué está pasando? Oh , son dos segundos, Digamos, uh a 200 500. Y esto otros 500. Veamos qué está pasando aquí. Está bien, está haciendo una transición, pero como puedes ver, la batalla no se mueve. El fondo total. No hay lingotes. Todo está bondadoso. No está mal, pero no parece natural, ¿ verdad? Entonces aquí viene un dinero inteligente hecho para ayudarnos, y así solo activemos un inteligente, animado Digamos que 500 selecciono esto adentro afuera y hagamos lo mismo con esto en lugar de la sal. Vayamos a Smart. Animate está en su salida en 500. Es genial. Entonces vamos a verlo. Cómo estas palabras ahora, como se puede ver, todo está funcionando. Vamos a poner vamos a hacer la transición un poco más grande. Entonces va a ser como en cámara lenta va a ser años de TV va a ser aburrido. Podemos ver el efecto pasando aquí, ¿verdad? Por lo que ahora hacemos click. Y como puedes ver, tenemos el efecto escolar de que comiences un poco rápido en, ralentiza todo lo que sabes, se ralentiza, luego ve más rápido que se ralentiza de nuevo. Y podemos ver todas las transiciones aquí. El encendido y el apagado van de un lugar a otro, y podemos ver que este círculo se está mezclando desde Blue Ray y todo está funcionando. De acuerdo, así que eso es todo. Un inteligente. Así funciona un animal inteligente. Muy bien, así que vamos al siguiente ejemplo 5. Contáctos: arrastras: Hey, bienvenido de nuevo en estos tutorial de ordenamiento vamos a ver en deslizar interacciones y cómo animar estas cosas. Por lo que tengo estos prototipos listos aquí. Y como puedes ver, lo que queremos esto, como una lista de contactos de viaje. Y queremos, uh, uh, Khobar. Y entonces tenemos, como, dos opciones aquí. Haga clic de nuevo Puntera de rayas, Deshacer. Entonces tenemos thes indirection o podemos hacer click y hacerlo Así que esto, um, más o menos lo. Pero tenemos algunas características geniales aquí, por lo que podemos hacer y replicar para nuestra ciencia. Y ves este tipo de animaciones fuera en nuestro dulce Todo parece bastante orgánico. Entonces veamos cómo hacer esto en un mes. Entonces tratemos de replicar estos, um, que sepamos cómo hacerlo. Está bien. Entonces por el momento, sí, sí, yendo dedo del pie duplicar esto directamente. Entonces esto va a ser así me fui OK e imagina que sólo tenemos esta lista. Como puedes ver, es un rebelde. Al menos creé con un componente, pero al menos está hecho de otro título de estrella y todo, pero bien, vamos a hacer acostumbrados a calentar desde cero. Entonces para estos, lo que hacemos es simplemente crear como un superior. Estar por ahí. OK, entonces sí, ella era una enfriadora, tal vez para encender. Entonces crea el círculo. Se pone aquí como un sobre nuestro con nuestro sobre nuestro tapón. Entonces es bueno. Pongamos el texto y está bastante delgado. Bolt, tal vez seis 19 escuelas en el campo va a ser como una cosa gris oscuro como esta. Y entonces podemos poner aquí, como la fecha o el número telefónico si lo preferimos. Entonces hazlo. De acuerdo, para que este pudiera ser su número. Y vamos a mantenerlo como un color más claro. Eso es esta noche. De todos modos, esto es sí, diseño para diseño, proceso deficiente. Y lo que queremos aquí es crear como, um, y vamos a poner aquí como un fondo como un fondo blanco. De verdad me gusta hacer esto como una mejor práctica y todos mis diseños, porque aquí puedo controlar la altura fuera del aire significaba que podría hacerlo con otro. Pondré características de maquetación y todo alrededor de cuatro días para darle simple. A menos, sí, hazlo así y vamos a crear un componente y esto va a ser Plus, creo que está bien. Entonces solo voy a duplicar esto y luego presionar D común o controlar el si eres MPC Ok. Entonces, sí, estamos bien. Ahora voy a seleccionar todas mis fotos, ir aquí a enchufar y ir a nuestro agua. Va a cambiar. Voy a insertar algunos nombres aquí. Ejecutar los nombres también. Bueno, sí. Al igual que luego tener otro cono tapón llamado Contra real. Y aquí Sí, muy bien. Todo está bien. Yo quiero el nombre completo. De acuerdo, entonces vamos a aplicar. Tenemos nuestros nombres. Tenemos son fotos. Tenemos todo configurado aquí. De acuerdo, entonces nada que queramos hacer es crear el botón de borrar. Entonces para eso, lo que necesitamos se ha apoderado de toda esta fila aquí. Ah, creo que nuestro componente anterior es de 9 90 de altura, Así que lo vamos a crear. 90 ocultar componente no eran componente la fila para el verdadero comer. Ahí tengo un color. Entonces en este caso, en este caso, sólo voy a hacer que sea como la noche como la 89. Entonces es entre los grandes bares. ¿ De acuerdo? Enviado de separado de la D por ahí hay y sólo voy a copiar el texto. Entonces y el ícono. Entonces lo tenemos aquí, y lo que hacemos es solo hacer un grupo con esto en Llamarlo, tratarlo. Entonces sabemos dónde estamos y lo que queremos hacer aquí es poner el dedo del pie esto, um, um, borrar batalla dentro de este marco. Pero como puedes ver, estamos en Swipe One. Y cuando lo muevo aquí, el elemento es ah, dentro de intercambio Swipe one. Cuando lo muevo, se sale fuera de juego. Uno. Entonces lo que queremos es ubicar esto aquí y ponerlo dentro. Entonces así lo compré. De acuerdo, así que tienes que hacerlo manualmente o moverte. Um, las propiedades en la X. puede ver si lo pongo en cero, y lo queremos en 400 14. Depende fuera de curso. En el marco que has configurado, tengo el iPhone ocho plus, Sí, Sí, dedo del pie hacen de todos sus tutoriales el mismo peso. Entonces tenemos esto aquí. Entonces lo que pasa es que ahora tenemos el botón de borrar fuera del marco ladrón de Swipe one, pero está incluido dentro de este marco. No es como fuera. De acuerdo, entonces es amable interactuando de la misma manera fuera de esto. Entonces vamos a duplicar nuestro diseño y lo que vamos a hacer aquí y sólo vamos a llevarlo un poco más lejos. Espere. Sí. Entonces, ¿qué queremos aquí? Es hacer lo mismo sobre todo lo contrario. OK, entonces solo hablamos todo y lo movemos a la izquierda. Como podemos ver, ya que hemos hecho este tipo de este grupo, um, está dentro de esto. Decidirlos. Está dentro de este blanco también, así que no tenemos que preocuparnos por eso. Entonces vamos a prototipar esta parte y déjame tomar cambiar su configuración de prototipo para que el dedo del pie sea Tribe ganó el cuadro titular en Swipe one. Ponemos estos en un set de inicio de Swipe one podemos ver aquí. No tenemos ninguna interacción. No podemos desplazarnos lo que sea. Pero nos interesa esta parte. Entonces vamos a iniciar un prototipo. Entonces tenemos que pensar primero lo que queremos hacer, y queremos hacerlo cuando hacemos click aquí. Cuando empecemos a conducir aquí, queremos dedo del pie venga a estos rayados a pantalla. Entonces solo, uh presionamos este círculo azul. Ven aquí y luego en Swipe. Perdón por la droga. Queremos tener un tipo para golpear dos, que es esta pantalla y así queremos que Mia haga esto un poco más pequeño. Las cosas es para hacer. De acuerdo, entonces, um, queremos que el dedo del pie venga hasta aquí, y está marcado animado. Entonces tenemos la transición, de acuerdo. Y lo mismo cuando nos deslizamos aquí, queremos dedo del pie Regresar a la finca inicial. Entonces en este caso, voy a hacer con derecho por aquí. Ah, al arrastrar Navega a E en este caso de raya uno, nuestra pantalla. Entonces veamos cómo funciona. Cómo esto está funcionando hasta ahora y tenemos en camino. Espera, Warren se desliza. Se puede ver que todo esto está funcionando realmente. Y si lo sabes, tiene, como, como, este tipo de efecto cool. Por lo que hemos hecho nuestra primera parte. Y que ahora lo que queremos si es que si nos deslizamos, podemos hacer la acción del. Pero si hacemos click, queremos, um, tratarlo nuestro contacto y entonces éste saldrá. Ok, entonces vamos a duplicar esto otra vez recuerden que todos los elementos tienen que ser los mismos ahí en las pantallas. De acuerdo, En este caso, quiero que este texto que tengo en estas dos pantallas venga a la derecha y estas más felices . Entonces para estos, sólo voy a poner cero en el campo de opacidad. Y aquí lo que vamos a hacer,es, es, um hacerlo más grande y tal vez poner como para algo como tipode Bolden masivo en grande. Entonces tenemos estos los llamo Mats Boulder y lo que vamos a hacer, es pantalla duplicada de nuevo. Y lo que queremos aquí es deshacernos de esto y luego mover estos contactos aquí arriba. Entonces vamos a aplicar las transiciones aquí y el prototipado. Entonces, ¿qué? Queremos estos Cuando hacemos clic aquí, va aquí, Así que sólo hazlo. En este caso, en la parte superior, Navigato se deslizó cinco. Es marcha. Animar. Cayó 800 milisegundos y lo que queremos cuando thes entra al entrar aquí después de un tiempo, automáticamente, va a estas pantalla. Entonces para eso, lo que hacemos es seleccionar al amigo y luego después de retraso lo que vamos a poner como un pequeño retraso aquí. Vamos a usar el mismo retraso sus 800 milisegundos. Lo que queremos es navegar las rayas de los dedos del pie. Seis de nuevo es la pantalla más antigua aquí. Entonces veamos cómo se ve esto. Wow, esto está funcionando bien y camino para el click. Wow, eso es genial. Por lo que hemos hecho estas viejas listas de transición reiniciadas para ver qué wa lo que hemos creado . Como puedes ver, tiene algún tipo de movimientos bonitos aquí, y dará clic. Oh, eso es genial. Entonces ese es nuestro prototipo que drogamos deslizamos. Ah, animaciones e interacciones. Gracias. 6. Travelopia efectos de curvada y animarse inteligente: Hey, bienvenido de nuevo. Y vamos a ver, como, como, en su dirección bizantina aquí. Como puedes ver, vamos a crear um, estos diseño donde esperamos una de estas tres partes aquí, podemos ver que se mantiene y te lleva año que años arriba thes llamado a la acción fondo Entonces, . como puedes ver, es un efecto fresco que puedes integrar en tus diseños. De acuerdo, entonces veamos, ¿Cómo podemos hacer esto? Está bien. Como pueden ver, tengo cuatro pantallas aquí es un infierno. Tenemos que crear esto. Y tenemos que replicar Ah, nuestra finca en donde tenemos, como, como, tres cuadras. Y tenemos que crear estos donde lo que hace es sí, aumenta su con entonces estos textos. Esto más grande hace más grande que este texto arriba años aquí. Al igual que hacer como aparece a partir de aquí. Como pueden ver, lo tengo aquí como si tuviéramos opacidad serial como transparente. Entonces qué hace cuando cambia a estos mientras puerto en esta zona. Ah, estos la cara de estancia estos texto se vuelve más grande thes prueba vienen y establece su capacidad 100. Entonces está ocupado. Bueno, y luego una botella arriba años de aquí desde la izquierda. Como pueden ver, este botón, lo tengo seleccionado ahora, cuál es éste? Descubre Camboya, como puedes ver, es el mismo nosotros aquí. Descubre Camboya. Entonces tenemos, um todos los elementos, um, de esta pantalla en esta crema. Vale, Entonces para su martini hecho a trabajar, tiene que Tenemos dedo del pie tenemos los mismos elementos en uno en la pantalla del otro. De acuerdo, entonces es Vamos. Replica estas dos pantallas. No vamos a ir a replicar estos porque con hacer un ejemplo va a ser lo suficientemente bueno . De acuerdo, así que cuarenta y va sólo a duplicar esta parte. Y voy sólo a sí, creado a partir de cero. De acuerdo, así que para estos medio como un layout creado aquí, sólo yendo al rectángulo creador, tengo que ver si este rectángulo se va a cumplir como, sí, así que algo alrededor de eso va a ser genial. Entonces tenemos, um, ya sabes son bloques libres. Hagámoslo para que podamos ver ahí. Diferencia. De acuerdo, entonces tenemos nuestros bloques separados de 480 píxeles. Por cierto, yo por eso paro la ciencia. Normalmente uso 1140 luego 9000. Es mi típico un set up. De acuerdo, entonces , sí, sigamos con ello. Entonces sólo voy a deshacerme de eso es bueno. Estamos en el 480. Sólo bala por aquí. Entonces para decente va a usar en un chapoteo, Blufgan. Entonces voy a 30 o algo así. Naturaleza aleatoria para Vamos a ver. Bueno, eso es genial. Y nos vamos a sentir aquí, y luego lo vamos a poner como cultivo, así que sí, podemos hacer algunos cultivos ahí dentro. Vamos a crear otro rectángulo del mismo tamaño que éste. ¿ De acuerdo? Y vamos a poner, como se puede ver aquí. Tengo algo, uh, lineal en tu radiante arriba con algo de opacidad. Entonces, portones, porque si pongo el texto aquí, eso es copiar y pegar. Esta prueba, si pagué, es básica Aquí en esta foto, se puede ver llegar, pero a veces, um a.Así que podemos ver a veces no es demasiado confiable. Entonces para eso, vamos a crear el S Theis, un Grady lineal aquí dentro. Entonces vamos por lineal. Tía abuela y y luego estos cambian la capacidad a 102 y luego vamos a subir yester algunos agradables. Bueno, no sé si es demasiado lindo, pero sí, lo lograremos. Por lo que hemos utilizado la A paucidad de Theis al 70% o 60%. Puedes jugar todo lo que quieras. A lo mejor sólo puedes probar como bien algunos multiplicar o pantalla o algo así como esta escuela. Bueno, lo que sea. Yo sólo lo voy a dejar, como, normal por cuatro días. De acuerdo, Entonces como estábamos viendo aquí, cuando aquí Khobar, un texto y luego aparece son como un dedo del pie inferior. Entonces solo voy a copiar estos dos elementos aquí en este diseño. ¿ De acuerdo? Y estos abajo aquí y la línea de fondo lo van a colocar aquí porque quiero cuando lleguemos a la pantalla estar a la izquierda o a la derecha. Entonces si solo selecciono este elemento y lo puedes ver que lo tenemos aquí cosas que te hizo 100 enviaron este texto a 100 a. Entonces como pueden ver, tenemos todos los elementos desde aquí. Ya lo tenemos aquí, pero necesitamos Ah, tener estos elementos. Al igual que, uh, no lo hizo con la opacidad. Simplemente mueve esto alrededor de los 20 y estamos listos para irnos. Entonces lo que voy a hacer a continuación, Es Ah, sí, voy a algo. Voy a poner este texto aquí abajo. De acuerdo, Así que más adelante, cuando hagamos nuestras animaciones y cambios aquí va a ser un naufragio. Entonces lo que voy a hacer es sí, agrupar esto, y voy a llamarlo, um solo voy a llamar al punto uno para que no lleguemos a demasiado estrés sobre los nombres y todo. Entonces tenemos, creo que creo, también. Idea Tres. De acuerdo, entonces eso es bueno ir y lo que vamos a hacer. Es, um ya sabes, uh, estos dos elementos los ponen con cero opacidad, porque vamos más adelante. Bueno, no podemos dejarlo así a partir de ahora y entonces lo que voy a hacer es sólo decir esto a foto así que manera están viendo algo diferente. No, Las palmeras podrían ser agradables estar en la playa ahora. Está bien. Esta escuela, y luego sólo voy a cambiar esta foto por y en este Plus,dijo Blufgan, dijo Blufgan, realmente querría la respuesta del dedo del pie para nosotros. Eso es sólo otra necesidad nater. Es realmente genial en algo que quiero hacer. Es una imagen. Apenas lo dijo para cosechar así que más tarde, no hace que fueran cosas. De acuerdo, Entonces cuando cuando estas fotos se hagan más grandes, podemos controlarla y podemos ingerirla. Entonces es una buena práctica, dependiendo de lo que quieras poner esto a cosechar y somos encontrables. De acuerdo, entonces tenemos nuestro pre home bastante configurado, y lo que vamos a hacer es solo duplicar esto porque, recuerden, necesitamos los mismos elementos aquí y allá, aunque aquí hiciéramos cambios. Entonces lo que vamos a hacer es crear este efecto Camboya, uh, uh, Khobar. Entonces para estos, lo que vamos a hacer, es algo así, y sólo vamos a recoger estos dos elementos y vamos a traer aquí nuestro Gamba y lo que vamos a hacer su estiramiento así. De acuerdo, sé que parece un poco rápido pero va a funcionar. Entonces para esto, necesitamos un texto más pequeño en, ya sabes, dejarlos correr y este texto. Nosotros sólo vamos a poner la capacidad a cero. Porque estamos bien, entonces, Uh, algo que no debería haber hecho. Es también. Parece del tamaño de thes, pero realmente no importa honestamente, porque lo importante, es esta parte izquierda. Esto va No vamos a ver este elemento. Entonces ponemos esto para verte de nuevo para deshacerte de él no va a dar parte relata, ¿sabes? Y como puedes ver aquí estamos teniendo algún tipo de efectos off en el 40 Así que lo que recomiendo es venir otra vez imagen del dedo del pie, Um, ponlo a una hazaña, ¿de acuerdo? O sentir Sí, sentir es mejor que crecer. Y luego fuimos a usar la forma en que queremos que esto se comporte. Lo mismo se aplica a Camboya. Bueno, aquí a nuestra foto. Entonces ponemos esto a caber. Siente Sí, recortarlo y luego nosotros dos, podemos a otro. Eso fue la escuela. Este tipo de para elevar su Así que, uh , sí, estamos listos para irnos. Tenemos que hacerlo. Estos dos elementos ya configurados. Está bien. Y por estos fuera lo vamos a hacer Es en este caso. No voy a ser tan duro que Asai estuvo aquí, así que fui una especie de estiramiento en todo. Yo sólo me voy a ir con la foto en el lineal. Ah, radiante. Y hagamos lo mismo con la foto. Al igual que con el antes expresar como sentir y luego recortar. De acuerdo, para que podamos seleccionar. Ah, la posición de las fotos que nos gustan. Por lo que la foto hará como una transición supercool. Probablemente como escalar en sí mismo va a ser genial. Yo creo que sí. Vamos a mover estos a la derecha. Y estos textos, estos dos textos, los queremos. Yo estoy en el centro, así que ustedes los seleccionan y queremos nuestro dedo de prueba. Ven aquí. Sí, eso es bueno. Y ya tenemos esta parte configurada, y estas están configuradas y esto es genial. Sólo necesitamos dedo del pie. Um, esconde esto. Entonces vamos a poner en Ciro. La capacidad es una misma cosa, va a ser jarabe. Nos vemos de nuevo. Como puedes ver, Súper bastante básico configurado. Y ahora estamos listos para hacer prototipos. De acuerdo, entonces vamos a seleccionar nuestro hogar, luego vamos al prototipo. Veamos configuración de prototipos. Marco inicial es Noruega. No queremos que sólo queremos Oh, sí, casa. Yo me voy a ir a casa y él está, como, menos o bien, Así que tenemos alguna estación diferente aquí. Entonces ahora si auto nuestra configuración de prototipo, puedes ver aquí nuestros dispositivos tamaño personalizado porque estamos usando así Se detuvieron así Solo molesto eso. Y como se puede ver aquí en el panel de diseño, utilizo 1140 por 900. Entonces venimos aquí a prototipo, mejorar la configuración de tiempo y adivinamos, poner en tamaño personalizado este tamaño, si estás trabajando con otros tamaños es bastante bueno también. Puedes poner aquí decide que quieres Sí. Asegúrate de que sea del mismo tamaño fuera de tu, um, fuera de tu marco. Está bien. Ah, Bueno, en este caso, quiero decir, si quieres tener un pergamino o es ah, Long Page o algo así, solo puedes dejar en prototipo los ajustes del. Y si tienes más contenido aquí, se desplazará. De acuerdo, entonces por ahora, nos vamos a ir y lo que queramos. Aquí está Tenemos nuestro prototipo conjunto, y lo que necesitamos es toe poner algo de interacción y animaciones en esto Así que para estos, lo que hacemos es sí, seleccionar. Este grupo está hipnotizando Uno es el que queremos hacer cuando hacemos cambio de imagen con Select the second screen plus. Entonces lo que vamos a hacer es en lugar de apagarse en click. Lo que queremos es mientras se cierne, queremos que estos naveguen a fotograma de clase en su lugar, apagado instantáneo con Vamos a hacer un vamos a hacer, Veamos cómo funciona. Como puedes ver, esto es bastante áspero. Es como si no lo supiera, como hace 20 años. Sólo conocerlo. Entonces vamos a en lugar de la del dedo del pie va, un inteligente, animar bien. Y quiero usar la facilidad hacia fuera. Entonces tenemos algún tipo de lentitud que acelerar, luego desacelerando, desacelerando otra vez para que podamos ver aquí un poco. Y vamos a poner aquí, como, 500 milisegundos. Entonces es como ir medio segundo y ver cómo va. De acuerdo, bueno, esto funciona bastante bien. Como se puede ver todo, se está moviendo bien. Todo está funcionando, así que esto es más o menos así. Si quieres un A, así puedes ver aquí. ¿ Qué hay que hacer para la detención ahí fuera de sus marcos es sólo hacer lo mismo con él aquí. Entonces para eso, solo podrías duplicar estos y luego estos. Ah, la ISS. Esta parte, uh, uh, más pequeñísima. Y, ya sabes, como escalar estos hacia arriba y luego mover estos y es pre debe mucho lo mismo. De acuerdo, Entonces lo mismo que hicimos aquí, deberíamos hacerlo aquí y luego al tercer cuadro, y estamos listos para irnos. Entonces eso es todo. Tenemos prototipo de supergrupo lejos mientras se cierne. 7. Tarjas: desplazamiento horizontal y vertical: Hey, bienvenido dedo atrás estos tutorial corto sobre cómo usar el desplazamiento horizontal y vertical de la manera correcta. Al oír Fichman, aquí tengo un ejemplo de cómo hacer gatear tesis de pierna y estas verticales Carney de la manera correcta. De acuerdo, porque tengo, como, un ejemplo aquí, parece lo similar. Pero es esta segunda pantalla de la izquierda y se puede ver si no lo hacemos Bueno. Tenemos vertical en unos tiempos recientes llamando, Sí, pero está tranquilo. Quickie. Entonces, aprendamos a hacerlo de la manera adecuada. ¿ Verdad? Entonces tenemos estos tiempos recientes llamando aquí y estos verticales llamando aquí con obras perfección o bien, así que vamos a crear en iPhone ocho más pantalla aquí, y vamos a nombrarlo como clase uno. Entonces estamos en la misma página aquí. Yo sólo voy a duplicar esto. Heather no es algo grande. No es un ciervo grande. Es justo como se puede ver dentro de este grupo en ir justo en grupo esto, realidad y poner este rectángulo aquí. Sí. ¿ Canta usted? Ir a, uh, este es el ícono, en realidad. Y tengo el título. Tenemos la puedo escuchar la flecha. Tenemos el texto y tenemos la pericia y los antecedentes. Nosotros lo necesitamos. Entonces cuando pedimos rol Como puedes ver, el texto no se queda atrás en los datos. OK, entonces tenemos, como, como, un fondo blanco sólo va a apuntar amarillo. Entonces vemos lo que está pasando. Y por lo demás, sólo voy a copiar este auto que tengo aquí. Bueno , voy a replicarlo. Es bastante sencillo, en realidad. Entonces es drovers enredo, algo así. Montar las calificaciones, Digamos por su fondo poniendo como el rojo. Y sólo voy a copiar y pegar este texto aquí. De acuerdo, Así que este es el nombre. Este es un gran número. ¿ De acuerdo? Yo sólo voy a poner esto en blanco y nuestro texto. ¿ Todo bien? Nada de fantasía. Basta con bajar a 12. Ejecutar la fecha. De acuerdo, Fácil. Entonces lo que vamos a hacer con esto es sí. Ah, haz un grupo. Está bien. Entonces, sí, tú primero. Vamos, vamos, Andy. Y tú tienes el grupo, y lo que vamos a hacer es solo duplicar esto y ya que el fondo color amarillo y vamos a hacer otra copia, y vamos a ponerlo en vista primaria. De acuerdo, entonces estamos bien y cuatro días nos vamos. Podríamos hacer, como, un grupo o algo así, pero para esto cuando tengo, como, para este tipo de agrupar lo que me gusta hacer, en realidad está arriba, um, salir temprano. De acuerdo, entonces presionamos tamizar un clic derecho en el alejamiento, así que ahora podemos separar los elementos de la forma en que no vamos a necesitar. E incluso en algunos, si necesitamos crear algo de espacio, algunos teniendo un día Muy, muy comenzando. Y al final, va a ser agradable. Entonces para este objeto en particular, voy a crear estos. O sea, voy a poner, como, 20 aquí están apoyando. Podríamos poner 30 pero veinte. Bien. Entonces se va dedo del pie. Danos estos espacios aquí en este espacio de allá al principio mismo al final. Fuera esto apagado. Este objeto. Está bien. Entonces a pesar de que está poniendo aquí como amigo 17 todavía quiero poner esto dentro de un marco. Está bien. Ah, ya veremos. Bueno, no voy a ponerlo ahora mismo. Vamos a eso le gustaría. Está bien. Como podemos ver, amigo. 17 cuando Fichman pone el marco en el nombre del grupo aquí es porque está fuera del marco el real. Entonces para eso lo tenemos que hacerlo. Ven aquí y solo arrástralo a la clase uno. Como se puede ver ahora, las fiestas de los, él aún así ¿qué? Podemos ir con los pies a verlo. Es seleccionar el marco y el contenido del clip, y luego serás serás codo para verlo. Está bien. Y lo que queremos hacer de nuevo. ¿ No se ha derrumbado esto Así que vemos claramente lo que tenemos aquí. Tenemos nuestro brezo nuestros antecedentes. Entonces voy a poner el fondo dentro del brezo, en realidad. Entonces está bien. Aquí. Está bien, así que ahora el fondo está dentro del brezo en estos voy a llamar. Llámalo como horizontal. Podríamos por el otro nombre un ligero o lo que sea. Quieres un nombre. Y estos iban a hacer como, vamos a usar esta selección de marcos. Está bien. Tienes razón. Haga clic aquí y selección de amigos. ¿ Por qué es eso? Porque ahora podemos cambiar el tamaño fuera del marco. Como se puede ver antes, sólo voy a deshacer No tenemos las asas porque es un try out AL. De acuerdo, entonces necesitamos convertir esto en un marco para enmarcar esta elección. Va a ser nuestra mosca allá. Y lo que queremos es esto tampoco, Toby nosotros con el marco apagado. Esto es más ligero. Queremos llegar a ser desde el inicio desde x cero, remolcar este punto aquí. Está bien. ¿ Y por qué es eso? A ver, Preparemos nuestro prototipo para que funcione. Entonces en este caso va a ser clase uno. De acuerdo, entonces ya tenemos un trato aquí. Entonces ahora ya ves, estoy tratando de retroceder para deslizar, y no está funcionando. Déjame poner esto en blanco. El amarillo es bondadoso demasiado. Entonces ya ves, no funciona que estos funcionen. Lo que tenemos que hacer, es ah, en prototipo. Ya ves, no necesitamos ninguna interacción ahora, solo el comportamiento de desbordamiento. Basta con ponerlo en desplazamiento horizontal Como puedes ver, también tenemos desplazamiento vertical y horizontal o vertical. Pero en este caso en particular, sólo queremos que estas tres cajas puntera vengan de en adelante Lee en el eje horizontal. Está bien. En el resto de estos menos este Estas hojas harán como una vertical. Va bien, pero vamos a ver más tarde. Por lo que ya hemos creado esto y tomamos este dedo del pie desplazamiento horizontal y vemos. A ver si funciona. Bueno, ahora está funcionando. Trabajando bastante bien, ¿verdad? Entonces voy a trabajar ahora para copiar todas estas todas estas cosas. Sí. Déjame deshacerme de esto. Tengo como, um, esta lista masiva, así que voy a seleccionar el marco basado en ella. Y lo que voy a hacer, es, ah, seleccionar todos mis elementos y estamos aquí. ¿ Ves? Pone mixto. Simplemente ponlo a la izquierda en la parte superior. Entonces cuando se re tamaño thes, um, este marco, no ah, escala o hace eran cosas aquí, así que todo se queda en su lugar. De acuerdo, entonces, uh, sí, Así que ahora si nos desplazamos por aquí como puedes ver, el desplazamiento vertical está funcionando y se dan prisa. A veces Curlin también está trabajando. De acuerdo, una cosa interesante que no he hecho aquí es que queremos a nuestro brezo arreglado. Entonces, ¿cómo se hace eso por eso? ¿ Seleccionas tu brezo y solo haces clic aquí posición fija cuando se está arrastrando? Entonces ahora mismo se va a quedar en su lugar. Y nosotros teníamos un sui sí puso como un fondo blanco debajo del brezo. Se puede ver todo el texto ahora están ejecutando esta película. De acuerdo, ver si adivinamos poner esto transparente cuando nos desplazamos va a ser como ya sabes, Messi puede ser genial para algunos sitios web, pero no para este. Por lo que ya lo tenemos desplazando horizontalmente vertical Ascoli. De acuerdo, así que nos vemos en el siguiente tutorial. 8. Menú del usuario: superposiciones y intercambio) intercambio.: Hey, bienvenido de nuevo a estos últimos tutorial va a ser rápido lo que tenemos aquí. Es tipo hermano y nos vamos de pie. Prueba tres e overlay, como podemos ver aquí, la herramienta de prototipado de superposición y lo que hace es, como dice su nombre, está poniendo algo de superposición sobre el mainframe. OK, así que como puedes ver, tengo estos sentados. Entonces cuando hago clic hacia fuera desaparece cuando vengo aquí, aparece thes overlay. Y cuando hago como un Estado de Khobar, sé que es más tiempo. Pero imagina que estás trabajando en una aplicación de escritorio, así que voy a replicar esto. Como puedes ver, este es un descenso bastante sencillo, por lo que vamos a crear un desplegable hacia abajo. Entonces para eso, nos Drover enreda bien y aplicamos Soundboard las radios, digamos por ocho. Entonces es un poco más por ahí. Voy a aplicar algún efecto en este caso. Voy a poner justo lo sutil que tengo aquí y poner esto en blanco, el color de fondo. Entonces tenemos esto. De acuerdo, entonces tenemos fuera o terminamos tarde, más o menos listos. Es en un par de artículos fuera de aquí. Creo que uno de ellos a en no me dan tres y yo. Yo voy a aplicar. Prueba aquí. Por lo que todos se distribuyen igual. Y lo que quiero es poner algunos antecedentes aquí en ambos elementales. Déjame que sí. Ah, me puse un poco pastoso. Por lo que viene al frente. Normalmente lo hago de esa manera. Y en esta parte, lo que voy a hacer es sólo poner esto en blanco, ¿de acuerdo? Porque solo tenemos que ajustar esto aquí porque más adelante, vamos a cambiar este color. Y en lugar de qué, vamos a poner a este tipo de gran pantalla azul. OK, entonces para hacer estas superposiciones lo que necesitamos hacer, es, ah, ah, enmarcar la selección. ¿ De acuerdo? Porque es como es cómo funcionan. Por lo que sólo vamos a quitar thes de nuestro marco principal. Y como pueden ver, tenemos aquí ahora este marco para ir a toria superposición uno, porque vamos a duplicar esto en la S ok on para aplicar este fondo cuando nosotros Khobar o cuando hacemos click en el ítem dos. De acuerdo, así que tenemos a todos más o menos la parte superior así. Y qué en Vamos al modo prototipo ahora y recordar, tenemos que cambiar. Nuestros son marco de partida. Nosotros queremos ser esta una manera vamos a hacer el tutorial con este. De acuerdo, Y lo que queremos esto cuando hacemos click aquí en el usuario, Um, por defecto pies Myers va a decir en Arigato. Pero como podemos ver aquí, ¿qué está pasando? Si hacemos esto, navega, pero es horrible. Entonces este no es el hecho que estamos buscando. Y lo que queremos es cuando hacemos clic aquí las superposiciones más felices aquí pero manteniendo a estos amigos. Entonces hagámoslo. Abramos la superposición y vamos a ver. ¿ Qué significa eso? Sí, empezamos esto cuando hacemos esto. Aparece aquí en el centro para que podamos controlar dónde superponen años arriba. Entonces para eso lo vendemos aquí, y, como se puede ver dice centro, significa que suministró remolque. Aplica la superposición al centro. La página que podemos hacer como ajustes rápidos y se puede ver a dónde va. Aquí se puede ver que se mueve. Lo que suelo hacer por estas partículas son superposiciones. Siempre es para Zeman. Además, puedo posicionar lo que yo haría en este caso. Esta posición es buena y lo que quiero esto siguió flotando bien o pateando. Digamos arriba, De acuerdo, cuando estemos, um, um, dando click en el ítem a este tipo fuera de fondo años arriba aquí. Entonces digámoslo. Y lo que queremos también es intercambiar esta superposición con esta superposición más antigua. Muy bien, así que vamos a poner en la parte superior de la superposición. En este caso, vamos a usar dedo del pie golpeado con stop Con Donde quiere decir ¿Es cambia este marco con este otro amigo pero mantiene el excesivamente sobre. De acuerdo, entonces vamos a seleccionar de nuevo. Esto y nos vamos de pie. Hazlo con tutorial. Detente, detente con tutorial a este, éste y la animación que queremos ser instantáneos. No queremos algo del alma para algún tipo fuera. Somos cosa que podríamos poner lo inteligente, animar Vamos a ver qué hace. De acuerdo, entonces es que está funcionando bien, pero veamos otras opciones que están aquí en las superposiciones es sexy. Como puedes ver, tenemos posición sobre superposición manualmente, y tenemos que bonitas opciones aquí que la primera está cerca al hacer clic afuera. Eso significa que si hago clic afuera va a desaparecer, cual es bastante bueno, porque generalmente hace el comportamiento que quieres en tus prototipos que si tienes en superposición en muchos, dejarías caer abajo. ¿ Qué quieres espectar o qué respeto es ese cuando haces click fuera de él? Después desaparece y otro comedero CUF que alimenta a mi casa, Es, Ah, Ah, estos al fondo detrás de las superposiciones. Como sabrás, cuando estás haciendo, como superposiciones o pop up algunos menús pop up o algunas tarjetas pop up Cuando haces clic aquí, obtienen este tipo de fondo Ah, un poco más oscuro en orden para hacer pop el elemento arriba. lo que normalmente me gusta el dedo del pie realmente estar en contacto, así que no me gusta. No empujo para avanzar ir algo alrededor que tal vez para un pop up o para una ventana modelo, es bueno. Pero no para este tipo de elementos fuera. En realidad, para este tipo de elementos fuera, normalmente no lo pongo bien, porque tienes el triste Oh, así que es lo suficientemente bueno para estar en concurso. A lo mejor estos satélite no es el mejor porque estamos perdiendo un poco nuestra frontera aquí, pero está bien, eso es todo. Esas cosas son cosas diseñadas. Y esto es para la creación de prototipos y animación. ¿ Verdad? Entonces estamos prácticamente hechos aquí, por lo que pueden ver que tenemos estas transiciones. Por lo que hay que aprender qué se puede hacer con las superposiciones. Entonces gracias por acompañarme y verte en el video final. Gracias. 9. ¡Felicitaciones y gracias!: Enhorabuena. Tú lo lograste. Tú aquí. Yo sólo quiero decir gracias por ir a las anotaciones y fuera de curso. Espero que hayas aprendido algo interesante también Son realmente buenos, como tú dedo intenta hacer algunos ejemplos asnos que hemos estado haciendo en la clase sobre eso. Te pones tu prototipo algún video o enlace a tus pies Ahora prototipo. Entonces si tienes alguna duda, te puedo ayudar a revisarlo o cómo mejorarlo o lo que sea. Simplemente lo pones en el panel de discusión o comentarios, y quiero que nos animes bien, a ver todas las cifras que tengo. Entonces tal vez encuentres algo de esto interesante. Al igual que te interesa un smart outdoor out y Sigma. O tal vez cómo crear el sistema de ciencia desde cero. Hacer sí. Ocupado mi perfil mental. Y tienes más curso o sobre fiqh mente sketch a. Entonces tal vez encontraste algunos de ellos. Interesante. Entonces gracias por tu enemigo y cómo tu día