Prototipos y animaciones de Figma: diseño de prototipos interactivos

1. Introducción: Hola amigos. Mi nombre es Tatiana y hoy me emociona compartir contigo mis conocimientos sobre cómo crear prototipos y figma. prototipado se ha convertido en una habilidad esencial para los diseñadores de UX e UI. Al igual que con los prototipos, puedes mostrar cómo deben funcionar tus ideas en una aplicación real o aplicación móvil. También con el prototipado, puedes comunicarte mejor con tus clientes o por ejemplo, desarrolladores que deban implementar o diseñar en la vida real. Básicamente, este curso ha sido creado para todos los niveles. No importa si apenas estás empezando con Figma o ya trabajaste con el azufre por un tiempo. Empezaremos con conceptos básicos de prototipado sobre cómo crear interacciones básicas entre pantallas. Y luego pasaremos a temas más complicados, como crear interacciones para hacer clic y arrastrar efecto hover. También hablaremos de diferentes tipos de animaciones, incluyendo smart animate. El final. Hablaremos de cómo trabajar con componentes interactivos los cuales son muy esenciales para acelerar tu proceso de prototipado. Espero verte dentro de mi clase y disfrutar de mi primer tutorial. 2. Conceptos básicos de prototipos en Figma: En este video, hablaremos sobre cómo crear una interacción simple entre dos fotogramas. Ya preparé dos diseños diferentes para una sección de héroes y también para nuestros productos. Esta es sólo una simple tienda ficticia que hoy vamos a trabajar libros. Sigma, como ya sabes, en la pestaña de dinero correcta, verás la pestaña Diseño. Aquí es básicamente donde haces todo lo relacionado con tu diseño, alineación, colores, tipografía, etcétera. Entonces tienes pestaña Prototipo. Y esto es en realidad de lo que vamos a hablar. Ellos, y también en los próximos videos, inspeccionan que acaba de comprometerse si quieres conocer, por ejemplo, configuraciones CSS de otros elementos. Entonces cuando estás en tu sección de prototipo y seleccionas tu marco, inmediato puedes ver un punto final o el ícono más. Esto es bastante fácil porque cuando presionas sobre él, inmediatamente ves un error que puedes apuntar a otro fotograma como ese. Cuando sueltas tu flecha, inmediatamente obtienes los detalles de interacción que son bastante ajustables. Por lo que en este caso se puede seleccionar enclave en pista y así sucesivamente. Pero en este video solo nos enfocaremos en la interacción básica de clics y hablaremos más detalles sobre animación y otros tipos de interacción en los próximos videos. Para eliminar, por ejemplo, la interacción selecciona un error y presiona el teclado Eliminar. En mi caso, tendrá más sentido conectar el botón Shop Now al siguiente fotograma. Así que hagámoslo rápidamente. Selecciona el botón Comprar ahora y conecta este botón hasta el siguiente fotograma, así. El zoológico puede ver aquí, puedo navegar de inmediato a nuestro marco de productos. Y si tienes diferentes marcos, por lo que puedes seleccionar fácilmente de la lista aquí también. De acuerdo, también conectemos el menú superior en sección de mi héroe también al siguiente fotograma así. Y por supuesto, si el usuario está en nuestros productos, tal vez él o ella quiera volver. Sólo conectemos este botón. Vuelve a nuestro marco inicial, la sección héroe y lo mismo. Por lo general cuando el usuario presiona en logotipo, verás esta indirección que puedes volver a casa a la página principal, importante mencionar, si realmente haces clic en un área de fondo gris, tú puede ver de inmediato todas las interacciones que ocurren entre ambos de nuestros marcos. Digamos que decidiste cambiar alguna interacción o tal vez cometiste un error. Puede hacer fácilmente estas modificaciones seleccionando una flecha y cambiando realmente la configuración en los detalles de interacción o en una subsección de animación. Si tiene eso, vamos a prever nuestro prototipo y la interacción. Para ello, déjame llegar a la barra de menú superior y presionar sobre el ícono presente. Muy bien, entonces estamos en modo de presentación y probemos rápidamente si realmente funciona nuestra interacción. Cuando pase el cursor sobre mi parte inferior aquí, verás que la flecha del ratón cambia y que en realidad indica que puedo hacer clic en ella. Simple como eso. Estoy navegado al siguiente marco a nuestros productos también. Veo que mi siguiente botón volver realmente funciona también, y así es como navego de regreso. También probemos rápidamente si este manual funciona, nuestros productos. Sí, perfecto, funciona. Y la interacción final va a estar en nuestro logo. Y sí, también nos redirigen a nuestra página de inicio. En el siguiente video, hablaremos más sobre la configuración del modo de presentación y también de los dispositivos que puedes usar para ver tus prototipos. 3. Modo de presentación y dispositivos: Aquí me gustaría compartir contigo algunos trucos en el modo de presentación que puedes usar para obtener la mejor experiencia de visualización de tus prototipos. Cuando abres tu marco, básicamente puedes interactuar con él. Pero por ejemplo, si no estás seguro o si tu usuario no es cierto clic derecho, simplemente puedes hacer clic en cualquier parte del marco y obtendrás las pistas sobre dónde realmente haces clic. Por lo que estas son solo las áreas clicables que puedes usar. Por supuesto, cuando pasas el cursor sobre estos elementos, puedes ver que también se pueden hacer clic. Hablemos de diferentes opciones aquí mismo. Podrías ajustar tu marco a la diferente anchura de la pantalla. Por lo que el tamaño real significa que tu marco lo hará un 100% de cómo debe ser. Entonces si tu marco tiene mucho más píxeles que tu pantalla real, entonces no lo verás completamente. El mejor que me gustaría hacer es fit width o por ejemplo, pantalla completa. Entonces se ve una visión general. No área de tu marco está marcado y puedes navegar fácilmente y probarlo también en las opciones que, por ejemplo, puedes desactivar los hotspots en onClick. Entonces cuando presionas en tu marco, las pistas nulas se están mostrando más. Cuando lo actives. Ahora vuelves a ver las pistas también. Puedes ocultar la barra lateral para que tengas una mejor vista. Tienes más área para ver tu prototipo, que también es bastante útil. Por supuesto, el último es mostrar Figma UI. Si estás deshabilitado eso, entonces ya no ves muchos ajustes. Para reactivarlo de nuevo, puedes ver la pista de Figma presiona Control barra de barra para volver a mostrar lo que mi interfaz de usuario, vamos a hacer eso. Aquí volvemos a ver nuestro menú. Lo que también me gusta del modo de presentación es que puedas colaborar con los miembros de tu equipo o con tus clientes. Por ejemplo, la característica principal es compartir el prototipo. Cuando presionas un prototipo afilado, en realidad puedes agregar los correos electrónicos de las personas que quieres ver tu prototipo o realmente editarlo. Esto es bastante útil si quieres colaborar juntos. Aún más fácil, en realidad se puede tener a cualquiera con el enlace puede ver o por ejemplo, puede editar en Figma como si hubiera planes gratuitos y también de pago. Y en las plantas libres tienes una limitación sobre cuántas personas pueden editar y colaborar. Pero aquí no vamos a cubrir este tema. Lo puedes leer fácilmente en un centro de salud de Figma y también, el último punto que quería mostrar aquí es que puedes poner comentarios sobre tu prototipo en modo de presentación. Por ejemplo, agreguemos algo. Por ejemplo, cuando el miembro de tu equipo lo abra, inmediatamente pueden ver que dejaste un comentario como, Hey, quiero que el color de este botón se cambie fácilmente. Otra persona puede o bien responder a su comentario o por ejemplo, mercado como resuelto también cuando su salida del modo de presentación, tiene frase diferente en el prototipo DEP. Esta configuración solo es visible si anula la selección de los fotogramas. Si seleccionas el marco, entonces tienes ajustes totalmente diferentes aquí mismo. Entonces vamos a deseleccionarlo rápidamente. Y una de las configuraciones más importantes que acabo de mostrar es en realidad dispositivo. Es bastante útil porque puedes previsualizar tu prototipo en el dispositivo real. Y en este caso, me gustará previsualizar mi versión móvil de la pantalla de nuestros productos. El marco que creé es el iPhone 11 Pro. Vamos a comprobarlo. De inmediato se puede ver la vista previa como se verá. Vas a, por ejemplo, modificar el modelo. Puedes elegir un espacio plateado, gris, verde medianoche, pero vamos a mantenerlo dorado, por ejemplo. También puede modificar la colocación manera vertical u horizontal. Y por supuesto se podían ver los flujos. Y aquí mismo podemos copiar un enlace a su flujo, específicamente seleccionar el marco del flujo. Como se puede ver, el primer flujo inmediatamente redirigido al marco de mi sección héroe. Y por supuesto se puede jugar de inmediato. Sí, veamos en realidad cómo se muestra nuestro segundo flujo en un dispositivo real. Entonces aquí mismo vemos en realidad cómo se va a mostrar nuestra versión móvil de la pantalla en un teléfono móvil. Y en realidad es bastante agradable de ver, sobre todo por los márgenes en los márgenes laterales y márgenes superiores para asegurarse de que no se recorte nada y que tu usuario obtenga la mejor experiencia de tu prototipo. 4. Tipos de animación.: ¿ Recuerdas nuestra simple interacción entre dos fotogramas que creamos hace un tiempo? Bueno, si lo recuerdas correctamente, no jugamos específicamente, tendríamos ajustes de los detalles de interacción y animaciones. Y hoy te voy a explicar ocho tipos diferentes de animaciones que realmente puedes usar en tus prototipos. Entonces por defecto, en Figma, tu animación se configura en instantánea y un instante. En realidad tu transición prototipo es bastante amplia. No tiene esta transición suave que normalmente se ve en bonitas aplicaciones y sitios web. Para crear una transición más suave, siempre recomiendo comenzar con lo básico. Por ejemplo, al elegir disolver animación, disolverá la animación. Puedes tener estas diferentes curvas que puedes seleccionar con diferentes tipos de transmisión. Entonces, por defecto, está listo para aliviar. Y aquí puedes establecer diferentes tipos de retardo. Por ejemplo, si son solo 300 milisegundos, la transición será bastante rápida. Lo que me gusta de sigma es que aquí mismo en esta caja negra, se puede ver de inmediato la interacción, cómo se verá. Entonces probémoslo rápidamente en nuestros prototipos. Así que presiono tienda ahora y veo esta transición suave, pero fue bastante rápido aquí mismo. Vamos a aumentarlo a 1 segundo. Aquí están la transición es más pequeña y mucho más lenta. En este caso, realmente no se aplica porque parece un poco extraño en un sitio web tener una transición como esa. Pero va a ser útil, por ejemplo, para las diapositivas. Si tienes alguna presentación que hacer, entonces se verá mucho, mucho mejor en lugar de solo una animación instantánea. El siguiente tipo de animación del que me gustaría hablar es smart animate. Smart animate busca emparejar capas entre dos fotogramas. Reconoce la diferencia y en realidad anima estas capas entre los fotogramas. Rápidamente te mostraré cómo funciona, pero tendremos otro video específicamente dedicado a smart animate porque es un poco complejo y requiere más tiempo para explicar. Entonces también, vamos a seleccionar la facilidad con, por ejemplo, 800 milisegundos y verás qué va a pasar. Presionemos nuestro fondo. Ves que la animación que fue bastante complicada. Entonces Figma encontró estas combinaciones entre capas de textos. Y se puede ver que tuvimos esta complicada interacción que donde los textos primarios era una especie de ir hacia arriba al siguiente fotograma, la siguiente animación se está moviendo. Y se puede ver que en realidad nuestro amigo se está moviendo desde otra dirección. Y lo que me gusta de este tipo de animación es que se puede seleccionar la dirección, ya sea desde arriba, desde abajo o desde el costado. Aquí ves nuestro segundo fotograma se está moviendo desde el lado izquierdo de nuestro primer fotograma. Salir tiene una indirección muy similar, pero simplemente funciona de otra manera. Vamos a revisar rápidamente cómo se ve. Bush tiene una animación e interacción bastante similares. También puede seleccionar diferentes direcciones desde las que se empuja el segundo fotograma al siguiente. Pero también me gusta bastante porque puede ser realmente buena interacción, sobre todo cuando tienes sitio web desplazable. Es bastante impresionante, pero tal vez para mejorarlo, podemos aumentar el retraso. Vamos a aumentarlo a 1600 milisegundos. Aquí es impresionante es un buen montón de sitios web y hoy en día usan este truco cuando quieren que el usuario desperdicie podría desplazarse hacia abajo y obtener sus interesantes interacciones cuando presionan el botón. De verdad, realmente me gusta. Así que no funcionaba exactamente como empujar. Tiene esta sensación como un tobogán y viene de la parte superior a nuestro marco y básicamente lo mueve aquí mismo. También puedes seleccionar diferentes direcciones, pero permítanme mostrar rápidamente cómo se ve exactamente. Así que básicamente, nuestro marco sigue viniendo de la parte superior, pero no empuja hacia fuera el primer fotograma, pero tipo de viene encima de él como una diapositiva. Por último, el último es deslizarse hacia fuera es cuando el primer fotograma se está deslizando hacia fuera y el segundo fotograma aparece exactamente así. Entonces esa fue una interacción bastante simple aquí mismo. En la animación, vas a tener diferentes tipos de interacción. Y por defecto es una facilidad de salida, pero puedes jugar y seleccionar diferentes configuraciones. Pero por ejemplo, si también quieres una animación realmente avanzada, te recomiendo usar custom. Hablaremos de eso más adelante en más detalles. Pero qué costumbre puedes tener una interacción más avanzada. Entonces aquí mismo puedes ver esta curva de fuerza, que puedes cambiar, por ejemplo, así. Y verás animación totalmente diferente en comparación con el preset predeterminado. Exactamente así. puede ver que primero fue bastante rápido y luego se obtiene el retraso. 5. Efecto Hover: hoy hablaremos sobre cómo crear una animación de hover. Esta animación es extremadamente fácil de hacer y para ser honesto, es mi tipo favorito de animación que puedes hacer en sigma. Aquí mismo, ya creé un marco con un tamaño de escritorio, y ya encontré también una imagen con algunos muebles. Así que imaginemos que creamos una animación de hover para una tienda online donde vendes muebles y quieres mostrar alguna animación realmente genial fue alguien básicamente se cierne con la boca. Así que para empezar, vamos a copiar rápidamente esta imagen fuera de nuestro marco. Aquí mismo, vamos a hacer algunas modificaciones para mostrar nuestro estado de hover. Entonces en mi caso, me gustaría añadir relleno extra de un color negro con el porcentaje de opacidad del 30%. También agregaré un título. Muy bien, así que básicamente cambié la fuente y el tamaño de la misma. También seleccionemos ambas capas y coloquemos a los sulfuros minimalistas en medio de la arquitectura. Y además si creas una tienda online es muy importante colocar llamada a la acción. En mi caso, voy a crear un botón que dice Shop Now para que los usuarios puedan abrir de inmediato la selección de azufre tiene, digamos, y comprar los que les gusten. Vamos a mover nuestra capa de texto por encima nuestra capa rectangular para que se muestre. Por supuesto, seleccionemos ambas capas y creemos una alineación en el centro. Agruparé estas dos capas también, y también disminuiré el tamaño de este botón. Seleccionaré mi imagen y también un botón para aliarlos ambos en un centro. Muy bien, Así que cuando haya terminado con la creación de su estado de desplazamiento, seleccione todas estas capas, y básicamente haga clic en el mouse derecho y seleccione Selección de fotogramas. Es realmente importante que no solo agrupe estos elementos, sino que los seleccione como marco. Cuando ambos estados estén listos, vayamos a la pestaña Prototipo y creemos nuestra interacción. Por supuesto, voy a conectar la primera imagen, el estado ocioso, con nuestro estado de hover. En los detalles de interacción seleccionaré mientras sobresale, lo cual es bastante lógico. Parte importante aquí mismo es que no seleccionaremos navegar a la refriega, pero tendremos que seleccionar Abrir superposición. Con la superposición abierta, significa que la capa que está siendo puntiaguda herramienta en realidad reemplazará las primeras capas. Entonces en este caso, obtendremos el efecto de hover perfecto. Y por supuesto, en una sección de superposición, tienes múltiples funciones. Pero lo importante aquí para elegir es manual porque queremos asegurarnos de que nuestra imagen sea ser un ejecutivo, la misma posición que nuestra guardia en el marco. que como pueden ver, puedo mover la posición de mi capa de hover en el diferente tamaño, lo que significa que no estará exactamente en medio de la primera imagen para nuestro experimento, para nuestra prueba. Hagámoslo exactamente en el medio. Veamos de inmediato cómo funciona. Entonces aquí voy a pasar el cursor con mi ratón y mirar y ver un estado de hover diferente , que es perfecto. Pero como se puede ver también, que la animación no es del todo suave. El motivo de eso es en realidad nuestra configuración de animación porque por defecto, como recuerdas de videos anteriores, se establece en instantáneo. Pero en este caso, vamos a elegir disolver y simplemente lo mantendremos como es con un valor predeterminado 30 milisegundos de retardo y facilitemos animación y vamos a comprobar rápidamente cómo funciona. Sí, como se puede ver, es mucho más suave. Ves que la transmisión es mucho mejor y se siente más natural. Entonces eso fue lo boreal sobre la animación hover. Nos vemos en el siguiente video. 6. Animación inteligente, parte 1 (conceptos básicos): Hoy aprenderemos sobre smart animate en Figma. Con Smart Animate, puedes conectarte a fotogramas similares y obtener la animación fluida entre ellos. Pero para ilustrar más precisamente cómo funciona, déjame mostrarte rápidamente un ejemplo sencillo. En sigma. Vamos a crear dos marcos. Seleccionaré como siempre, marco móvil de iPhone 11 Pro Max. inmediato voy a duplicar este marco para la conveniencia. Vamos a crear una forma simple, por ejemplo, una rectangular. Colocaré mi Rectangular en el primer marco en la parte inferior. Y seleccionaré rápidamente un color aleatorio para rellenar. Y voy a copiar pega este rectangular al segundo marco, pero también lo moveré a la parte superior del marco. Y también para ilustrar a usted el inteligente animar la animación. Voy a rotar esta forma en 180 grados. este momento no viste ninguna diferencia visual, pero confía en mí, en nuestra presentación, definitivamente lo verás. Vamos a navegar rápidamente a la pestaña Prototipo y conectemos ambos de nuestros fotogramas. Así que acabaré de seleccionar al tap, voy a crear una animación con animate inteligente y cuál es la configuración predeterminada de facilidad hacia fuera con un retraso de 300 milisegundos. Y hagamos lo mismo. Cuando vuelves a tocar la misma forma, regresas al primer fotograma. Muy bien, validemos rápidamente nuestro prototipo. Por lo que voy a hacer click rápidamente en mi forma. Como se puede ver, en su mayoría gira, pero creo que el retraso fue demasiado rápido. Volvamos rápidamente a nuestro expediente y cambiemos el retraso a un número mayor. Vamos a probarlo de nuevo. Se puede ver que nuestra forma se está rotando de una manera más pequeña. Y me gusta mucho porque puedes crear tantas animaciones complejas con smart animate, pero solo para darte otro ejemplo para comparar. Entonces, ¿qué pasará si simplemente disolvemos nuestra animación? ¿ Habrá diferencia? Se podría pensar que sí, será exactamente lo mismo, pero en realidad será bastante diferente. Entonces escribo aquí, volvamos a hacer click en nuestra forma. Y se ve que la rotación no sucede. Y por supuesto, si no rotó tu forma, que realmente no importa. Acabas de ver la transición suave, pero no viste este impresionante efecto de animación como acabamos de hacer antes. Permítanme también mostrarte cómo funciona el animate inteligente en un ejemplo de la vida real. 7. Animación inteligente, parte 2 (barra de menu): Imagina que ya tienes una sección de héroes para tu sitio web. En mi caso, ya preparé un layout básico y ustedes son bienvenidos sólo para copiarlo o crear su propia sección de héroes. Pero lo que voy a ilustrar aquí es cómo se comportará el menú de hamburguesas con smart animate cuando el usuario haga clic en él. Seleccionemos rápidamente nuestro marco y dupliquemos. Y en el segundo fotograma vamos a crear nuestra interacción sobre cómo el manual se desliza desde el lado derecho. Entonces, antes que nada, tomaré este menú de hamburguesas y lo rotaré 90 grados. Y luego por supuesto voy a crear un cuadro de menú. Rápidamente también coloreemos en un tono más oscuro de amarillo y se olvidarán moverlo bajo el menú de hamburguesas porque lo quieres ver con un trazo. También modificaré los colores para que podamos ver nuestro menú de hamburguesas con bastante precisión. El último paso sería solo escribir algunos elementos del menú. Seleccionaré todas mis capas de texto junto con un cuadro rectangular y también las alinearé al centro. este momento si conectaremos nuestro menú de hamburguesas en el prototipo, no veremos ninguna animación específica, pero solo veremos un flujo muy bonito donde aparecerá el dinero. Permítanme ilustrar rápidamente a usted en un paso prototipo, volvamos a conectar nuestro menú de hamburguesas onclick con smart animate con un retraso de 800 milisegundos y lo mismo aquí mismo. Cuando haga clic hacia atrás, mi menú desaparecerá. Vamos rápido con esa escupir. Sí. Por lo que ves que básicamente el directivo apareció lentamente con una transición suave. Pero lo que quiero lograr es que mi manual se deslice desde el lado derecho. Entonces para lograrlo, voy a llevar mi menú y voy a copiar pegarlo al primer fotograma. Y vamos a seleccionar este menú está en ambos marcos y moverlos fuera de nuestro marco es bastante importante porque bicicleta Figma rastrea toda la interacción que sucede. Entonces si nuestro dinero se va a deslizar por el lado derecho, tenemos que moverlo en nuestro primero, en ambos marcos. Y específicamente en el segundo fotograma, vamos a moverla hacia atrás como fue inicialmente. Veamos rápidamente si conseguimos una mejor transición. Sí, Entonces esto es lo que quería lograr es bastante agradable. Y por supuesto, con Smart Animate, puedes crear animaciones mucho más difíciles y complicadas. Pero como lección básica es un buen comienzo para que empieces a explorar. Háganme saber, chicos, si lograron hacerlo y tengo curiosidad por ver también sus obras. 8. Desplazar horizontal y vertical: aplicación de galería de fotos: Hola amigos. hoy hablaremos sobre cómo crear una animación horizontal y vertical. Y específicamente para esta lección, crearemos una pantalla simple para app de viajes. Así que vamos a abrir rápidamente Sigma, seleccionar nuestra herramienta de marco y seleccionar el marco telefónico preestablecido. En mi caso, seleccionaré iPhone Pro Max. Rápidamente agregaré algún título. Vamos también fijar el tamaño a 26 y también el grosor de semi negrita. También crearé un sub-titular y disminuiré su tamaño, por supuesto, y también el grosor a medio. El siguiente paso sería crear unas tarjetas de viaje que más me gustaría animar y ponerlas disponibles en dirección horizontal. También vamos a redondear las esquinas. Aquí mismo. También escribiré algún texto. Por ejemplo, Nueva York. También agruparé estos dos elementos y los copiaré. Muy bien, sólo por la conveniencia, voy a mover estos elementos fuera del marco a menos que en realidad primero renombrar descartes. También seleccionaré cada rectángulo y agregaré la imagen para ello. Básicamente, uso el plugin Unsplash donde puedes buscar un montón de imágenes diferentes para cualquier tipo de tema que tengas para tus prototipos. Entonces empecemos con Nueva York. Preciosa. Realmente me gustaron estas imágenes. Seleccionemos todas estas tarjetas y con un clic derecho en nuestro ratón, seleccionemos Selección de cuadros. Por lo que es realmente importante que nuestros elementos estén dentro de un marco y no solo dentro de un grupo. Seleccionaré el marco y moveré estos elementos dentro de nuestra app rápidamente para crear los elementos para el desplazamiento vertical, solo copiaré el sub-titular y crearé los autos para nuestro desplazamiento vertical. Justo después de que lo conseguí, Todos estos elementos, claro, los pondré fuera de nuestro marco para que pueda hacer las modificaciones más fáciles. Así que cambiemos también los títulos y las imágenes para cada uno de nuestro elemento de profundidad. Perfecto. Volvamos a seleccionar también todos nuestros elementos, convertirlo al marco. Y por supuesto este fotograma, me volveré a mover dentro de la pantalla de mi app. Perfecto, Así que nuestra pantalla de aplicación está lista. Pero antes de proceder, el prototipado, déjame decirte algún truco. Considera que el marco sale fuera del marco de nuestra app. Y para hacer nuestro desplazamiento horizontal y vertical, necesitamos modificar los bordes de estos marcos rectos al mismo ancho y alto de nuestra app de viaje. Esto es realmente importante porque si dejas los fotogramas fuera del marco de tu app, la animación funcionará. También lo modificaré así. Cuando vas a la pestaña Prototipo y seleccionas tu marco, puedes ver aquí inmediatamente pestaña de desplazamiento desbordamiento que apareció el cofre. Y por defecto, no verás desplazamiento. Eso significa que no se implementará ninguna animación de desplazamiento . Cuando abro el menú desplegable. Para este caso, elegiré desplazamiento horizontal. Lo mismo para el siguiente marco. También elegirá el desplazamiento de desbordamiento al desplazamiento vertical. Impresionante. Veamos cómo funciona en acción. Perfecto. Esta es nuestra app. Voy a desplazar estos autos y funciona sobre el desplazamiento horizontal es bastante perfecto. ¿ Qué pasa con nuestro desplazamiento vertical? También se desplaza, pero veo algún desbordamiento aquí mismo. Básicamente, este marco va por encima de nuestro subtítulo y otros guardias de viaje, que no es como debería funcionar. Para solucionar este problema, vuelve a tu prototipo, selecciona el marco vertical. Y en realidad en la sección de diseño, es realmente importante que tome la función de contenido de clip. Y cuando recortas contenido, eso significa que básicamente el desplazamiento no saldrá fuera de los bordes del marco, que están exactamente definidos aquí mismo. Veamos en nuestro modo de presentación los cambios que acabamos de hacer. Como se puede ver en este momento, me desplazo y básicamente mis elementos y no se desbordan, no anulan mis elementos de ópera, lo cual es increíble. Entonces ese fue el tutorial sobre animación vertical y horizontal en sigma. 9. Superposición abierta: aplicación de bancario: Hoy vamos a aprender a crear animaciones de superposición en sigma. Las animaciones de superposición son especialmente útiles para aplicaciones móviles o para cualquier tipo de prototipos donde te gustaría mostrar un mensaje emergente. Por ejemplo, notificar al usuario que la acción ocurre o advertir sobre el error que cometió y así sucesivamente. Trabajarán específicamente con la app de finanzas que ya preparé, pero esto es solo un ejemplo para mostrarte cómo funcionará la animación. Vamos a crear juntos una notificación cuando el usuario presione el botón seguro, específicamente crearé un nuevo marco con un tamaño aleatorio fuera de mi marco de aplicación móvil. Por lo que éste será nombrado como notificación. Vamos a crear un titular aquí, tan bien hecho. Muy bien, y el último paso será crear realmente un botón de llamada a la acción, que será mucho más pequeño que éste. Y solo diremos este grupo juntos todos estos tres elementos y los alinearemos exactamente en el centro. Por lo que específicamente para esta notificación, también voy a redondear las esquinas aquí mismo al valor de diez. Y también agregaré una sombra a este fotograma en los efectos, vamos a crear una sombra. A menos que sólo quería encontrar algunos ajustes aquí mismo, voy a difuminar un poco más y tal vez disminuir la opacidad del color negro para que ofrezca un look más natural. Muy bien, así que cuando hayas terminado con tu notificación, saltemos a la sección de prototipos para el tipo aquí mismo. Y vamos a quitar el dispositivo porque no quiero ver ningún dispositivo por ahora. Conectemos nuestro botón Guardar con nuestras notificaciones. Entonces cuando haga clic en este botón, me gustaría ver mi pop-up. Pero en este caso, como se puede ver en la interacción, la configuración preestablecida es herramienta de navegación, pero nos gustaría cambiarla para abrir superposición y una superposición abierta. Ahí es donde comienza la diversión. Puedes alinearlo en un centro o por ejemplo, arriba a la izquierda, inferior izquierda, etc. Veamos qué pasa cuando básicamente seleccionamos esta superposición central. Pulsaré mi botón Guardar y veo mi notificación justo exactamente en el medio porque nuestra superposición abierta estaba configurada a la posición central. Pero si quiero más de una posición personalizada, modificaré mi superposición a la posición manual. En el manual se puede ver aquí mismo mi notificación tiene con estas líneas cruzadas, lo que significa que esta es la posición donde la pondré para que esté en mi pantalla. Me gustaría básicamente moverlo aquí mismo. Entonces cuanto más de la parte superior de mi prototipo, vamos a ver cómo funciona. Permítanme presionar rápidamente en Guardar y se puede ver que mi notificación emergente está justo en la posición exacta donde la configuré para que esté. Por eso espero que te haya gustado este tutorial y nos vemos en la próxima clase. 10. Animación en drag: aplicación de transferencia: Anteriormente se trabajaban en su mayoría con disparadores prototipo como onclick y también hover. Pero hoy hablemos de cómo crear una animación se activará al arrastrar. Este tipo de disparador le permite realizar una acción al arrastrar un elemento en la pantalla, crearé rápidamente un título. Cambiemos también el color del azul. También creemos rápidamente un botón de llamada a la acción. Vamos a redondear también las esquinas a 20, y llamemos también o al color azul. Perfecto. Ahora vamos a subir a la parte más interesante. Vamos a crear un slider que vamos a animar con la animación Andrex. Seleccionaré la herramienta rectangular y dibujaré un rectangular muy delgado que presentaremos la línea de nuestro slider. También vamos a redondear las esquinas de la misma. Cambiaré el relleno por el color gris más claro. También voy a copiar el mismo rectangular y cambiarlo en su ancho. Y es muy importante para nosotros crear una animación lo que un slider también cambiará un color cuando la parte inferior se va a mover hacia el otro lado. Vamos a llenarlo rápidamente también en el color azul claro. Lo haré aún más pequeño. Y el último paso será crear una elipse. Esta elipse vamos a interactuar para nuestra animación on track. Por supuesto que no olvidar, también tenemos que crear un número, básicamente, el número que queremos transferirlo a alguien. Revisemos rápidamente alguna ficción o números. Por ejemplo, veinticinco dólares. Lo alinearé en el centro, y también copiaré este número para crear este efecto rastreable de los números cambiando mientras estoy arrastrando mi deslizador. Realmente no importa esa posición en este momento porque vamos a agruparla en el marco y cambiarla. Por lo que básicamente, las restricciones serán diferentes y no se superpondrán con otras capas que tenemos en esta pantalla. Seleccioné todas mis capas de texto y voy a presionar el botón derecho de mi boca y presionar sobre la selección de fotogramas. Y eso es básicamente posicionarlo un poco más alto. Entonces lo que vamos a hacer es que tengamos los márgenes de nuestro marco, la caja azul alrededor de todos nuestros elementos. Y sólo voy a arrastrar estos márgenes de vuelta a mi número inicial así. Pero en este caso derramamos, vemos otros números y se superponen con otras capas. Para resolver este problema, voy a recortar contenido. Como se puede ver, otros números simplemente desaparecieron. Acabo de agrupar todos estos elementos y los alinearé exactamente en el centro, tal vez un poco más alto solo para que sea visualmente agradable. A menos que copie rápidamente este marco y cree el siguiente estado de nuestro slider. Entonces en este caso, solo moveré la elipse hacia la derecha, aquí mismo hasta el borde. Y di lo que va a pasar con nuestro segundo rectangular de la diapositiva. Sólo voy a arrastrarlo con Occidente para estar alineado con la elipse. Y ésta nos permitirá crear una bonita animación que el color está cambiando cuando se arrastra la elipse. Y también, veamos, olvídate de nuestro número. lo que aquí por supuesto fue deslizarse hacia la derecha y mezclarlo, nuestro número también aumentará. Lo que voy a hacer dentro del marco, acabo de seleccionar todas las capas de textos y voy a moverlas hacia arriba con las teclas de flecha. Exactamente así. Por lo que en este momento tenemos dos de nuestros marcos. Pasemos a la pestaña Prototipo y en realidad creemos nuestra interacción. Vamos a trabajar con nuestra elipse. Vamos a conectar nuestro segundo fotograma en los detalles de interacción que voy a seleccionar en Drag. Esto es lo que va a pasar cuando arrastremos nuestra elipse. Y por supuesto, para la animación para el mejor efecto visual y también para la transición suave vamos a trabajar con smart animate, lo mismo. Por supuesto, cuando arrastre mi elipse hacia atrás, voy a ir al estado inicial en mi primer fotograma, el mismo en pista, navegar al slider es 0 fotograma con una animación animada inteligente con un retardo de 300 milisegundos. Así que validemos rápidamente nuestro prototipo en el modo de presentación. Aquí mismo, donde en el modo de presentación, y es bastante emocionante. Así que intentemos arrastrar nuestro deslizador. Y como se puede ver, los números están cambiando y también el deslizador se está llenando de un color azul claro. Este es el escaparate perfecto de la interacción farmacológica. Y se ve muy bien porque puedes tener una simulación tan real de la interacción, por ejemplo, para esta aplicación bancaria imaginaria, Nos vemos en el siguiente tutorial. 11. Componentes interactivos: aplicación de redes sociales: En este video, crearemos animaciones con ayuda de indirectos de componentes. Los componentes interactivos permiten definir interacciones y animaciones entre varianza en el conjunto de componentes, lo que significa que las instancias se vuelven inmediatamente vivas en el modo de prototipado. De esta manera podrás crear elementos reutilizables indirectivos más rápido y también reducir la complejidad de tu prototipado, lo que en general acelera tu flujo de trabajo de prototipado. Así que vamos a crear rápidamente nuestro conjunto de componentes interactivos. Así que abre tu archivo Figma y vayamos inmediatamente a Plugins y seleccionamos el icono. Si plug-in, en este caso, me gustaría añadir un duro que pueda porque me gustaría crear una especie de app de redes sociales donde el usuario pueda gustar imágenes. Vamos a importarlo rápidamente y puedo verlo aquí. Sólo para los efectos de este tutorial, desagruparé este marco y en realidad desagruparé el grupo en sí. Entonces al final solo tengo una capa vectorial. Este será un estado inactivo, pero necesitamos crear dos estados más, que significa lo que sucederá cuando el usuario, pasaremos el cursor sobre el icono y también lo que sucederá cuando el usuario haga clic en el icono. Duplicemos este ícono dos veces. En primer lugar, trabajaré con un estado de hover. Entonces para este caso, voy a crear, rellenar y seleccionar justo el color que tiene sentido son el tipo más duro de rosáceo. Pero permítanme simplemente copiar rápidamente este código de color por mí mismo. Y eso reducirá la opacidad al 30%. Lo mismo para el estado onclick. Voy a crear, rellenar y luego copiar pegar exactamente del mismo color. Pero en este caso la opacidad se alimentará de un 100%. Cuando haya terminado de crear el estado, seleccione todas estas capas y navegue hasta la barra de menús superior donde vea los componentes. Puedo abrirlo y seleccionar Crear conjunto de componentes. Por lo que es importante que no se cree un componente de los tres elementos, sino la Ucrania, un conjunto de componentes. Aquí mismo, inmediatamente se ven los bordes con las líneas discontinuas. Y eso significa que este es tu conjunto de componentes se crea. Antes de empezar a crear prototipos, será inteligente cambiar el nombre nuestra varianza dentro de la etapa de componentes. Por lo que el primero será por defecto por supuesto, pero el segundo, voy cofre establecer la propiedad para pasar el puntero. Y el tercero tendrá la propiedad. Haga clic. Cuando haya terminado de cambiar el nombre de su varianza. Pasar a la pestaña Prototipo y vamos a crear nuestra interacción. Por supuesto, desde el estado inactivo, también soy el estado de hover, lo que significa mientras se cierne, mi variante cambiará la propiedad para pasar el cursor. Lo puedes ver aquí mismo con un menú desplegable, puedes cambiar a una apuesta diferente, pero en este caso, hover tiene más sentido. La animación seleccionaré e inteligente animaré con los ajustes predeterminados de facilidad hacia fuera y un retraso de 300 milisegundos. Entonces por supuesto, pasemos al siguiente estado. Entonces cuando hago clic en él, cambié al clic también. Aquí está el animate inteligente como en el ejemplo anterior. Y por supuesto, si el usuario deselecciona nuestro ícono, entonces volvemos a nuestro estado inactivo, lo que significa que el mismo haría clic en el clic estados que volvemos a la predeterminada. Este ECS que nuestros componentes de directiva se crean aquí mismo. Y creemos rápidamente una simple pantalla de teléfono móvil con nuestra aplicación básica de redes sociales. inmediato seleccionaré nuestra variante predeterminada y copiaré fuera del marco de conjunto de componentes. Presionaré el Alt y lo arrastraré a mi marco de redes sociales. Y por supuesto, seleccionaré ambos elementos y los copiaré para crear más de la misma varianza para simular un feed de redes sociales, se ve bien. Y el último paso será por supuesto, pagar algunas imágenes con mi plugin favorito llamado Unsplash. Pongamos al azar algunas imágenes aquí. Perfecto, y si lo hemos hecho todo correctamente, eso significa que no tendríamos que conectar ningún cable fuera de nuestro marco. Podemos simplemente ir de inmediato al modo de presentación y ver cómo nuestro ícono cambia sus estados. Impresionante. Se puede ver que pasa el cursor por encima, puedo hacer click, me puede gustar la imagen. Me puede gustar otra. Me puede gustar otra vez. Y por supuesto que puedo a diferencia de él si quiero. Esto es realmente increíble porque mi flujo de trabajo es mucho más fácil que si simplemente voy a crear otro marco y conectaría cada icono a ese marco y así sucesivamente. Lo que también es útil de los componentes interactivos es que puedes compartirlo con tu equipo. Y por ejemplo, si tienes varias páginas en el archivo de tu proyecto, aún puedes encontrar el mismo icono en tus activos. En tus ensayos, puedes ver los componentes locales y simplemente puedes arrastrarlo y tenerlo en otra página. Esto realmente simplifica el flujo de trabajo. Y por ejemplo, si colaboras con diferentes personas, también pueden usar el mismo icono, el mismo componente interactivo a través del archivo en el que trabajas juntos.