Creación de prototipos avanzados y diseño de interacción en Figma para diseñadores de UI/UX

1. Introducción: Si eres diseñador de UI UX y quieres llevar tus habilidades de diseño de UI al siguiente nivel dominando la prototipos y el diseño de interacción, entonces este curso es para ti. Hola, mi nombre es Arash y soy diseñador UI UX. También doy clases de UI UX Design en la Universidad de Economía y Ciencias Humanas de Varsovia. En los últimos años, ayudé a más de 40,000 estudiantes de todo el mundo a convertirse en diseñadores y lanzar sus carreras de diseño. Me di cuenta de que a muchos diseñadores junior les gustan las habilidades de creación de prototipos y diseño de interacción. Que son esenciales para cualquier proyecto en la actualidad. Por eso creé este curso práctico de diseño a específicamente para ayudarte a aprender a prototipar y diseñar elementos interactivos en Figma como un profesional. Comenzaremos con los conceptos básicos del prototipado y animación como qué es y por qué importa, cómo se crean las animaciones en Figma y los diferentes tipos de animación UI. Luego pasaremos a temas más avanzados y aprenderá sobre las mejores prácticas de prototipado en Figma, cómo crear microinteracciones complejas y cómo hacer que sus elementos de interfaz de usuario sean interactivos. Además, elaboraremos animaciones e interacciones avanzadas populares inspiradas en los productos Apple. Al final de este curso, podrás crear más de 20 tipos diferentes de micro-interacciones y animaciones para diferentes casos de uso. Si estás listo para dominar prototipado y el diseño de interacción, te veré en clase. 2. Estructura del curso: [MÚSICA] Hola, bienvenidos a la primera lección de este curso. En este video, voy a guiarte por la estructura del curso que sepas qué esperar y cómo sacarle el máximo partido. El curso se divide en tres secciones prácticas, básicas, intermedias y avanzadas. Comenzaremos con los conceptos básicos del prototipado como qué es y por qué importa, cómo se crean las animaciones etc Aprenderás sobre diferentes tipos de prototipos y comenzaremos a crear prototipos básicos en Figma. Después pasaremos al nivel intermedio donde conocerás las mejores prácticas de prototipado en el diseño de UI/UX. Al final de esta sección, podrás crear diferentes tipos de prototipos incluyendo microinteracciones. Una vez que hayas aprendido los fundamentos de la creación de prototipos, será el momento de pasar a la sección avanzada. En esta parte del curso, aprenderás a crear prototipos complejos y microinteracciones que llevarán tus proyectos de diseño de buenos a increíbles. Si estás familiarizado con Figma y sus herramientas de creación de prototipos, puede omitir la sección básica y saltar a las secciones intermedia y avanzada. Para aprovechar al máximo este curso, asegúrate de practicar lo que aprendes en los videos lo contrario no podrás dominar tus habilidades de prototipado. Sé que para algunas personas, prototipos puede ser un poco complicada, pero no hay nada de qué preocuparse porque siempre puedes comunicarte conmigo y te ayudaré a entenderlo. Si estás listo, saltemos a la derecha. 3. ¿Qué es prototipado: [MÚSICA] Antes de sumergirnos en la creación de prototipos, es crucial saber qué significa realmente la creación de prototipos. prototipos es un proceso que utilizan los diseñadores de UI UX para probar rápidamente ideas para interfaces de usuario y experiencias. Les permite crear wireframes interactivos o maquetas para obtener comentarios de los usuarios antes de sumergirse en costosos trabajos de desarrollo, pero ¿por qué molestarse con la creación de prototipos? Las pruebas de prototipos pueden ahorrarle tiempo y dinero al eliminar la necesidad costosos tiempos de codificación y el riesgo de lanzar un producto o característica que nadie quiere. También ayuda a mostrar sus ideas de una manera interactiva para que pueda obtener valiosos comentarios de las partes interesadas, clientes potenciales y otros tomadores de decisiones importantes antes de invertir demasiado tiempo y dinero en el desarrollo. ¿Cuál es la mejor manera de hacer prototipos? Generalmente, tenemos dos tipos de prototipado. Número 1, prototipado en papel. Esta es una forma económica y rápida probar ideas rápidamente, dibujar cada pantalla de su interfaz en papel y luego usarla como base para las pruebas del usuario. Es ideal para generar comentarios al principio del proceso de diseño, pero puede que no siempre sea lo suficientemente realista cuando se trata simular escenarios de uso del mundo real. Número 2, prototipado digital. Este tipo de prototipos utiliza herramientas como Figma o ProtoPie para crear maquetas digitales que se ven y se sienten como interfaces de usuario reales. Son mucho más realistas que los prototipos de papel. Hacen que sea más fácil probar la usabilidad y obtener información de los usuarios. En este curso, nos centraremos en la prototipos digitales ya que es esencial para cualquier proyecto de diseño de UI UX. En el siguiente video, hablaremos sobre los diferentes tipos de animación UI. Nos vemos ahí. 4. Tipos de animación de interfaz de usuario: [MÚSICA] En este video, vamos a hablar diferentes tipos de animación UI. Desde la animación sureña que ves en Instagram hasta la animación de desplazamiento avanzada ves en el sitio web de Apple, animación juega un papel importante en el diseño de la interfaz de usuario, ya que no solo ayuda a llamar atención y guiar a los usuarios a través de la interfaz, sino que también ayuda a crear una experiencia de usuario más memorable y agradable. Generalmente, tenemos cuatro tipos de animación de UI, carga y progreso, cambios de estado, navegación y microinteracciones. Empecemos con la carga y el progreso. Este tipo de animación indica que un proceso está sucediendo en segundo plano y puede ser una buena manera de mantener al usuario comprometido y consciente de lo que está sucediendo. Podría usarse mientras el usuario está esperando una respuesta del servidor o mientras realiza una tarea larga. Ahora pasemos a la animación de cambio de estado. Los elementos de la interfaz de usuario podrían tener múltiples estados, como pasar el mouse, pulsado, deshabilitado, etc. La animación de estado indica cuando un usuario realiza una acción como pasar el cursor sobre un botón o hacer clic en un botón. Considera este botón. Lo que estás viendo es el estado predeterminado. Pero mira lo que pasa cuando me pongo el cursor sobre él. Verás, se volvió más brillante. Entonces, aquí tuvimos una transición del estado predeterminado al estado hover. A continuación tenemos el tipo de navegación. La animación de navegación se utiliza para ayudar a los usuarios a navegar a través de la interfaz. Sirve como una señal visual y ayuda a crear una experiencia más fluida al navegar por las diferentes secciones de una aplicación o un sitio web. Echemos un vistazo a un ejemplo. Aquí tenemos App Store, y tenemos algunas tarjetas aquí. Mira lo que pasa cuando toco una tarjeta. Verás, me llevaron a la página de detalles, pero la transición fue muy fluida. Imagina que no tuvimos esta transición suave. Todavía podríamos encontrar lo que buscamos, pero la experiencia no sería tan agradable. Finalmente, tenemos microinteracciones. La animación de microinteracciones se utiliza para indicar retroalimentación al usuario para ciertas acciones. Podría ser como una animación de pulso cuando haces clic en un botón o una animación de arrastre cuando intentas eliminar un elemento de una lista. Para darte un ejemplo, echemos un vistazo a este botón. Cuando hago clic en él, su forma cambia y vemos este spinner de carga, y finalmente aparece este icono. Esta secuencia de animaciones es una animación de micro interacción. Ahora que tienes una mejor comprensión de los diferentes tipos de animación de UI, podemos empezar a hablar sobre el proceso de creación de prototipos. Nos vemos en el siguiente video. 5. Conceptos básicos de prototipo en Figma: En este video, vamos a empezar a hablar del proceso de prototipado en Figma. Pero antes de crear nuestro primer prototipo en Figma, veamos cómo se crean las animaciones en las computadoras. ¿Qué es básicamente la animación? Bueno, es una serie de imágenes fijas mostradas una tras otra en rápida sucesión que nos lleva de un punto a otro y nos da la ilusión de movimiento. Para lograr este efecto de animación, las computadoras utilizan algo llamado fotogramas clave, que son básicamente instantáneas de diferentes momentos o estados en el proceso de animación. En el pasado, los animadores tenían que dibujar manualmente cada uno de estos fotogramas, lo que requería bastante tiempo. Pero ahora los fotogramas clave se pueden crear rápida y fácilmente en el software de diseño. Muchos animadores aún dibujan cada fotograma de animación, y se llama la técnica stop-motion. Déjame darte un ejemplo. Supongamos que queremos mover este auto del punto A al punto B en dos segundos. Lo único que tenemos que hacer es crear dos fotogramas clave para indicar el punto inicial y el punto final. Todos los fotogramas clave intermedios se generarán automáticamente. Así de simple. Me gusta llamarlo el concepto de viaje. Pero, ¿por qué estamos hablando de todo esto? Porque el mismo concepto se puede aplicar al crear prototipos en Figma. Echemos un vistazo a estas dos pantallas. Lo que queremos lograr es que este botón sea interactivo para que cuando haga clic en él, me lleven a la siguiente página. Usemos el concepto de viaje aquí. ¿Qué necesitamos? Necesitamos el punto de partida, que pasa a ser la pantalla izquierda. También necesitamos el punto final o el destino, que es la pantalla correcta. Por último, necesitamos especificar la duración de esta transición y ya terminamos. Ahora cuando haga clic en este botón, me llevarán al punto final de inmediato. Esta es la forma más simple de animación. Si realmente comprendes este concepto de viaje, te aseguro que puedes crear prototipos complejos con facilidad. Ahora vamos a crear un nuevo archivo de diseño en Figma y veamos cómo se puede crear un prototipo simple. Dado que el objetivo principal de este curso no es enseñarte diseño de UI, ya preparé los archivos de diseño, así que solo podríamos enfocarnos en el proceso de prototipado. Para continuar con el curso, necesitas descargar el proyecto que preparé para ti e importarlo a Figma. Para ello, solo necesitas arrastrar este archivo y soltarlo en tu panel de Figma. Ahora vamos a abrirlo y ver qué tenemos aquí. Para cada lección, hay una página aquí mismo, y dentro de cada página, puedes encontrar los activos requeridos para esa lección. Dentro de este archivo de proyecto, si te diriges a la sección Páginas y abres esta página, conceptos básicos de prototipado en Figma, puedes encontrar estos marcos dentro de esta página que ya preparé para ti. Aquí en la parte inferior tenemos un marco más. Pero básicamente, vamos a usar estos marcos para crear un prototipo sencillo. Una cosa que debes tener en cuenta a la hora de crear prototipos en Figma, es que la forma de crear prototipos es mediante el uso de marcos. No se puede simplemente conectar una forma simple a otra forma en Figma. No va a funcionar porque así es como Figma crea prototipos. Siempre que quieras crear un prototipo, debes asegurarte de tener un marco. Aquí como pueden ver, tengo un marco de página principal y este icono en la lista de la capa indica que este es un marco, no es un rectángulo. Empecemos por crear un prototipo muy simple, un prototipo de navegación. Es bastante popular. Imagina que diseñas este sitio web y aquí tienes algunas tarjetas, aquí tienes esta barra de navegación, y tienes estos enlaces, y quieres conectar estas páginas juntas. En ese caso, se puede crear un prototipo de navegación, y es bastante sencillo. Lo único que hay que hacer es utilizar el concepto de viaje. Necesitas conocer tu punto de partida y el destino y crear una conexión entre estos dos puntos. Aquí tenemos este botón Contáctenos, justo en la barra de navegación. La forma en que debería comportarse es así. Cuando haga clic en él, me deben llevar a esta página de Contáctenos. Vamos a crear esta sencilla interacción. Primero, necesitamos seleccionar este botón como nuestro disparador, porque la mayoría de las interacciones necesitan un disparador. Hay algunas excepciones de las que hablaremos en los próximos videos, pero la mayoría de las veces necesitamos tener un disparador. En este caso, este botón Contáctenos va a ser accionable. Este va a ser nuestro detonante. Voy a seleccionarlo aquí. Entonces voy a dirigirme a la pestaña Prototipo aquí mismo. Tan pronto como te diriges a la pestaña Prototipo, si pasas el cursor sobre el límite de este elemento, verás que aparece este ícono más. Este icono más permite crear una conexión entre el punto de partida y el destino. Ahora voy a alejar el zoom. Nuestro punto de partida aquí es este marco de página principal. No necesitamos cambiar nada y nuestro destino va a ser esta página Contáctenos. Mientras se selecciona este botón, voy a pasar el cursor sobre este botón. Voy a hacer clic en este icono más y arrastrar así. Tan pronto como haces eso, aparece esta flecha y te permite conectar estos dos marcos juntos. Ahora bien, si pongo el cursor sobre este marco, como pueden ver están conectados así. Tan pronto como lo dejo caer ahí, aparece esta ventana de detalles de Interacción. Voy a cerrarlo por ahora. Vamos a volver a ello en unos minutos. Acabamos de crear una interacción muy simple. Como pueden ver ahora aquí justo al lado del nombre de este marco, tenemos esta caja y dentro tenemos flujo uno. Hemos creado un flujo, pero ¿qué es un flujo? Imagina que tienes un diseño completo, podría ser un sitio web o una aplicación, y quieres conectar todas las páginas juntas. Por lo general, lo que hacemos es crear diferentes flujos dentro de nuestro prototipo para que podamos jugar un flujo específico siempre que lo necesitemos. Un flujo es básicamente una red de tramas que están conectadas entre sí. Imagina que has diseñado una app y quieres crear prototipos del inicio de sesión y del proceso de registro. Desea crear prototipos todo el recorrido del usuario para ese flujo en particular. En ese caso, se crea un flujo para crear una cuenta para iniciar sesión, para cerrar sesión. Para otra parte de esa app, puedes crear otro flujo, por ejemplo, cuando el usuario hace clic en un producto y debe ser llevado a la página de detalles de ese producto. Podría ser un flujo totalmente diferente. Está dentro de ese prototipo, pero tienes diferentes flujos. Si solo necesitas previsualizar un flujo específico, no necesitas simplemente comenzar desde el punto de partida de tu prototipo y simplemente pasar por todas las páginas. Por eso tenemos estos flujos. Ahora, voy a presionar este botón Reproducir justo ahí, y seremos llevados a la página de Vista previa. Ahora bien, si coloco el cursor sobre este botón, como pueden ver mi cursor cambia a este icono de puntero, lo que significa que ahora este elemento es accionable. Es interactivo. Aquí, voy a dar click sobre él. Ahí vamos. Me llevaron a la página Contáctenos. Esta es la forma más simple de prototipo en Figma. Acabamos de crear esta conexión entre estas dos páginas. Pero, ¿y si queremos llevarlo al siguiente nivel? ¿Y si queremos animarlo? Porque por el momento, aquí no hay animación. Mira, como puedes ver, cuanto haga clic en él, me llevarán a esta página de Contáctenos al instante. Para ello, necesitamos ajustar las preferencias de nuestra interacción. Aquí creamos esta interacción y ahora es el momento de ajustar las preferencias. Para ello, solo necesitas seleccionar este botón, este botón Contáctanos. Bien, asegúrate de que esté seleccionado en la lista de capas. Aquí del lado derecho, como pueden ver, tenemos esta sección de interacción. Justo debajo de él, tenemos esta interacción de clic que acabamos de crear. Si solo hago clic en él, aparece esta ventana de detalles de Interacción. Alternativamente, puedes simplemente hacer clic en esta flecha y esta ventana aparece. Eso depende totalmente de ti. Veamos qué tenemos aquí. Justo en la parte superior, tenemos este menú desplegable que nos permite especificar el tipo de disparador que estamos buscando. Tenemos diferentes tipos de disparadores. Tenemos On click, On drag, While hovering, Mientras pulsas tecla, Gamepad, mouse, Enter, Mouse leave, etc Aquí tenemos esto después del disparador de retardo cual no está habilitado por defecto. Hablaremos de ello en los próximos videos. No te preocupes. Para esta interacción, necesitamos este disparador al hacer clic, porque queremos asegurarnos de que este botón sea clicable. No queremos establecer el disparador Mientras se cierne porque si lo configuro en Mientras se cierne, cuanto pase el cursor sobre este botón, me llevarán a la página Contáctenos, y eso no es lo que quiero. El disparador es Al hacer clic. Aquí tenemos el tipo de transición. Como pueden ver, dice Navegar a, tenemos de nuevo, diferentes tipos de transiciones. La mayoría de las veces necesitamos configurarlo en Navigate to, porque queremos que nos lleven al destino desde el punto de partida y, aquí como puedes ver el destino se especifica la página Contáctenos. Puedes ajustarlo si quieres, pero como conectamos este botón a esta página de Contáctenos, aquí tenemos Contáctenos. Hasta el momento, tan bien. Aquí en la parte inferior tenemos esta sección de animación, que es muy importante. Esta sección te permite ajustar el tipo de animación que estás buscando. Aquí por defecto, está configurado como instantáneo. Es por eso que cuando hice clic en este botón Contáctenos aquí, me llevaron a esta página instantáneamente, porque el tipo de animación aquí está configurado en instantáneo. Si lo abro, se puede ver que tenemos diferentes tipos de animación. Tenemos disolver, tenemos smart animar, entrar, salir, empujar, deslizarse hacia adentro y deslizarse hacia afuera. Bueno, vamos a cambiarlo para que se disuelva por un segundo. En cuanto hago eso, aparecen estas dos opciones. Aquí tenemos el método de flexibilización o la velocidad de nuestra animación. Vamos a hablar de ello en unos minutos. Por ahora, no voy a cambiarlo, y aquí tenemos la duración. A la hora de crear microinteracciones, la unidad suele ser milisegundos, así que aquí tenemos 300 milisegundos. Si quieres, puedes aumentarlo o disminuirlo. Si quiero que esta transición ocurra precisamente en un segundo, necesito aumentar este valor a 1,000 milisegundos, así como así. Ahora bien, si vuelvo a tocar este flujo, mira lo que pasa. Voy a dar click en este botón Contáctenos y ahí vamos. Ahora vemos esta animación de disolver, y ha ocurrido precisamente en un segundo. La duración de esta transición fue de un segundo. Dependiendo de lo rápido o lo lento que quieras que sea tu animación, puedes ajustar este valor aquí. Ahora cambiemos el tipo de animación aquí para entrar a vivir. En cuanto lo haga, como pueden ver, tenemos estas flechas. Permite especificar la dirección de esta animación. Aquí en esta ventana, puedes previsualizar tu animación. Como puedes ver, muestra que B se mueve hacia la pantalla A de derecha a izquierda. Se puede ajustar a, de izquierda a derecha, de arriba a abajo y de abajo hacia arriba. Voy a dejarlo como está, y ahora si acabo de hacer clic en este botón Contáctenos, mira qué pasa. Ahí vamos. Esta segunda página pasa a nuestra primera página. Podemos configurarlo para que se mueva, empuje, se deslice y se deslice hacia afuera también pero estos no son tan importantes. Puedes seguir adelante y probarlos. Ahora vamos a crear otra interacción simple. Aquí, como pueden ver, tenemos esta página de proyecto, y aquí en la página principal tenemos estos proyectos recientes. Imagina que quieres hacer esta tarjeta, este proyecto una tarjeta interactiva. Para ello, como sabes, solo necesitas seleccionar este grupo, Proyecto 1 y mientras estés en la pestaña Prototipo, solo necesitas crear una interacción simple y conectarla a tu página de proyecto, así como esto. Aquí, nuevamente, es necesario especificar el disparador. Voy a configurarlo para deshacer clic. Eso está bien. El tipo va a ser instancia. No voy a animarlo ahora. Aquí, si acabo de hacer clic en esta tarjeta ahora mismo, como pueden ver, es un interactivo. Hasta ahora aprendiste a crear una conexión sencilla entre dos fotogramas diferentes. Ahora vamos a hablar de otra característica de Figma, que es esta opción de animación inteligente. Es muy poderosa. Permite crear microinteracciones complejas en segundos. Sigamos adelante y veamos cómo funciona. Bueno, voy a desplazarme hacia abajo aquí, y como pueden ver, ya preparé este marco. En el interior, tenemos este círculo, y también tenemos dos capas de textos, A y B. Aquí nada elegante. Bueno, veamos qué necesitamos para lograr. Imagina que quieres mover este círculo del punto a al punto B. ¿Cómo debemos hacer eso? Bueno, solo piensa en el concepto de viaje del que hablamos antes. Para cualquier animación, necesitas tener el punto de partida y el punto final, y finalmente, necesitas conectarlos y especificar la duración, o digamos la velocidad de tu animación. Pues aquí tenemos nuestro punto de partida. Este círculo se coloca aquí mismo en el punto A. Ahora necesitamos el destino. Para eso, voy a seguir adelante y seleccionar este frame, este smart animate frame y voy a duplicarlo. Golpea Control D o Comando D. Aquí, tenemos dos fotogramas idénticos, ahora. Ahora, en este segundo fotograma en este fotograma duplicado, voy a seleccionar este círculo y lo voy a mover al punto B. Mantenga pulsada la tecla Mayús y simplemente moverla hacia el lado derecho, así como esto. Ahora tenemos nuestro punto de partida y nuestro destino, nuestro punto final, y lo siguiente que tenemos que hacer es simplemente conectar estos dos marcos juntos. Pero, ¿cuál debería ser el detonante de esta animación? Por ahora, voy a seleccionar este círculo como nuestro disparador. Una vez que haga clic en él, debería ser movida al punto B. Ahora voy a seleccionarlo y voy a dar por encima a la pestaña Prototipo y conectemos estos dos fotogramas juntos. Para entenderlo fácilmente, voy a seleccionar este marco aquí, y justo en la lista de la capa, voy a renombrarlo a A como nuestro punto de partida y este va a llamarse B. Creamos esta interacción. El disparador es deshacer clic, está bien, pero el tipo de animación se establece en instantánea. Voy a cambiarlo a smart animate. La forma en que funciona esta animación inteligente es como si tomara tu punto de partida y tu destino y crea automáticamente los fotogramas clave intermedios. No hace falta que te preocupes por lo que está pasando en el medio. Solo tienes que decírselo a Figma, este va a ser nuestro punto de partida y este va a ser mi destino. Simplemente lleve este círculo a este punto en un segundo, por ejemplo o menos. Aquí no voy a cambiar la duración, está bien. Ahora tenemos el segundo flujo. Voy a darle a Play, y veamos cómo funciona. Como puedes ver aquí, tienes una lista de flujos, por lo que puedes moverte fácilmente entre estos flujos si quieres. Aquí, si hago clic en este círculo, mira ¿qué pasa? Ahí vamos, se movió del punto A al punto B. Funciona perfectamente. Ahora imagina que quieres hacer esta animación más rápida. Para ello, solo necesitas seleccionar tu interacción y ajustar esta duración aquí. Voy a disminuir esta cantidad a 500 milisegundos. Vamos a probarlo. Ahí vamos. Ahora es mucho más rápido. Hay un punto importante que debes tener en cuenta sobre esta característica animada inteligente. Bueno, cuando usas smart animate, el nombre de tus capas importa. He aquí por qué, aquí en este marco A, como pueden ver, tenemos el círculo, tenemos estas dos capas de textos. En esta segunda página, también tenemos el círculo A y B. Por eso la animación funciona correctamente. Si cambio el nombre de este círculo en esta segunda pantalla, en este fotograma B por otra cosa, cambiémoslo a, digamos Círculo 2. Ahora acabamos de romper la conexión entre estos dos elementos. Figma ahora piensa que estos dos círculos son dos círculos separados, y eso no es lo que queremos. Mira lo que pasa si ahora juego esta animación. Voy a pinchar sobre él. Eso ves, ya no tenemos esa animación porque acabamos de romper la conexión entre estas dos pantallas. que tener en cuenta este punto. Mucha gente comete este error. Crean su punto de partida, crean su punto final, y conectan todo correctamente sin embargo, la animación no funciona. Eso es porque no tienen los mismos nombres de capas en ambas pantallas. Por favor, ten en cuenta este punto, es muy importante. Ahora que aprendiste cómo funciona el smart animate. Hablemos del método de flexibilización, aquí, esta opción que nos saltamos. Si abro este menú desplegable, como pueden ver, tenemos muchas opciones diferentes y estas son muy importantes, sobre todo cuando se quiere crear una micro interacción realista. Pero, ¿por qué son tan importantes estos? Bueno, por defecto, lo más probable es que esta opción lineal sea seleccionada para ti. Bueno, estos métodos de flexibilización definen la aceleración de tu animación, pero ¿qué significa? Es tan confuso. Déjame explicarte. Aquí si lo pongo en lineal, y juego ahora, ahora voy a dar click en este círculo.. Se nos olvidó cambiar el nombre aquí, así que permítanme eliminar estos dos de aquí, así como así, y voy a hacer clic en él una vez más. Ahí vamos. No estoy seguro si te has dado cuenta o no, pero ahora teníamos un movimiento lineal. ¿Qué significa? Significa que la velocidad de esta animación es constante y no es realista porque los objetos no se mueven con una velocidad constante. Por eso tenemos todas estas otras opciones. Si solo selecciono esta interacción, aquí tenemos facilidad de entrada, facilidad de salida, facilidad de entrada y salida, etc. Aquí tenemos primavera suave, rápida, hinchable, lenta, personalizada. Estos diferentes métodos de flexibilización nos permiten hacer que nuestra animación luzca mucho más realista. Si cambio este método de flexibilización a fácil ahora, la forma en que se reproduce esta animación es así, comienza con una velocidad menor y luego a medida que se acerca al destino, se acelera. Así como esto, ya ves, es mucho más realista, ¿no? Si cambias el método de flexibilización de facilidad a facilidad, obtendrás lo contrario. Comienza rápido y luego se ralentiza. Vamos a probarlo. Ahí vamos. Obviamente puedes seguir adelante y revisar cada uno de ellos dependiendo del caso de uso, puedes cambiar este método de flexibilización a cualquier método de flexibilización que desees. En los próximos videos, voy a usar algunos de ellos para mostrarte cómo puedes utilizarlos correctamente y hacer que tus microinteracciones se vean más realistas. Pero si quieres obtener la definición de cada uno de estos métodos de flexibilización, puedes dirigirte al sitio web de Figma. Aquí tienen una entrada de blog y explicaron cada uno de estos métodos de flexibilización. Como pueden ver, tenemos este movimiento lineal. Tenemos facilidad en, así como esto. Entonces tenemos facilidad y así sucesivamente y así sucesivamente. Puedes echar un vistazo a esta página, si quieres. Pondré el enlace en la sección de recursos para tu referencia, y eso básicamente se trata de animadas inteligentes. En los próximos videos, aprenderás a utilizar esta animación inteligente correctamente para crear animaciones complejas. Te veré en el siguiente video. 6. Botón de estilo animado: [MÚSICA] Bienvenido de nuevo. En este video, vamos a crear este botón de me gusta animado en Figma. Eso es lo que vamos a lograr. Quiero hacer este icono animado. Cuando hago clic en él, esta animación se reproduce así. Vamos a meternos en ello. Dentro del archivo del proyecto, ya lo importaste a Figma, me gustaría que sigas adelante y encontraras esta página Botón Me gusta Animado. En su interior puedes encontrar dos iconos diferentes. Aquí tenemos dos tipos de iconos: tenemos un icono de contorno y un icono sólido. Necesitamos ambos íconos para esta animación. ¿Por qué? Porque necesitamos tener dos estados diferentes. Sigamos adelante y creamos un marco. Voy a presionar A en mi teclado para seleccionar la herramienta de marco. Aquí voy a crear un marco de tamaño personalizado, algo como esto debería funcionar. Permítanme cambiar el nombre de este marco a A, como nuestro punto de partida. Voy a seguir adelante y duplicar este icono y llevarlo dentro de este marco. Asegúrate de que esté colocado dentro tu marco cuando revises tu lista de capas. Voy a seguir adelante y alinearlo al centro en la sección de alineación, así como así. Ese va a ser nuestro punto de partida. Ahora bien, si piensas el concepto de viaje del que hablamos antes, sabes que también necesitamos un destino. Para el destino, voy a seguir adelante y seleccionar este marco. Voy a golpear Control D o Comando D para duplicarlo. Aquí en el destino, necesitamos tener este ícono sólido. Voy a duplicarlo y traerlo aquí mismo. Voy a asegurarme de que esté colocado justo encima de este icono de esquema en la lista de la capa. En la lista de tu capa necesitas tener algo como esto. Corazón sólido, que se coloca encima del corazón delineado. Voy a nombrar este marco B. Tenemos nuestro punto de partida, tenemos nuestro destino también. Aquí está la cosa. Si sigo adelante y selecciono este icono y lo hago interactivo, no obtendremos esta animación así como esta. ¿Por qué? Porque aquí en nuestro punto de partida, no tenemos este ícono sólido. Sólo tenemos este icono de contorno. Déjame mostrarte cómo funciona. Si acabo de hacer este icono de esquema interactivo, voy a seleccionarlo, dirígete a la pestaña Prototipo aquí. Voy a pasar el cursor sobre este límite aquí e intentar conectar estos dos marcos así como así. Una vez que aparezca esta ventana de detalles de Interacción, me voy a asegurar de que el disparador esté configurado en Al hacer clic. Porque quiero que se pueda hacer clic en este icono. Aquí dice navegar a. Aquí tenemos nuestro marco de destino B. Eso está bien. El tipo de animación debe ser Smart animate. Pero aquí está la cosa, si solo sigo adelante y juego este flujo, mira lo que pasa. Déjame hacerlo un poco más grande. Voy a asegurarme de que llene la pantalla así como así. Voy a hacer click en él. Ya ves que simplemente se desvanece. Porque no tenemos esta capa sólida en nuestro punto de partida. ¿Cómo podemos arreglarlo? Para arreglarlo primero, necesitamos simplemente agarrar el ícono sólido copiarlo, presionar Control C. Voy a seleccionar este fotograma y pegarlo aquí, presionar Control V o Comando V. Pero no queremos que sea visible en esta página. ¿Qué podemos hacer? Tenemos que hacerlo desaparecer de alguna manera. Si echas un vistazo a esta animación aquí, ves que nuestro ícono sólido se escala rápidamente y luego veremos este estado. Voy a seleccionar este icono sólido aquí. Voy a presionar K en mi teclado para seleccionar la herramienta de escala. Si vuelvo al inspector de diseño, verá que esta sección de escala aparece aquí. Voy a establecer la escala aquí en 0.01 para asegurarme de que este icono sólido no sea visible. Debes asegurarte de que nombres de tu capa sean los mismos en ambas páginas. Ves aquí tengo corazón sólido, aquí también tengo corazón sólido. Corazón delineado y corazón delineado. Eso es muy importante. De lo contrario, Figma no puede resolverlo. Ahora vamos a comprobarlo y ver cómo funciona. Voy a darle click, momento tan bueno. Tenemos nuestro icono sólido escalando así. Pero aquí tenemos algunos temas. Primero, es muy lento. Cuando se trata de microinteracciones, la velocidad importa. De lo contrario, en lugar de crear un buen elemento interactivo, vas a hacer una mala experiencia de usuario porque nadie quiere esperar a que este icono se anime lentamente. Debería ser rápido. Primero arreglemos la velocidad. Voy a seleccionar esto, ir a prototipo. Voy a hacer clic en mi interacción aquí y dejarme modificar la velocidad aquí a 100 milisegundos en lugar de 300 milisegundos. Vamos a intentarlo una vez más. Mucho, mucho mejor. Pero si le echas un vistazo a este ícono que ya te mostré, hay una diferencia entre este ícono y este que acabamos de crear. Si prestas suficiente atención, puedes ver que este icono aumenta y luego baja un poco para tener este efecto rebote. ¿Cómo podemos crear eso? Bueno, para crear eso, se puede decir que podemos seguir adelante y cambiar la velocidad aquí. En lugar de facilitar la salida. Se puede decir que podemos ponerla en hinchable. A ver si funciona. Ya ve el tema. Obtenemos nuestro efecto rebote. Sin embargo, como puedes ver, este efecto rebote se repite varias veces rápidamente. Eso no es lo que queremos. No quiero que se repita varias veces. Eso es lo que quiero lograr. Si hago clic en él, solo se escala hacia arriba, y escala hacia abajo. No podemos usar estos efectos de equilibrio realmente aquí. Voy a ponerlo de nuevo para que se relaje. Lo que podemos hacer es esto. Podríamos tener una tercera página aquí, un tercer estado. Voy a seleccionar este fotograma B, duplicarlo, presionar Control D o Comando D, y voy a llamarlo C. Necesitas asegurarte de que no hay conexión entre esta página y esta página C. Queremos ir de A a B. Entonces aquí en el cuadro B, voy a escalar este ícono sólido hacia arriba. Voy a seleccionar este ícono sólido, darle a K y solo escalarlo aquí, tal vez a 54 algo así. Entonces vamos a pasar de B a C rápidamente. Hacemos clic en él, nuestro icono sólido se escala hacia arriba y la dimensión se cambiará a 54 por 54. Entonces vamos de aquí a aquí, y se escala a 44 por 44 píxeles, nuestra dimensión inicial. Para que esto suceda correctamente, necesitamos tener un disparador de after delay. Para ello, voy a seleccionar todo este marco dentro de este icono. Voy a dirigirme al prototipo y luego conectar estos dos marcos juntos así como esto. Aquí por defecto, el disparador se establece en Al hacer clic. Voy a cambiarlo a después del retraso. Debe ser Smart animate, y la duración va a ser de 100 milisegundos. Ahora debería funcionar correctamente. Vamos a probarlo. Voy a hacer click en él. Aquí tenemos un problema. El problema es esto después del retraso. Tenemos que configurarlo en un milisegundo porque queremos pasar de este estado a este estado instantáneamente. No necesitamos tener ningún retraso en el medio. Vamos a intentarlo una vez más. Ahí vamos, pero sigue siendo demasiado lento, ¿ no lo cree? Vamos a arreglar eso. Voy a seleccionar este elemento de esquema aquí, dirigirme a interacciones, dar clic en él. Aquí tenemos 300 milisegundos. Voy a disminuirlo a 100 milisegundos. A ver si funciona bien. Ahora funciona bien. Pero quiero que funcione en ambos sentidos. Cuando hago clic en este icono sólido, quiero poder volver a mi punto de partida. Voy a seleccionar este sólido y solo necesitamos crear una conexión de C a A. Va a ser On click, Smart animate y 100 milisegundos. Creo que ya terminamos. Voy a hacer click en él. Ahí vamos. Funciona bien. Así es básicamente como puedes crear un botón de me gusta animado. Pero aquí está la cosa. Hicimos este icono interactivo. Pero, ¿cómo podemos reutilizar este elemento interactivo? Porque si quieres usar este enfoque, cada vez que queremos usar este ícono, necesitamos animarlo una y otra vez cada vez que queremos usarlo en nuestro proyecto, cual es muy tedioso y lo cual es muy tedioso y consume mucho tiempo y no tiene ningún sentido. En cambio, necesitamos encontrar una manera de hacerlo interactivo una vez y poder reutilizar ese elemento interactivo varias veces. Para ello, necesitamos usar algo llamado componentes interactivos. Si no sabes nada sobre componentes, varianza y componentes interactivos, no te preocupes. En el siguiente video, te voy a mostrar qué son las variantes y cómo puedes hacer que tus componentes sean interactivos. Te veré en la siguiente. 7. Variantes y componentes interactivos: [MÚSICA] Aquí estamos. Creé un nuevo archivo de diseño y voy a seguir adelante y crear un botón. Pero antes de crear nuestro botón, voy a mencionar que en realidad tenemos dos tipos diferentes de varianza. Tenemos varianza unidimensional y variantes bidimensionales. Vamos a comenzar con ejemplos de variantes unidimensionales. Entonces a medida que te acostumbres a las variantes hablaremos de las variantes más avanzadas y bidimensionales también. Para crear un botón, puede tender a crear un rectángulo, luego agregarle una etiqueta y darle estilo. Eso está bien. Sin embargo, hay una mejor manera de hacerlo, y eso es creando un marco. Primero, voy a seguir adelante y presionar T en mi teclado para seleccionar la herramienta Texto. Voy a crear una capa de texto aquí mismo. Déjame acercar y voy a escribir botón. Déjame ir a la sección de texto del lado derecho. Aquí voy a ajustar el peso a probablemente medio y una talla a 17 puntos y aquí puedo establecer la altura al 100 por ciento por ahora. Voy a cambiar el align para alinear medio. Ahora que nuestra etiqueta está lista, voy a agregar auto-layout para que sea receptiva. Para ello, voy a presionar Mayús y A en mi teclado. En cuanto haga eso, pondrá esta etiqueta en un marco. Como puedes ver aquí, dice Frame 1 y aquí tenemos este Frame 1 en la lista de la capa también. Bueno, en la sección de diseño automático del lado derecho, voy a cambiar la alineación a media izquierda. También aquí podemos ajustar el relleno horizontal, el acolchado vertical, y también el espaciado entre elementos. Bueno primero, déjame seguir adelante y agregar un campo a este marco. Voy a agregar un campo aquí y dejarme ajustar el color a algo así como púrpura. A lo mejor algo como esto debería funcionar, bonito. Entonces voy a cambiar el color de las capas de texto aquí. Voy a ponerla en blanco para tener un mejor contraste. Por último, voy a seleccionar mi fotograma y voy a aumentar aquí la cantidad de radio de esquina para que sea un poco redondeada, probablemente algo así como cuatro píxeles. Déjame cambiar el nombre de este marco a botón. Perfecto. Ahora sigamos adelante y ajustemos el acolchado aquí. Voy a establecer el relleno vertical a 16 píxeles y el relleno horizontal a 32 píxeles. Nuestro botón está listo y responde completamente. Puedo seguir adelante y ajustar la etiqueta. No obstante, voy a guardarlo como está por ahora. Ahora imagina que quieres crear diferentes estados de este botón y quieres mantener todo organizado. Para hacer eso para poder reutilizar este botón, primero, necesitamos convertirlo en un componente. Para ello, tenemos que seleccionarlo y podemos click en este ícono de Componente aquí, así como así. Ahora como se puede ver, el marco, este límite se volvió púrpura. Aquí puedes ver en la lista de capas, también tenemos este icono de cuatro diamantes, lo que indica que este es un componente ahora y puedes ir fácilmente a Activos y encontrar tus componentes locales. Podemos reutilizar instancias de este componente. Pero, ¿cómo podemos crear variantes? Bueno, hay muchas formas de crear variantes. Primero, puede crear diferentes componentes, nombrarlos y luego convertirlos en un conjunto de componentes. O simplemente puede seleccionar su primer componente aquí y simplemente hacer clic en este botón, Agregar variante justo en la barra de herramientas. Déjame seguir adelante y hacer eso. Tan pronto como hice clic en ese botón, se puede ver que este conjunto de componentes ha sido creado. Aquí tenemos este límite punteado que indica que se trata de un conjunto de componentes. Aquí en la lista de capas, puedes ver que el nombre de nuestro conjunto de componentes es botón. En el interior tenemos dos variantes. Tenemos default. Esta es nuestra variante base. Además, tenemos la Variante 2. Se ha duplicado para nosotros porque hicimos clic en ese botón aquí, Variant. Ahora podemos seguir adelante y ajustar el estilo de esta segunda variante. Pero antes de hacer eso, voy a explicarte cómo funcionan las variantes. Bueno un conjunto de componentes, si solo lo seleccionas, tiene diferentes propiedades. Si solo echas un vistazo al inspector adecuado, aquí mismo, puedes ver esta sección Propiedades, y aquí tenemos la Propiedad 1. Si quieres, puedes seguir adelante y cambiarle el nombre, y vamos a hacer eso para mantener todo organizado. Pero la forma en que funciona la varianza es que creas diferentes propiedades y luego estableces diferentes valores para esas propiedades. Supongamos que quieres crear diferentes estados de este botón. Default, hover, pulsado, deshabilitado, etc. El nombre de nuestra propiedad va a ser Estado. Ahora, ese es mi conjunto de componentes está seleccionado, voy a dirigirme a estas propiedades aquí. Ya tenemos este Inmueble 1. Figma ya lo creó para nosotros. Voy a hacer doble clic sobre él y voy a cambiarle el nombre a Estado. El nombre de la propiedad es estado. Si acabo de dar click sobre este icono aquí, Edit property puedes ver que el nombre de esta propiedad es state y tenemos dos valores dentro, por defecto aquí, el primero y Variant 2. Una propiedad puede tener múltiples valores, por ejemplo, default, hover, pulsado, deshabilitado, etc. Ahora, como puedes adivinar, tenemos que seguir adelante y seleccionar nuestra segunda variante. Aquí en vez de Variante 2, voy a cambiarle el nombre a Prensado, así como así. Voy a seguir adelante y ajustar su color. Voy a agregarle una capa superpuesta. La opacidad se establece en 20 por ciento. Eso está bien. Ahora tenemos dos variantes distintas. Pero, ¿y si quieres agregar más? Bueno, solo puedes seleccionar este conjunto de componentes y dar click en este botón más aquí. O puedes seleccionar una de estas variantes y presionar Comando D o Control D en tu teclado para duplicarlo. Eso depende de ti. Ahora tenemos Estado 3. Verás, voy a seleccionarlo y voy a ajustar su valor a Hover. Entonces déjame seguir adelante y cambiar el campo aquí. Voy a cambiar el color de esta capa superpuesta a blanco. Este va a ser nuestro estado hover. Voy a crear uno más. Voy a golpear Control D para duplicar. Aquí esta vez voy a crear una varianza deshabilitada. Voy a seleccionarlo. Permítanme seguir adelante y cambiar su valor a discapacitados. Entonces voy a seguir adelante y cambiar su color a probablemente gris claro, algo así debería funcionar. Ahora bien, si selecciono estos componentes establecidos, y si hago clic en este icono, se puede ver que este estado de propiedad tiene cuatro valores diferentes, default, pressed, hover y disabled. Pero, ¿cómo puedes utilizar estas variantes? Eso es muy sencillo. Al igual que usar un componente, simplemente puede ir a Activos. A partir de aquí, vas a crear una instancia de tu componente así como así. Aquí tenemos nuestro botón y en el lado derecho puedes ver que tenemos esta propiedad estatal, y aquí tenemos este menú desplegable. Podemos cambiarlo a presionado, podemos cambiarlo a flotar o deshabilitarlo. ¿Ves lo fácil que es crear variantes en Figma? Eso es increíble. Ese fue un ejemplo de variantes unidimensionales. Pero, ¿cómo se pueden crear variantes multidimensionales o variantes bidimensionales? Voy a seguir adelante y mover estos componentes establecidos hacia el lado izquierdo y voy a hacerlo un poco más grande. Ahora imaginemos que quieres crear una nueva versión de estos botones. Sin embargo, esta vez es posible que necesites agregarle un ícono. Lo que voy a hacer es esto. Voy a seleccionarlos a todos. Por supuesto, puedes hacerlo uno por uno, pero prefiero seleccionarlos a todos. Entonces los voy a duplicar, golpear Control D o Comando D, y simplemente moverlos aquí mismo. Ahora necesitamos un icono. Puedes usar el icono que quieras. Voy a seguir adelante y ejecutar el contenido real plug-in aquí. Déjame hacerlo rápido. Usando este plug-in, voy a agregar algunos iconos aquí a mi proyecto. Déjame ir a Icono, campo. Creo que este icono se ve bien. Voy a arrastrarlo y soltarlo aquí mismo. Voy a arrastrar y soltar otro icono para nuestro siguiente ejemplo. Déjame solo buscar un buen ícono. Busquemos el ícono home, éste, se ve muy bien. Genial. Ahora imaginemos que quieres agregar un ícono a este botón. Como hicimos este botón usando el diseño automático, podemos seleccionar fácilmente este marco y simplemente podemos arrastrarlo y soltarlo en nuestro botón. Pero voy a seguir adelante y duplicarlo primero porque voy a necesitar estos iconos para nuestro siguiente ejemplo, y después voy a arrastrarlo y soltarlo aquí. En cuanto lo haga, se puede ver que también se ha ajustado la altura de mis botones . Eso no es lo que quiero, solo quiero que este botón crezca horizontalmente. Para solucionar este problema, necesitamos seleccionar este botón y desde aquí voy a cambiar la opción de redimensionamiento vertical a altura fija. De esta manera, cuando agrego más componentes o más elementos a este botón, solo crece horizontalmente, no verticalmente, y eso es exactamente lo que necesito. Ahora bien, si lo acabo de arrastrar y soltar en este patrón, como pueden ver, la altura permanece igual, y hagamos lo mismo por estos botones. Voy a seleccionarlos todos, cambiar esta opción a altura fija. Ahora vamos a seleccionar este icono, cambiar su color a blanco, y también voy a seleccionar este botón y establecer este espaciado entre elementos a ocho píxeles. Puedo seleccionar todos estos botones y establecer este valor en ocho. Ahora voy a seleccionar este icono, copiarlo, presionar “Ctrl” “C” o “Comando” “C”. Selecciona este botón, mantén presionada la tecla “Shift” y selecciona estos dos. Después pulsa “Ctrl” “V” o “Comando” “V”. Sin embargo, necesitamos ajustar su posición. Mientras están seleccionados, voy a presionar la tecla de flecha izquierda en mi teclado para ponerlos en el otro lado de mi etiqueta y como pueden ver, mis botones están listos. Sin embargo, no hemos terminado. Necesitamos crear otra propiedad para estos componentes establecidos porque creamos la propiedad state ahora necesitamos crear otra propiedad para los iconos. ¿Cómo podemos hacer eso? Como mencioné antes, para poder crear una propiedad, primero hay que seleccionar su conjunto de componentes, y luego aquí, voy a hacer clic en este botón más, y aquí dice crear nueva variante de propiedad. Voy a dar click en esta opción de “Variante” y esta ventana aparece. Voy a nombrarlo con icono y luego por el valor, en lugar de nombrarlo por defecto o cualquier otra cosa, voy a nombrarlo true y luego crear esta propiedad. Te voy a explicar en un segundo lo que significa. Ahora que creamos esta nueva propiedad, tenemos que seguir adelante y seleccionar nuestra varianza, estos botones, y necesitamos establecer el valor correcto para esta nueva propiedad. Estos cuatro botones no tienen ningún icono. Voy a mantener presionada la tecla “Shift” y seleccionarlos todos, y configurarlo con el valor del icono en false. Para estos botones, ya están establecidos en true, pero aquí tenemos otro problema. Como puede ver, tan pronto como seleccione este botón para la propiedad estatal, el valor se establece en Estado8. Tenemos que configurarlo por defecto. Este tenemos que configurarlo a presionado. Este necesitamos configurarlo para que flote y finalmente, este para deshabilitado. Ahora déjame mostrarte cómo funcionan esos verdaderos valores falsos. esos se les llama valores booleanos, y la forma en que funcionan es así. Si selecciono esta instancia de este botón, ahora puedes ver que tengo dos propiedades. Tengo el estado, puedo configurarlo por defecto. Ahora tengo esto con propiedad de icono, y aquí en vez de un menú desplegable tengo este botón de alternar. La razón por la que tengo este botón de alternar es porque nombré el valor true y false. Figma entiende automáticamente que podrías necesitar un toggle para estos valores verdaderos y falsos, esos valores booleanos y eso es muy útil porque aquí simplemente puedo activarlo y apagarlo así, y funciona para todos estos estados. ¿Ves? Así es como se puede crear varianza multidimensional en Figma. Ahora déjame mostrarte otro ejemplo. Supongamos que quieres crear un botón de radio. De hecho, hagámoslo juntos. Voy a seguir adelante y crear un marco. Si presiono “A” en mi teclado puedo seleccionar la herramienta de marco y voy a mantener presionada la tecla “Mayús”, hacer clic izquierdo y arrastrar para crear un marco. Voy a establecer el tamaño de fotograma a 16 por 16 píxeles, así como así déjame acercarme, y luego voy a hacerlo completamente redondeado. Voy a aumentar el valor del radio de esquina y dejarme cambiarle el nombre a botón de radio. Ahora voy a agregarle un trazo y dejarme cambiar su color a nuestro morado. Esta va a ser la variante desmarcada. Voy a duplicarlo, seleccionarlo, presionar “Ctrl” “D” o “Comando” “D” para duplicar. Ahora necesito crear la versión comprobada, así que podría necesitar una elipse. Voy a sostener “Alt” y “Shift” para crear una elipse proporcionalmente, y dejarme solo alinearla justo en el centro, así como así. Voy a hacerlo un poco más grande y luego voy a cambiar su color a nuestro morado también. Te voy a mostrar ahora la otra forma de crear un conjunto de componentes. Déjame seguir adelante y seleccionar este botón de radio, y voy a renombrarlo aquí. Aquí tenemos botón de radio luego barra hacia adelante sin marcar. Para el otro, voy a escribir botón de radio hacia adelante barra diagonal marcada. Usando esta convención de nomenclatura, puede crear fácilmente diferentes componentes y luego convertirlos en un conjunto de componentes y Figma creará propiedades automáticamente para usted. Déjame mostrarte cómo funciona. Voy a seleccionar éste, convertirlo en un componente, éste también, convertirlo en un componente, entonces ahora tenemos dos componentes diferentes aquí. Ahora si los selecciono a ambos, aquí verán esta opción. Dice combinar como varianza. Si hago clic en él, mira lo que pasa, ahí está. Ahora tenemos un conjunto de componentes con dos variantes en su interior. El nombre de nuestro conjunto de componentes sería lo que escribimos antes de la barra, como recuerdas, escribimos botón de radio barra hacia adelante marcado y luego botón de radio barra hacia adelante sin marcar. Botón de radio va a ser el nombre de nuestro conjunto de componentes y lo que sea que escribamos después de la barra diagonal hacia adelante va a ser el valor de nuestra propiedad. No creamos ninguna propiedad, pero Figma lo hizo automáticamente. Si selecciono estos conjuntos de componentes puedes ver que tenemos Propiedad 1 y tenemos dos valores, marcados y desmarcados. Aquí simplemente puedo cambiarle el nombre a state y ahora puedo simplemente crear una instancia de este botón de radio y aquí tenemos dos estados diferentes, checked and unchecked. Eso es increíble, ¿no? Pero puedes preguntar, ¿podemos usar ese botón de alternar aquí también? Sí, si cambiamos los valores de nuestra propiedad a true y false, puedes obtener exactamente el mismo botón de alternar aquí también. Deja que te lo demuestre. Si selecciono este y configuro el valor de estado en false, y luego selecciono este y configuro el valor de estado en true, ahora puedo seleccionar esta instancia, y ahí está, obtenemos este botón de alternar. Ahora que entiendes cómo funcionan las variantes, voy a hablar de cuándo no debes usar variantes. Bueno, puedo ver que muchos diseñadores cometen este error de crear cientos de variantes con diferentes íconos. Bueno, supongamos que creas este botón con este icono, y luego decides tener diferentes variantes de este botón con 5, 10, 20 iconos diferentes. En ese caso no es buena idea usar variantes, porque en lugar de resolver un problema, estás creando un nuevo problema. De esta manera va a ser muy difícil organizarlo todo. En cambio, lo que puede hacer es utilizar una propiedad de componente porque tenemos propiedades de variante y también tenemos propiedades de componentes. Hablamos de propiedades variantes, creamos algunas aquí, como recuerdas, ahora hablemos de propiedades de componentes. Bueno, supongamos que quieres usar estos dos iconos. Podría ser tantos iconos como quieras, pero en este ejemplo, dos es suficiente. Voy a seleccionar esta. Déjame seguir adelante y cambiarle el nombre a icono/marca de verificación. Este, voy a renombrarlo a icon forward slash home. Ahora, voy a seleccionarlos a ambos, y voy a cambiar su color a blanco también. Entonces voy a convertirlos en un componente. Voy a seleccionar éste, convertirlo en un componente, éste también. Si voy a activos, ahora tengo este icono también, esta categoría de icono. Ahora voy a usar estos componentes dentro de mi botón. Voy a seguir adelante y quitar estas marcas de comprobación aquí de mis botones así como así. Déjame seleccionar uno de ellos, probablemente éste, duplicarlo para crear una instancia, y simplemente arrastrarlo y soltarlo dentro de nuestro botón. Ahora, voy a hacer doble clic sobre este icono, y voy a dirigirme a esta sección. Si simplemente hago clic en este botón aquí, esta ventana aparece y dice: “Crear propiedad de componente”. Voy a ponerle nombre icono. Aquí, por el valor, puedes ver que ya tenemos este menú desplegable. Cuenta con marca de verificación y hogar. Si hago clic en este botón “Crear propiedad”, entonces aquí verás estas etiquetas moradas. Dice icono. Ahora, mientras se selecciona este icono, voy a presionar “Control-C o comando C”, luego voy a seleccionar todos estos botones, mantener presionada la tecla Mayús para seleccionarlos simultáneamente, presionar “Control V o comando V”, y luego presionar la tecla de flecha izquierda en tu teclado para cambiar la posición de estas marcas de verificación. Déjame mostrarte cuál es la diferencia ahora. Si selecciono esta instancia de nuestro botón que ya creamos, aquí del lado derecho, tenemos otra propiedad. Esta es una propiedad componente. Si quiero cambiar el icono de este botón, simplemente puedo ajustarlo aquí a casa. Verá, no creé otras cuatro variantes dentro mi conjunto de componentes con este nuevo icono. Eso no tiene ningún sentido. Ten en cuenta este ejemplo cuando quieras crear un sistema de diseño enorme. Eso va a ser muy útil. Creaste estos diferentes conjuntos de este botón. Ahora, quieres animarlos. La forma en que solemos hacerlo es duplicando nuestra pantalla y ajustando nuestro botón y conectando esas pantallas juntas. Pero ese ya no es el caso porque tenemos esta increíble característica o Figma llamada componentes interactivos. Déjame mostrarte cómo funciona. Aquí dentro de nuestro conjunto de componentes, voy a seleccionar mi botón base, este. Entonces voy a ir a la pestaña Prototipo. A partir de aquí, voy a crear una conexión entre estos dos botones así como así. Aquí dentro de esta página de detalles de interacción, voy a configurar el disparador a on click porque esta es nuestra variante presionada. Como puedes ver, también tienes acceso a las propiedades que acabas de crear aquí. Eso es increíble, ¿no? Entonces vamos a animar, y voy a configurarlo en smart animate. Aquí, voy a configurarlo para que se facilite dentro y fuera atrás, 300 milisegundos está bien. Ahora, voy a crear otra interacción. Voy a conectar este botón base a nuestro botón hover. Esta vez voy a poner el gatillo en, mientras se cierne, porque este es nuestro estado de flotación, y la animación va a ser inteligente animar, y ya estamos listos para ir. Ahora, permítanme seleccionar este botón aquí. Voy a cambiar su estado a default. El icono va a ser marca de verificación. Ahora, sigamos adelante y veamos cómo funciona. Pero antes de hacer eso, para poder previsualizar este componente, primero, necesitamos ponerlo dentro de otro marco. Voy a presionar “A” en mi teclado, crear un marco, y simplemente ponerlo dentro, así como esto. Ahora, voy a seleccionar este botón y voy a quitar su icono porque aún no hicimos prototipos de estas variantes. Voy a probar este botón. Seleccionemos este marco ahora y presionemos el botón de reproducción aquí mismo. Ahora veamos qué pasa si coloco el cursor sobre este botón. Ya ves que tenemos este botón interactivo. Ahora que aprendiste sobre componentes interactivos y varianza, déjame mostrarte cómo puedes animar este ícono usando componentes interactivos en lugar de usar este enfoque, lo cual no es nada bueno. Voy a deshacerme de todos estos marcos. En cambio, sólo vamos a usar estos dos iconos aquí. Esto es lo que vamos a hacer. Voy a seleccionar este icono de esquema, y voy a dirigirme a mi barra de herramientas y simplemente hacer clic en este pequeño icono que dice “Crear componentes”. Ahora, tengo un componente. Si echas un vistazo a la lista de capas, verás que su icono cambió. También tenemos este color púrpura, lo que indica que ahora tenemos un componente. Si selecciono este componente y me dirijo a la barra de herramientas, verá que tenemos este nuevo icono con este icono más en el medio. Dice “Añadir variante”. Ahora, vamos a agregar una variante a este componente. Ahora, tenemos este conjunto de componentes. Nuestro nombre de componente es corazón, está bien. Tenemos una propiedad aquí. Tenemos propiedad 1, y el valor para eso está delineado. Entonces tenemos la propiedad 1 y el valor para eso es la variante 2. Voy a seguir adelante y renombrar estas propiedades y sus valores. Voy a empezar con éste. Si solo hago doble clic sobre el nombre de esta capa, voy a cambiar a estado igual a predeterminado. Para el siguiente, voy a escribir estado igual a presionado. Necesitamos una variante más, igual que lo que hacíamos antes. Voy a seleccionar éste, por ejemplo, y dar click en este pequeño icono. Alternativamente, puedes presionar “Control D” para duplicarlo. Voy a renombrar este estado aquí o aquí. No importa para completar. Ese va a ser nuestro destino. ¿Qué tenemos que hacer? Al igual que lo que hicimos antes usar tres marcos diferentes, vamos a ir de nuestro punto de partida al destino aquí. Voy a necesitar poner este ícono sólido dentro de todos ellos. Déjame solo arrastrarlo y asegurarme de que lo sueltas dentro de esta variante aquí y solo alinearla al centro. Se ha colocado aquí. Voy a presionar “Control C” para copiarlo, seleccionar esta variante presionada, y presionar “Control V” aquí para pegarlo dentro. Pero en este estado, necesitamos hacerlo un poco más grande. Voy a darle a “K” para seleccionar la herramienta de escala y simplemente hacerla mucho más grande, algo así. Vamos a pegarlo dentro de esta variante por defecto también. Voy a escalarlo. Si bien está seleccionado, simplemente escriba 0.01 aquí para que desaparezca. Ahora, si te dirijas a los activos, podrás encontrar este componente del corazón bajo este botón animado como aquí. Puedes empezar a usarlo. Para ello, solo necesitas tener un marco. Simplemente pulsa “A” y simplemente crea un marco así. Arrastre y suelte dentro. Pero aún no es interactivo. Si sigo adelante y selecciono este fotograma y presiono “Reproducir”, se puede ver que no es interactivo. Si solo hago clic en él, no pasa nada porque no hicimos ninguna conexión entre estos estados. Sigamos adelante y hagamos eso. Solo necesitamos seleccionar este valor por defecto, dirigirnos al prototipo, y solo necesitamos conectarlo a esta segunda variante, esta presionada. Asegúrate de tener el estado configurado para presionar. No lo conectes a este corazón, sólido, de lo contrario no funcionará correctamente. Aquí, necesitas tener estado, presionado y animado inteligente, 100 milisegundos. Eso está bien. Ahora, voy a seleccionar esta pulsada, crear una conexión entre estos dos. Ahora, aquí, tenemos estado completo. Eso está bien. Animado inteligente, 100 milisegundos. Pero el disparador debe cambiarse de al hacer clic a después del retraso, y el retraso debe establecerse en un milisegundo. Finalmente, necesitamos seleccionar este estado completo y simplemente conectarlo de nuevo a nuestro estado predeterminado. Debe ser al clic, por defecto, 100 milisegundos. Ahora bien, si sigues adelante e intentas previsualizarlo, debería funcionar bien. ¿Ves eso? A partir de ahora, siempre que utilices una instancia de este componente en cualquier parte de tu proyecto, éste será interactivo por defecto. Eso es todo por esta lección. Te veré en la siguiente. 8. Botones animados: [MÚSICA] En este video, vamos a crear un botón interactivo juntos. Aunque ya aprendiste a hacer tus botones interactivos en el video sobre componentes interactivos, realmente no nos sumergimos en crear un botón interactivo avanzado, como el que tenemos aquí. En el video sobre componentes interactivos, aprendiste a cambiar el estado de tu botón de forma predeterminada a pasar el cursor con solo cambiar el color de tu botón. Pero en este video lo vamos a llevar al siguiente nivel. Esto es lo que vamos a construir. Tan pronto como coloco el cursor sobre este botón, un círculo se escala para llenar el espacio disponible del agujero dentro de este botón, y también se debe cambiar el color del texto. Si hago clic en él, veo el estado presionado. Eso es exactamente lo que vamos a crear. Si vas a la página Botones Animados dentro del archivo del proyecto, puedes encontrar este botón. No usé el diseño automático para ello porque primero voy a mostrarte la forma más simple de crear un botón interactivo. Entonces te mostraré cómo puedes hacer un marco de diseño automático sea interactivo también. Primero veamos qué necesitamos. Si tan solo pongo el cursor sobre este botón, se puede ver que un círculo se escala rápidamente. Necesitamos un círculo en el estado predeterminado, pero no debería ser visible. Entonces en el estado de hover, necesitamos ese círculo para escalar, y llenar todo el espacio disponible dentro de este botón. Veamos cómo podemos hacer eso. Primero, voy a convertir a este grupo en un componente. Si simplemente hago clic en este botón de “Crear Componente” en la Barra de Herramientas, y luego voy a dar click en este botón más para agregarle una variante y básicamente crear un conjunto de componentes. Aquí tenemos una propiedad con dos valores diferentes. Voy a seguir adelante y renombrar esta Propiedad 1 Voy a simplemente cambiarle el nombre a Estado igual a Default. Entonces para el segundo, voy a tener Estado igual a Hover. Hasta el momento, tan bien. Necesitamos una varianza más para nuestros estados presionados, pero vamos a crearla en unos segundos. Primero, sigamos adelante y creamos ese círculo. Para ello, solo voy a crear un círculo perfecto fuera de este conjunto de componentes. Mantenga presionada la tecla Mayús para crear un círculo perfecto. Así como esto. Entonces voy a hacerlo blanco. Después en la lista de Capas, voy a arrastrarlo y soltarlo dentro de mi estado predeterminado. Así como esto. No lo podemos ver porque necesitamos moverlo aquí mismo. Como puede ver, este círculo está dentro de esta varianza. Sin embargo, no está enmascarado dentro de este botón. Eso no es lo que queremos. Queremos que esté enmascarado dentro de este botón. No necesitamos ver esta zona fuera de este botón. Para solucionar este problema, simplemente podemos seleccionar esta variante en la lista de la capa y dirigirnos al inspector de diseño. Como puedes ver aquí, tenemos una casilla de verificación que dice Contenido del clip. Si solo lo reviso, ahí vamos. Ahora tenemos este círculo enmascarado dentro de este botón. Eso es exactamente lo que necesitamos. Lo siguiente que tenemos que hacer es reducir drásticamente este círculo para que desaparezca, voy a presionar “K” en mi teclado para seleccionar la herramienta de escala. En el lado derecho aquí, voy a empezar a escribir 0.01. Golpea “Enter”. Como puedes ver, ya no es visible. Después voy a seleccionar esta capa Elipse 1, presionar “Control C o Comando C”. Seleccione este estado de libración, esta variante de desplazamiento, y péguelo allí, presione “Control V o Comando V”. Está justo ahí, pero no lo podemos ver. Ahora en este estado, voy a presionar “K” en mi teclado para seleccionar la herramienta de escala. Voy a escalarlo así así, hasta que ocupe hasta que ocupe todo el espacio disponible dentro de nuestro botón. Pero no olvides seleccionar tu varianza y marcar esta casilla de verificación de contenido de clip. Aquí tenemos un problema. Este círculo se coloca encima de nuestra capa de texto. Eso no es bueno. Voy a seguir adelante y aquí, voy a seleccionar este círculo y bajarlo y ponerlo debajo nuestra capa de textos en la lista de capas, lo mismo aquí también. Pero aún así no podemos ver nuestros textos y eso es porque nuestros textos aquí también son blancos. Ahora, en el estado hover, como pueden ver, nuestro texto debe ser gris oscuro. Yo sólo voy a ir a la sección de campo aquí y simplemente hacerla gris muy oscuro, así como así. Hasta el momento tan bueno. Pero ¿qué pasa con el estado presionado? Para el estado presionado, solo necesitamos tener una versión más oscura de nuestro estado hover. Para ello, sólo voy a seleccionar este estado de libración, presionar “Control D o Comando D” para duplicarlo. Entonces aquí voy a cambiar el valor de esta propiedad estatal a prensada. A continuación, voy a hacer doble clic sobre él para seleccionar nuestro círculo, esta capa Elipse 1, dirígete a la sección de campos, presiona este botón más para agregar una capa superpuesta a esta variante en particular. Aquí asegúrate de que este nuevo campo que se ha agregado a esta variante en particular sea negro y solo aumenta la opacidad al 30 por ciento. Ahora tenemos tres estados diferentes. Tenemos default, hover y pulsado. Lo único que queda es simplemente conectar estos tres estados diferentes. Voy a empezar con el valor por defecto. Voy a seleccionarlo, dirigirme a la pestaña Prototipo y simplemente conectar estos dos así como así. Aquí dice cambio a estado hover, smart animate. Si lo pongo a 100 milisegundos, sería demasiado rápido. Sería bastante difícil ver realmente la animación y ver qué está pasando. Creo que 200 milisegundos es un buen lugar para eso. Voy a guardarlo como está. A continuación, voy a seleccionar la variante hover conectarla a la variante presionada. Aquí de nuevo las mismas preferencias, y haga clic en cambiar a presionado, animate inteligente. Ahora para ver si este botón funciona como se esperaba o no, necesitamos simplemente crear un marco aquí. Voy a presionar “A” en mi teclado, crear un marco sencillo. Dirígete a la pestaña Activos, simplemente arrastra y suelta este componente en este marco. Voy a alinearlo al centro. Voy a seleccionar este fotograma, presionar el botón de reproducción para previsualizar esta interacción en particular. Voy a flotar sobre él. Como pueden ver, no pasa nada. Supongo que no cambiamos el gatillo para flotar aquí. Déjame seleccionar esto. Sí, debería cambiarse a mientras cierne y ahora debería funcionar bien. Fresco. Pero como el color de fondo es el blanco, no podemos verlo correctamente. Voy a seleccionar este marco y solo hacerlo negro. Ahora debería ser mucho más fácil para ti ver lo que está pasando. Hasta el momento, tan bien. Tenemos nuestro estado predeterminado, tenemos nuestro estado hover. Si solo hago clic en él, ahí vamos. También tenemos nuestro estado presionado. Pero aquí está la cosa, si simplemente dejo este botón así, si mi cursor deja este botón, no pasa nada. Eso no es lo que quiero. Cuando mi cursor sale de este botón, quiero que este botón vuelva al punto de partida, que es este estado predeterminado. Bueno, desafortunadamente, el disparador On click no funciona la misma manera que al pasar el mouse. Porque aquí, como pueden ver, si solo vuelvo al estado predeterminado por un segundo, se puede ver que funciona en ambos sentidos. Pero ese no es el caso con el disparador On click. Aquí hay un truco que uso para mis proyectos. Voy a conectar este estado presionado de nuevo al estado predeterminado. Voy a cambiar los tres aquí de On click to mouse leave. Ahora Figma sabe que cuando mi cursor sale de este elemento, debería cambiarse al estado predeterminado. A ver si funciona correctamente o no. Voy a flotar sobre él. Voy a pinchar sobre él. Bueno. Ahora voy a mover mi ratón así como así. Ahí vamos. Acabamos de regresar al estado predeterminado. Hasta el momento tan bueno. Aprendiste a crear esta interacción. Pero generalmente cuando queremos crear un botón, usamos el diseño automático, para hacerlo receptivo. No solemos usar un grupo y un rectángulo en su interior. Podría ser un poco desafiante crear tal interacción cuando tienes un diseño automático. Te voy a mostrar cómo puedes crear tal interacción cuando tienes un marco de diseño automático. Voy a crear este botón usando maquetación automática. Solo voy a crear una capa de texto aquí, y déjame escribir para empezar. Para agregarle diseño automático, voy a presionar “Mayús y A”. Déjame establecer el relleno a 16 en cuanto mi acolchado vertical y 32 en cuanto al acolchado horizontal. Voy a agregarle un relleno. Debería ser igual que este azul. Aquí solo tenemos una capa de texto y esto es solo un botón responsive. Ahora, permítanme simplemente cambiarle el nombre a botón y voy a convertirlo en un componente. Permítanme agregar una variante. Hasta el momento todo funcionó a la perfección. Pero ahora sigamos adelante y le agreguemos ese círculo. Simplemente voy a crear un círculo así como este y hacerlo blanco. Mira lo que pasa cuando trato de ponerlo dentro de una de estas variantes, tal vez esta por defecto. Mira lo que pasa. Verás, destruyó nuestro botón. Vamos a arreglar eso, no te preocupes. La razón por la que se comporta de esa manera es porque cuando tenemos un diseño automático o digamos un elemento responsive, cuando le agregamos algo más, trata de ocupar algo de espacio, y eso no es lo que queremos. No queremos que este círculo ocupe ningún espacio aquí. Queremos que flote. Para que esto suceda, solo necesitamos seleccionarlo aquí. Dirígete al inspector de diseño y verás este botón más aquí. Dice Posición Absoluta. Si hago clic en él, mira lo que pasa. Ahora bien, este círculo no está ocupando ningún espacio aquí, y eso es exactamente lo que necesitamos. No olvides seleccionar tu variante y marcar las marcas de verificación del contenido de este clip. Todo lo demás debe hacerse exactamente igual como acabamos de discutir. No voy a repetir todos los pasos. Eso es todo por este video, y te veré en el siguiente. 9. Switches animados: [MÚSICA] Bienvenido de nuevo. En este video, voy a mostrar cómo puedes hacer un interruptor interactivo así como este. Vamos a meternos en ello. Dirígete a la página de interruptores animados dentro del archivo de diseño. Aquí como pueden ver, ya diseñé dos interruptores, con dos estados diferentes. Es tan sencillo. Yo solo uso el rectángulo como para el fondo y un círculo aquí. También lo hice receptivo usando el diseño automático. Si selecciono este estado de apagado del interruptor, puede ver que la alineación está establecida a la izquierda. Si selecciono esta, la alineación se establece a la derecha. Pero lo importante es que el nombre de estos elementos, este círculo y este círculo sea el mismo para ambas capas. De lo contrario no va a funcionar. La otra diferencia es que para este círculo de aquí, usé un trazo y también cambié el color del fondo. Aquí para hacerlo interactivo, lo único que tenemos que hacer es esto. Solo necesitamos seleccionar estos dos interruptores y dirigirnos a la barra de herramientas, hacer clic en esta pequeña flecha y simplemente crear un conjunto de componentes así como ese. Dentro de nuestro conjunto de componentes, ahora tenemos dos variantes con una propiedad. Tenemos propiedad uno encendido y apagado. Déjame seguir adelante y renombrarles el nombre. Voy a renombrarlo a estado. Aquí tenemos estado apagado. Lo siguiente que tenemos que hacer es conectarlos. Voy a seleccionar el primero y dirigirme al prototipo, conectarlo al segundo y solo asegurarme de que el disparador esté configurado al hacer clic. Ya que usamos encendido y apagado aquí, también tenemos este interruptor aquí . Eso es increíble. Va a ser una animación inteligente y la voy a dejar como 200 milisegundos. Vamos a darle una oportunidad y si es necesario, podemos simplemente hacer algunos ajustes más adelante. Ahora voy a crear otra conexión vuelta al estado apagado. Voy a crear una nueva conexión. Vamos a darle una oportunidad. Voy a crear un marco. Voy a cambiar el color del fondo. También desde los activos aquí, voy a arrastrar y soltar este interruptor así como esto. Seleccionemos este marco. Pulsa play, y debería funcionar bien. Voy a hacer click en él. Ahí vamos. Ahora ya sabes cómo crear un switch interactivo también. Te veré en la siguiente. 10. Slider animado: En este video, vamos a crear un slider interactivo juntos, igual que lo que ves aquí. Como puedes ver, podemos interactuar fácilmente con este deslizador. En el lado derecho, ve este número el cual está conectado a nuestro deslizador, así como este. Empecemos y veamos cómo puedes crear uno. Por favor, siga adelante y busque esta página deslizante animada dentro del proyecto Figma. Aquí como pueden ver, creé dos deslizadores diferentes. Primero, déjame desglosarlo por ti. Aquí no he redondeado rectángulo. Está completamente redondeado como mi fondo, y además, si solo muevo esta elipse alrededor, ves que aquí tengo una capa duplicada de mi fondo, y simplemente disminuí su ancho a cinco. Esta capa es básicamente lo que vamos a animar para conseguir algo así. Entonces aquí tenemos dos rectángulos uno encima del otro. Pero este, que se llama deslizador, tiene un ancho mucho menor. Es tan sencillo. Cuando quieras crear este control deslizante, debes asegurarte de que este círculo esté perfectamente alineado con los otros elementos. De lo contrario, no va a funcionar. Para este segundo deslizador, lo único que se ha cambiado la posición de este círculo y también el ancho de esta capa deslizante se ha cambiado a 237 para llegar aquí al punto final. Pero también tenemos que tener un número aquí. Entonces, ¿cómo podemos crear eso? Déjame mostrarte cómo se hace. Primero, voy a seguir adelante y crear una capa de texto, presionar T y crear una capa de texto. Aquí, voy a tener valores diferentes. Voy a ir 0-10 a 20, todo el camino al 100. Esto es lo que voy a hacer. Voy a teclear cero. Voy a presionar Enter para crear una nueva línea. Entonces voy a teclear 10 y simplemente seguir haciendo eso. Voy a adelantar este proceso. Ahí vamos. Tenemos un 0, 10, 20 hasta el 100, y asegúrate de alinear tu texto para escribir aquí. Así que al igual que nuestro deslizador, necesitamos tener dos estados diferentes para este número también para esta capa de texto. Aquí, en nuestro primer deslizador, deberíamos ver cero. Aquí, deberíamos ver 100 y todo lo demás será animado por Figma automáticamente. Entonces para hacer eso, solo necesitamos convertir esta capa de texto en un marco, para poder enmascarar estos números. Voy a hacer clic derecho sobre él, y voy a hacer clic en la selección de fotogramas. Ahora, como puedes ver en la lista de capas, esta capa de texto está dentro de este Marco 1, y voy a renombrar este texto del Marco 2. A continuación, voy a disminuir la altura de este fotograma así como así, y para enmascarar este número, como ya saben, solo necesitamos revisar este contenido de clip marcas de verificación así como así. Ahora voy a alinear este marco con este deslizador, y lo voy a duplicar, presionar el control D, traerlo aquí abajo y alinearlo con este deslizador también. Asegúrate de tener el mismo margen entre el control deslizante en este texto. Aquí, si solo mantengo pulsada la tecla Alt en mi teclado o la tecla Opción, puedo ver que el margen está establecido en 12. Aquí necesito asegurarme de que también tengo 12. Son ocho, así que necesito moverlo hacia arriba, y ahora, puedo seleccionar estos dos, este deslizador y esta capa de texto, y presionar Control G para agruparlos y seleccionar estos dos también. Golpea Control G para agruparlos. Ahora, voy a extender estos grupos y voy a asegurarme de que mis capas tengan el mismo nombre en ambos grupos. Aquí tengo Slider 100, Slider 0. Voy a cambiarlo a slider para ambos grupos. No quiero encontrarme con problemas cuando creo conexiones. Entonces tenemos texto y texto, y todo lo demás se ve bien. Antes de convertir estos dos grupos en un conjunto de componentes, voy a seleccionar esta capa de texto dentro de este marco en particular aquí, y voy a moverla hacia arriba porque aquí necesitamos ver 100, no cero. Así puedes mantener pulsada la tecla Mayús y usar las teclas de flecha de tu teclado para moverlo hacia arriba. Así como así, algo así debería funcionar y ya estamos listos para irnos. Ahora voy a seleccionar estos dos grupos y simplemente crear un conjunto de componentes así como este y ahora podemos conectar estos dos. Esto es lo que debes tener en cuenta. Cuando quieras conectar estos dos, debes asegurarte de seleccionar este círculo aquí dentro de este deslizador. En mi caso, es Ellipse 1, lo contrario no funcionará. Asegúrate de seleccionar este elemento aquí, luego dirígete al prototipo, crea una conexión y conéctalo a este Grupo 2. El disparador debe cambiarse de y hacer clic a al arrastrar porque deberíamos poder arrastrar este elemento alrededor, animar inteligente y 300 milisegundos se ve bien. Voy a hacer lo mismo por este elemento de aquí, Ellipse uno aquí, y simplemente crear una conexión de regreso a nuestro primer grupo aquí, y arrastrar, y todo lo demás debería estar intacto. Ahora vamos a darle una oportunidad. Debería funcionar bien. Voy a crear un marco aquí. Hagamos que el fondo sea negro, así como así. Ve a Activos, arrastra y suelta estos componentes. Bueno. Sólo voy a seleccionar el marco y presionar Reproducir. Bien, veamos si funciona. Ahí vamos. Ves que todo funciona como se esperaba. Si querías parar en algún lugar por aquí, tal vez a 20 y luego a 40 o 60, etc., debes asegurarte de tener diferente varianza. Entonces, en lugar de cero y 100, es necesario tener algunas variantes entre estos dos valores. Tal vez puedas agregar dos variantes más e ir 0-30 y luego de 30-70, y 70-100, lo que necesites. Chicos, eso es todo por este video, y los veré en el siguiente. 11. Tarjeta de animación: [MÚSICA] Bienvenido de nuevo. Si vas a App Store, normalmente ves algunas tarjetas relacionadas con diferentes aplicaciones. Si tocas alguna de estas tarjetas, verás esta transición suave. Este límite de tarjetas se expande para llenar todo el ancho disponible de la pantalla y luego todos los elementos, incluyendo la imagen y las capas de texto, se mueven hacia arriba y reordenan todo el diseño de la pantalla. Cuando quieras cerrarlo, simplemente puedes arrastrarlo hacia abajo y se colapsará. En este video, te voy a mostrar cómo replicar exactamente la misma interacción en Figma. Vamos a sumergirnos. Aquí diseñé esta app y aquí tenemos algunas tarjetas. Cuando hago clic en él, mira lo que pasa. Verás aquí obtendremos exactamente la misma interacción. Cuando hago clic en él, se expande. Entonces el texto y la imagen aquí se mueven hacia arriba. Si hago clic en este icono de flecha izquierda, se colapsará. Además si solo la arrastro aquí abajo, simplemente puedo colapsarla por mí mismo. Es tan suave y fácil de crear. Empecemos. Aquí si vas a la página de la tarjeta animada, verás que preparé estas dos pantallas para ti. Aquí en la página principal, tenemos esta tarjeta, y dentro de este grupo de tarjetas, tenemos algunos elementos. Tenemos a este Grupo 2, que es este grupo textual. También tenemos esta capa de texto y luego tenemos nuestra forma y nuestra imagen y la sombra detrás de esta imagen. Lo único que hay que hacer aquí es tener exactamente las mismas capas en ambas páginas. Aquí en la página de detalles, también tengo el grupo de tarjetas, y dentro tengo este Grupo también. Pero elimino este texto de precio, y todo lo demás es exactamente lo mismo. Tengo Rectángulo 4, Rectángulo 3, Rectángulo 5. Es muy importante mantener intactos los nombres, lo contrario no funcionará y el resto será manejado por Figma. Ahora solo tenemos que seleccionar esta tarjeta, dirigirnos a la pestaña Prototipo y simplemente conectar estas dos pantallas. El disparador va a estar al hacer clic. Va a ser más inteligente animar. Voy a dejar la velocidad aquí para que se relaje por ahora, más tarde, tal vez tengamos que ajustarla. Entonces voy a seleccionar este botón aquí y simplemente conectarlo de nuevo a mi página principal. Nuevamente, deshaga clic en smart animate. Si solo presiono este botón Reproducir aquí para reproducir mi flujo, vamos a previsualizarlo y ver cómo funciona. Voy a dar click sobre esta tarjeta. Funciona bien. Pero para llevarlo al siguiente nivel, quiero agregarle este efecto rebote, así como esto. Es tan suave y tan satisfactorio. Para ello, solo necesitamos seleccionar esta tarjeta aquí mismo. Voy a dar click en esta interacción. En vez de facilitar la salida, voy a cambiarlo a rápido. Voy a hacer lo mismo por esta interacción. Voy a seleccionar este botón y cambiarlo a rápido. Vamos a intentarlo una vez más. Voy a hacer click en él. Ahí vamos. Se ve mucho mejor. Pero, ¿qué pasa con la interacción drag? Por el momento no funciona. Vamos a crearlo. Solo tenemos que seleccionar esta tarjeta aquí en la página de detalles. Voy a crear una conexión de vuelta a mi página principal. Pero esta vez el gatillo debería cambiarse a on drag. También debería ser rápido así que no necesitamos tocar nada más. Ahora debería funcionar bien. Fue bastante fácil, ¿no? Bien chicos, vamos a terminar este video y los veré en el siguiente. 12. Texto animado: ¿Alguna vez has querido crear una animación de texto de aspecto profesional en Figma? Si es así, elegiste el video correcto, porque en este video, te voy a mostrar cómo hacer esta animación de texto avanzada en Figma en tan solo cinco minutos. Empecemos. Para crear este efecto, necesitamos dos capas de texto diferentes. Necesitamos la capa de texto como nuestro texto estático, y necesitamos otra capa de texto como nuestro texto en movimiento. Voy a crear una capa de texto. Déjame escribir, gestionar tus proyectos así como así. Voy a hacerlo audaz, entonces voy a disminuir su ancho así y aquí vamos a poner nuestros textos en movimiento. Ahora voy a duplicar este texto, moverlo hacia el lado derecho y aquí voy a escribir más rápido así como esto. Esta vez podemos cambiar el tipo de este texto a auto width así. Déjame bajar este texto, solo alinearlo con tu otra capa de texto. A continuación, déjame seguir adelante y cambiar su color. Voy a tener un degradado para este texto. Permítanme crear rápidamente un degradado. Voy a usar el morado y este morado claro, así como así. No te preocupes por el color. Siempre se puede ajustar más tarde. Algo como esto debería funcionar muy bien. Ahora voy a hacer doble clic sobre este texto. Voy a presionar Enter para crear una nueva línea y escribamos nuestra segunda palabra. Escribamos con facilidad. Presiona Enter y escribamos de manera eficiente. Ahora necesitamos crear de alguna manera una máscara aquí. Podemos usar una máscara, pero en cambio, voy a mostrarte un buen truco. En lugar de usar una máscara, podemos simplemente hacer clic derecho sobre este texto y podemos hacer clic en la selección de fotogramas. Básicamente vamos a poner este texto dentro de un marco. Ya ves ahora tenemos el marco uno aquí. Entonces voy a disminuir la altura de este fotograma así como así y solo marcar esta casilla de verificación que dice Contenido del Clip aquí mismo. Básicamente enmascaramos las otras dos palabras aquí, y eso es exactamente lo que necesitamos. Ahora, voy a seleccionar estos dos textos. Básicamente tenemos un marco y una capa de texto. Haga clic con el botón derecho aquí y otra vez, haga clic en esta selección de marco para crear otro marco. Cambiémosle el nombre para enmarcar uno. Ahora podemos duplicarlo. Golpea Control D o Comando D, una vez más duplicarlo. A continuación, lo que tenemos que hacer es esto. Necesitamos hacer doble clic en nuestra capa de textos dentro este marco que creamos y solo necesitamos moverlo hacia arriba. Puedo usar las teclas de flecha de mi teclado para mover este texto hacia arriba así como así. Si quieres alinearla perfectamente con esta capa de texto, puedes simplemente ponerla fuera este marco y alinearla con la línea base de este otro texto y volver a colocarla dentro, así como así. Hagamos lo mismo con los otros textos. Voy a seleccionarlo y moverlo hacia arriba así. Déjame alinearlo rápidamente. Está perfectamente alineado y lo voy a poner dentro de este marco. Muy bien hasta ahora tan bien. Ahora necesitamos seleccionar estos tres marcos. Tenemos que dirigirnos a la barra de herramientas y hacer clic en esta pequeña flecha. Este menú desplegable se abre y necesitamos hacer clic en crear conjunto de componentes. En cuanto haga eso, se creará este conjunto de componentes y en su interior tenemos nuestras variantes. Si no sabes qué son las variantes, asegúrate de revisar mi video sobre variantes. Puedes encontrar el enlace en la esquina superior derecha. Pero por ahora solo necesitamos dirigirnos a la pestaña Prototipo aquí, y necesitamos hacerlos interactivos. Necesitamos crear una interacción aquí. ¿Cómo podemos hacer eso? Es muy sencillo. Voy a seleccionar el primero. Voy a hacer click izquierdo sobre este botón más e intentar conectarlo a la siguiente variante aquí mismo. Este menú de detalles de interacción aparece. A partir de aquí voy a cambiar el gatillo a después del retraso. La duración se establece en 800 milisegundos. Está bien. Voy a cambiar el tipo de animación de instantánea a animación inteligente. Aquí lo voy a configurar para que se facilite dentro y fuera atrás. Puedes elegir la opción que quieras aquí. Puedes elegir por ejemplo hinchable rápido, Depende totalmente de ti, pero realmente prefiero este. Se ve muy bien. Déjame ajustar la duración a tal vez 600 milisegundos. Ahora necesitamos repetir este proceso para las otras variantes, voy a seleccionar este marco ahora. Voy a crear una nueva interacción así como esta. Aquí cambia el disparador a después del retraso. No cambies esta duración aquí porque queremos que sean los mismos. No necesitamos cambiar nada más. Por último, voy a seleccionar este, el último, y conectarlo a nuestro primer frame. Así como esto, cambia el gatillo a después retraso y el resto está bien, y básicamente terminamos. Ahora déjame mostrarte cómo puedes usarlo. Voy a ir a Activos. Desde aquí voy a arrastrar y soltar mi componente directamente en mi diseño. En caso de que quiera modificar los colores aquí, simplemente puede dirigirse a los colores de selección aquí y ajustar el color como desee. También se puede modificar el degradado. Déjame seguir adelante y cambiar el gradiente rápidamente. mí me gusta mucho este. Ahora vamos a darle una oportunidad y ver cómo se ve. Voy a seleccionar mi marco y previsualizarlo. Ahí vamos. Aquí está nuestra hermosa y suave animación. 13. Menú desplegable interactivo: [MÚSICA] Bienvenido de nuevo. En este video, te voy a mostrar cómo crear este menú desplegable interactivo. Aquí, en cuanto haga clic en este menú desplegable, se abre y veremos estas opciones, nos permite seleccionar entre estos idiomas. Necesitamos tener una bandera y también una capa de texto simple, y como puedes ver, tenemos diferentes estados de estas opciones. Tenemos el estado hover y también podemos seleccionar estos idiomas. Si solo hago clic en este inglés, ahí vamos, nuestro texto de marcador de posición ha sido cambiado y obtenemos esta bandera aquí también. Es totalmente interactivo, y es bastante útil aprender cómo puedes crear un componente interactivo tan complejo dentro de Figma. Si estás listo, vamos a sumergirnos. Para este elemento, decidí mostrarte cómo crearlo desde cero. Porque si no entiendes cómo se crea este menú desplegable, te resultaría bastante difícil entender cómo lo hacemos interactivo. Vamos a crearlo desde cero. Pero si solo vas a la página del menú desplegable interactivo en el proyecto Figma, verás que ya preparé estas banderas para ti. Tenemos cuatro banderas diferentes con diferentes nombres. El primer paso es convertir estas banderas en componentes. Sólo voy a seleccionarlos todos y voy a dirigirme a la barra de herramientas aquí, y voy a hacer clic en esta flecha hacia abajo para abrir este menú desplegable. Aquí, voy a dar click en Crear Múltiples Componentes, así como así. Ahora cada una de estas banderas es un componente. Eso es bueno. El siguiente paso es crear el ítem. Lo que ves aquí, cada una de estas opciones se llama elemento dentro de nuestro menú desplegable. Para eso, solo necesitamos tener una capa de texto simple, una bandera junto a ella, y debe ser rectangular. Voy a presionar “T” en mi teclado y el tamaño de la fuente podría ser de 18 puntos, y voy a escribir inglés. A continuación, voy a agregarle otro diseño para que sea receptivo. Presiona turno y A, y como puedes ver ahora se ha cambiado a Frame 1, así que ahora responde. Necesitamos un color de fondo para eso, así que voy a agregarle un relleno también. Podría ser blanco o podría ser un tinte muy claro de azul o algo más. Voy a ir con azul. Permítanme simplemente cambiar el color aquí a un tinte muy claro de azul, así como este, y nuestros textos deberían ser de un tono muy oscuro de este azul. Voy a elegir el mismo color aquí, y voy a hacerlo bastante oscuro, así como esto. Déjame seleccionar este marco y voy a llamarlo ítem. ¿Qué más necesitamos? Aquí necesitamos una bandera, así que vamos a usar componentes anidados. Si voy a la pestaña Activos aquí y me dirijo al Menú Desplegable Animado, veo esta categoría de bandera y veremos todos nuestros componentes de bandera. Solo voy a arrastrar y soltar esta bandera inglesa en mi artículo así. Como puede ver, nuestro artículo responde porque le agregamos otro diseño. Ahora solo necesitamos cambiar la alineación. Voy a seleccionar este marco de ítem, y voy a cambiar la alineación aquí a izquierda y centro, así como esto. El margen entre estos elementos podría disminuir. Voy a disminuirlo a cuatro píxeles, así como así. Pero voy a cambiar aquí también el relleno horizontal y vertical. Voy a poner el relleno horizontal a 16 y el relleno vertical a 16 también, así como esto. Pero aquí está la cosa. Voy a seleccionar este ítem y voy a aumentar un poco su ancho. Algo como esto debería funcionar, tal vez 170. No te preocupes por la dimensión porque vamos a cambiar eso más adelante. Por ahora, solo quiero tener un artículo de muestra aquí. Bueno. Ahora que nuestro artículo está listo, voy a convertirlo en un componente. Voy a dar click sobre este icono aquí. Ahí vamos. Ahora es un componente de elemento, y ahora es el momento de agregar diferentes estados a este componente. Para eso, necesitamos una variante. Si bien está seleccionado, voy a dar click sobre este pequeño icono aquí para agregarle una variante. Necesitamos tener una propiedad en nuestro conjunto de componentes y se va a llamar estado. Si desea cambiar el nombre de la propiedad, simplemente puede seleccionar todo el conjunto de componentes y dirigirse a la sección Propiedades y hacer doble clic en su nombre. Aquí el primero va a estar por defecto. No necesitamos cambiar eso. El segundo va a ser hover, así que voy a escribir hover aquí, y para este estado hover, voy a modificar un poco el color. Voy a agregarle otro campo, y voy a cambiar el color a este azul claro, y hacerlo un poco más saturado así como esto. Hasta el momento, tan bien. Ahora lo voy a duplicar, golpear Control D o Comando D y este va a ser nuestro estado seleccionado. Porque aquí, cuando abrimos este menú desplegable, necesitamos tener el estado predeterminado. Como puede ver, el italiano es ahora el estado predeterminado. Si coloco el cursor sobre él, veremos el estado estacionario, y si hago clic en él aquí, ahora tenemos el estado seleccionado. Para eso, voy a cambiar su valor aquí para seleccionarlo y voy a cambiar este nuevo campo que acabamos de agregar a este estado estacionario. Sólo voy a hacerlo un poco más saturado, así como esto. La otra cosa que podemos hacer es seleccionar este texto y simplemente cambiar su peso de regular a medio para que podamos distinguir fácilmente entre estos diferentes estados. Pero no hemos terminado porque una vez que tenemos este estado seleccionado, necesitamos tener un estado estacionario para también necesitamos tener un estado estacionario para este estado seleccionado. Sé que suena complicado, pero aquí está la cosa. Tenemos un estado de flotación para estos estados predeterminados. Pero también necesitamos tener un estado de hover para este estado seleccionado. Verás cuando coloco el cursor sobre este estado seleccionado, se vuelve un poco más oscuro, solo voy a seleccionar este, duplicarlo, y voy a cambiar su valor aquí a seleccionado hover. Lo único que tenemos que hacer es cambiar un poco su color aquí. Algo como esto debería funcionar. Hasta el momento tan bueno. Tenemos nuestro artículo con diferentes estados y ahora podemos pasar al siguiente paso que es crear una lista. Necesitamos crear esta lista aquí. Para eso, solo necesitamos usar este componente de ítem. Si voy a Activos, aquí puedo buscar el componente item y lo voy a arrastrar y soltar aquí mismo. Para la lista, voy a duplicar este ítem, moverlo hacia abajo, y asegurarme de que no haya margen entre estos dos elementos. Voy a duplicarlo dos veces, así que en total, necesitamos conseguir cuatro artículos diferentes, así como esto. Ahora vamos a modificar el contenido de cada ítem, por ejemplo, el segundo va a ser italiano y como convertimos las banderas en componentes, simplemente puedo seleccionar esta instancia, dirigirme al inspector de diseño, y usando este menú desplegable, puedo cambiarlo a italiano así. El siguiente va a ser polaco y voy a cambiar la bandera también a Polonia así así. A continuación, necesitamos tener español, y voy a cambiar la bandera a España también, así como esto. Ahora tenemos cuatro ítems diferentes y voy a hacer que esta lista sea receptiva también. Voy a seleccionarlos todos y voy a agregarles auto-layout. Voy a darle turno y A. Ahí vamos, y vamos a cambiar el nombre de este marco a la lista. Pero nuestra lista no responde. Ves aquí tenemos este problema si trato de modificar el ancho aquí, no pasa nada, y eso es un problema porque necesitamos asegurarnos de que nuestra lista sea responsive. Para solucionarlo, solo necesitamos seleccionar los elementos dentro de nuestra lista y necesitamos cambiar la opción de cambio de tamaño aquí. Si me dirijo al Inspector de diseño y abro este menú desplegable por defecto, está configurado para fijar el ancho. Voy a configurarlo para que llene el contenedor. Ahora bien, si selecciono mi lista aquí, puedes ver que es totalmente receptiva. El siguiente paso es convertir toda esta lista en un componente también. Voy a dar click en este botón Crear Componente aquí para convertirlo en un componente y nuestros elementos primarios están listos. ¿Qué más necesitamos? Para este menú desplegable, necesitamos tener este menú también con este texto marcador de posición, dice seleccionar idioma, y luego necesitamos tener este icono de flecha hacia abajo. Vamos a crear uno. Sólo voy a presionar “T” en mi teclado y voy a empezar a escribir seleccionar idioma. Déjame cambiar su color a otra cosa , tal vez este azul. Entonces al igual que estos artículos, voy a agregarle otro diseño. Golpea “Shift y A”. Aquí tenemos un marco. Cambiémosle el nombre a menú, y este menú no necesita tener una sensación. En cambio, voy a agregarle un trazo. Sólo tienes que agregarle un trazo así, y puedo hacerlo un poco redondeado también. A lo mejor puedo aumentar el radio de la esquina a algo así como 16 píxeles. Voy a cambiar el color del trazo al mismo azul. ¿Qué más necesitamos? También necesitamos esta flecha hacia abajo. Para eso, puedo usar un plugin. Aquí tenemos a Iconsax. Si solo lo ejecuto y busco flecha. Aquí, voy a arrastrar y soltar este icono de flecha en mi proyecto. Ahí vamos y ahora voy a arrastrarlo y soltarlo dentro de mi menú, así como esto. Pero es demasiado grande para este menú. Voy a hacerlo un poco más pequeño. Voy a presionar “K” en mi teclado para seleccionar la herramienta de escala e intentar disminuir su ancho y alto a probablemente 18 píxeles. Creo que 18 se ve bien. A continuación, voy a cambiar su alineación, así que voy a seleccionar este menú y cambiar la alineación al centro izquierdo y en cuanto al relleno, voy a establecer el relleno vertical a 16, porque aquí para estos elementos también usamos 16, y el relleno horizontal a 16 también. Déjame cambiar el color de este icono al mismo azul. Ahí vamos. Pero aquí está la cosa, este menú no responde, así que tenemos que arreglarlo. Para solucionar este problema, solo voy a seleccionar este menú, dirígete a la otra sección de diseño. Haga clic en este pequeño icono, configuración avanzada de diseño, y aquí como puede ver, el modo de espaciado está configurado en Empacado. Voy a cambiarlo al espacio entre, así como esto. Ahora nuestro menú responde. ¿Cuál es el siguiente paso? Bueno, el siguiente paso es agregar una bandera a esto también. Pero, ¿por qué? Porque aquí no tenemos bandera. Sí, no tenemos una bandera aquí para este texto de marcador de posición. Pero en cuanto seleccionamos una de estas opciones, como puedes ver, aparece esta bandera. Lo que tenemos que hacer es esto, solo voy a ir a assets, y voy a arrastrar y soltar una de estas banderas en este menú. Entonces como voy a disminuir el margen entre estos dos ítems, voy a seleccionar esta bandera, mantener pulsada la tecla Mayús, seleccionar este texto, y presionar Mayús y A. Ahora mismo podemos especificar este margen aquí sin afectar el margen entre estos elementos. Voy a ponerla en cuatro, porque aquí también usamos cuatro. Tenemos que mantener todo consistente. Pero aquí está la cosa, para este texto de marcador de posición, no necesitamos esta bandera. Por ahora, sólo voy a seleccionar esta bandera así como ésta, y esconderla. Está ahí cuando lo necesitamos, pero por el momento, tenemos que ocultarlo. El siguiente paso es convertir este menú en un componente. Voy a renombrar este menú a menú desplegable, así como así, y voy a convertirlo en un componente. Para ello, necesitamos tener dos variantes distintas. Dos variantes principales, cerrada y abierta. Voy a agregarle otra variante, así como esta. Para estas variantes, necesitamos tener dos propiedades. Voy a seleccionar este conjunto de componentes del menú desplegable, dirigirme a la sección Propiedades y cambiar la primera propiedad a estado. Necesitamos una propiedad más aquí, así que voy a hacer clic en este botón “Plus” y dar clic en “Variante”. Voy a ponerle nombre marcador de posición. Crea propiedad, por lo que en total tenemos dos propiedades, state y placeholder. Para el primero, voy a establecer el estado en cerrado, y el texto del marcador de posición debe establecerse como predeterminado. Para este, se debe abrir el estado y el marcador de posición también debe ser predeterminado, porque necesitamos cambiarlo posteriormente. ¿Qué más necesitamos para este estado abierto? Tenemos que rotar este icono aquí 180 grados, así que lo voy a seleccionar, y aquí voy a establecer el valor de rotación a 180, así como esto. También necesitamos colocar esta lista dentro de esta variante abierta. Voy a ir a los activos, y desde aquí, voy a arrastrar y soltar esta lista aquí mismo. Dentro de nuestra lista de capas, voy a asegurarme de que pongan esta instancia de lista dentro mi variante abierta, así como así. No se ve bien. Eso es porque está ocupando espacio aquí. Como recordarás, cuando no quieres que un elemento ocupe ningún espacio, solo puedes seleccionarlo y hacer clic en esta posición absoluta del icono más. Ahora ya no ocupa espacio alguno, y podemos precisar su posición. Permítanme agrandar este conjunto de componentes. Voy a seleccionar esta lista usando las teclas de flecha, voy a cambiar su posición. Tenemos que asegurarnos de que esté perfectamente alineado con este menú desplegable. Puedo seleccionar este elemento de la lista, mantener presionada la tecla Alt en mi teclado, y como puede ver, el margen izquierdo se establece en 21. Voy a moverlo hacia la izquierda para obtener un margen izquierdo de 20 píxeles. Aquí también tenemos un margen izquierdo de 20 píxeles. A continuación, necesitamos ajustar su ancho, así que voy a seleccionar esta lista y cambiar su ancho a 250 también. Así como esto. Ahora, como tenemos esquinas redondeadas para este menú, podemos seguir adelante y modificar el estilo de nuestra lista también. Para estos elementos, utilicé un valor de radio de esquina de 16 píxeles. También necesitamos usar el mismo valor para esta lista. ¿Qué necesitamos? Necesitamos que estas esquinas estén redondeadas. Voy a seleccionar este elemento superior dentro de esta lista. Tenemos que tener acceso a esquinas individuales, así que voy a dar click en este pequeño icono que dice esquinas independientes. Aquí necesitamos modificar estos dos valores. Voy a ponerlos en 16, este 16 también. Luego tenemos que seleccionar este elemento inferior, dirigirnos a esquinas independientes. Esta vez necesitamos modificar estos dos valores. Vamos a ponerlos a 16, y ahí vamos. Ahora tenemos un estilo consistente. Ahora tenemos dos variantes, así podemos cerrar y abrir este menú desplegable. Pero, ¿y si hago clic en una de estas opciones? Si selecciono una de estas opciones, este texto de marcador de posición debería cambiarse a la opción que seleccioné, y también debería aparecer la bandera. Lo que voy a hacer es esto, voy a seleccionar esta opción cerrada. Voy a golpear Control D o Comando D para duplicarlo. Se coloca justo aquí, pero no te preocupes por ello. Vamos a moverlo, así que está justo aquí. Voy a seleccionarlo, y usando las teclas de flecha, voy a moverlo hacia el lado derecho. Permítanme agrandar dramáticamente este conjunto de componentes, necesitamos más espacio, y lo voy a colocar aquí mismo. En total, necesitamos tener cuatro opciones. Necesitamos tener uno para inglés, uno para italiano, uno para polaco y otro para español. Aquí voy a hacer doble clic sobre este texto, y lo voy a cambiar a inglés, y también necesito mostrar esta bandera. Voy a cambiar este valor de marcador a inglés, así como esto. A continuación, voy a duplicar esto para obtener cuatro ítems diferentes, y voy a modificar sus textos uno por uno. El segundo va a ser el italiano. Obviamente también se debe cambiar la bandera. El tercero va a ser polaco, déjame cambiar la bandera también. El último va a ser español, y aquí voy a cambiar la bandera a España. El siguiente paso es crear nuestras interacciones. Voy a seleccionar este menú desplegable cerrado. Voy a dirigirme al prototipo, y sólo voy a conectarlo a este estado abierto. Debería ser On click, y la animación va a ser Smart Animate. A continuación, voy a seleccionar este y conectarlo de nuevo a nuestro estado cerrado. No necesitamos cambiar ninguna de estas opciones. Pero, ¿qué pasa con estos? Voy a seleccionar este artículo en inglés y conectarlo a esta variante inglesa. Voy a hacer lo mismo por todas estas opciones, una por una, y una más. Ya casi terminamos, pero hay una cosa más por hacer. Si acabo de abrir este menú desplegable, se ve cuando se selecciona una opción, cuando la abro, sigo viendo esta opción seleccionada. Eso es exactamente lo que quiero. No quiero que vuelva al estado predeterminado. Siempre que seleccione inglés, por ejemplo, y lo abro, el inglés debe ser seleccionado por defecto. Para eso, necesitamos seleccionar estas variantes, mantener presionada la tecla Mayús para seleccionarlas todas. Duplicarlos, golpear Control D o Comando D, moverlos hacia abajo. Entonces tenemos que seleccionar esta lista, copiarla, presionar control C o Comando C, y necesitamos pegarla dentro de estas variantes. Voy a seleccionar inglés, golpear Control V o Comando V, también italiano, polaco y español. Lo que tenemos que hacer es cambiar el estado de estas opciones. Por ejemplo para este inglés, voy a seleccionarlo, dirigirme al diseño, y aquí voy a cambiar el estado de predeterminado a seleccionado. Voy a hacer lo mismo por el italiano aquí, voy a cambiarlo a seleccionado. Para el polaco, cambiémoslo a seleccionado. Por último, para el español, voy a cambiarlo a seleccionado. El último paso es conectar estas variantes también. Al igual que lo que hicimos con estas dos opciones del menú desplegable, voy a hacer lo mismo por esto. Voy a seleccionar éste, dirigirme al prototipo, conectarlo a esta variante abierta. Simplemente haz lo mismo para este, conéctelo de nuevo al inglés. Voy a hacerlo por todas estas opciones, porque debería funcionar en ambos sentidos. Ahí vamos. Ahora que terminamos, nuestro menú desplegable interactivo debería funcionar perfectamente. Vamos a darle una oportunidad y ver si funciona como se esperaba. Voy a crear un marco aquí, presionar A y crear un marco de tamaño personalizado. Entonces voy a ir a bienes. Desde aquí, sólo voy a arrastrar y soltar este menú desplegable. Vamos a alinearlo al centro, y voy a seleccionar este fotograma, pulsa play. Ahora voy a dar click sobre él. Ahí vamos. Nuestro menú desplegable se abre, pero aquí tenemos un problema. Como pueden ver, cuando cierro el cursor sobre estas opciones, no pasa nada. Eso es porque no conectamos estos estados dentro de este conjunto de componentes de ítem. Hagámoslo rápido. Voy a seleccionar este valor por defecto, ir al prototipo, conectarlo para hover. Debería ser Mientras se cierne y también Smart Animate. Bueno. Para el siguiente, voy a seleccionarlo, conectarlo a seleccionado. Debe ser On click, Smart Animate. Entonces para esta opción seleccionada hover, voy a seleccionar esta, conectarla así así, y debería ser Mientras se cierne. Ahora debería funcionar. Vamos a abrir este menú desplegable. Voy a pasar el cursor sobre estos artículos. Como puedes ver, funciona perfectamente. Voy a seleccionar inglés ahora. Ahí vamos. Cuando abro este menú desplegable, este inglés se selecciona por defecto. Pero aquí tenemos otro tema. Cuando selecciono una opción, este icono no gira. Eso es porque aquí se nos olvidó rotar estos íconos. Déjame seleccionarlos todos, solo mantén presionada la tecla Mayús y haz doble clic en estos iconos. Ve a Diseño, y aquí los voy a rotar 180 grados. Ahora bien, todo debería funcionar bien. Vamos a refrescar la página. Voy a abrirla. Voy a ponérselo a italiano, y ahí vamos. Todo funciona como se esperaba. Bien chicos, eso es todo por este video. Espero que lo hayas disfrutado, y te veré en la siguiente. 14. Notificación animada: En este video, te voy a mostrar cómo crear una notificación animada en Figma. Voy a poder interactuar con él. Si solo lo arrastro hacia el lado izquierdo, como pueden ver, aparece este botón de borrar y si hago clic en este botón de borrar, se habrá ido. Veamos cómo podemos crear un elemento tan interactivo. Dentro del proyecto Figma, busque la página animada de notificaciones. Aquí como pueden ver, ya preparé esta página de detalles para usted y esta tarjeta de notificación, y esta tarjeta de botón claro. Así es como debería funcionar. Una vez que previsualicemos esta página de detalles después de tal vez tres segundos, esta tarjeta de notificación debería deslizarse hacia adentro , y luego cuando la arrastre hacia el lado izquierdo, debería aparecer este botón de borrar y también debería ser interactivo. ¿Qué tenemos que hacer? En primer lugar, voy a seleccionar esta tarjeta de notificación aquí. Como pueden ver, es un frame responsive, pero lo voy a poner dentro de otro frame. El motivo es como nuestro punto de partida, necesitamos hacer desaparecer esta tarjeta de notificación. Necesitamos enmascararlo de alguna manera y para enmascararlo adecuadamente, necesitamos tener un marco también. Voy a hacer clic derecho sobre él, y voy a hacer clic en la selección de fotogramas. Cambiémosle el nombre a notificación. Ahí vamos. A continuación, voy a convertirlo en un componente como de costumbre, y también necesitamos algunas variantes. Pero antes de crear una varianza, voy a modificar la altura de este frame porque como dije, en nuestro punto de partida, no deberíamos poder ver en absoluto esta notificación. Antes de crear la varianza, voy a aumentar la altura de este marco, algo así. Debería funcionar y luego voy a agregarle una variante así como esta. Aquí tenemos dos variantes. Para este componente, necesitamos tener dos propiedades diferentes. Necesitamos tener la propiedad visible y la propiedad clara. ¿Por qué necesitamos estas dos propiedades? Entonces como dije antes, esta tarjeta de notificación no debería ser visible y debería deslizarse después de unos segundos. Como nuestro punto de partida, necesitamos ocultarlo. Por eso necesitamos la propiedad visible y la propiedad clear es para cuando necesitamos hacer que este botón aparezca o desaparezca. Sigamos adelante y creamos estas propiedades. Voy a seleccionar este conjunto de componentes de notificación y voy a dirigirme a la sección de propiedades aquí en el inspector de diseño. Aquí cambiemos el nombre de esta Propiedad 1 a visible, y luego voy a presionar este botón “Plus” para crear una nueva propiedad y voy a nombrarla clara, así como así. En total, tenemos dos propiedades. Ahora en cuanto al punto de partida, que es esta varianza, voy a cambiar el valor de esta propiedad visible a false porque no debería ser visible. Para esta, voy a cambiar la propiedad visible a true porque será visible y voy a seleccionar estas dos variantes ahora y establecer el valor clear false porque en esta etapa no deberíamos poder ver este botón en absoluto. Hasta el momento, tan bien. El siguiente paso es enmascarar de alguna manera esta tarjeta de notificación. La forma en que lo hacemos es así. Ya que ponemos esta tarjeta de vacaciones de nodo dentro de otro marco, simplemente podemos seleccionarla aquí dentro de nuestra variante, y usando las teclas de flecha, simplemente puedo moverla hacia arriba así. Sin embargo, sigue siendo visible. Eso es porque necesitamos seleccionar nuestra varianza aquí y marcar esta casilla de verificación de contenido de clip. En cuanto lo hago, como pueden ver, ha ido así que de alguna manera lo enmascaramos. Voy a ir a la pestaña prototipo y voy a conectar esta variante a esta variante. El disparador debe establecerse en después de la demora. Voy a ponerla en 3,000 milisegundos o tres segundos y aquí necesitamos tener una animación inteligente. Sigamos adelante y utilicemos este componente de notificación y veamos cómo funciona. Voy a arrastrar y soltar una instancia de la misma aquí. Vamos a alinearlo al borde superior de nuestra pantalla, así como esto. Voy a seleccionar esta página de detalles y presionar “Reproducir”. Aquí tenemos un problema y creo que eso es porque olvidamos marcar esta casilla de verificación para esta variante también. Voy a clip de contenido aquí y vamos a refrescar la página. Ahí vamos. Ahora funciona correctamente. Sin embargo, necesitamos tener algún margen superior. Por el momento no tenemos margen alguno. Lo que voy a hacer es esto, voy a seleccionar esta carta aquí en mi segunda variante, y voy a alinearla a la parte inferior en vez de arriba. Si solo lo refresco ahora, funciona bien pero aquí tenemos demasiado margen así que tal vez pueda alinearlo al centro en su lugar. Creo que ahora tenemos suficiente margen superior. El primer paso ya está hecho pero ¿qué pasa con la interacción drag? Para eso, voy a traer este botón claro dentro de esta variante. Simplemente ponlo dentro y solo alinéelo al centro y simplemente muévalo hacia el lado derecho. A continuación, voy a disminuir su opacidad a cero por ciento para hacerla invisible porque aquí, como pueden ver, la propiedad clear se establece en false así que no deberíamos poder ver ese botón en particular. Ahora necesitamos una variante más aquí. Voy a seleccionar esta, pulsa este icono de “Plus” aquí para agregar una variante más. Lo que voy a hacer ahora es esto. Voy a seleccionar estos dos elementos, la tarjeta de notificación, y este botón de borrar, y usando las teclas de flecha, voy a mover todo al lado izquierdo, así como así. Permítanme seleccionar este botón claro y aumentar la opacidad al 100 por ciento para que vuelva a visitarlo, necesitamos moverlo hacia el lado izquierdo. Se ve bien. Ahora, vamos a crear una interacción entre esta variante y esta. Para hacerlo correctamente, es muy importante seleccionar esta tarjeta de notificación, no esta variante. ¿Por qué? Déjame mostrarte por qué. Si selecciono esta variante aquí e intento conectarla a esta variante y sigo adelante y cambio el disparador de unclick a undrag mira lo que pasa. Ya ves que en cuanto la arrastre un poco, se jugará esta animación y ya está hecha. Eso no es lo que queremos. Tengo muchas ganas de poder controlar esta interacción por mí mismo. Por eso dije que necesitamos agregar esta interacción a esta tarjeta de notificación en sí, no a la varianza. Ese es un punto muy importante a tener en cuenta. Voy a eliminar esta interacción y en su lugar, voy a seleccionar esta tarjeta de notificación y la voy a conectar a esta variante. Ahora bien, si lo configuro para desarrastrar, todo debería funcionar correctamente. Puedo hacerlo en ambos sentidos. Puedo seleccionar este también y simplemente conectarlo de nuevo a este y configurar el disparador para que se desarrastre y una animación inteligente. Veamos si funciona correctamente ahora. Ahora puedo arrastrarlo hacia la izquierda o hacia la derecha, así como así. Funciona muy bien. No obstante, aquí tenemos un problema. Como puedes ver, de alguna manera está enmascarado tanto en el lado izquierdo como en el lado derecho. Tenemos que arreglarlo. Si solo selecciono esta instancia e intento aumentar el ancho así como esto veamos si soluciona el problema. Funciona bien pero ahora tenemos este tema. Como puede ver, no hay margen intermedio. Eso es por nuestras limitaciones. Aquí voy a seleccionar este botón de borrar y como pueden ver, las restricciones se establecen en la parte superior e izquierda. Si lo pongo a arriba y a la derecha en su lugar, para este también, lo voy a poner a arriba y a la derecha. A ver si funciona. Funciona, pero ahora tenemos demasiado margen. Déjame moverlo un poquito hacia el lado izquierdo. Ahora se ve mucho mejor, pero hay un último paso que tenemos que dar. Tenemos que hacer que este botón claro sea interactivo también. Hagámoslo. Lo único que tenemos que hacer es seleccionar esta variante, presionar este botón de variantes de anuncios. A continuación, voy a seleccionar los elementos dentro de estos para presionar “K” para seleccionar la herramienta de escala y solo voy a reducirla así. Voy a establecer el valor en 0.01. Además, voy a disminuir su opacidad a cero por ciento para hacerlos desaparecer por completo. Ahora bien, si selecciono aquí este botón de borrar, ir al prototipo y simplemente conectarlo a esta última variante aquí, el disparador debería ser unclick, smart animate. Ahora debería funcionar. Vamos a darle una oportunidad. Ahí vamos. Todo funciona como se esperaba. Vamos a intentarlo una vez más. Nuestra notificación interactiva también está lista. Vamos a terminar este video y te veré en el siguiente. 15. Isla dinámica del iPhone: En este video, te voy a mostrar cómo crear esta isla dinámica de iPhones interactivos. Sin más preámbulos, vamos a sumergirnos. Busque la página de isla dinámica de iPhones dentro del archivo de diseño Figma. Aquí como pueden ver, ya preparé una maqueta para ustedes aquí. También tenemos dos variantes de nuestra isla dinámica. Básicamente tenemos una isla dinámica cercana y una isla dinámica abierta. ¿Qué necesitamos lograr aquí? Por defecto, deberíamos poder ver esta versión cerrada. Cuando hago clic en él, es fondo debe expandirse y además deberíamos poder ver todos estos elementos en su interior. Aquí, como pueden ver, tenemos un marco y en su interior tenemos dos elementos principales. Tenemos esta cámara selfie. No estoy seguro si lo puedes ver o no, es tan minúsculo. También tenemos este envoltorio que reúne todos estos elementos, como esta imagen de perfil y todos estos elementos en su interior. Como de costumbre, necesitamos convertir esto en un componente, pero antes de hacerlo, quiero ponerlo dentro de otro marco. Es tan importante. Si no lo pones dentro de otro marco, no puedes alinear todo perfectamente. Ese es el punto más importante aquí. Voy a hacer clic derecho sobre él y simplemente dar clic en “ Selección de fotogramas ” para ponerlo dentro de otro marco. Vamos a llamarlo isla. Perfecto. Ahora voy a convertirlo en un componente así como este y necesitamos una variante más. Necesitamos tanto abiertos como cerrados. Este conjunto de componentes debe tener una propiedad. Voy a cambiar el nombre de esta propiedad a state, y voy a seleccionar estas variantes, y voy a cambiar este valor de estado de default a open. Voy a seleccionar esta variante y voy a cambiar el valor de estado a cerrado. Ahora lo único que voy a hacer es seleccionar este marco dinámico de isla dentro de esta variante cerrada. Voy a revisar las marcas de verificación del contenido de este clip. Ahora, puedo seguir adelante y modificar su dimensión. Como puedes ver, este envoltorio en su interior ahora está enmascarado. ¿Por qué? Porque marcamos esta casilla de verificación de contenido de clip. ¿Cuál debería ser la dimensión? Déjame comprobarlo aquí. La dimensión debe ser 125 por 37. Voy a seleccionarlo una vez más, y voy a poner el ancho a 125 y la altura a 37, así como esto, pero no hemos terminado. En primer lugar, mientras se selecciona este marco, voy a alinearlo al centro. Se debe colocar en el medio de todo este marco. ¿Ves ese marco? A continuación, tenemos que seguir adelante y modificar la cámara selfie porque acabamos de destruirla. Aquí tenemos la cámara selfie. El tamaño de eso debería ser de 13 por 13. Voy a cambiar su dimensión a 13 por 13. Ahí vamos. También necesitamos cambiar su alineación. Aquí, si selecciono esto y mantengo pulsada la tecla Alt o la tecla Opción en mi teclado, puedes ver que el relleno superior está configurado 12 y el relleno derecho está configurado en 133. Aquí voy a seleccionar esto y voy a asegurarme de que obtenga exactamente el mismo relleno. Déjame bajarlo. Aquí, como pueden ver, tenemos un decimal, solo voy a quitarlo para esto y también. Ahora puedo ajustar fácilmente el relleno a 12 y el acolchado derecho debe medirse contra todo este marco, este marco exterior, y debería establecerse en 133. Ahí vamos. Ahora permítanme seleccionar aquí esta isla dinámica. Voy a ir al prototipo y solo conectarlo a éste. El disparador debe ser unclick y la animación debe ser smart animate. Voy a seleccionar esta, esta variante y conectarla de nuevo a esta versión cerrada así como esta y animate inteligente. Vamos a darle una oportunidad y ver cómo se ve. Voy a ir a Activos. A partir de aquí, voy a ir a la isla dinámica de iPhones. Tráelo aquí. Déjame alinearlo al centro y se debe colocar aquí mismo. Voy a cambiar su estado predeterminado a cerrado. Ahora voy a seleccionar esta maqueta y darle a “Jugar”. Ahora puedo dar click sobre él. Mira lo que pasa. El fondo es propiedad animada. Eso es lo que queremos. Queremos que se expanda y colapse, así como esto. No obstante, quiero que estos elementos envoltorios se reduzcan y se desvanezcan cuando intentemos cerrar esta isla dinámica. No quiero que se mueva hacia el lado derecho. Eso no es lo que quiero. Sigamos adelante y arreglemos eso. Aquí, dentro de esta variante cerrada, voy a buscar envoltorio y como pueden ver, se coloca justo aquí. Voy a escalarlo. Vamos a presionar K en mi teclado para seleccionar la herramienta de escala. Entonces aquí voy a establecer el valor en 0.01. También quiero que se mueva justo aquí en el centro y luego desaparezca. Voy a moverlo ahí mismo. El último paso es disminuir la opacidad de la capa hasta cero. Vamos a intentarlo una vez más y veamos cómo funciona. Ahí vamos. ¿Ya ves la diferencia? Eso es lo que quería. Ya casi terminamos. Sin embargo, no estoy satisfecho con la animación. No tenemos ningún efecto rebote. Si solo le echas un vistazo a éste, verás que tenemos este efecto rebote, lo que hace que la animación se vea mucho mejor. Arreglemos eso rápidamente también. Voy a seleccionar esta. Dirígete a Prototype, haz clic en esta interacción. Voy a cambiar la velocidad de Ease out a Quick y lo mismo para esta varianza. Voy a seleccionarlo y cambiar la velocidad de Ease out a Quick. Ahora bien, si lo comprobamos, todo debería funcionar. Ahí vamos. Ya ves, ahora obtenemos este efecto rebote. Eso es todo por este video. Espero que lo hayas disfrutado y te veré en la siguiente. 16. Animación 3D en Figma: En este video, vamos a crear una animación 3D juntos en Figma. Aquí, como pueden ver, tenemos una tarjeta de crédito y mira lo que pasa cuando pongo cursor sobre esta tarjeta. ¿Ves eso? Tan pronto como pase el cursor sobre esta tarjeta su perspectiva cambia a esta perspectiva easométrica, y luego aparecen otras dos tarjetas. No te preocupes, va a ser mucho más fácil de lo que piensas. Analicémoslo una vez más. Primero como nuestro punto de partida, necesitamos ver solo una tarjeta, esta tarjeta azul, y cuando pase el cursor sobre ella, es la perspectiva cambia así como esta. Entonces veremos aparecer estas dos tarjetas. Necesitamos tres pasos diferentes. Necesitamos nuestro punto de partida o punto A, entonces necesitamos el punto B, que está aquí y luego necesitamos el punto C, que es el destino final. Ahora comencemos a crearlo. Si buscas esta página de animación 3D dentro del archivo de diseño Figma, puedes ver que ya preparé para ti este proyecto. Aquí tenemos una sección de héroes de un sitio web, y aquí preparé tres tarjetas de crédito diferentes. Obviamente podemos seguir adelante y crear esta interacción usando componentes y varianza. Sin embargo, voy a mostrarles cómo se hace aquí usando diferentes marcos para entender realmente los pasos que debemos dar. Voy a seleccionar estas tres tarjetas, y voy a moverlas a mi primera página de inicio de escritorio. Hasta el momento tan bueno. Ahora déjame alinearlos horizontalmente así como así. ¿Y el orden de nuestras tarjetas? Primero, necesitamos ver esta tarjeta azul y luego la púrpura en el medio, y finalmente la tarjeta plateada en la parte inferior. Voy a ver la tarjeta 3 aquí en la parte superior y la tarjeta 1, que era la plateada, va a estar en la parte inferior. Ahora voy a seleccionar estos tres y luego solo alinearlos. Este va a ser nuestro punto de partida. Ahora mientras se seleccionan estas tres cartas, voy a golpear Control+C o Comando+C, seleccionar esta segunda página de inicio, presionar Control+V o Comando+V para pegarlas aquí y ahora es momento de cambiar la perspectiva de estas cartas a la perspectiva easométrica. No estoy seguro de si estás familiarizado con el término easométrico o no, pero déjame mostrarte cómo puedes hacerlo. Para cambiar la perspectiva de estas tarjetas, vamos a usar un plugin llamado asimétrico. Aquí si voy a Recursos y si voy a la pestaña Plugins, puedes encontrar muchos plug-ins aquí. Tenemos diferentes tipos de plugins. Tenemos el plugin easométrico o easométrico. Si no ves estos plugins, está bien porque ya busqué estos plugins. Pero aquí puedes buscar easométrico. Ahí vamos. Aquí está el plugin que vamos a usar. Este plugin te permite cambiar la perspectiva de tus elementos, sea lo que sea a una perspectiva easométrica. Solo tienes que golpear Run aquí y golpear Open Easometric. Pero para poder usar este complemento, debes asegurarte de seleccionar solo un fotograma a la vez. Voy a seleccionar la tarjeta 1 aquí. Voy a ir a un Easometric, golpear Run, abrir easometric aquí, y esta ventana aparece. Aquí tenemos diferentes opciones a elegir. Nos queda, tenemos arriba a la izquierda, tenemos arriba a la derecha. Creo que vamos a necesitar de arriba a la derecha. Como puedes ver ahora, tenemos esta perspectiva easométrica para esta tarjeta 1. Eso es exactamente lo que necesitábamos. A continuación voy a seleccionar esta tarjeta 2 y hacer lo mismo. Simplemente puede abrirlo aquí y seleccionar arriba a la derecha. Por último pero no menos importante, hagámoslo por esta tarjeta 3. Ahí vamos. Ahora tenemos tres tarjetas easométricas y voy a seleccionarlas todas y simplemente cambiar su alineación como quiera. Ahora como nuestro último paso, vamos a seleccionar estas cartas aquí, copiarlas, presionar Control+C, y simplemente pegarlas aquí mismo, presionar Control+V o Comando+V. Entonces solo necesitamos seleccionar esta carta 3, mantener presionada la tecla Mayús y usar las teclas de flecha para moverla hacia arriba o hacia abajo. Básicamente lo moví hacia arriba 80 pixeles ahora voy a seleccionar esta tarjeta una y moverla hacia abajo una a pixeles. Mantenga pulsado la tecla Mayús y simplemente muévala hacia abajo así. Ahora necesitamos crear nuestras interacciones. Sí. Primero voy a crear un after delay por aquí, y luego crearemos este disparador de hover también. Voy a seleccionar esta página de inicio de escritorio, dirigirme al prototipo y simplemente conectarlo a la página siguiente. El disparador va a ser después del retraso, animación inteligente, y debería ser Ease out. Voy a aumentar la duración aquí, lo contrario sería demasiado rápido. Déjame aumentarlo a 1,000 milisegundos. Voy a golpear play aquí para previsualizarlo por un segundo. Ahí vamos. Fuimos del punto de partida al punto B, y ahora tenemos que ir también al punto C. Aquí voy a seleccionar esta pantalla y simplemente crear una interacción así como esta. Va a ser después del retraso, Smart anima 1,000 milisegundos. Para este paso cuando queremos pasar de esta página al destino, no necesitamos tener ningún retraso en absoluto. Voy a establecer esta cantidad de retraso en un milisegundo. Ahora déjame refrescar la página. Ahora se ve bastante bien, pero podemos llevarlo al siguiente nivel agregando algo de sombra a estas cartas intenta que se vea más realista. Voy a seguir adelante y seleccionar estas tarjetas, todas ellas se dirigen a diseñar y aquí voy a agregarle efectos. Voy a asegurarme de tener el efecto de sombra y dejarme modificar sus preferencias. Aquí voy a establecer la cantidad de desenfoque a 100 y aquí la Y va a ser 50, así como esto y la opacidad podría disminuir hasta el 20 por ciento, algo así. Ahora veamos cómo se ve. Ves que se ve mucho mejor. Aprendiste a crear esta animación, pero no tenemos este disparador. Ahora vamos a cambiarlo se dispara un poco. Aquí. Voy a seleccionar esta página y eliminar esta interacción aquí también. Ahora, voy a seleccionar esta tarjeta tres y conectada a la página siguiente. Para el disparador voy a seleccionar mientras se cierne y debería ser smart animate, pero de aquí para acá, necesitamos tener el trigger after delay. No necesitábamos eliminar eso en absoluto pero déjame crearlo una vez más. Debería ser después de retraso y un milisegundo y luego aquí necesitamos tener también un disparador. ¿Qué tipo de gatillo? Para eso podríamos usar el ratón dejar gatillo. Entonces lo que voy a hacer es esto. Voy a seleccionar estas tres cartas y voy a añadir un disparador a todas ellas. Veamos si funciona o no. Mientras están seleccionados, crear una conexión de nuevo a la primera pantalla y un disparador va a ser ratón dejar. Voy a jugar de nuevo a este flujo. Voy a pasar el cursor sobre él. Ahí vamos, y ahora miren lo que pasa. ¿Ves eso? Funciona bien. Sin embargo, es bastante lento. Voy a disminuir la duración aquí. Déjame seleccionar este y cambiar la duración de 1,000 milisegundos a tal vez 500 milisegundos y para estos disparadores también, voy a fijarlo en 500, este a 500 también y finalmente, para este, voy a fijarlo en 500. Vamos a intentarlo una vez más. Voy a pasar el cursor sobre él, ahí vamos. Me voy a ir. Se ve hermosa, ¿no? Ahora como un reto, quiero que sigas adelante y recrees esta interacción usando componentes interactivos. Te veré en el siguiente video. 17. Cargando animación: [MÚSICA] Bienvenido de nuevo. En este video, te voy a mostrar cómo crear un botón interactivo con animación de carga. Mira lo que sucede cuando hago clic en este botón Pagar. ¿Vías eso? Cuando hice clic en ese botón Pagar, apareció una animación de spinner pero una vez que se realizó el procesamiento, apareció este ícono de ticker animado. Déjame tocarlo una vez más. Voy a hacer click en él. Vemos este spinner y finalmente esta animación de tick. Vamos a sumergirnos y crearlo. Dentro del archivo del proyecto Figma, por favor vaya a la página de animación de carga y como puede ver, no hay nada aquí porque quiero mostrarles cómo crear rápidamente el spinner desde cero. Para ello, lo único que necesitamos es una elipse. Voy a elegir la Herramienta Elipse, mantener presionada la tecla Mayús, hacer clic izquierdo y arrastrar para crear un círculo perfecto. El tamaño realmente no importa, pero voy a mantenerlo en 24 por 24 píxeles. A continuación, voy a acercarme así y cuando pasas el cursor sobre él, ves este pequeño círculo que dice Arc. Voy a hacer click en él. Ahora mientras está seleccionada, voy a dirigirme al inspector de diseño y como pueden ver aquí, tenemos algunas propiedades para modificar. Ves esta relación cero por ciento, voy a aumentarla. Aquí, si lo aumento a 20, mira qué pasa. Ya ves ahora tenemos un agujero en el medio y podemos controlar fácilmente esta relación. Voy a cambiar el grosor a algo así. Creo que el 75 por ciento se ve bien y a continuación voy a agregarle un degradado. Voy a dirigirme a sentir y aquí voy a cambiar el tipo de Sólido a Angular. No voy a usar lineal, voy a usar Angular para obtener este degradado. Eso es exactamente lo que necesitamos para un spinner. Ahora voy a cambiar la dirección de este gradiente así así porque el punto de partida debería estar aquí y básicamente estamos hechos. Esta va a ser nuestra hilandera. Voy a llamarlo spinner. Ahora es el momento de crear esa animación. Esa animación spinner. Para ello, como siempre, vamos a usar un conjunto de componentes. Déjame convertirlo en un componente así como este y luego necesitamos tener algunas variantes. Voy a dar click en este botón más para agregar una variante. ¿Qué necesitamos? Tenemos que seleccionar el spinner dentro y girarlo, pero no podemos girarlo 360 grados. No es así como funciona porque de esa manera, Figma no puede crear esa animación spinner, esa animación de bucle que estamos buscando. Entonces, ¿qué tenemos que hacer? Bueno, necesitamos girarlo 90 grados en el sentido de las agujas del reloj. Voy a mantener presionada la tecla Mayús y asegurarme de seleccionar esta capa de spinner dentro de su variante. No selecciones tu variante en sí. Voy a seleccionar este spinner y aquí voy a cambiar el valor de rotación a menos 90 para girarlo en sentido horario. A continuación, voy a seleccionar esta variante también, y voy a duplicarla una vez más. Aquí, voy a hacer doble clic para seleccionar el spinner y simplemente girarlo 90 grados. Tenemos que conseguir menos 180. Aquí verás 180 porque cuando tienes 180 sobre 360, no importa si tienes menos o más. Por eso Figma lo cambia automáticamente a 180. Lo único importante es que veas esta forma. A continuación, voy a seleccionar esta variante, presionar más, doble clic para seleccionar el spinner y simplemente girarlo menos 90 grados. Aquí necesitamos conseguir 90. Tenemos cuatro variantes distintas, y ahora podemos empezar a conectarlas. Voy a seleccionar esta variante predeterminada, dirigirme a la pestaña Prototipo y simplemente conectarla a esta. Debe ser después del retraso, y el retraso va a ser de un milisegundo. Aquí, voy a cambiar la duración a 300, y voy a repetir lo mismo para esto otra vez después de retraso, un milisegundo, y voy a hacerlo para ésta también, después de retraso, un milisegundo y finalmente, voy a conectar esta última variante nuevo a nuestra primera variante. Porque queremos hacer un bucle de esta animación. Aquí después del retraso, un milisegundo y ya terminamos. Probemos esta animación rápidamente. Voy a crear un marco así como éste. Déjame cambiar el color del fondo a negro, dirigirme a assets, y desde aquí, ir a cargar animación y arrastrar y soltar una instancia de este componente aquí. Perfecto. Selecciona este cuadro y juégalo. Está funcionando, pero no estoy satisfecho con su duración, su velocidad. Voy a hacerlo un poco más rápido. Voy a seleccionar todas estas variantes, dirigirme al prototipo y voy a cambiar este valor 300 milisegundos a 150 en su lugar. ver si funciona mucho mejor. Ahora se ve mucho mejor. Nuestro spinner de carga se ve bien. Ahora es el momento de crear ese botón. Para eso, solo voy a presionar T en mi teclado, crear una capa de texto y el tamaño de fuente va a ser 17 puntos y vamos a escribir Pay porque vamos a crear un botón de pago, pulsamos Mayús y A para agregarle auto-layout y voy a alinearlo al centro. Este botón debe tener un color de fondo negro. Así como esto y también el relleno vertical va a ser 16 y aquí voy a aumentar el padding horizontal a algo así como 70 por ahora. Se ve muy bien. Posteriormente podemos simplemente modificar el tamaño cuando creamos una instancia de estos componentes. Esta va a ser nuestra variante por defecto. Voy a renombrarlo por defecto, y puedo hacerlo un poco redondeado también. Voy a establecer la cantidad de radio de esquina en algo así como 12 y vamos a convertirlo en un componente. Ahora necesitamos algunas variantes. Voy a agregarle una variante y esta segunda variante va a llamarse loading. Perfecto, y aquí es donde necesitamos agregar este spinner de carga. Voy a ir a Activos y desde aquí voy a simplemente arrastrar y soltar este spinner de carga en mi botón aquí. Pero aquí tenemos un problema. Como puede ver, se ha cambiado el ancho de este botón. Eso es porque la opción de cambio de tamaño de este botón está establecida para tocar la bocinada. Voy a cambiarlo a ancho fijo, y simplemente disminuir el ancho a 170, así como esto, asegúrate de que también lo hayas arreglado aquí asegúrate de que también lo hayas arreglado aquí y en cuanto al margen entre estos dos elementos, voy a fijarlo a tal vez ocho píxeles. Tenemos nuestro estado predeterminado, tenemos nuestro estado de carga. Sigamos adelante y conectarlos y ver cómo funciona. Voy a ir a prototipar, crear una interacción así como esta y el disparador debería estar al hacer clic, animar inteligente y una duración podría ser de 150, está bien. Lo único que queda es crear un marco y probarlo. Aquí tenemos este botón por defecto. Voy a seleccionar este marco. Golpea Play. Déjame dar click sobre él. Ahí vamos. Funciona, pero aquí tenemos otro problema. También se ha cambiado la altura de nuestro botón. También tenemos que solucionar este problema. Ya sabes qué hacer aquí. Como puede ver, la altura se establece en 53. Voy a cambiar su opción de redimensionamiento a altura fija y aquí la voy a cambiar a altura fija también y la altura va a ser 53. Déjame refrescar la página una vez más. Se ve muy bien. ¿Cuál es el siguiente paso? Cuando hacemos clic en este botón Pagar, una vez que veamos ese spinner de carga, también necesitamos ver esta animación de tick. Podemos crear esta animación de tick en Figma, pero va a llevar mucho tiempo y no es lo ideal. En su lugar, vamos a usar un plugin que se llama animación Lottie. Lottie te proporciona elementos animados que puedes usar en tus proyectos. Básicamente lo que te permite hacer es convertir una animación en un archivo GIF y simplemente usarla en tu proyecto porque Figma reproduce archivos GIF. Aquí voy a agregar una variante más, y después voy a ir a Recursos, Plugins y solo buscar a Lottie. Ya ves aquí tenemos archivos de Lottie. Voy a ejecutarlo. Ya estoy conectado. Asegúrate de crear una cuenta e ingresar a tu cuenta y aquí en la barra de búsqueda, voy a buscar tick. Aquí, como puedes ver, tienes múltiples opciones. Puedes ir a la página siguiente y simplemente explorar diferentes opciones aquí. Voy a simplemente ir a la página anterior y para esta interacción, voy a usar esta. Creo que se ve bastante bien. Aquí podemos previsualizar la animación y también puedes personalizarla. Si quieres, puedes personalizar el color, el color del fondo, lo que quieras. Aquí ya que mi botón es negro, voy a cambiar el color del fondo a negro también y luego lo voy a insertar como GIF, así como esto. Creo que su pequeño tamaño funcionaría. Pulsa Insertar y como puedes ver, me sale este fondo negro. En tu caso, es posible que veas ese ícono de tick, pero así es como puedes cambiar la vista previa aquí. Si seleccionas esto y vas a la sección de campo, simplemente da clic aquí y verás esta opción en la parte inferior. Si usas este control deslizante, solo puedes seleccionar la vista previa porque voy a poder previsualizar el último fotograma aquí, y luego voy a reducirlo a escala. Aquí el ancho y la altura de esta hilandera se establecen en 24 por 24. Voy a seleccionar este y establecer el ancho y la altura a 24 también y luego voy a reemplazarlo con este spinner, así como esto. Aquí déjame seleccionar este spinner y quitarlo. Lo único que tenemos que hacer ahora es crear una conexión entre estos dos. Voy a seleccionar esta varianza. Voy a ir al prototipo y solo conectarlo a éste. Debería aparecer después del retraso. Aquí voy a fijarlo a después del retraso. Ochocientos milisegundos se ve bien, y va a ser inteligente animar. También quiero deshacerme de este texto, voy a eliminar este texto también y ahora vamos a probarlo y ver cómo funciona. Voy a golpear a pagar. Ahí vamos. Funciona bien. Pero aquí tenemos este tema, como pueden ver, está dando vueltas una y otra y otra vez. Ese es el problema con la animación de Lottie. Desafortunadamente, no pude encontrar una opción para deshabilitar este comportamiento de looping. Sin embargo, pude solucionar este problema usando un truco. Lo que quiero hacer es esto, voy a seleccionar esta y solo agregar una variante más y luego voy a volver a los archivos de Lottie aquí y solo buscar esta animación en particular. Voy a buscar garrapata. Ahí vamos, ábrelo, cambia el color del fondo. Pero esta vez no quiero insertarlo como GIF. Voy a insertarlo como SVG. Cuando lo insertes como SVG, básicamente obtendrás un icono estático y eso es exactamente lo que necesito ahora, lo voy a insertar como SVG. Ahí vamos. Vamos a deshacernos de éste y sólo voy a seleccionarlo, escalarlo hacia abajo. Voy a presionar K en mi teclado para seleccionar la herramienta de escala y establecer el ancho y la altura a 24, así como esto y ahora voy a seleccionar esta y conectarla a la última variante. Aquí necesitamos tener después del retraso y no debería ser inteligente animar. Voy a configurarlo a instancia porque una vez terminada la animación, quiero ver instantáneamente este icono estático. Ahora creo que debería funcionar bien. Voy a jugarlo una vez más. Golpea Pagar. Ahí vamos. Funcionó bien y por cierto, este botón responde. Ahora bien, si quiero modificar su tamaño, solo puedo seleccionar esta instancia aquí y simplemente puedo ajustar su ancho a lo que quiera. Yo también puedo ajustar su altura y funcionaría bien. Bien chicos, vamos a terminar este video. Espero que lo hayas disfrutado, y te veré en la siguiente. 18. Gradiente de malla animado: En este video, vamos a crear un degradado de malla animada dentro de Figma. Básicamente, un gradiente de malla es lo que ves aquí. Hay algunos gradientes mezclados entre sí. Como puedes ver, todos estos colores se mueven constantemente. Veamos cómo puedes recrear este degradado de malla animada en Figma. Si vas a la página de degradado de malla animada dentro del archivo del proyecto Figma, puedes ver que ya preparé esta captura de pantalla de este sitio web de Stripe como nuestra referencia. Para crear este degradado de malla animado, primero necesitamos crear ese degradado de malla. Para ello, necesitamos un marco. Voy a presionar “A” en mi teclado y voy a elegir este marco de escritorio aquí, y para crear este degradado. Lo que necesitamos son algunas formas aleatorias, algunas manchas aleatorias para crear estas manchas, voy a usar un plugin llamado blob. Aquí voy a ir a la pestaña de plugins, y desde aquí voy a buscar blob. Ahí vamos. Este es el plug-in que voy a usar. Puedes usar cualquier otro complemento que quieras, o incluso puedes crear formas aleatorias usando la herramienta de lápiz que depende de ti. Pero prefiero usar este plug-in para simplemente acelerar el proceso. Voy a ejecutarlo. Aquí, como puedes ver, nos permite controlar la complejidad y la singularidad de este blob. Voy a presionar “Insertar” para agregar una mancha. Ahí vamos. Voy a modificar la complejidad para que sea un poco más única. Se inserta, y voy a repetir este proceso una y otra vez y simplemente modificar estas dos variables para llegar a formas nuevas y únicas. Déjame hacerlo rápido. Creo que ya es suficiente por ahora. Tenemos muchas manchas diferentes. Ahora lo que voy a hacer es sentir todo este marco de escritorio con estas manchas. Voy a poner uno aquí mismo. No está dentro de nuestro marco, no te preocupes, los vamos a mover dentro más tarde. Voy a poner uno ahí mismo, tal vez hacerlo un poco más pequeño. Ponlo aquí mismo, y solo haz lo mismo para todo el marco. Voy a adelantar este proceso. Ahí vamos. Nuestro marco está lleno de estas manchas. Voy a seleccionarlos todos en mi lista de capas. Voy a asegurarme de que estén dentro de mi marco. Así como esto. El siguiente paso es cambiar el color de estos blogs uno por uno. Voy a seleccionar este, dirigirme a sentir y usando este cuentagotas, voy a elegir este color rojo y voy a hacer lo mismo con todas las demás manchas. Quizá morado para éste, para éste voy a escoger amarillo. Voy a adelantar este proceso. Ahí vamos. Ahora tenemos colores aleatorios para estas manchas. Ahora necesitamos mezclarlos juntos. Voy a seleccionarlos a todos, presionar “Control G” o “Comando G” para agruparlos. Luego dirígete a la sección de efectos aquí, presiona este botón más y voy a agregarle el efecto de desenfoque de capa, así como esto. Ahora desde la configuración avanzada, voy a aumentar la cantidad de desenfoque dramáticamente y voy a asegurarme que se mezclen sin problemas. Así como esto. Voy a aumentarlo aún más. Algo como esto debería funcionar. Ahora puedo seguir adelante y modificar el tamaño de estas manchas y también cambiar su orden aquí dependiendo de mis necesidades. Algo como esto debería funcionar. Ya casi terminamos. Sin embargo, este gradiente se ve bastante plano. No tiene ninguna textura. Voy a agregarle algo de ruido para hacer eso, voy a usar otro plugin llamado noise. Déjame buscarlo aquí. Ahí vamos. Voy a ejecutarlo. Aquí puedes ajustar este ruido como quieras. Se puede modificar la densidad, se puede modificar el contraste, etc. por ahora, sólo voy a modificar la densidad. Creo que algo como esto debería funcionar. Voy a darle a este ícono de tick así como así. Como pueden ver ahora, este ruido se ha agregado a mi lienzo. Aún no está dentro del marco. Voy a moverlo adentro así. Voy a escalarlo así así. Pero es negro. No se ve bien. Lo que voy a hacer es esto, voy a disminuir drásticamente la opacidad. Voy a fijarlo a tal vez 10 por ciento. Incluso puedo disminuirlo hasta tal vez seis por ciento, se ve bien. Voy a moverlo dentro de este grupo. Déjenme llamar a este grupo gradiente. Que nuestro gradiente de malla esté listo, es hora de animarlo. Lo único que tenemos que hacer es esto. Solo tenemos que seleccionar este escritorio, duplicarlo, y luego en la siguiente pantalla aquí como nuestro destino, necesitamos mover estas manchas alrededor. Voy a seleccionar este, por ejemplo este vector y moverlo hacia abajo y mover este morado hacia arriba y hacerlo más grande. Así como esto. Puedo mover este amarillo hacia arriba también. Puedo cambiar su orden y hacerlo mucho más grande, así como esto. Entonces voy a mover todo lo demás uno por uno. Solo queremos que Figma sepa que estas manchas deben ser movidas y deben ser redimensionadas. Voy a seleccionar este de escritorio, dirigirme a la pestaña prototipo y simplemente crear una conexión entre estos dos marcos. El disparador va a ser después del retraso. Obviamente, el retraso va a ser de un milisegundo, y el tipo de animación debe ser smart animate. Aquí la duración debería ser de 10,000 milisegundos porque queremos que estas manchas se muevan tan lentamente. Así mismo, y para hacer un bucle de esta animación, voy a seleccionar este segundo fotograma y conectarlo de nuevo a este primer fotograma. Todo lo demás aquí debería estar intacto. Ahora déjenme darle a este botón Reproducir y veamos el resultado. Todos estos colores se mueven suavemente. Si quieres, puedes seguir adelante y agregar más colores a este degradado e incluso ajustar la cantidad de desenfoque. Ahora veamos si de alguna manera podemos enmascarar este gradiente, como lo que tenemos aquí en esta web de stripe. Es tan sencillo. Voy a crear un rectángulo aquí, así como esto, y mientras esté seleccionado, voy a presionar “Enter” para entrar al modo de edición, voy a agarrar este nodo inferior derecho y mantener presionada la tecla Mayús y moverlo hacia arriba así. Yo también puedo agarrar este y moverlo hacia abajo. Pulsa “Listo” a continuación en la lista de capas, voy a mover este rectángulo uno y ponerlo por debajo de nuestro grupo de degradados. No deberíamos poder ver eso. Antes de enmascarar este degradado, voy a seleccionar este rectángulo uno, darle a “Control C” y seleccionar este segundo fotograma y darle a “Control V” y bajarlo también, porque necesitamos tener esta capa en ambas pantallas. A continuación, voy a seleccionar estas dos capas, el grupo de degradados y este rectángulo que acabamos de crear, dirígete a la barra de herramientas y pulsa este botón así como este. Ahora como pueden ver, tenemos esta máscara. Hagamos lo mismo por esta pantalla, bien. Si solo selecciono este de escritorio y presiono “Reproducir”, como pueden ver, tenemos este degradado de malla animada enmascarado dentro de esta forma. Chicos, eso es todo por este video. Espero que lo hayas disfrutado y te veré en la siguiente. 19. Animación de desplazamiento de desplazamiento: [MÚSICA] El sitio web de Apple ha sido una gran fuente de inspiración de diseño e interacción para muchos diseñadores de UI UX debido a sus increíbles páginas de aprendizaje con animaciones fluidas. En el episodio de hoy, te voy a mostrar cómo recrear la página de aprendizaje de Apple Studio Display, incluyendo esta animación fluida en Figma. Vamos a sumergirnos. Si vas a apple.com y abres el menú de Mac aquí, puedes abrir el menú de la pantalla. Desde aquí, si selecciona Studio Display, esta página de aprendizaje se carga. Si me desplazo hacia abajo, verán que se reproduce esta animación. Es muy suave. Por último, llegaremos a este punto. Si sigo desplazándome hacia abajo, mira lo que pasa. La pantalla de estudio aparece suavemente y finalmente estas dos capas de textos se desvanecen. Analicémoslo primero. Tenemos que asegurarnos de que tenemos esta imagen así que ya descargué esta imagen. También esta imagen de Studio Display debería ocupar todo el ancho y alto disponible de nuestra pantalla, igual que lo que vemos aquí. Justo en el medio, necesitamos tener esta capa de texto. Una vez que ocurre esa transición, esta capa de texto debería desvanecerse y esta pantalla de estudio debería reducirse, y finalmente, estas dos capas de texto deberían desvanecerse. Déjame mostrarte cómo puedes hacerlo rápidamente en Figma. Aquí ya preparé esta imagen de Apple Studio Display y además preparé estas dos capas de textos. Para esta animación, voy a golpear A y voy a crear un marco de tamaño personalizado. Aquí voy a establecer el ancho y alto a 1920 por 1080 respectivamente, así como así. Entonces voy a arrastrar y soltar esta imagen dentro de este marco así como esta. Tienes que asegurarte de que esté escalado así porque solo queremos ver el fondo de pantalla en este momento. Entonces tenemos que traer aquí mismo este texto. Déjame arrastrarlo y soltarlo. Voy a hacerlo blanco así y voy a alinearlo al centro tanto horizontal como verticalmente. Ese es el paso uno. A continuación, voy a seleccionar este Frame 1, voy a duplicarlo, golpear Control D o Comando D, bajarlo así. En este paso, necesitamos escalar estas dos capas hacia abajo. Voy a mantener pulsado la tecla Mayús y seleccionarlos a ambos. Ahora voy a presionar K para seleccionar la herramienta de escala, mantén pulsado la tecla Mayús y la tecla Alt para reducirlas proporcionalmente, así como así. Voy a bajarlo y también voy a moverlos hacia arriba. A continuación, voy a seleccionar esta capa de texto y voy a establecer su opacidad a cero por ciento porque necesita desaparecer. A continuación, voy a duplicar esta trama una vez más, bajarla. Esta vez voy a mover este fotograma hacia arriba así. Aquí necesitamos colocar estas dos capas de textos. Entonces los voy a traer aquí mismo. Se ve bien. Pero para animar estas capas de textos, igual que lo que vemos aquí, necesitamos asegurarnos de que estas dos capas de texto también se coloquen en el segundo fotograma. Voy a golpear Control C o Comando C, seleccionar Marco 2, seleccionar Marco 2, presionar Control V o Comando V pero estas dos capas de textos deberían estar enmascaradas de alguna manera. Voy a mantener pulsado la tecla Mayús y la barra espaciadora en mi teclado y bajarlos así como así. Ahora, todavía están dentro del Marco 2 pero no podemos verlo. Ya casi terminamos. Solo necesitamos agregar las interacciones. Voy a seleccionar este Frame 1, voy a dirigirme a la pestaña prototipo aquí mismo. Ahora simplemente puedo conectar estas dos pantallas así como así. Voy a poner el gatillo a llave. Aquí, voy a presionar la tecla de flecha derecha en mi teclado y la animación va a ser inteligente animar, facilidad. Vamos a ponerla en 1000 milisegundos, va a ser suficiente, creo. Hagamos lo mismo por esta pantalla. Voy a conectarlos. Va a ser clave, animación inteligente y 1000 milisegundos. Vamos a darle una oportunidad y ver cómo se ve. Bueno. Voy a presionar la tecla de flecha derecha en mi teclado. Bonito. Como pueden ver, tuvimos esta animación suave una vez más. Aquí tenemos un problema. Estas capas de textos aparecen pero necesitan desvanecerse. Tenemos que hacer un ajuste aquí. Si simplemente te diriges al Marco 2 y seleccionamos estas dos capas de textos aquí mismo, entonces podemos disminuir la opacidad a cero por ciento. Ahora debería funcionar bien. Vamos a intentarlo una vez más. Bueno. Ahí vamos. Ahora tenemos esta hermosa transición suave. 20. Barra de pestaña de animación: [MÚSICA]. En este video, vamos a crear una barra de pestañas animada juntos, igual que lo que ves aquí. Vamos a ser afirmados. Entonces aquí en el archivo del proyecto Figma, debes seguir adelante y buscar la página animada de la barra de pestañas. Y por dentro puedes ver que ya preparé algunos íconos para ti. Entonces generalmente para una pestaña, o necesitamos tener dos estados diferentes para nuestros íconos, necesitamos tener el estado predeterminado y el estado seleccionado. Entonces por esa razón, aquí preparé dos signos diferentes de estos íconos, el signo de contorno y el estilo sólido. Ya que los vamos a convertir en componentes, es muy importante saber nombrarlos correctamente, porque Figma los va a categorizar en función de sus nombres. Entonces aquí tenemos Home forward slash Sólido. Para este tenemos a casa Forward slash Outline. Lo mismo se aplica a todos estos otros íconos. Entonces el primer paso es convertir nuestros íconos en componentes. Así que voy a seleccionarlos todos, dirigirme a la barra de herramientas y desde aquí, seleccionar Crear múltiples componentes. A continuación, voy a seleccionar estos iconos de contorno, duplicarlos para simplemente crear instancia de estos componentes. Voy a mantener pulsada la tecla Mayús en mi teclado y usando las teclas de flecha, voy a moverlas hacia abajo así. Como puedes ver, los iconos son diferentes aquí, lo que indica que estas son las instancias de estos componentes porque no queremos usar los componentes maestros en nuestro diseño. Mientras están seleccionados, voy a agregarles otro layout. Así que pegó a Shift y A. Ahí vamos. Voy a ponerle nombre tabulador. Para esta barra de pestañas, vamos a tener un color de fondo. Voy a agregarle un relleno. Va a ser blanco. Alineemos todo al centro. También vamos a cambiar el relleno aquí. Voy a poner el relleno vertical a 24. En cuanto al relleno horizontal, pongámoslo en algo así como 66. Eso está bien. Voy a aumentar el espaciado entre a algo así como 54. Hasta el momento, tan bien. Ahora voy a seguir adelante y hacer que esta barra de pestañas esté completamente redondeada. Posteriormente podremos cambiar su estilo, pero por ahora, prefiero tener aquí una barra de tabulación redondeada. Vamos a previsualizar nuestra barra de pestañas una vez más, veamos qué necesitamos tener. Cuando se selecciona una pestaña, el icono debe cambiarse a sólido. Además, necesitamos ver este círculo detrás de esa pestaña. Voy a empezar por crear un círculo aquí. Déjame crear un círculo. Así como esto. Simplemente no te preocupes por ello. Está ocupando espacio. Vamos a arreglarlo. Solo necesitamos cambiar el color también. Voy a cambiarlo a azul, algo así. Si bien está seleccionado, voy a presionar este botón más aquí mismo, que dice posición absoluta. Ahí vamos. Ya no ocupa espacio alguno. Voy a asegurarme de que esté colocado por encima de todas estas pestañas. De lo contrario, no podemos ver nuestras pestañas. Cambiemos su dimensión a 40 por 40. Voy a asegurarme de que esté alineado con mi ficha aquí. Voy a moverlo hacia el lado izquierdo. Si mantengo presionada la tecla Alt o la tecla Opción en mi teclado, se puede ver que tenemos un relleno de ocho en todos los lados. A continuación, necesitamos cambiar este icono de contorno a sólido. Va a ser tan sencillo ya que convertimos todos nuestros íconos en componentes, voy a seleccionar este, Home Outline, dirígete al inspector de diseño. Aquí como pueden ver, tenemos este menú desplegable, y lo voy a abrir. Voy a cambiarlo a sólido. Ahí vamos. A continuación, necesitamos cambiar su color a blanco y nuestra barra de pestañas está lista. Ahora, necesitamos convertir toda esta pestaña en un componente, porque vamos a agregarle múltiples variantes. Voy a seleccionar la barra de pestañas y simplemente dar clic en este botón para convertirlo en un componente y presionar este botón para agregarle algunas variantes. En total, necesitamos tener cuatro variantes porque tenemos cuatro pestañas diferentes. Bueno. Para estos componentes establecidos, necesitamos tener una propiedad, y voy a ponerle nombre tab. A continuación, seleccionemos esta primera variante y cambiemos el valor a home, lo que significa que se selecciona la pestaña home. Voy a seleccionar este y cambiarlo a marcador. Bueno. Seleccionemos esta y cambiemos el valor de esta propiedad de pestaña a notificación. Por último, para éste, cambiémoslo a mensaje. Ahora necesitamos modificar estas variantes una por una. Entonces voy a comenzar con el círculo. Voy a seleccionarlo aquí. Mantenga pulsada la tecla Mayús y muévala hacia el lado derecho. Así como esto. Alinear con este icono de marcador. Ahora voy a seleccionar el icono Mi Inicio aquí, cambiar su tipo de sólido a contorno. Aquí para este marcador, voy a seleccionarlo, cambiar su tipo a sólido, y cambiar su color a blanco. Voy a hacer lo mismo por todas estas pestañas. Para este, voy a seleccionar la Elipse, mantener presionada la tecla Mayús y moverla hacia el lado derecho y ponerla detrás de este icono de campana. Ahí vamos. Seleccione este icono de Inicio y cambie su tipo a contorno. Voy a seleccionar este icono de campana y cambiarlo a sólido y también hacerlo blanco. Por último, para este , selecciónelo, mantenga presionada la tecla Mayús y póngalo detrás de un icono de mensaje. Así como así, asegúrate de que esté perfectamente alineado con tu icono. Cambia el tipo de este icono de Inicio a contorno. Voy a seleccionar este ícono de Mensaje, cambiarlo a sólido y hacerlo blanco. Entonces tenemos nuestras barras de tabulación. Ahora es el momento de crear conexiones. Así es como lo voy a hacer. Voy a comenzar con este ícono de Inicio. Tenemos que seguir adelante y seleccionar este ícono de Inicio y conectarlo a esta primera variante para todas estas tres. Entonces, mientras esté seleccionado, vaya a la pestaña Prototipo y simplemente conéctelo a esta , la primera. Aquí el disparador debe estar en click smart animate. Voy a establecer la duración en 300 milisegundos. Hagamos lo mismo por éste. No necesitamos cambiar nada más y éste también. A continuación, lo voy a hacer por el marcador. Voy a seleccionar esta, conectarla a la segunda variante. Seleccione esta también, conéctelo a la segunda variante finalmente, seleccione esta, conéctelo a la segunda variante. Ahora hagámoslo por el icono de la campana. Voy a conectarlo a la tercera variante, esta también. Por último, éste. Por último, pero no menos importante, seleccionemos este icono conectado a la última variante, ésta también y ésta, así como ésta. Ahora es el momento de comprobarlo. Voy a crear un marco aquí. Se puede crear un marco de teléfono. Voy a crear un marco de tamaño personalizado por ahora. Hagámoslo negro, así como esto. Desde assets, voy a ir a barra de pestañas animada y simplemente arrastrar y soltar una instancia de esta barra de pestañas aquí, así como esta, y alinearla al centro. Voy a seleccionar este marco. Pulsa Play, y veamos si todo funciona bien o no. Aquí, tenemos nuestro estado Home Selected. Voy a dar click en éste. Ahí vamos. Es totalmente receptivo e interactivo. ¿Qué tan genial es eso? Eso es todo por este video. Te veré en la siguiente. 21. carrusel de imagen animada: [MÚSICA] En este video, te voy a mostrar cómo crear este carrusel de imágenes animadas en Figma, así mismo. Si estás listo, comencemos. Quiero que sigas adelante y abras esta imagen animada una página de carrusel dentro del proyecto Figma. En el interior puedes ver que ya preparé estas imágenes para ti. Aquí tenemos algunos Apple Watches, y también aquí tengo este grupo de texto. Como puedes ver, aquí tenemos un título sencillo y un subtítulo. Lo primero que tenemos que hacer es crear un marco. Voy a presionar A en mi teclado y voy a crear un marco de tamaño personalizado. Vamos a establecer el ancho y alto en 500 píxeles, así como así. Ahora, voy a seleccionar todas estas imágenes y ponerlas dentro de este marco. Déjame moverlos hacia abajo así. Pero el punto es que solo deberíamos ver un reloj a la vez. Voy a seleccionar este Marco 1 aquí y voy a asegurarme de que esta casilla de verificación de contenido de clip esté seleccionada. De lo contrario, podremos ver estos relojes. Asegúrese de verificar estas marcas de verificación. Creo que podemos subir un poco esta imagen. Donde quiera mover esta imagen hacia arriba, debe asegurarse de seleccionar todas las demás imágenes también. Voy a seleccionarlos a todos y moverlos hacia arriba. ¿Qué necesitamos aquí? Justo debajo de esta imagen, necesitamos tener este indicador. Puede pensar que necesitamos tener algunos círculos y un rectángulo pero eso está mal. ¿Por qué? Porque mira lo que pasa aquí. Cuando arrastre esta imagen, ya ve lo que pasa. Este primer indicador se convierte en círculo y este segundo se convierte en rectángulo. Para crear tal indicador, necesitamos usar un rectángulo desde el principio. No necesitamos ningún círculo. Déjame crear un rectángulo aquí, así como esto. Hazlo muy pequeño, tal vez 28 por ocho, algo así. Hazlo completamente redondeado. Pero lo voy a poner aquí mismo y luego lo voy a duplicar, golpear Control D o Comando D. Muévelo hacia el lado derecho. Ahora bien, éste debería ser un círculo. Para ello, solo tenemos que asegurarnos de que el ancho y la altura sean los mismos. Voy a disminuir el ancho a ocho. Ahora, voy a duplicarlo una vez más y ponerlo ahí mismo. Ahora, voy a seleccionarlos a todos y les voy a agregar auto-layout, así que pulsamos Mayús y A. Ahí vamos. Déjame cambiarle el nombre a indicador, así como esto. Este primero, el seleccionado, debería ser un poco más oscuro. Voy a hacerlo un poco más oscuro también, así como así. Nuestro indicador también está listo. Déjame alinearlo al centro. Puedo moverlo un poco hacia arriba. Lo siguiente que necesitamos son las capas de textos. Voy a traerlos aquí abajo. Vamos a alinearlo al centro y voy a moverlo un poco hacia arriba. Creamos nuestro marco principal. Ahora, es el momento de animar este fotograma. Para ello, vamos a usar varianza y componentes interactivos, como de costumbre. Voy a seleccionar este Frame 1 y lo voy a convertir en un componente, y voy a agregarle una variante, así como esta. Permítanme seleccionar este conjunto de componentes y cambiar el nombre de la propiedad a slide. Esta primera variante va a ser una. Este segundo va a ser dos. Añadiremos otro en unos segundos. Pero primero, veamos qué tenemos que hacer aquí. Si acabo de previsualizar este carrusel, puede ver que cuando arrastre esta imagen hacia el lado izquierdo, empieza a girar así. Entonces el siguiente reloj entra en el marco girando también, así como así. Esto es lo que tenemos que hacer. Tenemos nuestro punto de partida aquí y está bien. Para esta segunda variante, voy a seleccionar todas estas imágenes, incluso las que están fuera de este marco. Voy a mantener pulsada la tecla Mayús, y usando las teclas de flecha, las voy a mover hacia el lado izquierdo, así como así, hasta que veamos nuestro segundo reloj. A continuación, voy a seleccionar éste, alinearlo al centro horizontalmente. Bueno. Pero ahora solo los movemos sin ninguna rotación. Para que ese efecto de rotación suceda, voy a seleccionar este primero. Voy a rotarlo 30 grados. Mantenga pulsada la tecla Mayús e intente girarla aquí 30 grados. Alternativamente, puedes simplemente especificar el valor aquí. Pero, ¿y éste? Aquí, como pueden ver, cuando intenté arrastrarlo hacia el lado izquierdo, el reloj rosa también gira. Para que eso suceda, necesito dirigirme a mi primera variante aquí. Voy a seleccionar este segundo, que es nuestro reloj rosa, y lo voy a rotar a menos 30 grados, así como esto. Nuestra primera y segunda variantes están listas. Ahora, necesitamos una variante más. Voy a seleccionar esta segunda y presionar este botón Plus para agregar una variante más. Este va a ser el número 3. Voy a repetir lo mismo. Voy a seleccionar todas estas imágenes así como así. Mantenga pulsada la tecla Mayús y muévalas hacia el lado izquierdo. Ahí vamos. Ahora, voy a seleccionar este reloj amarillo y dejándolo al centro. Seleccione aquí este reloj rosa, número 2 y gírelo 30 grados. Así como así como puedes ver aquí, tenemos 30 y en la segunda variante, también deberíamos rotar este tercer reloj. Necesitamos girarlo a menos 30 grados. Pero, ¿y nuestro indicador? El primero ya está hecho. Voy a acercarme aquí. Para el segundo, lo que voy a hacer es esto, no podemos simplemente mover éste al lado derecho. ¿Por qué? Porque aquí, como pueden ver cuando trato de arrastrar este reloj hacia el lado izquierdo, así como así, este indicador, el primero se transforma en círculo. No voy a cambiar su posición aquí y eso es exactamente lo que tenemos que hacer. Voy a seleccionar esta segunda. Voy a ir a Diseño y voy a poner su ancho en 28, igual que lo que tenemos aquí. Voy a cambiar su color a este gris oscuro. Entonces voy a seleccionar este, el primero, y establecer su ancho en ocho y cambiar su color a este gris claro. Tenemos que hacer lo mismo aquí también. Voy a seleccionar este indicador y voy a seleccionar este tercero, aumentar el ancho a 28, así como así. Cambia su color a gris oscuro. Seleccione esta, establezca su ancho en ocho, y simplemente vuelva a cambiar su color a gris claro. Fresco. Para este ejemplo, no voy a cambiar estas capas de textos como el color. Va a ser tan simple, solo puedes configurarlo en rosa, verde y amarillo. El punto principal que debes aprender aquí es cómo animar este reloj y también este indicador. En caso de que te enfrentes a dificultades para mover estos relojes, sobre todo cuando no puedes ver estos relojes afuera, lo que puedes hacer es esto, puedes golpear Shift y O para ingresar a la vista de contorno. Ahora como puedes ver, incluso estos relojes fuera de este marco son visibles para ti y te va a ser muy útil cuando quieras moverlos. Para volver al modo normal, puedes presionar Mayús O nuevamente. Pero ¿qué pasa con las conexiones? Esto es lo que debes hacer. Muchas personas cuando quieren crear esta animación drag, cometen un error muy común. Aquí seleccionan su variante, por ejemplo esta, Variante 1. Después intentan conectarlo al siguiente y simplemente cambian el gatillo para arrastrar. Eso no va a funcionar. Si solo conectas estas dos variantes así, la animación de arrastre no funcionará como esperabas. En su lugar, es necesario seleccionar esta imagen, esta, y luego tratar crear una conexión entre estas dos. Ahora, voy a poner el gatillo en arrastre. Va a ser inteligente animar 300 milisegundos, se ve bien. Hagamos lo mismo aquí. Voy a seleccionar esta, conectarla de nuevo a la primera variante. Va a estar en arrastre otra vez. Vamos a conectar este con el tercero en drag y el tercero con el segundo, va a ser en drag y básicamente estamos hechos. Vamos a probarlo y ver cómo se ve. Voy a crear un marco de tamaño personalizado aquí, 500 por 500 píxeles, así como esto. A partir de assets, voy a buscar carrusel de imágenes animadas y arrastrar y soltar esto en este fotograma, alinearlo tanto horizontal como verticalmente. Puedes seguir adelante y ponerlo dentro de cualquier marco que quieras. Pero para este ejemplo, prefiero ponerlo dentro de este marco y sólo previsualizarlo. A ver si funciona. Ahí vamos. Funciona bien. Nuestro indicador está animado y también tenemos este efecto de rotación aquí para estos relojes. En caso de que quiera utilizar este carrusel de imágenes en un teléfono móvil. Lo que puedes hacer es esto. crear un marco de teléfono móvil aquí, por ejemplo, iPhone 14, así como así. Entonces solo arrástralo y suéltalo dentro y simplemente presiona K y bájalo así. Funcionaría perfectamente si solo selecciono este marco móvil y lo previsualizara. Se puede ver que funciona bien. Esa es la belleza de usar componentes interactivos. Chicos, espero que hayan disfrutado de esta lección. Te veré en la siguiente. 22. Botón de acción flotante animado: En este video, te voy a mostrar cómo crear un botón de acción flotante animado así como este. Si estás listo, vamos a sumergirnos. Aquí dentro del archivo del proyecto Figma, ya preparé estos botones para usted. Para crear esta interacción, necesitamos dos variantes diferentes, necesitamos esta variante cerrada y también esta variante abierta. Esto es lo que voy a hacer, voy a seleccionar este botón más y lo voy a convertir en un componente igual a este y voy a agregar una variante también para crear conjunto de componentes. Este conjunto de componentes va a ser nombrado button y además, su propiedad va a ser nombrada state. el valor de esta propiedad para va a cerrar el valor de esta propiedad para la primera variante y para ésta se va a abrir. Entonces, ¿qué necesitamos? Dentro de ambas variantes, necesitamos tener estos botones también. Voy a seleccionar estos conjuntos de componentes y voy a ampliarlo. Pero mira lo que pasa, el problema aquí es que las restricciones para estos dos botones no están establecidas correctamente. Voy a seleccionar esta y voy a cambiar las restricciones a arriba e izquierda y voy a asegurarme de que esta también tenga las mismas restricciones. Ahora podemos ampliar fácilmente estos conjuntos de componentes. Déjame mover estas variantes por ahí, en algún lugar por aquí y ahora voy a seleccionar estos botones y los voy a poner dentro de esta variante cerrada. Asegúrate de colocarlos dentro de esta variante. Ahora voy a alinear todo verticalmente, así como esto y horizontalmente, y asegurarme de que los coloques aquí mismo. Necesitas alinearlo con tu botón más. A continuación, voy a moverlos y ponerlos debajo de nuestro ícono más y botón más, para así así poder ocultarlos. Ahora mientras estás seleccionado, voy a copiarlos, presionar Control C o Comando C, y voy a pegarlo dentro esta variante abierta también. Voy a seleccionar esta variante abierta y presionar Control V o Comando V y simplemente moverlos aquí mismo. Veamos qué necesitamos obtener, cuando está cerrado, necesitamos ver este ícono más pero cuando se abre, necesitamos ver este ícono de descartar en su lugar y luego estos botones deberían aparecer. Voy a mover un poco esta variante cerrada hacia arriba para tener más espacio aquí y lo primero que voy a hacer es seleccionar este icono y simplemente mantener presionada la tecla Mayús y rotarla menos 45 grados para obtener este icono de descarte. Ese es el primer paso. El siguiente paso es mostrar estos botones, la música de la carpeta y los botones de video. Déjame ver el pedido aquí, necesitamos tener la carpeta aquí, la música y el video ahí mismo. Voy a comenzar con la carpeta, déjame seleccionarla aquí, mantener presionada la tecla Mayús, y usando las teclas de flecha, voy a moverla hacia arriba así. Voy a mantener pulsada la tecla de opción en mi teclado o la tecla alt para ver el margen aquí. Voy a poner el margen a 16. A continuación, seleccionemos este botón de música, mantengamos presionada la tecla Mayús y muévala hacia el lado izquierdo, así así y el margen va a ser 16. Por último, voy a seleccionar este botón de video y mantener presionada la tecla Mayús y moverla hacia abajo así. Hasta ahora, tan bueno, pero no es exactamente lo que necesitamos. Como puedes ver aquí, tenemos un arco. Voy a mover esto aquí arriba y vamos a colocarlos así. Tenemos nuestra variante abierta, también tenemos nuestra variante cerrada, ahora es el momento de crear nuestras conexiones. Voy a seleccionar esta primera, dirigirme al prototipo, y voy a conectarla a esta segunda variante, que es esta variante abierta. El árbol aquí debería estar en click smart animate en 300 milisegundos. Voy a crear una conexión nuevo a esta variante cerrada ahora. Vamos a previsualizarlo y ver si es lo que queríamos o no. Voy a crear un marco de tamaño personalizado aquí, así como esto y a partir de assets, voy a arrastrar y soltar una instancia de este botón ahí mismo. Déjame alinearlo al centro, seleccionar este marco y presionar Reproducir. Voy a hacer click en él y ver qué pasa. Algo anda mal, aquí tenemos nuestro icono animado. Aparece este botón, pero qué pasa con los demás, veamos qué pasa aquí. Aquí está el problema, cuando muevo estos botones, accidentalmente los coloqué fuera de esta variante. Voy a moverlos de nuevo dentro, y ahora debería funcionar. Voy a darle click, ahí vamos. Vemos que tenemos esta animación, pero hay una cosa más que tenemos que hacer. Como puedes ver aquí, tenemos este efecto rebote. Creo que es una buena idea agregar este efecto rebote a este botón también. Para ello, solo tenemos que seleccionar éste, dirigirnos a Prototipo, hacer clic en tu interacción, y desde aquí, voy a cambiar la velocidad de facilidad a rápida. Yo solo quiero que esta interacción tenga este efecto rebote. Para esta variante cercana para esta interacción, quiero mantenerla como está fuera. Vamos a darle una oportunidad. Ahí vamos. Chicos, eso es todo por este video, veré en el siguiente. 23. Efecto de acordeón: En este video, te voy a mostrar cómo crear un efecto de acordeón animado para estas tarjetas igual que lo que ves aquí. Aquí dentro de esta página de efecto acordeón, ya preparé para ti esta tarjeta. Es una tarjeta simple que creé usando otra maquetación. Veamos qué hay dentro. En el interior tenemos este marco. Como puedes ver, también responde. También le agregué otro layout y dentro aquí tenemos este icono y esta capa de texto. Lo importante aquí es que la opción de redimensionamiento de este marco se establece en cerdo para que esta tarjeta sea receptiva igual que lo que ves aquí. Aparte de eso, tenemos este divisor. Es una línea simple y otra capa de texto. Para este efecto acordeón, solo necesitamos tener dos estados diferentes ; cerrado y abierto. Veamos cómo podemos crear uno. Tenemos este estado abierto. Voy a convertirlo en un componente así como este y añadir una variante. Voy a seleccionar el conjunto de estos componentes y cambiar el nombre de la propiedad a estado. Ahora voy a seleccionar esta primera variante. Se debe abrir. Eso está bien. Voy a seleccionar esta segunda y debería estar cerrada. Para esta variante cerrada, lo que tenemos que hacer es ocultar este divisor y también este texto. Por último, necesitamos rotar esta flecha 180 grados. Como usé otro diseño para esta tarjeta, es bastante simple. Sólo voy a seleccionarlo y solo esconderlo en la lista de capas. Ahí vamos. Voy a seleccionar esta también y esconderla. Ves que cuando usas otro layout, ya que tu elemento es responsive, es muy fácil crear componentes interactivos. A continuación voy a seleccionar este icono, mantener pulsada la tecla Mayús y girarla 180 grados, y básicamente terminamos. Solo necesitamos conectar estas dos varianzas ahora. Voy a seleccionar este, dirigirme al prototipo, conectarlo a este, y debería estar de barril y animar de forma inteligente. Voy a configurarlo demasiado “Rápido” para obtener este efecto rebote como puedes ver aquí. Ahora hagamos lo mismo por esta varianza. Solo conectamos de nuevo a la varianza de ropa y no necesitamos cambiar nada aquí. Ahora es el momento de darle una oportunidad. Voy a crear un marco aquí. Déjame modificar el color del fondo. Déjame cambiarlo a azul claro, algo así. Voy a ir a “Activos” y de aquí, voy a buscar mi tarjeta. Vamos a arrastrarlo y soltarlo dentro así así y voy a cambiar su estado a cerrado. Ahora vamos a seleccionar este marco, pulse “Jugar”. Voy a hacer click en él. Ahí vamos, funciona como se esperaba. Pero aquí está lo bueno de otro diseño. Ahora simplemente puedo duplicar esta carta, golpear Control D o Comando D, moverla hacia abajo, duplicarla algunas veces así. A lo mejor una vez más, muévelo hacia abajo. Ahora voy a seleccionarlos a todos así así y voy a agregar otro layout a todos ellos. Golpea Shift y A. Si sigo adelante y hago este cuadro un poco más grande, así así, y trato de previsualizarlo, mira lo que conseguimos. Ahí vamos. Tenemos una lista receptiva de tarjetas con este efecto acordeón. Qué genial es eso. Bien chicos. Eso es todo por este video. Te veré en la siguiente. 24. Qué sigue: Enhorabuena por completar el curso con éxito. Has recorrido un largo camino y estoy muy orgullosa de ti, pero quizá te estés preguntando, ¿cuál es el siguiente paso para ti? Bueno, primero, asegúrate de enviar los proyectos que has realizado en Skillshare porque me encantaría ver lo que has creado. A continuación, te agradecería que dejaras una revisión honesta del curso para que te lo mejorara. Si quieres recibir notificaciones sobre las últimas actualizaciones del curso, asegúrate de seguirme en Skillshare. Si quieres conocer más sobre diseño y prototipado de UI/ UX, también puedes consultar mi canal de YouTube, donde publico videos relacionados con el diseño semanalmente. Fue un honor ser tu instructor en este curso, y espero verte en mis otros cursos. Que tengas un hermoso día, y adiós.