Prototipos de Figma: una inmersión profunda, desde principiante hasta profesional, para UX/UI Designer

1. 00 introducción: Este curso es una verdadera inmersión profunda en el mundo de la creación de prototipos con Figma. Vamos a echar un vistazo más de cerca a la configuración básica para la creación de prototipos Animado inteligente, componentes interactivos, creación de prototipos con variables, así como documentar y compartir nuestros prototipos Comenzaremos con lo básico y aprenderemos a conectar pantallas, establecer diferentes comportamientos de desplazamiento y previsualizar nuestros diseños Luego pasaremos a Smart animar la parte mágica cuando se trata de prototipado en Te voy a mostrar todos los superpoderes de Smart Animate, y también vamos a hablar las limitaciones y hacer algunas Una vez que entendamos Smart Animate, vamos a pasar a configurar micro interacciones con componentes interactivos en Figma. Los componentes interactivos le ahorrarán mucho tiempo cuando se trata de agregar un comportamiento estándar a las instancias en todo su diseño. Una vez que agreguemos variables para crear expresiones y declaraciones condicionales, verás que el verdadero poder de Figmas cobra vida. Te proveeré de muchos ejemplos para explorar en los archivos del patio de recreo. Para redondear, voy a mostrarte consejos y técnicas para documentar y compartir tus prototipos con otros Vamos a echar un vistazo a la documentación de los componentes interactivos con en Figma, así como los sistemas de diseño externos Te proveeré con un archivo Figma que te permite trabajar a mi lado durante los videos o regresar a los ejercicios con instrucciones detalladas en tu propio tiempo Esto provoca para ti si tienes conocimientos básicos de Figma, o si eres un usuario avanzado de Figma y quieres mejorar tus habilidades de prototipado Este es el curso por moon learning dot IO. 2. !!! POR FAVOR MIRE!!! Nueva interfaz de usuario de Figma en beta: Heads Figma ha actualizado su interfaz de usuario, y es posible que veas un nuevo diseño en lugar del antiguo Esta actualización es actualmente beta cerrada, por lo que aún no todos tienen acceso. Actualizaré las artes y reflejaré la nueva interfaz una vez que esté disponible para todos. Los cambios son en su mayoría visuales. Todas las características y herramientas siguen ahí, solo en lugares ligeramente diferentes o con una nueva L. Por ejemplo, la barra de herramientas superior se ha movido hacia abajo. El panel lateral izquierdo, en cambio, se ha mantenido en su mayoría sin cambios. Ahora puedes cambiar el nombre de tu archivo aquí. Aún puedes ver todas tus páginas, capas y recursos. En el lado derecho, notarás algunos cambios cuando hagas clic en un diseño, pero todas las funciones aún están disponibles. Si eres un principiante y encuentras confusa la nueva interfaz, puedes hacer clic en el signo de interrogación en la parte inferior derecha y volver temporalmente a la interfaz de usuario anterior. Esto no influye en tu diseño. De esta manera podrás seguir junto con los videos del curso usando la interfaz de usuario antigua mucho más fácil hasta que estés listo para hacer la transición a la nueva. La FIMA está implementando gradualmente esta actualización. Si aún no tienes acceso, también puedes solicitarlo a FIMA, pero no hay garantía, algunos de ustedes tal vez solo tengan que ser un poco pacientes Es posible que el administrador de tu equipo también tenga que habilitar la actualización por ti, así que asegúrate de verificar esto también. Figma actualiza frecuentemente el software, así que espera cambios y prepárate para adaptarte Las características pueden moverse como este botón de biblioteca aquí ha estado en todos los lugares posibles en los últimos años. Pero no te preocupes, nunca se perderá nada y te acostumbrarás a usar FIMA de una manera mucho más flexible Tiene un enfoque realmente genial en la usabilidad. Entonces no se trata de aprender algo de memoria, sino de entender el software como un todo. 3. MATERIAL: Descargar el archivo de Figma: Quizás quieras trabajar a mi lado, así que preparé algunos archivos para que los descargues en el curso que estás tomando simplemente navega al proyecto y recursos. Y ahí encontrarás toda la información y el enlace donde podrás descargar el material. En esta página, encontrarás una variedad de descargas. Simplemente puede elegir la causa que está tomando actualmente y luego simplemente haga clic en Descargar. Y automáticamente descargará el archivo por ti. Para importar los archivos solo tienes que descargarlos. Es importante que tengas una cuenta Figma. Dentro de tu cuenta de Figma, navega ya sea a borradores o ve a un proyecto dentro de un equipo. Haga clic en el botón Importar y podrá elegir qué archivo desea cargar. Podría tomar un momento ya que son bastante grandes, pero una vez que los hayas importado, estarán en tu cuenta y no necesitas repetir este proceso. Dentro del archivo. Encuentras material para trabajar a mi lado en los videos, pero también agregué algunas instrucciones para que siempre puedas volver en tu propio tiempo y probar y practicar. Estoy trabajando con fuentes de Google para la mayoría de mis diseños. Entonces, si estás trabajando con la app Figma, entonces no necesitas hacer nada o fuentes de Google se precargan automáticamente. Si quieres trabajar con Figma en el navegador, entonces solo necesitas buscar la fuente que te está mostrando como faltante por ejemplo Poppins, uso mucho. Y luego puedes descargar directamente esta fuente, instalarla en tu computadora y ya estás listo para comenzar. 4. ¡NUEVO! Actualizaciones de Config 2023: A finales de junio de 2023, durante una conferencia de conflicto Figma, publicaron algunas actualizaciones de Prototyping Todo sigue funcionando como antes. No obstante, hay pocos extras como ese. Tenemos un infile, una vista previa. Nuestro menú de creación de prototipos ya está visible justo al lado de nuestros conectores Y podemos prototipar con variables. Por favor, asegúrate de que estás descargando la última versión del archivo Figma Aquí también encontrarás marcar claramente qué hay de nuevo y dónde encontrar todo. Déjame guiarte rápidamente a través de las nuevas funciones para que estés al tanto de cualquier cambio a lo largo de los videos. Así como antes, si seleccionas algún fotograma y haces clic en el botón Reproducir, entonces esto abrirá una vista previa por ti. Sin embargo, ahora también tenemos otra forma de previsualizar, que es si hacemos clic en el pequeño error, se puede ver Vista previa en archivo. Entonces esto significa que obtenemos una pequeña ventana de vista previa justo en nuestro archivo para ver nuestro prototipo y Acción que es súper útil. También hay un atajo para esto. Simplemente presione Mayús y la barra espaciadora, y esto abrirá la ventana de vista previa por usted. Y otros cambios que si haces clic en cualquier conector, entonces el menú de creación de prototipos ahora estará justo donde está ocurriendo tu interacción antes de que esto abriera una ventana en la parte superior derecha Dentro del menú, todavía encuentras todo como antes, solo tiene un diseño ligeramente diferente. Hay algunos elementos nuevos que se agregaron, que son variables y condiciones. Todo lo demás ha estado ahí antes. Te recomiendo si quieres usar variables y condicionales en Prototipos que primero te familiarices con las variables, que es una característica completamente nueva en Figma y tengo un curso separado Y luego puedes saltar directamente a la prototipos con esas nuevas características Eso es más o menos. Diviértete Prototipado 5. BÁSICAS: 01 El espacio de trabajo de los prototipos de Figma: Así que comencemos con algunos básicos alrededor del espacio de trabajo a la hora de tratar con la creación de prototipos. Entonces aquí tenemos algunas configuraciones de diseño para móviles y algunas para escritorio. Y poner por defecto, vamos a estar en la pestaña Diseño. Junto a la pestaña de diseño, encuentra esa pestaña Prototipos. O también puedes usar el atajo para alternar entre ellos, viejo 89, y por cierto, cero sería modo de inspección. Así que vamos a conocer este menú aquí con más detalle. Por ahora. Solo debes saber que si haces clic en el lienzo gris, entonces estableces la configuración general del prototipo. Entonces cualquier dispositivo que quieras configurar, va a llegar a conocer más sobre eso más adelante. Y si quieres cambiar el fondo y eso va a estar en la vista de presentación, que vamos a echar un vistazo en un minuto. Si alguna vez seleccionas algún fotograma en tu lienzo, entonces verás que el menú de creación de prototipos aquí cambia. Y aquí es donde vamos a estar trabajando la mayor parte del tiempo. Vamos a aprender a configurar diferentes flujos, cómo configurar interacciones y animaciones entre diferentes pantallas e incluso dentro de conjuntos de componentes. Y vamos a hablar de comportamiento de desplazamiento. Y si haces clic aquí, entonces básicamente vas a volver a tu configuración general de prototipo. Entonces este es el mismo menú que si simplemente hiciera clic en el fondo del lienzo. Hagámoslo otra vez. Selecciono cualquier marco. Ahora puedes ver esto un paso más allá y la configuración del prototipo. Entonces, la configuración del prototipo es solo para la configuración general antes de todos los marcos y todos los elementos aquí. Ahora archivo de diseño, aquí es donde vamos a configurar el diseño y todo el comportamiento de nuestro prototipo. Si queremos ver nuestro prototipo y acción, entonces necesitamos presionar el pequeño botón Reproducir en la parte superior derecha de tu archivo. Esto luego salta al modo de presentación o vista previa. Coloca el cursor sobre esto. También te van a mostrar los atajos. En mi caso, como estoy en una Mac, esto es todo para Comando e Intro. Y se puede ver que esto ahora está abriendo una nueva pestaña. Entonces en esta vista previa, vas a ver un solo fotograma en el centro. Si haces clic en un fondo negro y obtienes algunas opciones más aquí arriba para que puedas comentar y compartir comentarios con tu equipo. Y en el lado derecho obtienes las opciones para compartir. Entonces con un enlace o invitando, puedes compartir e incluso obtener un código incrustado para tu prototipo. Y vamos a hablar de todas estas opciones para compartir con más detalle durante el curso. Aquí tienes las opciones de cómo quieres que se muestre tu prototipo. Si simplemente usa eso, entonces puede alternar entre las diferentes opciones para que pueda ver diferentes tamaños, cómo desea que se muestre. Simplemente puede usar las teclas de su teclado para saltar al siguiente fotograma, incluso si ya no tiene configuraciones de conexiones. Y anotar el orden que los usuarios de Figma aquí. Entonces esto es muy útil porque Figma realmente elige el primer fotograma y encuentra, y luego pasa por la fila de marcos. Si no hay más marcos y va a saltar al siguiente fotograma disponible. Entonces este no tiene por qué ser un papel claro. Podría ser algo así, pero Figma va a interpretar esto como una fila y pasar por el fotograma uno por uno. 6. BÁSICAS: 02 ¿Dónde deberían vivir mis prorotypes: Ahora, ¿dónde deberías configurar tus prototipos? Bueno, como podemos saltar del diseño a la pestaña Prototipos en Figma. Podrías simplemente configurarlos en tus diseños existentes. Eso podría estar bien para un proyecto muy pequeño, pero en general, te recomiendo que hagas una copia de tus pantallas, luego configures al menos una página propia o incluso un archivo completamente propio y copies tus marcos por aquí. Y ahora tendría este lugar designado sólo para mi prototipado. La razón de esto es que si estoy trabajando con prototipado, voy a configurar probablemente muchas versiones y ajustar un poco mis diseños para que los prototipos funcionen de la manera que quiero. Mientras tanto, quiero que mi diseño se mantenga bastante limpio y solo sea una visión general de las páginas existentes. Esto va a tener más sentido una vez que empecemos a construir nuestros prototipos y también una vez que hablemos de documentar diferentes comportamientos. 7. BÁSicos: 03 en la vista previa de los dispositivos: En Figma, puedes configurar una vista previa del dispositivo, lo cual es bastante agradable. Entonces, si seleccionamos la pantalla aquí y volvamos a nuestra pestaña Diseño. Puedo ver que este verde está configurado como un iPhone 14. Tengo, salto de nuevo a mi menú de creación de prototipos. Puedo ir a mostrar los ajustes del prototipo. O esto es lo mismo que si simplemente haga clic en el lienzo gris. Y luego en dispositivo, puedo elegir el iPhone 14 de mis dispositivos preestablecidos. Puedo elegir un color aquí, así que vamos a ir por la luz de las estrellas. Y también podría alterar el color de fondo a mi gusto. Entonces ahora vamos a golpear play de nuevo. Y se puede ver que ahora mi diseño se asienta dentro de este dispositivo. Ten en cuenta que una vez que dijiste una vista previa móvil, algunos disparadores cambiarán de nombre. Así que haga clic por ejemplo se llamará Tap, pero funcionará exactamente igual. Ahora, lo único que debes tener en es que si ahora estás pasando por tus diferentes pantallas, que todo sea perfecto siempre y cuando sigas trabajando en este tamaño de móvil. Tan pronto como estás llegando a tu vista de escritorio, que tengo en el mismo archivo de diseño, puedes ver que es simplemente salta aquí, pero es mantener esos ajustes de prototipos porque están establecidos para toda esta página. Si desea utilizar una vista previa del dispositivo, le recomiendo que establezca una segunda página para la creación de prototipos. Entonces voy a llamar a este escritorio prototipo. Y me gusta bastante agregar algunos íconos, pero no es absolutamente nada de lo que tengas que hacer. Simplemente puedes copiarlos en. Y voy a usar aquí este pequeño icono de prototipado. Y ahora voy a llamar a este prototipo de trapeador. Entonces aquí es donde va a estar la pantalla de mi móvil. Y también me gusta hacer una especie de app separada. Si estás en el plan gratuito Figma, entonces es posible que no se te permita tener tantas páginas. Entonces solo déjalo todo en una página y simplemente no uses la vista previa del dispositivo. Entonces ahora todo lo que necesito hacer es copiarlos a mi nueva página. Y ya se puede ver eso aquí. En la configuración del dispositivo están establecidos en ninguno. Normalmente dejo escritorio en ninguno. Pero también podrías echar un vistazo si hay un dispositivo que quieras usar. Para que puedas ver 1280. Entonces tengo que comprobar que correspondería al MacBook Air. Entonces voy a hacer un prototipo y ahora puedo simplemente elegir el MacBook Air, y tendría este aquí. Ahora como estoy jugando, se puede ver que esta página está configurada para el MacBook Air. Si estoy saltando hacia atrás y estoy seleccionando mi vista móvil, entonces aquí, esta se queda con el dispositivo del iPhone. Entonces este es un concepto muy importante para entender que los prototipos no se comunican a través de diferentes páginas aunque estén en el mismo archivo. 8. BÁSICAS: 04 elementos fijos y desplazables: En Figma, podemos configurar están diseñados tal manera que en modo presentación, algunos elementos de fijo y algunos son desplazables. Echemos un vistazo. Aquí. Tengo el diseño de una pantalla móvil. Quiero que la navegación en la parte superior se mantenga fija mientras el contenido se desplaza. Tengo otro botón Agregar aquí abajo, que también son como para estar fijos. Echemos un vistazo al modo de presentación, cómo se ve esto en estos momentos. Si presiono el botón Reproducir, puedo ver mi prototipo. Puedo ver que si intento un scroll, no pasa absolutamente nada. Entonces, saltemos hacia atrás y arreglemos esto. Para que el desplazamiento funcione realmente. Necesitamos contenido que sea más grande que el marco. Entonces aquí selecciono el frame padre llamado mobile. Y en el lado derecho, se puede ver una pequeña casilla de verificación llamada Contenido de clip. Si desmarca esta casilla, puede ver que mi grupo de tarjetas es en realidad mucho más grande que mi marco original. Y esto es realmente importante si no tienes contenido que puedas clip y que básicamente desbordará tu frame. Entonces no puedes agregar scroll. Puedes tener esto marcado o desmarcado. No hace ninguna diferencia. Lo que hay que hacer ahora es saltar al modo de prototipado. Así que haz clic en la pestaña Prototipos en la esquina superior derecha. Y luego en desplazamiento de desbordamiento, elija el desplazamiento vertical. Volvamos a saltar a nuestro modo de presentación y veamos qué hizo eso. Así que ahora puedo desplazarse por el contenido, pero como pueden ver, mi encabezado y mi botón aquí no están fijos. Así que volvamos y arreglemos esto. Elige al elemento en mi caso, el encabezado que quieres que quede fijo y salte a la creación de prototipos. Verás debajo de la opción posicionada para arreglar, permanecer en su lugar. Observe que aquí en el elemento hijo también obtiene la opción de establecer el comportamiento de desbordamiento. Entonces ese sería ese comportamiento de desplazamiento dentro de este marco anidado. En este caso, no queremos ningún comportamiento. Ya dijimos nuestro scroll vertical al contenedor padre. Arreglemos también este botón aquí abajo. Vamos a fijar esto a fijo, permanecer en su lugar también. Y ahora vamos a golpear Play y echar un vistazo a cómo se ve esto. Así que mi contenedor padre se desplaza muy bien y todos mis elementos fijos permanecen en su lugar. Si alguna vez experimentas que el desplazamiento no funcione, entonces asegúrate de verificar tres cosas. primer lugar, en tu pestaña de diseño, asegúrate de tener contenido recortado que sea más grande que el marco con el que estás tratando. En el menú de creación de prototipos, asegúrate de que tu desplazamiento de desbordamiento esté configurado. Una vez que tengas configurado el elemento padre, ahora elige un elemento hijo que quieras fijar en su lugar, ve a la creación de prototipos y luego otro médico elige fijo, permanece en su lugar. 9. BÁSICAS: 04 elementos pegajosos: Elementos pegajosos en pergamino. También puedes crear un efecto en los elementos simplemente permanecen pegajosos cuando llegan a la parte superior de tu pantalla. Esta es prácticamente la misma configuración que para los elementos fijos. Por lo tanto, debe asegurarse de que el marco padre tiene contenido recortado que desborda el marco para que esto funcione. Y esto necesita ser configurado en desplazamiento vertical. Ahora desengarza y luego elige los elementos que quieras que queden pegajosos. Entonces en mi caso, esta es la sección llamada Nueva y esta sección llamada guardada. Y luego estoy saltando de nuevo a la creación de prototipos. Y ahora en posición en lugar de fijo, voy a elegir el tope pegajoso en el borde superior. Lo importante para que esto funcione es que necesitas configurar el orden en tu panel de capas tal manera que la posición que viene dure. Entonces en mi caso, este azul aquí llamado guardado está encima del otro. Entonces parece que este es el primero. Pero básicamente en mi jerarquía de capas, en realidad, esta sección dos está encima de la sección uno. Ahora vamos a elegir el marco padre. Vuelve a Diseñar clip otra vez. Y vamos a darle a Play y veamos si eso está funcionando. Eso se ve simplemente genial. Sin embargo, podrías mantener tu encabezado fijo y luego hacer que esas secciones se detengan debajo del encabezado simplemente arreglando el encabezado. Eso no funcionaría porque irían tras el mismo borde superior. Un pequeño hack que puedes usar aquí es dibujar un marco alrededor de tu sección. Entonces llamé a esto aquí pegajoso. Y luego dentro se puede ver que tengo mi sección normal colocada un marco alrededor de ella es un poco más grande. Entonces esta distancia aquí es la misma distancia luego el menú en la parte superior. Entonces estoy creando un offset artificial. E hice lo mismo con mi otra sección de aquí abajo. Entonces hice lo mismo con el azul de aquí. Vamos a clip esto y vamos a golpear Play y echar un vistazo. Y se puede ver que ahora búfer esta pequeña sección, así que crea un desplazamiento a mi menú y está funcionando bien. 10. BÁSICAS: 05 marcos de anidación para presentación: Uno de los grandes poderes de Figma es anidar marcos. Y esto también desatará muchas posibilidades a la hora de crear prototipos. Entonces entendamos esto un poco mejor. Entonces aquí tengo mi diseño y esta suele ser la pantalla que estoy representando como marco. Y aquí ya configuré todo lo que quería que me quedara fijo y desplazable. Si salto a mi modo de presentación, puedo hacer que mi scroll up sea un prototipo. Hasta el momento tan bueno. Sin embargo, si lo haría, dibuje marco alrededor de éste. Así que vamos a dibujar un marco simple y vamos a darle otro color de fondo. Entonces entendemos esto un poco mejor. Y ahora golpearía mi modo de presentación. Entonces se puede ver que Figma tomó el marco padre. Entonces todo lo que está sosteniendo otros marcos como mi marco de exhibición. Lo bueno ahora es que todo lo que configuré en este marco. Así que todo el elemento fijo y elementos desplazables más antiguos aún permanecen en su lugar. Y podemos hacer un gran uso de eso. Porque esto nos permite presentar nuestro prototipo en contexto. Entonces, ¿qué podemos hacer, por ejemplo I. Configurar aquí otro marco. Y en ese marco puedo agregar un titular, algunas viñetas descriptivas que describen mi prototipo. Y también he añadido una imagen, así que una maqueta donde colocaré mi prototipo. No hay que añadir eso. Entonces ahora voy a saltar por encima y copiar mi diseño original. Y con ello, una copia de todas las configuraciones, orden de desplazamiento y elementos fijos. Y voy a pegarlo dentro de mi maqueta aquí. Vamos a redondear las esquinas para que quede un poco mejor. Entonces si ahora selecciono este fotograma y presiono el modo de presentación, entonces me mostrará todo el fotograma. Entonces todas las diapositivas de presentación que configuré. Y lo genial es que mi prototipo seguirá funcionando. Por lo que realmente se puede presentar en su entorno. Si mueves el mouse a la esquina superior derecha de la pantalla, obtienes el menú desplegable Opciones. Y él puede elegir cosas como si quieres que una presentación se ajuste a la pantalla por ancho y así sucesivamente, lo que elijas aquí, si luego encabezaste el botón de compartir prototipo, cualquiera que vea tu presentación con ese enlace tendrá los mismos ajustes preestablecidos. También puedes conectar diferentes marcos de presentación. Así que al igual que un prototipo estándar, de esta manera, puedes crear una presentación que incluya un prototipo en funcionamiento y en el que se pueda hacer clic. El tamaño que esta es una característica realmente increíble para impresionar a todos en una presentación, es realmente genial entender cómo funcionan los prototipos y Figma. Es decir, que establezca el prototipado en los marcos individuales. Y esto es algo que te va a ayudar mucho cuando nos sumergimos un poco más en establecer diferentes direcciones. 11. BÁSICAS: 06 scroll horizontal y vertical: Investiguemos un poco más las diferentes direcciones de desplazamiento en Figma. Entonces tenemos vertical, horizontal, y la combinación de ambos que queremos echar un vistazo. Empecemos por la vertical, que también es la más común. Recuerda, para todos ellos, para que el desplazamiento funcione, necesitas tener contenido recortado. Eso significa que necesitas contenido que desborde tu marco. Entonces, si ese es el caso, simplemente salta a tu pestaña de prototipos. Y bajo desplazamiento de desbordamiento, establezca esto en desplazamiento vertical. Si ahora golpeamos el modo presentación, todo será desplazable. Como hemos aprendido antes, también podemos seleccionar ciertos elementos, saltar de nuevo a Diseño y fijarlos en posición. Entonces, si saltamos de nuevo al modo de vista previa, puede ver que ahora el encabezado se arreglará y solo un cuerpo sería desplazable. Entonces, hasta ahora, cuando nos ocupamos del desplazamiento del contenido, añadimos al marco padre. Pero lo mejor en Figma es que entonces podemos agregarlo a cualquier frame anidado. Entonces déjame mostrarte la diferencia. En primer lugar, seleccionemos aquí el marco padre. Jim, vuelve al prototipo y quita desplazamiento vertical para que puedas configurarlo nuevo en ningún desplazamiento. Ahora, en lugar del marco padre, voy a seleccionar el marco anidado aquí, entonces el grupo de cartas, y voy a establecer esto en desplazamiento vertical. Entonces saltemos a nuestro modo de vista previa y veamos si esto funciona. Bueno. Realmente no lo está funcionando, aquí es donde poco movimiento de salto, pero no es desplazarse por este contenido. Entonces veamos por qué es eso. Ahora recuerda que necesitamos clip de contenido, por lo que el contenido que es más grande que el marco. Para que el desplazamiento funcione. Volvamos a nuestra pestaña Diseño. Podemos ver aquí que en el marco padre eso era cierto, nuestro grupo de tarjetas era más grande que el marco, por lo tanto, comenzó a desplazarse. Pero ahora aplicamos el desplazamiento a este marco anidado. Y se puede ver que esto no se va a acortar porque el marco que lo rodea en realidad está sosteniendo todo ese contenido en uno. Entonces lo que puedo hacer ahora es seleccionar este cuadro y ahora puedo cambiar el tamaño del cuadro. Asegúrate de activar el contenido del clip. Entonces puedes ver que tu marco es en realidad más pequeño que tu contenido. Y ahora puedo ajustarlo hasta el fondo de mi aparente fotograma. Así que ahora vamos a intentarlo de nuevo. Pulsa Jugar y podrás ver que ahora solo el grupo de cartas es desplazable. Observe cómo la barra de búsqueda y todo lo demás se mantiene en su lugar. Comprender que puede aplicar el comportamiento de desplazamiento al marco padre o al marco anidado es realmente importante para liberar todo el poder de la creación de prototipos. Echemos un vistazo al desplazamiento horizontal. Así que aquí de nuevo, necesitamos seleccionar el marco anidado, porque si aplicaría desplazamiento al marco padre, eso desplazaría todo el fotograma. Pero solo quería esta parte aquí del grupo de cartas que tiene cartas apiladas horizontalmente. Ahora intentemos lo mismo que antes. Simplemente seleccione ese grupo, vaya al prototipo y cámbielo a desplazamiento horizontal. Si ahora presiono preview, eso de nuevo no va a funcionar y solo me va a dar este comportamiento saltador. Entonces hagamos lo mismo que hicimos con el scroll vertical. Seleccionemos un grupo. Vuelve a Diseño y echa un vistazo a lo que sucede con el contenido recortado. De hecho, puedo desacoplar el marco padre y luego puedes ver el tamaño completo del grupo anidado. Entonces como puedes ver, este marco tiene el tamaño que incluye todas las tarjetas y no se puede acortar nada. Así que de nuevo, voy a seleccionar este cuadro y cambiar el tamaño del marco. Ahora, si alterno el contenido recortado, puedes ver los contenidos ocultos. Entonces ahora mi contenido es más grande que mi marco. Volvamos a presionar el botón de reproducción. Y se puede ver que ahora mi desplazamiento horizontal como de trabajo. Bien, entonces el último es combinar el desplazamiento horizontal y vertical. Este es un comportamiento típico que te gustaría en un mapa o algo así. Entonces, si desclip el contenido de este mapa, puedes ver que en realidad es mucho más grande que el marco. Entonces selecciono este mapa, que es un marco anidado. Ir al prototipo, y seleccionar desplazamiento horizontal y vertical. Ahora porque el contenido ya es más grande, no necesito hacer otra cosa. Simplemente seleccione el marco padre, presione Reproducir. Puedes ver que puedes mover el mapa por ahí. Y porque estamos aplicando su comportamiento a esos elementos anidados, podríamos combinarlos. Así podemos tener uno desplazándose horizontal y verticalmente. Y luego podemos agregar un comportamiento completamente diferente al marco padre, por ejemplo, así que agreguemos algo de desplazamiento vertical. Entonces ahora como pueden ver, esto todavía está en su lugar, pero también puedo desplazarme por todo el contenido. Entonces, como puedes ver, aplicar este comportamiento a los marcos anidados realmente desata el poder de una mezcla de comportamientos diferentes en la creación de prototipos. 12. BASICS: 07 pantallas de enlace: Vincular pantallas y Figma es realmente muy sencillo. Entonces aquí tengo un ejemplo sencillo. En esta pantalla de inicio. Tengo diferentes formas de colores. Y una vez que haga clic en una de estas formas de colores, quería saltar a la página de detalles de cada color. Asegúrate de estar en modo prototipo y luego selecciona cualquier marco de forma. Texto, no importa. Una vez que pase el cursor sobre él, verá aparecer esas pequeñas burbujas. Simplemente puedes recoger cualquier burbuja. No importa de qué lado estés seleccionando. Ahora, arrastre un conector y simplemente conéctelo al marco con el que quería conectarse y soltarlo. Y eso es todo. Figma abrirá automáticamente el panel de detalles de interacción para usted y podrá personalizar aún más su interacción. Esto se puede hacer de inmediato. O si está cerrado, simplemente haga clic en el conector o directamente en la interacción en el panel y se abrirá de nuevo. Una interacción siempre se compone de un disparador, una acción y un destino. Entonces esta es la parte superior de este panel aquí. Onclick es nuestro disparador al que se navega actina. El destino es nuestro marco llamado Orange. Ahora puedo alterar la acción desencadenante y la estimación es simplemente haciendo clic sobre ellos. Así que podría cambiar para activar de clic a arrastrar, pasando el mouse enter y así sucesivamente. Si queremos cambiar de pantalla, entonces normalmente va a ser OnClick. Así que voy a dejarlo en esto por ahora y luego vamos a conocer a los demás. Mi acción es navegar a. Figma también me da la opción de intercambiar superposiciones, cerrarlas y abrirlas y así sucesivamente. Regresa, desplázate hasta un enlace abierto y vamos a echar un vistazo a esto en un minuto. Después el destino. También podría elegir cualquier otro marco de este desplegable. Sin embargo, te darás cuenta a medida que estás lidiando con más marcos, esto es un poco tedioso. Entonces prefiero simplemente seleccionar mi conector y luego elegir otro marco simplemente moviéndolo alrededor. A continuación se muestra la parte de animación. Entonces así es como nuestras cosas animadas terminan comportándose una vez que la interacción está sucediendo. Esta es la parte elegante, la parte que trabaja configuró todo este comportamiento mágico. Las cosas se transforman entre sí y así sucesivamente. Ahora vamos a tener una mirada más detallada, sobre todo a Smart Animate. Sin embargo, solo una palabra de precaución, las microinteracciones son realmente útiles. Sin embargo, te recomiendo que primero te asegures de que tu conexión real y tu usabilidad estén funcionando y que todo tenga sentido. Y luego más adelante con tu equipo de desarrollo, podrás pensar en qué animaciones e interacciones te gustaría agregar. Porque lo que a veces solo un clic y Figma, en realidad es bastante difícil de configurar y CSS. Entonces solo para tenerlo un poco más suave, voy a ir por el alma. Él puede establecer el tiempo que lleva disolverse en otra pantalla. Y también podríamos elegir uno de los comportamientos preestablecidos. Sólo voy a dejarlo a gusto por ahora, lo cual es bastante bonito. Echemos un vistazo a cómo se vería eso en nuestra vista previa. Voy a seleccionar el marco padre, y solo voy a agregar una maqueta a su alrededor. Estoy trabajando en un iPhone tamaño 14. Bien, así que vamos a golpear Play. Aquí veo mi pantalla de inicio y si ahora hago clic en mi forma naranja, puedo ver que navega a la subpágina. No obstante, si estoy pinchando en una bolsa, entonces no pasa nada. Así que vamos a configurar las otras interacciones también. Así que volvamos a nuestro archivo Figma. Y aquí, antes que nada, voy a conectar las otras formas de dientes. Entonces simplemente voy a arrastrar un conector. Y se puede ver que Figma guardó los presets que acabo de usar para el naranja. Así que esto es muy agradable y servicial por lo general. Ahora lo que también quiero hacer, si hago clic en atrás, quiero volver a saltar a la pantalla de inicio. Entonces es lo mismo en la pestaña, navega a casa. Y puedo dejarlo en el mismo comportamiento. Así que voy a hacer eso por los otros dos. Um, por cierto, si te estás preguntando por qué dice tab y click más, Eso es simplemente porque cambié el dispositivo a iPhone. La acción sigue funcionando igual. Entonces echemos un vistazo a nuestro prototipo. Y eso está funcionando perfectamente. 13. BASICS: 08 La acción de la parte posterior: Hablemos de la acción de retroceso porque esto realmente puede ayudarte a simplificar mayormente nuestros prototipos. Entonces aquí tengo un ejemplo donde hago clic en una de las formas y luego salta a la página de detalles. Si quiero volver, tengo un botón de retroceso en la parte superior. Y eso entonces otra vez, enlaza de nuevo a la página principal. Ahora eso funciona bien y absolutamente puedes usarlo así. Pero hay una manera de que puedas deshacerte de todas estas conexiones extra. Seleccionemos nuestro botón Atrás aquí, luego abrimos nuestro menú interactivo. Aquí puedo decir onclick. Y por cierto, si pones tu prototipo aquí, entonces esto ha ido a cambiar. Dos en la parte superior. Déjame mostrarte Eso es exactamente lo mismo. Es solo que si configuras un prototipo va a cambiar la redacción. Así que onHaga clic o en la pestaña en lugar de navegar para simplemente elegir de nuevo en el menú Acción. Eso ahora va a saltar de nuevo al marco previamente abierto. Entonces echemos un vistazo a esto en nuestro modo de presentación. Y puedo ver que si hago clic aquí, llego a la página de detalles, hago clic en atrás y simplemente vuelvo aquí. Entonces lo mismo que si tuviera una conexión directa. Ahora un pequeño consejo, ahora puedo seleccionarlos todos y cambiarlos manualmente a atrás. O simplemente puedo borrar las conexiones y luego tener esta aquí que configuré, copiarla, y simplemente pegar el comportamiento en cualquier otro elemento. Esto funciona porque estoy en modo prototipado. Si estuviera en modo diseño, simplemente copiaría todo el elemento. Ahora, volver es fantástico, pero no lo confundas con un botón de inicio. Porque a medida que tu diseño se vuelve más complejo, hay diferentes lugares para luego navegar a la misma pantalla. Por lo tanto, back está realmente ahí para saltar siempre nuevo a la última pantalla visitada. Y esa no es necesariamente tu pantalla de inicio. 14. BÁSICAS: 09 Scrollto: Entonces, hasta ahora solo hemos estado enlazando afuera a marcos externos, pero también podemos enlazar a un elemento dentro del mismo marco. Entonces en mi ejemplo, vamos a soltar el contenido. Se puede ver que tengo aquí abajo un cuadrado negro. Entonces lo que quiero es que si hago clic en ese círculo negro, ese se desplace hacia abajo hasta el cuadrado negro. Entonces saltemos a un modo prototipo. Y entonces simplemente voy a conectar mi círculo, no con una pantalla exterior, sino con el cuadrado en el mismo marco en el panel de interacción. Se puede ver que onclick. Y nuevamente, esto es lo mismo que en la pestaña si tienes un conjunto de prototipos, desplázate también. Entonces esto es simplemente una acción aquí. Y luego desplázate hacia mí. Simplemente me nombré un pergamino cuadrado. Ahora aquí tienes compensaciones que también puedes establecer y vamos a echar un vistazo por qué las necesitamos en un segundo. Y al igual que con cualquier otro, puedes elegir instantáneo o animar. Voy a ir por animar porque eso le va a dar estos lindísitos límites que ya sabes, va a dejarlo a gusto por ahora. Echemos un vistazo a nuestro modo de vista previa. Entonces, si hago clic en el círculo, se desplaza hacia abajo hasta mi cuadrado negro. Entonces lugar donde vas a ver hay bastante, es una página o sitio web donde tienes la navegación que no enlaza a páginas separadas, sino a dos secciones dentro de la página. Así que vamos a soltar el contenido aquí. Y se puede ver que está bastante por debajo. Y él tendrá mi sección Acerca y mi nueva sección. Entonces lo que quiero hacer ahora es que quiero tomar el acerca del menú, Saltar a la creación de prototipos y luego conectar ese menú de navegación con la sección. Y voy a hacer lo mismo por las noticias. Entonces echemos un vistazo en nuestro modo de vista previa de eso va a funcionar. Así que hago clic en Acerca de Annette desplazándose hacia abajo, y si hago clic en nuevos sets, también trabajando. Pero hay dos cosas que no me gustaron de esto. En primer lugar, tengo un menú fijo, así que esto es una especie de cubrir mi sección Acerca de. Además, si hago clic en el blog, necesito subir porque no quiero volver a desplazarme hacia arriba. Quiero el mismo comportamiento. Así que de vuelta en mi diseño, primero quiero conectar el blog. Estoy conectando blog con mi grupo de tarjetas aquí. Ahora quiero arreglar estas compensaciones. Sé que voy a agregar algo de offset aquí, pero aún no conozco los valores. Entonces en el acerca, mi problema era la altura del menú. Así que vamos a comprobar eso. Y la altura aquí es de 90. Entonces saltemos al menú. Volvamos al modo de prototipado. Y voy a añadir un offset de -90. Y necesito agregar -90. 90 porque de lo contrario lo empujaría más hacia abajo. Yo quería subir. Entonces por eso estoy sumando un valor negativo. Y voy a hacer lo mismo por las noticias. Y por cierto, también puedes mantener presionada Mayús y Comando y seleccionar múltiples. Así que también podría simplemente agregar el mismo valor una vez aquí y luego tener eso para ambos. Ahora con un blog, no quiero 90 porque básicamente quería volver a la cima. Entonces lo que voy a hacer es que voy a acercarme un poco aquí. Y voy a medir cuánto es este valor. Entonces esto es desde la parte superior hasta mi sección comenzando es 220. Entonces en este caso, voy a añadir un desplazamiento de -220. A ver si eso funciona. Así que vamos a hacer clic en Blog. Y sí, nos estamos moviendo todo el camino hacia arriba. Entonces sobre está muy bien desplazándose hacia abajo y noticias como también funcionando. 15. BÁSICOS: 10 superposiciones: Echemos un vistazo a las superposiciones y Figma. Entonces ejemplo perfecto de una superposición es un menú. Entonces es básicamente su propio marco. Pero si hacemos clic por ejemplo en el trabajo, no queremos que todo el marco cambie este menú, pero queremos que el menú aparezca debajo de nuestra navegación aquí. Los hemos configurado prácticamente como cualquier otra conexión. Entonces, seleccionemos Trabajar. Enlace al menú. Y ahora onclick, en lugar de navegar a, elegimos Abrir superposición, menú de superposición. Ahora puedo elegir la posición. Entonces centro, arriba, izquierda, abajo, y así sucesivamente en relación con el marco padre. O también puedo elegir manual, que es lo que aquí necesitaría. Ahora puedo ver este pequeño adelanto de mi overlay y puedo colocarlo en el marco según lo necesite. Puedo elegir que se cierre automáticamente cuando alguien hace clic afuera. Entonces cualquier área por aquí. Y podría agregar un fondo para el menú que realmente no tiene mucho sentido. Entonces lo dejo. Y como siempre, puedo elegir mi animación. Entonces voy a tener esto también como disolverse como de costumbre. Echemos un vistazo a cómo se verá eso . Vamos a golpear Play. Y puedo ver que si hago clic en trabajar, aparece mi menú. Si vuelvo a hacer clic en el trabajo o en cualquier otro lugar del lienzo, va a desaparecer de nuevo. Así que ahora puedo simplemente conectar cualquiera de estos submenús de aquí a una nueva pantalla. Echemos un vistazo a otro ejemplo. Al hacer clic en el botón de suscripción, quiero abrir una superposición que permita a los visitantes suscribirse al boletín. Bien, seleccionemos el botón de suscripción y lo vinculemos a la superposición y luego onclick open overlay. Quiero mantenerlo centrado y quería cerrar al hacer clic afuera porque en realidad no tengo el ícono de cerrar aquí. Debería tenerlo por buena usabilidad, pero vamos a ir con solo hacer clic afuera para este ejercicio. También quiero agregar un fondo. De hecho voy a tener este poco más oscuro, así que al 50 por ciento. Bien, echemos un vistazo. Entonces aquí está mi pantalla. Doy clic en Suscribir y se abre la superposición. Si hago clic en cualquier otro lugar, va a cerrar de nuevo. Ahora tengo algunos pasos más ya que mis visitantes agregan su dirección de correo electrónico. Entonces, en cuanto alguien haga clic aquí, voy a decir que en cuanto alguien haga clic en el campo de dirección, voy a fingir que está lleno. Así que voy a intercambiar superposición con esta superposición a. Entonces en cuanto hagan clic en el botón Enviar aquí, nuevamente, voy a intercambiar overlay, y solo quiero que esto vaya a esta pantalla confirmada aquí. Entonces esto solo confirma que todo fue enviado, pero no quiero que el visitante tenga que hacer otra acción. Entonces lo que voy a hacer aquí es que voy a conectar esto por ahora de vuelta a aquí y decir después del retraso. Entonces no se requiere ninguna acción después del retraso de, digamos que solo voy a poner 2 s. Va a navegar hacia atrás mientras en realidad solo voy a establecer esto para cerrar esta superposición. Bien, echemos un vistazo si eso funciona. Así que haz clic en suscribirse. Después agrego mi correo electrónico, vaya. Y después de 2 s para superponer se ha ido. Sólo hay una cosa que no me gusta si hago clic aquí, si cambié overlay, puedes ver estos pequeños flashes. Y esto es porque aquí estoy usando esto off y hay un retraso de 300 milisegundos. Voy a cambiar esto al instante. Y ahora volvamos y echemos un vistazo. Y eso debería resolverlo. Perfecta superposición hecha. 16. BASICS: 11 Enlaces a páginas externas: Con la creación de prototipos de figma, solo puedes enlazar a otras páginas de tu diseño, pero también a páginas externas. Entonces digamos en mi navegación, todo enlaza dentro de mi diseño excepto el blog aquí. Quiero vincular eso a un bloque externo existente. Entonces, una forma en que podría hacer esto es simplemente seleccionar esto. Si es un elemento de texto, luego haga clic en el enlace aquí arriba y pegue la URL. Si le echo un vistazo a esto en modo presentación, pueden ver que ahora es un enlace. Y si hago clic en él, se abre el sitio web real. Si quieres tener otro estilo de link y eso no es problema. Simplemente seleccione texto y luego USTED menú de texto, puede modificarlo a sus necesidades. Ahora bien, esto funciona bastante bien para el texto. Pero la cosa es que si por ejemplo tengo otro elemento, digamos que tengo esta tarjeta que quiero enlazar a un artículo de blog, entonces no tengo la opción de vincularla porque no es un texto. Lo que podría hacer es usar mi menú de creación de prototipos. Entonces con esta tarjeta seleccionada, saltemos a la pestaña de prototipado. Ahora aquí voy a hacer clic en más junto a la interacción. Entonces esto es abrir una nueva interacción. Si vuelvo a hacer clic en eso, se abre su ventana de interacción. Ahora, voy a dejar esto en Qlik por ahora. Pero ya se puede ver que esto también me da la ventaja que podría abrir un enlace externo con cualquier otra acción, como presionar una tecla específica en mi teclado, mouse enter y así sucesivamente. Entonces para la dirección, voy a agregar enlace abierto en la parte inferior de mi menú. Y ahora aquí puedo simplemente copiar el enlace que quería abrir. En modo presentación. Si hago clic en esta tarjeta, ahora voy a ser redirigido a la página externa. Y por cierto, esto también funciona al revés. También puedes copiar el enlace para compartir prototipos. Puedes hacerlo a través del menú o simplemente presionar Comando L y luego vincular desde cualquier página externa a tu prototipo. Esta también es una muy buena manera de vincular prototipos que están en diferentes archivos o en diferentes páginas. 17. BASICS: 12 disparadores de acción: Echemos un vistazo más de cerca a los diferentes disparadores para la animación. Así que aquí tenemos nuestra configuración estándar que también hemos estado usando hasta ahora. Y simplemente funciona perfectamente si solo queremos configurar un prototipo en el que se pueda hacer clic. Entonces aquí usamos onclick y navegamos a un nuevo destino, que sería nuestra pantalla de Detalles. Ahora, con este pequeño desplegable aquí, podemos ver otras opciones. Entonces en drag es algo que en este caso, no tendría mucho sentido. Entonces en drag es algo que encuentras mucho en las pantallas móviles. Así que aquí por ejemplo tenemos este cambio entre artículos y videos. Y por lo tanto estoy usando en drag. Entonces si me arrastro hasta aquí, entonces voy a ver la pantalla. Y esto suele combinarse con una animación push, algo de lo que vamos a aprender más adelante. Entonces la inacción, será algo así. Arrastraría a un lado, conseguiría los videos y arrastraría hasta aquí para obtener los artículos. Entonces tenemos muchas interacciones como mouse y el mouse dejan mouse abajo, mouse arriba, y también mientras se pasa el mouse y mientras pulsas serían parte de eso. Esto es realmente todas tus interacciones diferentes con el ratón. Digamos que el ratón entra y luego navega a esa nueva pantalla. Eso también funcionaría aquí. Entonces al entrar, salté a la nueva pantalla, pero no tendría mucho sentido. Entonces un lugar donde usarías esto y vamos a tener todo un capítulo sobre esto son los componentes interactivos. Entonces aquí están los componentes establecidos con dos variantes, un botón y luego digo mientras se desplaza o digamos que el mouse enter. Y en realidad se usa mientras se cierne. Estoy usando Smart Animate aquí, que también es algo que vamos a cubrir más adelante. Y verás que no navega, pero también cambia porque está dentro de este conjunto de componentes. Ahora puedo sacar una instancia. Simplemente dibujemos un marco alrededor él para que podamos verlo mejor. Y ahora como pulsamos Play, podemos ver que aquí está mi botón y a medida cursor sobre él de una manera extraña, tiene este bonito pequeño efecto hover. Un disparador que se usa muy poco fue realmente muy impresionante, es el disparador del teclado. Entonces para mostrarte un ejemplo, aquí tengo una barra de búsqueda y onclick que va a ser llenada. Eso también es algo que solíamos resolver con componentes interactivos, pero quedémonos con una versión simplificada por ahora. Entonces ahora estoy seleccionando este campo en forma ahora, ahora como presiono Enter, quiero que esto vaya al resultado. Entonces lo que puedo decir es en lugar de onClick, digo clave o gamepad. Y ahora simplemente selecciona este campo aquí y luego presiona cualquier tecla de tu teclado y va a guardarlo. Así que en mi caso Enter, también podría haber pulsado un ejemplo , entonces navegará aquí y también se puede elegir la animación. Entonces, hagamos una animación de disolución. Entonces veamos esto en acción. Aquí. Doy clic en Buscar. Ahora lo tengo rellenado. Y ahora como presiono Enter en mi teclado, que no ves, me está dando los resultados de las pruebas. El último que quiero mostrarles es después del retraso. Y quizá no siempre tengas esto para cada situación. Pero si es así, entonces lo encuentras aquí abajo después de la demora. Y esto básicamente simplemente se mueve de esta pantalla a otra después del retraso. Y esto se vuelve realmente poderoso cuando más adelante aprenderemos sobre smart animate. Entonces echemos un vistazo aquí. Podemos establecer la velocidad. Vamos a establecer esto en 2 s para que realmente podamos ver nuestro retraso. Y presionemos Play. puede ver que toma su retraso y luego cambia la pantalla. Y esto también es muy agradable porque puedes encadenarlo para que puedas tener diferentes acciones. O también podrías configurar algo así como un boletín de problemas que aparecerían después de cierto tiempo. 18. BÁSICAS: 13 opciones de animación: Repasemos por las diferentes animaciones que tenemos disponibles en Figma. Empecemos con el primero, que es instantáneo, y esta es en realidad tu animación predeterminada. En realidad no uso bastante este, pero un buen ejemplo donde lo uso es una punta de herramienta. Entonces aquí tengo un ícono de info si coloco el cursor sobre él. Entonces digamos qué flotando. Quiero abrir un overlay y voy a tener esto abierto al instante. Y déjame simplemente posicionar mi superposición aquí. Y ahora vamos a echar un vistazo. Entonces , como pasaría el cursor sobre esto, aparecería instantáneamente. Y me gustó esto para ser inocente y no tener un retraso porque pensar en lo rápido que la gente mueve su ratón alrededor. Entonces realmente quieres que se den cuenta de que hay algo más que explorar. Otro que probablemente más uso es el segundo. Entonces esto está aquí en mi lista. Disolver, la sal se desvanecerá lentamente en el nuevo marco. También notarás que obtienes más opciones. puede elegir la forma en que facilita la entrada y salida, y también el tiempo que tomará. Entonces, si configuro este de aquí, entonces esto son milisegundos, pongámoslo en 5,000, así que sería súper lento. Y echemos un vistazo a esto. Así que vamos a hacer clic en él y podrás ver esta transición realmente lenta sucediendo a la nueva página. Ahora cuando empiezas a agregar animaciones para cambiar de página, es muy tentador agregar un número alto aquí y hacer que se vea un poco más mágico. Pero sobre todo al navegar entre diferentes páginas, te recomiendo que lo dejes en algún lugar alrededor de esta configuración predeterminada de 300. Porque piensa en cómo la gente navega por tu página. Rápidamente quieren saltar a diferentes secciones. Entonces va a ser un verdadero obstáculo esperar siempre una transición lenta. Echemos un vistazo qué más tenemos aquí. El siguiente es smart animate, y esta es una gran magia. Smart Animate busca capas coincidentes entre tu marco original y el destino final. Y reconoce el cambio y luego aplica una animación sin fisuras. Debido a que es tan poderoso y un gran problema cuando se trata de animación y Figma, tengo todo un capítulo separado sobre smart animate. Pero solo para darte un pequeño adelanto, tomemos este fotograma y lo dupliquemos porque necesitamos fotogramas realmente idénticos. Y entonces lo que voy a hacer aquí, esto es configurar un diseño automático. Yo sólo voy a apilar esas imágenes aquí. Entonces voy a seleccionar todo este grupo conectado con un marco. Y si hago clic en él, quiero navegar al otro fotograma con smart animate. Y dije esto un poco contratado 800, para que podamos verlo correctamente. Entonces, presionemos Play. Y puedo ver aquí mi pila de imágenes. Si hago clic en ellos, hay una buena transición. Puedes animar de forma inteligente entre diferentes colores, diferentes tamaños, posiciones, y es realmente, muy potente. Veamos nuestra última transición, y estas son las transiciones móviles y las encontrarás aquí abajo. Tenemos mudarnos, salir, empujar, deslizarnos y deslizarnos hacia afuera. Observa cómo con esas transiciones en movimiento, tienes estas pequeñas flechas en el lado derecho y puedes elegir de qué manera quieres que se muevan. Entonces desde arriba, desde abajo, izquierda o derecha, entrar y salir. Básicamente es marco deslizante dentro y fuera de la vista. Entonces esto es realmente agradable para crear jerarquía. Push es realmente similar a entrar y salir, pero empuja el marco en el mismo nivel. Deslizar y deslizar hacia fuera vuelve a ser muy similar, sin embargo, desplazará ligeramente los marcos a medida que se disuelva mientras el movimiento mantiene su estacionario. Lo mejor es simplemente jugar con ellos. 19. BASICS: 15 secciones y diseño estatal: Las secciones en Figma son una excelente manera de organizar mejor nuestro diseño y crear un diseño con estado. Echemos un vistazo a lo que eso significa. Entonces en mi ejemplo aquí, tengo una pantalla de inicio. Y en esa pantalla de inicio puedo presionar un botón de registro que luego me lleva a través de una superposición con el proceso de registro. Para que pueda elegir qué plan quiero tener, agregar mis datos personales, elegir una forma de pago. Y luego al final está todo confirmado. Echemos un vistazo al prototipo real. Entonces aquí está el hogar. Doy clic en, Regístrate. Entonces puedo elegir cualquier plan. Agrego mis datos. Me inscribo, elijo un pago, y está confirmado. Ahora eso parece todo bien. Pero digamos que estoy iniciando el proceso. Y luego dentro del proceso, en algún momento estoy cerrando mi superposición. Ahora después de un rato, quiero volver y terminar mi registro. No obstante, si hago clic aquí, siempre voy a ser redirigido a la primera pantalla. Ahora no quiero esto, quiero volver a esta pantalla donde nuestra izquierda y guardar toda la información que ya agregué. Esto se llama diseño con estado. No obstante, si echamos un vistazo a nuestro archivo, entonces no hay forma de que Figma pueda recordar dónde me fui. Sin embargo, hay una forma de evitar esto, y aquí es donde entran las secciones. Aquí encontrará secciones debajo del menú de marcos. O simplemente puedes usar el atajo Shift S. Al igual que un fotograma. Se puede dibujar una sección alrededor de un grupo de marcos. Ahora podemos nombrar esta sección, llamémoslo registro. Y si saltas a la pestaña de diseño, también podrías cambiar el color de la sección. Como verás aquí, obtienes algunas características básicas, pero no hay cosas como restricciones de diseño automático y otras características que verías con los marcos. Entonces, las secciones realmente están ahí para organizarse puramente. Las secciones también son ignoradas por el modo de presentación. Entonces, si elijo una sección y presiono Reproducir, siempre me va a mostrar la primera pantalla dentro de esta sección. Bien, genial. Ahora sólo nos falta hacer algunos ajustes. Así que volvamos a la creación de prototipos. Y lo que quiero hacer es, no quiero que este registro aquí se conecte a la primera pantalla, pero quería conectarme a toda la sección. Entonces estoy configurando un nuevo conector y estoy diciendo en la pestaña, navegue a, y me voy de esto y navegue a la sección. Necesito usar. Navegar para abrir superposición con una sección no funcionará aunque dentro la sección pueda seguir usando superposiciones. Y ahora una última cosa que tengo que hacer, lo cual es un poco confuso, es que necesito seleccionar todos los botones de mi ropa aquí. Y los voy a cambiar de superposición cercana a atrás. Esto me va a permitir saltar de nuevo a mi pantalla original. También podrías simplemente conectarlos directamente con una pantalla que no es problema. Entonces echemos un vistazo al prototipo. Entonces aquí tenemos nuestra casa, nos inscribimos, elegimos cualquier plan, rellenamos nuestros datos. Y luego aquí al pago, cerramos. Y luego después de un rato volvemos. Y se puede ver que recuerda exactamente la estancia donde salimos y podemos simplemente continuar desde aquí. Ahora que estamos trabajando en nuestra app y estamos agregando más áreas. Podríamos tener más botón de registro desde otros lugares, pero eso no es problema. Simplemente podemos conectarlos a la misma sección. Ahora lo único que necesitamos cambiar es que una vez que terminamos un proceso, tal vez no queramos volver a casa, pero también podríamos querer tener este set espalda y por lo tanto saltar de nuevo a cualquier marco del que vengamos. Echemos un vistazo si eso está funcionando. Entonces aquí estoy iniciando el proceso de registro desde casa. Ya agregué algunos detalles, pero luego estoy cerrando mi superposición. Navego más en mi app. Y luego de algún otro lugar, voy a regresar y se puede ver que se acuerda donde me fui y solo puedo terminar de aquí. 20. BÁSICAS: 14 animaciones de relajación y primavera: Echemos un vistazo a las diferentes animaciones de flexibilización y primavera. flexibilización determina la aceleración de una transición entre dos fotogramas clave. Esta podría ser la transición de una pantalla a otra, o una transición entre objetos individuales. Entonces, por ejemplo, cambiar de color o tamaño al hacer clic. Verás que las transiciones generalmente están representadas por gráficos donde el tiempo es el eje x y la transición, como mover o deslizar o lo que sea que estés usando es el eje y. Lineal es la aceleración predeterminada y es solo una línea recta en tu gráfica. Entonces esto significa que simplemente se moverá a una velocidad constante. Figma tiene muchos presets incorporados que puedes usar. Si pasamos de lineal a Ease In por ejemplo puede ver que ahora la animación comienza lentamente y luego acelera hacia el final. Así que aquí tengo una visión general de todas las animaciones incorporadas y Figma. Entonces estas son básicamente solo instancias y puedes ver que las puse todas aquí abajo. Echemos un vistazo aquí a este ejemplo está dentro y fuera. Entonces puse un disparador para después del retraso. Y luego animará de forma inteligente y utilizará la facilidad de entrada y salida de la animación. Y yo solo dije 1 s para que podamos verlo un poco mejor. Y una vez hecho eso, lo mismo está ocurriendo al revés otra vez. Bien, volvamos a nuestro resumen que encontramos aquí arriba. Y simplemente voy a seleccionar este fotograma y presionar Reproducir. Ahora solo vamos a asegurarnos de que configuramos esto para que se ajuste al ancho para que podamos verlas todas. Y puedo ver todas las diferentes animaciones al lado de la otra. No hay una animación como correcta o incorrecta. Realmente se trata de lo que intentas construir. ¿Qué ves aquí abajo? Suave, rápido, hinchable y lento. En realidad las llamadas animaciones primaverales. La diferencia entre la relajación y la animación de primavera se vuelve un poco más clara cuando echamos un vistazo a las opciones personalizadas y Figma. Aquí se puede ver en la última transición de flexibilización, nos acostumbramos más ocupados. Y si elegimos eso, puedes ver que aquí obtienes la curva que ahora puedes ajustar a tus necesidades. Pero realmente siempre va a ser esta curva. Ahora más abajo en mis ejemplos, tengo la animación primaveral, luego tengo que personalizar resortes. Entonces echemos un vistazo a esto. Así como rigidez, que es el número de rebotes a los que se puede ajustar la animación. Puedo ajustar la amortiguación que influye en el nivel de resorte en la animación. Y puedo influir en la masa. Esto influirá en la velocidad de la animación y en la altura de los límites. Así que realmente podemos tirar de esta curva y agregar muchos límites y mucho movimiento aquí. Echemos un vistazo a cómo se ve eso en nuestro modo de vista previa. Para que veas que obtienes este pequeño y lindo rebote al final de la misma. La mejor manera de dominarlos es como siempre, prepárate y explora. 21. BÁSicos: 16 flujos en Figma: Puedes crear múltiples flujos en Figma para enfocarte en diferentes segmentos de tu prototipo. Es muy fácil. Déjame mostrarte. Si tiene alguna configuración de diseño con conexiones, entonces encontrará al menos un flujo allí. Figma configura automáticamente su primer flujo. Tan pronto como dibujes tu primer conector. Simplemente puede seleccionar ese flujo y adjuntarlo a cualquier otro marco que desee. Tenga en cuenta que no adjunta dos secciones sino solo dos marcos. Puede hacer doble clic en el flujo para cambiarle el nombre. También puede seleccionar cualquier otro marco y luego simplemente en un panel de prototipos en la parte superior, hacer clic en más y agregar otro flujo. Llamemos a este hogar. Si hace clic en cualquier parte su lienzo mientras está en modo de creación de prototipos, puede ver una descripción general de sus flujos aquí abajo. Entonces ahora mismo tenemos registro y casa, y anotar ese orden. Entonces, presionemos Play y veamos qué le hace eso a nuestro prototipado. Ahora, en el lado izquierdo, tienes un pequeño menú que puedes mostrar u ocultar. Aquí el primer flujo es el registro. Entonces me va a mostrar primero la pantalla. Si hago clic en Inicio, entonces estoy llegando a la pantalla de inicio. Todavía puedo acceder a mi prototipo tal como lo hice antes. Pero esto habilita a nuestros usuarios. Entonces, si estás haciendo pruebas de usuario para saltar a diferentes regiones de tu prototipo. Sabe cómo también podemos agregar descripciones. Esto es muy útil para las pruebas. Está un poco escondido. Así que de vuelta en nuestro archivo de diseño, selecciona cualquier flujo y luego obtienes este pequeño ícono de Descripción editado en el lado derecho. Si haces clic en eso, puedes agregar texto. Así que ahora volvamos a la creación de prototipos y se puede ver que nuestro común se estaba sumando a este flujo específico. De vuelta en nuestro expediente. Si haces clic en el lienzo, también puedes reordenar todos tus flujos. Así que podríamos tener casa por ejemplo primero, si haces clic en el pequeño cuadro de selección, entonces va a saltar. Mostrarte este flujo. Esto es realmente útil si tienes mucho flujo configurado. Otra cosa es que puedes compartir un enlace directo a tu flujo. Entonces, si quieres que alguien abra directamente, por ejemplo, en el proceso de registro, entonces puedes simplemente copiar el flujo directamente desde aquí. Además, si haces clic en reproducir en una presentación, entonces va a saltar directamente a este flujo específico. Los flujos son realmente una excelente manera agregar un poco de estructura a su prototipo. Si estás compartiendo directamente desde la creación de prototipos, entonces ayuda a los visitantes a comprender las diferentes secciones de tu diseño y también con comentarios, puedes guiarlos a través de pruebas generales. 22. BÁSICAS: 17 Agregar videos a los prototipos: En Figma, puedes incrustar videos. Solo ten en cuenta que esto solo funciona en un plan de pago. Entonces en InDesign, solo elige cualquier relleno y luego a través del menú Fill, selecciona del video desplegable. Verás una imagen de vista previa del video, y verás la pequeña miniatura del video en el panel de capas. Para que esto funcione, tu video debe estar en formato MP4. Los regalos también funcionan por cierto, y no deben superar los 30 mb. Como videos o simplemente rellenos de capas, también puedes modificarlos tal como lo harías con cualquier otro relleno de capa. Puedes cambiar el tamaño, puedes agregar otros elementos en la parte superior. Se puede utilizar la máscara de cultivo y así sucesivamente. Para ver el video que se reproduce, es necesario saltar al modo de presentación. Para cambiar la configuración del lugar, seleccione el video, salte al panel de creación de prototipos. Y luego aquí en el video, puedes elegir si se reproduce de forma automática o no, si debe loop, y puedes elegir dónde se debe reproducir el sonido o no. Para ahorrarse algo de frustración, cuenta que actualmente los videos no son en cuenta que actualmente los videos no son compatibles con la aplicación móvil Figma. 23. BÁSicos: 18 vista previa en tu móvil: Figma tiene una fantástica app que te permite previsualizar tus prototipos en tu móvil. Vaya al sitio web de Figma y en los productos, encontrará la pestaña de descargas. Dentro de las descargas, puedes descargar la versión iOS o Android de la aplicación a tu teléfono. Una vez que abras la aplicación móvil, se te pedirá que inicies sesión. Para el inicio de sesión, solo usa tu inicio de sesión estándar de Figma. De hecho, es importante que uses exactamente el mismo inicio de sesión que para tus archivos de trabajo. De lo contrario, el espejo no va a funcionar. A continuación, verá una descripción general de los archivos en su cuenta. Sin embargo, eche un vistazo a la parte inferior derecha y haga clic en el espejo. Una vez que hagas clic en Iniciar espejo, esto reflejará cualquier marco que selecciones en este momento en tu aplicación de escritorio. Cualquier configuración del prototipo será automáticamente visible aquí. Me encanta tener esto abierto mientras trabajo en mis diseños móviles. Esto me permite ver y probar mi diseño de una manera más realista mientras diseño. Solo asegúrate de verificar que el tamaño del marco en el que estás diseñando sea realmente el tamaño correcto para el teléfono móvil que estás usando. Entonces en mi caso, tengo un iPhone 14 físico, por lo tanto, mi pantalla también está puesta a las que mencioné. La aplicación escalará hacia arriba y hacia abajo tu diseño, por lo que se verá real incluso si estás usando otro tamaño. Sin embargo, esto realmente puede conducir a errores cuando, por ejemplo, se trata de probar tamaños de objetivo táctiles. También puedes compartir tus prototipos móviles y a través del enlace, asegúrate de copiar el enlace desde la vista de presentación. Luego se abrirá automáticamente en la aplicación móvil Figma si se instala en un teléfono. De nuevo, asegúrate de que aquí, el tamaño de tu prototipo corresponda con el tamaño físico del teléfono que se está utilizando. No hace falta que te preocupes por la resolución en este caso porque el enlace se remonta a Figma, que se encarga de eso. 24. ANIMADO INTELIGENTE: 01 Comprende el animado: Echemos un vistazo a la parte mágica del prototipado con Figma y eso es sin duda smart animate. Entonces, lo que hace Smart Animate es que toma capas coincidentes entre diferentes fotogramas para luego reconocer como las diferencias y anima entre ellos. Entonces juguemos un poco con esto. Entonces aquí tengo dos fotogramas y simplemente los voy a conectar configurando smart animate a 2000 milisegundos a segundos que realmente podemos ver la animación. Y me estoy devolviendo el favor para que podamos hacer click entre ellos. Entonces lo primero que voy a hacer es mostrarte cómo podemos cambiar la posición. Simplemente estoy moviendo mis formas. Ahora, hagamos clic en el modo de presentación. Y se puede ver que van a animar amablemente a su nueva posición. Bien, echemos un vistazo a qué más podemos hacer. La otra cosa que podemos hacer es que podamos cambiar el tamaño. Así que sólo voy a arrastrar esto un poco más pequeño aquí abajo. Y también voy a hacer algunos cambios aquí. Voy a agrandar este triángulo y apretarlo un poco. Y ahora voy a dejarlo así. Y ahora echemos un vistazo. Voy a hacer click en mi cuadrado y se puede ver que no solo están cambiando de posición, sino que también se adaptan y talla. Ahora, obviamente lo que también queremos cambiar es el color. Y simplemente podemos cambiar el relleno en cualquier lugar entre nuestros diferentes marcos aquí. Y será inteligente animar entre el nuevo color. Así que vamos a hacer clic aquí. Y se puede ver el software de color cambiando de un color a otro. También podemos adaptar rotación y este es un efecto realmente agradable. Se puede utilizar. Solo asegúrate de no abusar de este efecto. Déjame ajustar esto un poco y echemos un vistazo. Entonces obtienes esta torsión realmente agradable. Una última cosita que es realmente útil es que si quieres algo parezca que aparece de nada y lo pones a cero, sí lo necesitas en la primera pantalla. De lo contrario no va a funcionar. Pero si lo pones a cero, entonces parece que está apareciendo de la nada. Entonces en Figma, animaciones de fantasía como esta, en realidad muy simples de lograr. Y esto está en Figma, no como CSS. Entonces todo lo que realmente necesitamos para esto es por ejemplo para este menú retorciante es que aquí tengamos un menú con dos líneas. Y entonces nuestra cruz está conformada exactamente por las mismas líneas. Simplemente se dio la vuelta y se hizo un poco más largo en un extremo. Entonces nuestro trasfondo que aparece es simplemente un fondo oculto. Déjame simplemente cambiar la opacidad aquí. Y se puede ver que esto es simplemente un cuadrado que está creciendo hasta convertirse en un fondo más grande. E hice esto invisible, y por lo tanto parece que está apareciendo de la nada. Entonces nuestros enlaces que parecen deslizarse desde la izquierda. Si desclip, entonces puedes ver que están en el marco, pero se mueven fuera del área visible. Y con la animación simplemente se mueve nuevo al marco en esa posición. Entonces todo lo que tenemos que hacer ahora es saltar a la creación de prototipos y luego conectar este menú aquí con nuestra nueva pantalla. Y lo dejaremos en click Smart Animate. Y tengo 1 s aquí. Y luego si vuelvo a hacer clic en el menú, va a saltar de nuevo al marco original. Y eso es todo lo que necesito para montar esta animación de fantasía. 25. ANIMADO INTELIGENTE: 02 animaciones inteligentes y animaciones en movimiento: También podemos combinar smart animate con transiciones móviles. En mi ejemplo aquí se ven dos pantallas, una que contiene todos los artículos y la otra que contiene todos los videos en la parte superior ahí como filtro. Ahora lo que quiero que pase es que si alguien desliza hacia la izquierda que los videos o este lugar, y si están deslizando hacia la derecha, entonces volvemos a los artículos. Entonces voy a seleccionar la página del artículo y luego arrastrar un conector. Y voy a decir en drag. Y quiero que esto sea empujado. Me vendría bien mover y en realidad, pero voy a ir por empujado en este caso y ahora tengo que considerar que estoy empujando hacia la izquierda. Entonces quiero que esto se mueva hacia la izquierda. Ahora, a partir de aquí, voy a hacer lo mismo y voy a conectar esto y voy a decir en drag. Y ahora quiero empujar hacia la derecha y luego volver a mostrar artículos. Entonces echemos un vistazo en nuestro modo de presentación, cómo sería eso. Entonces estoy arrastrando hacia la izquierda y tengo mis videos. Y si me vuelvo a arrastrar mis artículos, entonces eso se ve bastante bien. Pero lo que no me gusta es la parte superior aquí mis filtros también están intercambiando. De hecho quiero que permanezcan en su lugar y simplemente activen el filtro correspondiente. Si vuelvo a mi diseño aquí y selecciono mi conexión, puedes ver que en cuanto elijo una selección móvil, puedes ver que me sale esta pequeña casilla de verificación aquí llamada Smart Animate matching layers. Y voy a activar esto. Y necesito hacer lo mismo para la conexión que se remonta a mis artículos. Entonces echemos un vistazo a lo que pasa ahora. Si ahora deslizo, puedes ver que mi menú es inteligente animando el resto de mi diseño sigue usando la animación en movimiento. Para que esto funcione, asegúrate de revisar dos cosas. En primer lugar, los elementos que quieres un smart animate, por ejemplo, en mi caso a los filtros se configuran exactamente de la misma manera. Entonces usan la misma jerarquía y usan exactamente el mismo nombre. La parte que no quiero Smart Animate se llama de otra manera. Entonces este grupo se llama artículos, y este grupo, que en realidad es bastante similar en lugar de instructor, se llama videos. 26. ANIMADO INTELIGENTE: 03 limitaciones de animación inteligente: Así que la animación inteligente es verdadera magia, pero viene con algunas limitaciones. Así como aprendimos, podemos animar colores, tamaño, posición, rotación, y así sucesivamente. Pero lo que no podemos animar es pasar de una forma a otra forma. Entonces aquí dibujé un cuadrado y aquí dibujé un círculo. Y ahora veamos qué pasaría si yo inteligente animara esto. Así se puede ver a medida que le hago clic, todavía se anima muy bien, pero realmente no se convierte en la nueva forma. En este caso específico, hay un pequeño truco que podría usar. Simplemente podría seleccionar el cuadrado, copiarlo, y luego pegarlo aquí de nuevo. Y así en vez de simplemente dibujar un círculo, voy a convertir este cuadrado en un círculo. Entonces voy a usar esquinas redondeadas para hacer eso. Y ahora vamos a cambiar el color para que podamos ver esto un poco mejor. Y volvamos a saltar al modo de presentación. Entonces ahora como hago clic, puede ver que esto está funcionando, pero sólo va a funcionar para que un cuadrado se convierta en círculo si quisiera convertir esto en una estrella o en un triángulo, cualquier otra cosa que no funcionaría. Lo que también podría causarte problemas es si cambias el nombre. Entonces aquí tengo dos marcos sosteniendo un grupo y un marco. Entonces este de aquí es el marco, este de aquí es el grupo. Y tienen un contenido idéntico. Si yo inteligente animo eso, entonces se puede ver que funciona perfectamente. Ahora volvamos y cambiemos el naming. Entonces voy a llamar a este de aquí grupo X. Y voy a llamar a este frame aquí, frame y para eso. Y ahora volvamos a jugar. Entonces, aunque la jerarquía y todo, todos los nombres dentro del grupo permanecieron igual, los ya no reconocidos como iguales. Y ese también es el caso. Si mantengo el grupo y los nombres de marco iguales, pero cambio el nombre del contenido. Y vamos a añadir un poco de x aquí en la parte de atrás donde cada uno de ellos. Y ahora se puede ver como vuelvo a animar, el propio grupo anima pero no el contenido. Entonces necesitas la misma jerarquía, nombrando para que todo coincida. Un pequeño truco si quieres ver si las cosas se configuran en la misma convención de nomenclatura y jerarquía para ser smart animated, simplemente selecciona cualquier elemento y verás en los otros fotogramas cuál va a coincidir. Entonces aquí puedes ver que este ahora está emparejando. Ahora bien, si cambio el naming y seleccionamos de nuevo, puedes ver que ahora ya no coincide. Volvamos al nombre original. Y ahora está recogiendo. Entonces esta es una manera muy agradable, sobre todo si tienes cientos de pantallas para comprobar rápidamente si algo está fuera de servicio. Otra limitación que podrías encontrar es que cuando estás abriendo una superposición, entonces no puedes animar esta forma de manera inteligente. Entonces por ejemplo aquí, todo se llama elipse uno y todo tiene la misma forma. Pero una vez que digo onclick open overlay, se puede ver que en el menú de animación, puedo elegir entre incidente y disolver, pero no puedo seleccionar Smart Animate. Entonces, al abrir y superponer, no puede hacer crecer esta burbuja en la burbuja en la superposición. Sin embargo, una vez que las superposiciones se abren y estoy tratando con el intercambio de superposición, se puede ver que ahora un Smart Animate está activo. Entonces déjame mostrarte. Entonces aquí tengo mi pantalla de inicio. Hago clic en mi círculo y se abrirá la superposición, pero no va a animar de forma inteligente. Ahora sin embargo, estoy en la superposición, solo estoy intercambiando superposiciones. Y se puede ver que ahora smart animate está funcionando. Otra área que podría causarle problemas es el fondo lleno de animaciones en movimiento. Entonces aquí tengo un ejemplo sencillo. Si hago clic en este rectángulo rojo, entonces mueve esta página de detalles en. Y si hago clic en x, entonces lo mueve de nuevo hacia afuera. Y tenga en cuenta que todavía no tengo activado el smart animate. Entonces echemos un vistazo a cómo se vería eso. Entonces si hago clic aquí, eso lo mueve adentro, da clic en x, lo mueve hacia afuera. Parece bastante agradable. Pero lo que quiero hacer ahora es si hago clic aquí, quiero que la x se mantenga en su lugar y sea inteligente animada con el menú. Entonces eso es muy sencillo. Simplemente selecciono mis conectores y configuro smart animate. Así que simplemente toma esa cajita aquí. Pero si ahora lo vuelvo a jugar, puedes ver que funciona para el menú. Pero estoy teniendo esta extraña transparencia pasando en mi tradición. Para solucionarlo, volvamos aquí y seleccionemos la página de destino. Y entonces simplemente voy a presionar R y dibujar un rectángulo como una especie de segundo fondo. Y también puedes ponerle nombre a esto. Lo mejor es nombrar esta animación de fondo para que la gente no se confunda al respecto. Y ahora volvamos a echar un vistazo. Presiono Play. Y ahora se puede ver que ahora está funcionando a la perfección. Entonces, ¿esto es solo un pequeño truco que tienes que usar para que las transiciones de fondo funcionen con smart animate Entonces, vamos a resumir. Puede animar, color, tamaño, posición, rotación inteligente. Y puedes combinar la animación inteligente con animaciones en movimiento. No se puede animar de forma inteligente en otra forma. Entonces, por ejemplo, a. Rectángulo en una estrella. No se puede animar inteligente al abrir una nueva superposición. Asegúrate de tener el mismo nombre y jerarquía para Smart Animate entre en acción y ten en cuenta que el fondo se llena con la transición en movimiento y Smart Animate no se animará automáticamente. 27. ANIMADO INTELIGENTE: 04 Vamos a crear una aplicación animada: Pongamos en práctica lo que hemos aprendido y construyamos esta aplicación de filtrado de fotos con smart animate. Pero empecemos de cero. Entonces aquí tenemos las pantallas con las que vamos a empezar. Tenemos una pantalla de inicio con filtro e imágenes así como un menú y una pantalla detallada. Entonces lo que primero quiero configurar es una pantalla de presentación. Entonces voy a copiar la pantalla de inicio por aquí. Y en realidad me voy a deshacer de todo excepto mi menú. Ahora estoy seleccionando mi menú, lo presioné el botón K para escalar. También puedes abrir el patinaje desde el menú de aquí arriba. Y ahora voy a escalar este botón de Menú hacia arriba y colocarlo en el medio. Voy a seleccionar los trazos del menú, y voy a ponerlos a cero. Así que esto va a parecer que les va a gustar una especie de desvanecerse con la animación. Ahora la otra cosa que quiero hacer es que voy a copiar esto de nuevo. Y aquí en mi primera pantalla, voy a torcer esto. Y ahora voy a cambiar esto en una animación. Así que voy a saltar a la creación de prototipos y voy a tomar esta primera pantalla aquí, conectada y luego decir después del retraso, porque esta es una pantalla de inicio. Entonces quiero que comencemos automáticamente. Y voy a configurarlo en smart animate. Y lo voy a dejar en esta transición de 1.5 s que tengo de otra animación antes. Y yo voy a hacer lo mismo aquí. Entonces ahora vamos a echar un vistazo, cómo se verá eso. Presionemos play. Y se puede ver la pantalla de inicio girando. Y en realidad tenemos que volver aquí. Veamos por qué esto no es saltar por aquí. Entonces esto todavía está configurado para tocar. Vamos a establecer esto después del retraso. Y luego volvamos a echar un vistazo. Y ahora debería estar funcionando. Entonces volteando, y luego se mueve hacia arriba y mi menú está apareciendo. ¿Verdad? Bien, lo siguiente, así que lo siguiente que quiero configurar son mis filtros. Entonces voy a, antes que nada tomar la pantalla y voy a establecer mi comportamiento de desplazamiento. Entonces echemos un vistazo. Si configuro un desplazamiento vertical. Entonces echemos un vistazo a cómo se verá eso. Entonces esto movería toda la pantalla excepto mi menú que arreglé. No obstante, realmente quiero esto, solo quiero que esta parte se desplace. Entonces hay diferentes formas de abordar esto. Si tuvieras más contenido aquí abajo, entonces tendría sentido arreglar realmente esta parte superior como encabezado. Sin embargo, como solo tengo las imágenes, bien podría quitarme el desplazamiento de mi fotograma principal y luego configurar el desplazamiento en esta parte aquí. Ahora recuerda por desplazarte al trabajo y puedes ver que ya tengo un error aquí. Necesito que el marco sea más pequeño que el contenido. Así que puedo cambiar el tamaño de esto y solo tener un poco cuidado porque en realidad tengo esta configuración como diseño automático. Entonces a veces se está comportando de manera extraña y es posible que tengas que cambiarlo manualmente de abrazo a altura fija. En este caso, está funcionando bastante bien. Entonces ahora si vuelvo a mi adelanto, se puede ver que esto ahora está teniendo el comportamiento que busco. Bien, genial. Vamos a configurar el resto de los filtros. Entonces estoy copiando más de dos páginas más. Haz algo de espacio aquí. Y luego echemos un vistazo. Bien, entonces lo que quiero hacer ahora es en este quiero activar más reciente. Entonces estoy configurando esto al 100%. Y voy a mover este pequeño bar por aquí. Y estoy poniendo esto a 50. Y voy a hacer lo mismo para el último de aquí, puesto en uno activo al 100% que el inactivo a 50. Simplemente puedes presionar el número y luego éste, como puedes ver aquí, lo convertirá en un porcentaje. Y también voy a mover esta barra porque estoy usando la misma barra. Simplemente se va a mover una vez que use smart animate en esta navegación. También quiero cambiar la forma en que se barajan las imágenes, así que necesito seleccionar esas de aquí y descortarlas para poder verlas todas. Y ahora lo genial es como una configuración con diseño automático, simplemente puedo seleccionar una imagen y con la tecla arriba y abajo, puedo moverlas. Entonces hagamos lo mismo para la última pantalla y simplemente barajemos al azar. Vamos a mover este de aquí arriba. Bien, genial. Ahora ten en cuenta que acabamos de deshacer clic en todo este contenido. Entonces, si ahora salto al modo de vista previa y me desplazo, entonces obtendrás este comportamiento de desplazamiento. Así que asegúrate de volver a seleccionarlos todos y volver a acortar el contenido. Ahora, volvamos a hacer lo mismo. Y se puede ver ahora que el comportamiento está funcionando de nuevo. Bien, entonces ahora lo que queremos hacer es que queremos establecer esas conexiones. Entonces, si hago clic en latest, quería saltar por aquí y quiero usar smart animate. Y voy a dejar esto también en una animación bastante lenta para que podamos verla correctamente. Ahora voy a hacer lo mismo con los populares, y tengo que hacerlo con esos greens también. Así que salta de nuevo para mostrar todo desde aquí ir a popular En mi última pantalla. Lo mismo. En realidad esta va a la primera. Y entonces éste va a ir por aquí. Bien, entonces echemos un vistazo. Si eso está funcionando. Esto está configurado completamente en smart animate y puedes ver que no solo la navegación aquí están nuestros filtros están funcionando muy bien, sino que también nuestras imágenes están siendo reagrupadas. También podríamos la velocidad un poco, pero la voy a dejar por ahora para que podamos verla mejor. Así que lo último que nos falta ahora es nuestra página de detalles por aquí. Lo que quiero aquí es que quiero algunas imágenes en una vista previa, después tengo mi texto y quiero un pequeño botón de cierre. Hay diferentes formas en las que podrías configurar esto, así que siéntete libre de jugar con él tú mismo. Bien, comencemos con nuestras imágenes. Entonces estoy tomando esto aquí y estoy copiando las imágenes. Estoy borrando este portaplatos y los estoy pegando aquí. Pero quiero que se apilen horizontalmente. Entonces S es una configuración con diseño automático. Simplemente estoy cambiando la dirección. Vamos a desabrochar los contenidos para que podamos verlo mejor. Y puedo ponerle esto a un halcón. Y ahora tenemos todas las imágenes aquí seguidas. No quiero mostrarlos todos, solo unos pocos. Entonces voy a eliminar estos de aquí. Y ahora para configurar esto como scroll horizontal, tengo que hacer el marco pequeño n. esto es de lo que estaba hablando. A veces esto va a ser un poco extraño. Esto se debe a que estamos trabajando con auto-layout. Entonces lo que podemos hacer es establecer la horizontal en fija, y ahora podemos ajustarla. En este caso, también tengo que cambiar la alineación, y ahora puedo cambiar esto. De hecho, quiero adaptar un poco el espaciado para que podamos ver que viene más contenido para desplazarse. En realidad, vamos a volver a poner esto por aquí. Y estoy agregando un poco de relleno a la izquierda. Ahora estoy seleccionando este marco y estoy saltando al prototipo. Y fíjate como esto me está dando un error porque obviamente no hay contenido vertical para desplazarme. Así que en cuanto cambie esto a desplazamiento horizontal, ahora va a funcionar. Entonces echemos un vistazo que es hacer lo que queríamos hacer. Entonces aquí está mi contenido y puedo desplazarme horizontalmente por esto. Bien, genial. Ahora quiero agregar mi botón aquí, y quiero que esto ya no sea un menú, sino un botón de cierre. Así que lo copié. Lo que voy a hacer es que voy a seleccionar, tengo que saltar dos. Todavía estoy en modo prototipo. Necesito ir a Diseño. Y ahora estoy ajustando estas líneas de un menú a una X, así que a una señal de cierre. Entonces lo que queremos hacer ahora, queremos conectar esta imagen para abrir la página detallada. Entonces saltemos al prototipo, y luego seleccionemos esto y vayamos por aquí. Pero lo que no quiero, en realidad, no quiero que todo esto sea inteligente para animar. Quiero que esto sea empujado hacia adentro o moviéndose. Voy a elegir. Y todavía voy a mantener a Smart Animate aquí seleccionado porque quiero que el menú se anime de forma inteligente. Ahora, veamos si eso funciona. Y poca pista, no lo hará, pero voy a mostrarte por qué. Entonces, recemos. Presionemos Play. Y luego estoy presionando este detalle y en realidad se ve bien, pero es inteligente animar cada cosa aquí. No quiero esto. ¿Por qué está haciendo esto? Entonces puedes ver aquí que a este grupo se le llama imágenes, y a este grupo aquí se le llama imágenes y en realidad tiene un orden muy similar. Entonces necesito cambiar el nombre aquí para que nuestro color en una llamada, el detalle de esta imagen. Entonces ahora volvamos a echar un vistazo. Entonces ahora vamos a presionar de nuevo esa imagen. Y se puede ver que ahora se está mudando, pero está haciendo esta cosa rara como esta transparencia un poco extraña y en realidad no se está cerrando. Así que vamos a arreglar eso también. Bien, entonces antes que nada, aquí, agreguemos una interacción y digamos en la pestaña, vuelve a donde vengas porque aquí vamos a conectar algunas imágenes más. Y entonces la otra cosa que queremos hacer está aquí, en realidad quería que esto se moviera hacia arriba, pero tenía esta extraña transparencia. Entonces, lo que necesitas hacer aquí es que necesitas dibujar un fondo separado. Entonces estoy dibujando un fondo blanco aquí y simplemente voy a agregar blanco y mover esto. Esto, esto era una especie de fondo extra en mi orden aquí, mi orden de apilamiento hasta la parte posterior. Entonces esto realmente solo está ahí para resolver esta pequeña transparencia extraña con mi animación. Bien, entonces echemos un vistazo. Si eso está funcionando, presionemos Reproducir. Y ahora eso se ve simplemente genial. Y si presiono la X, échale un vistazo a lo agradable que está funcionando esa animación. Entonces aquí tenemos nuestra animación en movimiento. Y como todavía tenemos y smart animate set dentro de la animación en movimiento, nuestro menú que tiene el mismo naming en la misma jerarquía está trabajando con smart animate. Así que echemos un vistazo y configuremos nuestro diseño final. Entonces lo único que quiero hacer ahora es dejar desabrochar de nuevo a los que están aquí. Y en realidad busquemos esta imagen. Voy a moverlo un poco hacia arriba. Y ahora también quiero conectar esto a nuestra página de detalles. Así que aquí Eso todavía tiene la animación que establecemos antes. Desde aquí. También me estoy uniendo a esto. Y luego voy a recortarlas otra vez, un poco de propina extra. A veces podríamos querer tener pilas de elementos y luego abrirnos. Así que también puedes hacer eso si esto se configura con auto-layout. Ahora, puedo bajar aquí y establecer el valor en un valor negativo. Entonces mis imágenes como apilamiento. Y ya verás cómo en una pantalla se apilan. Y una vez que elegimos cualquier otra pantalla, entonces se van a abrir. Bien, entonces creo que nuestra app está terminada. Repasemos toda la configuración. Entonces tenemos nuestra pantalla de inicio. Se mueve aquí arriba, convirtiéndose en una animación. Aquí puedes ver nuestro apilamiento. Y una vez que voy a cualquier otro filtro, se puede ver que está en apilamiento. Y luego podemos dar click sobre nuestra imagen y obtenemos nuestra página de detalles, cual podremos abrir y cerrar. Por lo que también podemos acceder a esta página de detalles desde cualquier otro punto de nuestra aplicación. Y porque hay un contratiempo, también va a volver a la página de donde venimos. Entonces, como podemos ver, solo nos tomó 10 minutos configurar toda esta aplicación Smart Animate. 28. ANIMADO INTELIGENTE: 05 Animar con propósito y código en mente: Ahora es fácil dejarse llevar por smart animate y Figma porque es tan fácil y sorprendente, pero siempre animar con mente codificada propósito. Así que asegurémonos de recordar algunas cosas importantes. Uno, diseñamos para propósito. Así que cada decisión que tomemos en nuestro diseño debe tener un propósito y guiar a nuestros visitantes. La animación, especialmente las microinteracciones, como los estados Hover para nuestro botón, etc., juegan un papel muy importante en nuestra experiencia de usuario. Déjame darte un ejemplo. El principio del destino común. Eso significa que dos o más elementos que se comportan la misma manera se perciben como parte de una unidad. Piensa en un acordeón. Si hago clic, quiero que esto se abra y haga clic de nuevo y se cierre. He aprendido que funciona de esta manera e hice clic en uno. Entonces espero que todo el resto aquí funcione exactamente igual. Entonces sería muy confuso si hiciera clic en uno y de repente se abriera una superposición. Eso es lo mismo para todos los elementos que están usando. Así que todos los botones de tu página deben verse y comportarse exactamente de la misma manera. También. No exageres. Sé que Smart Animate es magia parpadeante, pero no exageres. No solo agregues un poquito aquí y un poquito allá porque todo el mundo dice, guau, cuando lo uses demasiado, realidad seremos así de alentadores y contribuiremos a la sobrecarga cognitiva de tus visitantes. Asegúrese de que su diseño funcione en un prototipo simple en el que se pueda hacer clic en todo momento. Y eso no quiere decir que animación deba ser una ocurrencia de último momento. Piensa en un menú desplazable. Puedo dar click y luego saltar a la sección. Así que eso funciona. Ahora puedo agregar una animación de desplazamiento suave guiando a mis visitantes a esta sección. Esto me ayuda a entender dónde estoy y cómo volver. Así que realmente mejora mi diseño. ¿Necesito elementos volando dentro y fuera mientras están animados? Probablemente no lo sean. Inteligente. Animate no es código. Y esto es realmente, realmente importante por varias razones, por ejemplo, lo que podría ser realmente fácil y solo un clic con Figma Smart Animate podría ser realmente difícil si estás usando algo como animación CSS. Y también al revés, pueden ser grandes posibilidades por ahí que simplemente no puedes mostrar en Figma. Entonces eso no significa que necesites 20 reuniones sobre cada ayuda de cosecha o caja en la que se puede hacer clic que estés diseñando con Smart Animate, ten una buena idea que antes de comenzar a registrarte con tu equipo de desarrollo, pregunta si hay una persona responsable animación y puedas planificar juntos desde el principio. También pregunta si están usando una biblioteca de animación específica y puedes familiarizarte con la documentación y obtener una idea realista de la vitrina de la biblioteca. 29. COMPONENTES: 01 componentes interactivos: Hasta ahora hemos utilizado la animación entre distintos fotogramas. Y ahora voy a mostrarte una de mis características favoritas, los componentes interactivos. Básicamente son animaciones reutilizables establecidas dentro de tu componente. Entonces como indica el nombre para que esto funcione, necesitamos componentes o más bien conjuntos de componentes con variante dentro. Si no estás familiarizado con esto, una variante dicha es básicamente dos componentes, dos o más componentes en realidad. Y se puede ver que uso la convención de nomenclatura, botón adelante barra diagonal por defecto botón hacia adelante barra librar. Entonces son de la misma familia que solo un estado diferente de lo mismo realmente. Y luego por aquí en el lado derecho, puedo decir combinar como varianza. Y lo bueno de esto es que si un brazo saca una instancia aquí, entonces puedes ver que dentro de este botón, ambas instancias simplemente se guardan como estados diferentes. A través de mi diseño. Voy a usar muchas instancias de esos elementos. Así que no sólo puedo salvar los diferentes estados que tienen dentro de esta instancia, sino que también puedo guardar al comportamiento. Entonces necesito estar en la configuración de mi prototipo y luego, por ejemplo, para guardar el comportamiento de un botón. Entonces un estado de hover quiero agregar y simplemente conectar mis dos botones como lo haría antes con cualquier otro marco. Y ahora puedes ver que en mi menú dice OnClick o voy a cambiar esto a mientras se cierne. Y ha cambiado a set. Este cambio hasta aquí solo va a estar activo dentro de los conjuntos de componentes. Ahora, puedo usar disolución instantánea o animate inteligente. Voy a usar smart animate ya que es simplemente un color. Ahora echemos un vistazo a lo que hace esto, para que podamos verlo en nuestro modo de vista previa. Necesito dibujar un marco. Y ahora puedo agregar una instancia de mi botón a este marco. Ahora echemos un vistazo. Al pasar el cursor sobre mi botón, pueden ver que tengo esta seguridad de comportamiento y esto va a ser lo mismo donde quiera que use este botón. Bien, ahora quiero lo mismo para mi interruptor aquí, pero quiero que esto sea arrastrado hasta aquí y luego se convierta en este interruptor. Ahora en este caso, no quiero que se active todo el interruptor , pero quería llevar aquí esta pequeña burbuja. Entonces quiero tomar, seleccionar esta burbuja, dibujar una animación y verás que dirá onclick. En este caso quiero en Drag cambiar a, y voy a smart animated por aquí. Ahora en este caso, necesito devolverme el favor. Así que en alardear, va a volver a volver a mi estado original. Ahora lo que voy a hacer es que voy a arrastrar una instancia lugares en mi marco. Y echemos un vistazo a que funciona. Entonces aquí está mi toggle. Lo arrastre y se puede ver que cambia. El color era inteligente animado. Ahora puedo animar entre más de sólo dos. Entonces aquí tengo esta casilla de verificación y voy a arrastrar un conector. Y voy a decir onclick cambiar a smart animado esto. Y luego a partir de aquí, voy a decir que vayan por aquí. Y si vuelvo a comprobar, entonces va a volver al principio. Vamos a arrastrar una instancia de esta casilla de verificación. De hecho voy a alargar algunos. Y ahora echemos un vistazo. Si juego esto, hazlo más grande, puedo comprobarlo. Si presiono de nuevo. Es así. Y así puedo usar esto a través de mi diseño. 30. COMPONENTES 02 Anidación de componentes interactivos: Al igual que con cualquier otro componente, puedes anidar componentes animados y combinarlos. Entonces aquí tengo mi botón y mi interruptor. Si voy a prototipo, podemos ver que ya tienen su configuración de animación. Y luego tengo otro componente, un componente de lista. Y lo que puedo hacer ahora, vamos a arrastrar sobre cualquier instancia de este interruptor de palanca. Y ahora estoy creando una instancia de mi elemento de lista aquí. Entonces puedes ver que este switch está anidado. Entonces, si hago clic en Componente original, salta hacia atrás y me muestra el componente animado anidado o variantes en ese caso. Y ahora puedo sólo para alargar unos cuantos. Y vamos a combinar esto en un marco. De hecho, puede hacer clic derecho y luego ir a enmarcar la selección. Entonces agreguemos algo de contenido y agreguemos también una instancia de nuestro botón aquí abajo, Sita, relleno de fondo. Agreguemos esto aquí abajo. Y luego una lata, por supuesto, sobrescribir esto. Agreguemos algunas imágenes con el plugin Unsplash. Yo sólo voy a ir por algunos retratos aquí. Y ahora echemos un vistazo y juguemos esto. Ahora puedes ver que puedo ajustar individualmente esos botones de alternar. Y también mi botón está funcionando. 31. COMPONENTES: 03 animaciones fáciles de hacer y hacer zoom.: Por lo tanto, los componentes interactivos también son una gran ayuda a la hora de crear estados de desplazamiento. Donde antes necesitábamos crear muchos fotogramas, ahora podemos simplemente agregar la animación a nuestro componente en cualquier anulación heredaría ese comportamiento. Entonces aquí tengo mi tarjeta, default y estado hover. Entonces ahora voy a simplemente en mi menú de creación de prototipos, agregar hover ancho, cambiar a y animar inteligente. Y ahora voy a arrastrar instancias de esa tarjeta. Ahora puedo anular las imágenes y el texto. Para las imágenes. Estoy usando el plugin Unsplash, pero puedes usar cualquiera. Echemos un vistazo a esto. Entonces se puede ver que a medida que flojo, todos heredaron a default y fecha de cosecha. Pero todavía puedo agregar un poco más de magia aquí porque recuerden, también puedo animar de forma inteligente el tamaño. Entonces todo lo que estoy haciendo es que por defecto, dejo la imagen en su tamaño original. Y luego por aquí en el estado hover, sólo voy a agrandar ligeramente la imagen y cambiar tu posición. Y ahora echemos un vistazo a lo que sucede. A medida que flote. Estoy consiguiendo este pequeño zoom muy agradable en las imágenes. Trabajar con componentes interactivos cuando se trata de ayudas a la cosecha te va a ahorrar mucho tiempo de antemano para crear un carrusel simple hover como este. Necesitabas esta cantidad de pantallas. Porque cada estado, así que cada vez que esto se agrandaría, lo contrario tendríamos que crear una página propia y luego enlazar de un lado a otro. Ahora, todo lo que necesitamos es esto, porque lo que tenemos aquí es que tenemos un componente interactivo que tenga una animación de mientras se cierne el tubo de cambio. Y entonces aquí tenemos simplemente instancias que amplían nodo. Si desea utilizar imágenes que se agrandan mediante el uso de animate inteligente con componentes interactivos. Y luego uno al lado del otro, es necesario agregar el diseño automático. Entonces aquí se puede ver que no tengo auto-layout alrededor de esto. Eso significa que cuando esta imagen de aquí se agranda, entonces va a empujar a todas las demás imágenes fuera del camino. Otra gran cosa es, digamos que quiero agregar algo a todas esas instancias. Entonces simplemente puedo agregar esto a mi variante aquí, y luego va a ser representado en todas ellas. Entonces volvamos a jugar esto. Y se puede ver que tengo el plus, lo único que no me gusta, es algo así como desaparecer de una manera extraña en lugar de simplemente disolverse. Así que recuerda que somos inteligentes animate Figma está buscando los mismos elementos en jerarquía y naming desde el principio, el final. Entonces eso es exactamente lo mismo entre marcos o dentro de conjuntos de componentes. Vamos a copiar sólo esta capa que se llama cruz. Y agreguémoslo también a nuestro destino, aunque no queremos mostrarlo aquí. Ajustemos el tamaño para que quepa. Y voy a poner esto a cero sólo para cruzar. Bien, volvamos a jugar esto. Y ahora se puede ver que la cruz está muy bien desapareciendo porque la animación inteligente está funcionando dentro del conjunto de componentes. 32. COMPONENTES: 04 interacciones de video: También podemos usar componentes interactivos para crear reproductores de video. Entonces en mi ejemplo aquí se puede ver que simplemente incrusté un video. Entonces en mi modo de presentación, se puede ver que se está reproduciendo, pero siempre va a estar jugando. Quiero cambiar esto a tener un alambique y solo cuando pase el cursor sobre él o después del retraso o lo que sea que sea que quiera, empieza a jugar. Entonces lo que voy a hacer aquí es que voy a crear una segunda. Voy a separar la instancia, llamarla hover. Y voy a convertirlo de nuevo en un componente. Y ahora estoy combinando esos dos en un conjunto de componentes con variantes. Y sólo voy a añadir un poco de transparencia. Y lo que quiero ahora es esto, lo que sigue siendo igual reproducir el video porque tengo un video por defecto y un video y hover. Entonces lo que voy a hacer ahora es que voy a seleccionar el video y voy a ir al comando Shift y ver estas copias un PNG. Ahora, simplemente voy a reemplazar el video con este PNG. Ahora, todo lo que necesito hacer es agregar algunos prototipos. Entonces estoy conectando esto, el predeterminado con el acero, con mi video y estoy diciendo mientras se cierne, cambie a y animate inteligente. Ahora voy a seleccionar mi marco. Y echemos un vistazo. Aquí. Tengo mi acero y al pasar el cursor sobre él, se puede ver que el video empieza a reproducirse. Observe como esto siempre vuelve a donde lo dejé. Entonces si salgo, va a volver aquí donde lo dejé. Si no quieres esto y quieres empezar siempre desde el principio. Entonces lo que puedes hacer es mientras estás configurando tu interacción aquí, puedes restablecer la posición del video y luego siempre va a ir desde el principio otra vez. Entonces esta es una manera realmente genial de salvarte algunas pantallas y tenerlo todo dentro de tu video real. Porque puedes configurar esto para que pase el cursor. Puede configurarlo después del retraso o cuando se presiona una determinada tecla en su teclado. Entonces esta es una muy, realmente genial para trabajar con videos. Solo recuerda que actualmente los videos solo están disponibles en planes de pago. 33. COMPONENTES: 05 componentes interactivos y diseño automático: Un lugar donde los componentes interactivos se vuelven especialmente potentes es si los combinamos con el diseño automático. Entonces aquí tengo un componente dicho con dos marcos, uno rojo y uno azul de diferente tamaño. Sólo voy a parar algunas instancias aquí, y voy a colocarlas en mi marco por aquí. Y ahora voy a añadir algunos prototipos. Entonces si hago clic en el rojo, entonces digo cambiar a y animar inteligente en la forma azul. Y voy a devolver esto de la forma azul a la roja. Así que onHaga clic en cambiar a rojo y animate inteligente. Ahora vamos a echar un vistazo a cómo se ve eso. Y hasta el momento no hay ningún diseño automático aplicado en ningún lado. Para que veas que si hago clic, entonces cambia. Y se puede ver que aquí se convierte en una más grande. Pero como que se encuentran entre sí. Y si vuelvo a hacer clic, entonces vuelven a la forma original. Y el Smart Animate está trabajando dentro de la animación de This click. No obstante, echemos un vistazo a lo que sucede si los selecciono a todos. Y ahora InDesign, estoy convirtiendo eso en un marco de diseño automático. Vamos a mover ese cuadro un poco hacia arriba y darle un poco más de espacio y verás por qué en un minuto. Y ahora vamos a presionar play. Entonces ahora puedes ver mi marco aquí. Y a medida que hago clic, se puede ver que se desplaza hacia arriba y hacia abajo. Y la razón es que recuerden, auto-layout siempre ocupa todo el espacio disponible. Así es como puedo Smart Animate y hacer que otro contenido respete al nuevo tamaño. Realmente puedo llevar esto al extremo. Entonces digamos que estoy valorando esta forma azul aquí a cero. Y fíjate como Figma nunca me da cero, siempre solo me da este de aquí. Entonces un pequeño truco alrededor de eso es ir 0.00 por algo así, y luego va a ir a cero. Entonces sigue aquí, mi elemento, pero está oculto. Entonces ahora volvamos a jugar. Y ahora se puede ver que si hago clic en este rojo de aquí, entonces desaparecen. Lo único es que probablemente te preguntes si puedes agregar un pequeño botón más o agregar de nuevo, luego agregarlos. Bueno, eso no va a funcionar realmente porque teóricamente están todos aquí en Figma. No recuerda cuál. Simplemente haces clic en el que cuando no lo hiciste. Sin embargo, podrías simular. Entonces podrías agregar, digamos, vamos a agregar un pequeño botón redondo aquí y decir que este es el botón más. Entonces lo que podríamos hacer es que podríamos decir, una vez que se eliminen y haga clic en éste, simplemente voy a copiar la misma aversión de la ya existente aquí. Y entonces voy a conectar este onclick navegar a y animate inteligente. Y así volvamos a echar un vistazo a esto. Entonces ahora estoy borrando. Y entonces puedo volver al estado original, pero no puedo seleccionar los individuales para reaparecer. Así que realmente puedes crear acciones bastante impresionantes y realistas con esto. Entonces aquí, por ejemplo arrastrar, me muestra un pequeño botón Eliminar y luego puedo eliminar uno de esos elementos aquí. ¿Cómo hice esto? Bueno, es exactamente el mismo principio. Entonces aquí tenemos nuestros elementos que se utilizan por aquí y simplemente los lleno con mi contenido. Y luego dentro de mis componentes establecidos aquí, se puede ver que tengo mi elemento por defecto aquí, y ya contiene el botón Eliminar. Entonces, si apago este contenido aquí, se puede ver que ya hay aquí abajo y eso es muy importante. Porque recuerda, la animación inteligente necesita un principio y un fin para funcionar. Entonces en mi borrar aquí, todo lo que hice, moví esta etiqueta aquí a la izquierda. Entonces esta será mi animación de arrastre. Y simplemente los conecté con una animación de drag. Así sucesivamente Arrastre el cambio a y anime de forma inteligente. Entonces una vez que se haga clic en esto y anote cómo esto solo está vinculado a este ícono de eliminar, no al resto de mi elemento. Entonces, si esto está vinculado, entonces va a ir aquí. Y éste está fijado, en este caso 21. También podría poner esto a cero. Y es por eso que parece que está borrando porque por aquí mis instancias simplemente se configuran con auto-layout. Y por lo tanto, si uno de ellos se pone a cero, entonces todos ellos se desplazarán hacia arriba. Realmente te animo a jugar con componentes interactivos y auto-layout porque realmente puedes crear prototipos muy impresionantes con esta técnica. 34. COMPONENTES: 06 componentes de embudo: Quiero mostrarte un pequeño truco al que llamo componentes de embudo. Lo que básicamente hacen es que conectan componentes en prototipos a través diferentes páginas y archivos. Aquí está mi diseño que se compone de una página de inicio Acerca de taller de página y una sección de newsletter. Y como pueden ver aquí, puedo navegar a todos ellos desde mi cabecera. Ahora, si hacemos clic en el encabezado, podemos ver por el color púrpura y la forma de diamante vacío que es una instancia. Si echamos un vistazo a dónde está nuestro componente principal, entonces saltamos a una página de componentes separada. O esto podría ser incluso estar en un archivo completamente diferente. Porque por lo general es una buena práctica no almacenar sus componentes junto con su diseño. Entonces para nuestro prototipado, eso ahora significa que tengo que pasar por cada página y luego tengo que hacer las conexiones correspondientes. Entonces tendría que ir, antes que nada, a través de mi página aquí, la página de mi blog. Entonces tengo que ir a mi página Acerca de Nosotros y volver al enlace. Tendría que hacer todo esto para cada una de las páginas. Ahora bien, una vez que hice esto, lo cual es bastante trabajo si quiero hacer algún cambio, digamos como el boletín que noté, abre una nueva página, pero esto en realidad es una superposición. Entonces tendría que pasar por todas y cada una de las páginas y cambiar esto. Eliminemos todas esas conexiones y busquemos otra solución. Por cierto, pequeño truco, haz clic derecho en tu lienzo en modo prototipado y podrás ir a eliminar todas las interacciones. Eso también es eliminar este flujo aquí, y echemos un vistazo. Entonces, lo primero que quizás quieras hacer es saltar a la sección de componentes principales. Entonces lo que realmente quiero es que quiero tener a este maestro aquí básicamente. Y luego cada vez que hago clic en taller, así que digamos agrego una interacción. Si hago clic, quiero navegar al taller. Pero como pueden ver, actualmente no puedo acceder en Figma a ninguna otra página. Y como dije aquí, acabamos de almacenar el componente y otra página, pero este componente podría estar en un archivo completamente diferente. Entonces podemos usar un pequeño truco mediante el cual simplemente puedes copiar el componente o también puedes usar cualquiera de estas instancias que ya tienes aquí. Sólo voy a empezar de cero y creo esta instancia. Ahora, podría conectar esta instancia, pero la cosa es que esta instancia no daría nada a las otras instancias. Tiene que ser un componente principal. Entonces estamos haciendo un pequeño truco aquí y seleccionándolo y luego empaquetando esta instancia dentro de otro componente. Entonces estamos creando un nuevo componente y voy a llamar a este embudo. Entonces, si miramos dentro de nuestro componente final, puedes ver que es simplemente contiene una instancia de nuestra navegación principal. Entonces, si volviéramos a saltar aquí, estoy de vuelta lo que sea que esté almacenado. Bien, así que de vuelta en nuestro diseño, lo que tenemos que hacer ahora es que estamos reemplazando todas nuestras instancias existentes con este componente final. Así que sólo voy a ir aquí y luego a los componentes. Y luego voy a ir ahora mismo está mirando una página de componentes y voy a entrar en la página de diseño, y estoy eligiendo navegación canalizada. También podrías simplemente eliminarlos, hacer una copia de esto, entonces es una instancia y reemplazarlos. Entonces ahora si selecciono alguna de estas instancias y vuelvo al componente principal, entonces salta aquí a mi embudo. Entonces ahora todo lo que necesito hacer es conectar el embudo en mi prototipado con mis pantallas una vez. Entonces éste va, pongamos esto a la solución, al blog. Este va al taller. Entonces este de aquí va a sobre mi botón Suscribir. Quiero abrir una superposición. Entonces, haga clic en Abrir boletín de superposición. Entonces ahora podemos ver si hago clic aquí, entonces el heredó todas esas conexiones. Entonces todas estas páginas tienen automáticamente la conexión. Y si cambio algo aquí, van a heredar esto. Echemos un vistazo a esto y esto funciona bien. Puedo hacer click a través de estos y desde cualquier lugar puedo acceder a mi newsletter. Así que en realidad solo estoy usando esos componentes finales para configurar mi prototipado. No tienen nada que ver con los componentes principales. Entonces cualquier cambio en el diseño del componente principal simplemente sería recogido por mi componente final. Mientras no se cambie el nombre y la jerarquía, entonces incluso las conexiones permanecerían en su lugar. 35. VARIABLES: 01 Prototipos con variables: Prototipado con variables. Empecemos por lo básico. Aquí tengo tres botones y tengo un cuadrado. Ahora, quiero llenar estos botones con diferentes tamaños. Y cuando haga clic en ellos, quiero que el cuadrado cambie según el tamaño que elija. Dije sobre Colección, que llamé Prototipos ejemplo uno Y se puede ver que dije el tamaño cuadrado a 400, tamaño 100, tamaño a 300 talla 3600. Entonces lo que quiero hacer ahora es que quiero enlazar antes que nada, estos números aquí a las variables. Entonces simplemente voy a seleccionar un número. Y luego en nuestros campos de propiedad de texto, ahora puedo encontrar esto dependiendo de cuántos tengas, tal vez tengas que desplazarte un poco. Entonces esta es mi talla uno. Entonces tengo mi talla dos. Y este último botón va a ser mi talla tres. Entonces ahora quiero conectar mi cuadrado con el tamaño cuadrado, así que lo estoy seleccionando. Y luego en el panel Propiedades, puedes ver que ya está configurado en 400, 400, ¿cuál es mi valor predeterminado? Pero quiero vincular esto a las variables que pueda recoger esto y cambiar este tamaño más adelante. Voy a elegir el ancho y también voy a enlazar la altura a esta variable. Bien, genial, así que ahora tenemos nuestra configuración básica y podemos saltar a la creación de prototipos Entonces ahora voy a conectar este botón. Y lo que quiero hacer es que quería decirle si hago clic, luego cambiar este ancho por lo que el tamaño cuadrado al nuevo valor. Entonces de mi desplegable, voy a elegir set variable, y luego voy a escoger el tamaño cuadrado. Así que simplemente escribe el nombre de esa variable y la verás aquí. Ya te va a indicar ¿ a qué quieres configurarlo? Y ahora puedo buscar en mi desplegable y quiero configurarlo en talla uno Entonces, antes de avanzar, veamos si eso realmente funciona. Voy a elegir este marco, y ahora voy a abrir el archivo Preview. Puedes usar un atajo, Mayús y Barra espaciadora, o simplemente puedes usar el menú desplegable aquí Voy a hacer click en mi 100 y se puede ver que funciona, mis cuadrados redimensionando. Entonces ahora quiero configurar estos tamaños y también quiero configurar un botón de retorno para volver al tamaño predeterminado original. Voy a elegir mi segundo botón. Y por cierto, también puedes copiar y pegar interacciones. Sólo voy a pasar por esto poco a poco de nuevo así que nos acostumbramos un poco al proceso. Así que el tamaño cuadrado, y queremos establecer esto a nuestra variable a ahora. Y ahora hacemos el último. Así que también de nuevo queremos elegir conjunto variable. Vamos por el tamaño cuadrado y vamos a establecer esto en la talla tres. Ahora solo quiero configurar mi botón de reinicio para saltar de nuevo a 400.400. Ahora, lo que podrías tener la tentación de hacer es que quizás quieras agregar una conexión Y por cierto, sólo me estoy conectando a la plaza. Para volver a establecer la variable, también podrías usar un menú de Interacción aquí arriba para agregar esto. En cuanto uses una variable, vas a conseguir este pequeño letrero aquí y ya no se conecta a la plaza. Entonces, lo que podría tener la tentación de hacer es decir que el tamaño cuadrado es igual al tamaño cuadrado Porque esto debería ser 400, ¿verdad? No lo es. Porque ¿qué pasa ahora? Si abrimos nuestra Vista previa, entonces podrás ver que cambia todos los tamaños. Pero si hago clic aquí eso no cambia. Y esto se debe a que estamos alimentando los nuevos tamaños en esta variable de tamaño cuadrado. Ahora no se puede ver dentro de su colección, pero en el fondo, esto es lo que está pasando. Podemos resolver esto simplemente agregando otra variable, que voy a llamar default. Voy a poner esto a mis 400 originales. Así que ahora estoy cambiando el tamaño cuadrado igual y lo voy a establecer igual a default. Así que ahora intentemos esto de nuevo. Podemos pasar por los diferentes tamaños. Y si presiono Reset, entonces va a saltar de nuevo a mi tamaño predeterminado original. Si tuviera que cambiar alguna de las tallas aquí. Entonces, por ejemplo, pongamos este de aquí en realmente pequeño solo cinco. Entonces puedes ver que esto se actualiza automáticamente no solo en mi botón, sino también dentro de mi Interacción. 36. swap de 02 con variables: Cambio de variantes con variables. Con variables, podemos sacar variantes específicas de un componente y también podemos hacer uso de las muertes para la creación de prototipos Aquí tengo un conjunto de componentes con tres variantes, a, B y C. Y aquí arriba tengo una instancia de variante a. y tengo tres pequeñas burbujas. Entonces, si hago clic en naranja, quiero un para mostrar. Entonces el del medio aquí, rojo es B y el azul sería C. Así que armé una colección. Y se puede ver que en esta colección tengo una variable de cadena que se llama selección. Y luego tengo naranja, rojo y azul. Y este es en realidad el nombre de la varianza. Entonces este es el único lugar donde realmente necesitas tener cuidado con el nombre porque tiene que ser el nombre exacto que diste a tu varianza el nombre exacto que diste a tu Dije F sub con tres modos diferentes y solo estoy dejando eso en modo add 12.3 Tenga en cuenta que probablemente va a necesitar un problema Figma o superior para configurar la nota Antes de configurar cualquier Interacción, necesito enlazar esta variable aquí, la selección a mi instancia. Esto tiene que estar en la instancia no va a funcionar dentro de su conjunto de componentes en este momento. Entonces selecciona la instancia y luego en el lado derecho, en un panel de propiedades, si pasas el cursor sobre el nombre de la instancia, entonces vas a obtener este pequeño símbolo, asignar variable asignar Ahora bien, esta característica es realmente nueva. Entonces esto todavía podría estar moviéndose un poco, pero debería estar en algún lugar por aquí. Así que úsalo desplegable y ahora elige la variable de selección que acabamos de configurar. Entonces como conecté esto con la variable de selección, ahora sabe que en su interior tiene varianza naranja, roja y azul. Saltemos a Prototipos y conectemos esto. Entonces estoy seleccionando la burbuja naranja y estoy usando el conector. También puedes simplemente hacer clic en un plus aquí en Interacción para configurar esto. Y cambio a establecer variable. Y ahora estoy diciendo establecer la selección en, voy a necesitar usar el nombre de la variante. Entonces en este caso la naranja declarada. Y ahora estoy conectando el rojo de la misma manera. Entonces voy a establecer la selección de variables, y simplemente voy a poner esta rojo, la azul. Voy a hacer la misma selección de variables de conjunto, y voy a poner esta en azul. Echemos un vistazo. Si eso funcionó, podemos saltar al modo presentación o en vista previa de otoño. Voy a usar eso con un atajo Shift Spacebar. Ahora bien, si hago clic en mis botonitos aquí abajo, se puede ver que tira en la Variante correcta. Así que esto es muy útil para configurar cosas como mostrar diferentes estilos del mismo producto. Y fíjate que estoy usando exactamente la misma colección para este ejemplo. Y estoy vinculando de nuevo esta variante aquí a mi selección de variables. Y lo único que tengo que tener cuidado es que mi varianza se nombra igual. Entonces éste sigue siendo naranja, rojo y azul. Y así si pruebo esto, se puede ver que esto funciona igual de bien que nuestro ejemplo anterior. 37. VARIABLES: 03 expresiones: Prototipado con Expresiones. En la creación de prototipos Figma, ahora podemos combinar el cálculo con variables, así más, menos, dividido y Esto podría ser algo bastante simple, como una variable más o menos otro valor u otra variable. Pero también puedes encadenar esto para configuraciones más avanzadas Aquí tengo una configuración de un botón menos NA plus y simplemente un número que actualmente está establecido en cero. Ahora ya configuré una colección. Y se puede ver que esto es súper sencillo. Todo lo que tengo es una variable numérica y el valor se establece en cero. Ahora pongamos este cero aquí a nuestro contador de cero. Selecciono el cero y luego en el panel Propiedades del texto, voy a ir por aplicar variable. Y voy a elegir aquí abajo, mi contador. Entonces, si presiono este botón Plus aquí, quiero que se agregue uno a mi valor total. Y si tengo menos, quiero que me quiten uno de mi total contar un número. Entonces saltemos a Prototipado. Voy a seleccionar primero el botón más. Voy a agregar una interacción y voy a decir onclick, establecer la variable con el contador de nombre Y ahora necesito reutilizar este contador variable. Y ahora puedo agregar más uno. A ver si eso funciona. Voy a seleccionar el marco y voy a abrir mi Vista previa. Y si hago clic en Plus, puedes ver que estoy agregando uno. Entonces ahora quiero hacer el mismo ancho menos al revés. Entonces selecciono mi botón menos y luego agrego una interacción. Y voy a establecer variable a contador. Y entonces contador es menos uno. Genial, bien, echemos un vistazo. Abre Vista previa más y menos. Puedo usar esto en casi cualquier cosa. No tiene que ser un número. Entonces lo que podría hacer es simplemente dibujar una forma aquí. Y vamos a llenar esto. Y ahora puedo atar cualquiera la altura o anchura de esa forma al mostrador. Observe cómo esto es cero, pero va a saltar a uno porque Figma no exime el cero como valor aquí Y sólo voy a hacer mis pasos un poco más grandes para que podamos verlo mejor. Entonces pongámosles dos pasos de diez. Y ahora como abrimos la vista previa, se puede ver que los números, así como mi forma está cambiando de acuerdo a los botones que presiono. 38. 04 expresiones de encadenamiento: En la creación de prototipos Figma, también podemos encadenar expresiones. En mi ejemplo aquí, tengo una sudadera, el precio de 60, y tengo un menos N, un botón más. Entonces puedo agregar esto. Esta sería la cantidad total de sudaderas agregadas. Y entonces quiero ver cuál sería el costo total. Entonces 60 veces cualquiera que sea el número que tenga aquí. Ya tengo mi más y menos configurado. La colección que estoy usando es contador y un valor de cero. Y luego se puede ver en Prototipos que configuramos este de aquí para contador y luego contador más uno, el cálculo que estamos teniendo Y entonces este de aquí se fija al total de cuentas son un número. Entonces echemos un vistazo a esto en nuestra vista previa en archivo. Para que podamos ver si teníamos plus, entonces esto sube. Y si tuviéramos menos, entonces este número vuelve a bajar. Ahora necesitamos agregar un poco más. En primer lugar, necesitamos agregar el precio a nuestra colección, y también necesitamos una variable para mantener el total. Entonces abramos nuestra colección. Entonces vamos a agregar precio como número. Y esto actualmente es de 60. Entonces voy a crear otra variable, que también es una variable numérica, y esta va a ser el total, y actualmente está puesta a cero. Ahora vinculemos nuestros números. Entonces voy a tomar este 60 aquí y voy a conectar con mi precio. Y este de aquí será mi total. Vamos a saltar a la creación de prototipos. Ahora bien, estos botones de aquí, todavía podría desencadenar. Entonces vamos a abrirlos. Y actualmente tengo el botón más puesto a contador más uno, así que estoy aumentando este número. Ahora lo que quiero hacer aquí es agregar otra acción. Quiero establecer otra variable. Porque lo que quiero hacer es fijar el total al total actual más precio. Entonces echemos un vistazo a esto. En la vista previa. Ya podemos ver que si tengo uno, entonces son 60. Y ahora siempre tengo que sumar más uno. Genial. Así que vamos a configurar a menos también. Entonces esto funciona más o menos de la misma manera. Voy a agregar otra acción, establecer la variable, y voy a establecer el total, dos, total. Y en este caso, menos el precio actual. Si echamos un vistazo a esto en nuestra Vista previa, entonces puedes ver que ahora sube y va a volver a bajar. Si te estás preguntando, por qué estamos usando variables y no simplemente agregando más 60, entonces lo mejor de esto es que si configuramos todo en variables, simplemente podríamos cambiar el precio aquí. Entonces digamos que estamos cambiando este precio a at, y ahora todo se actualizaría. Entonces no importa en qué parte de tu archivo usando esto, todo usaría siempre los valores correctos. 39. VARIABLES: 05 declaraciones condicionales: Declaraciones condicionales con variables. Entonces aquí tenemos de nuevo nuestro contador. Entonces tenemos más y menos. Y vamos a echar un vistazo a la configuración rápidamente. Entonces el plus está configurado para contrarrestar aumenta cada vez que presiono por 100. Y lo mismo para el menos, solo que disminuye 100. Ahora aquí tengo mi cero. Y esto se dice a la variable del contador. Aquí abajo, tengo una barra, y aquí tengo una forma. Vamos a agarrar esta forma. Y se puede ver que esto es x2 cero. Entonces esta es en realidad la variable que aplicé aquí. Entonces apliqué el contador a cero. Si echamos un vistazo a una colección, estoy usando una colección anterior aquí, pero realmente solo estoy usando esta variable de contador. Ahora bien, lo que quiero que pase es que si esto llega a 500, lo que significará que mi barra aquí está llena, entonces quiero saltar por encima a la pantalla que dice u1 hover Quiero que este número aquí que gana se establezca en el número que desencadena esto. Ahora, podría hacer esto a mano porque sé que quiero que sean 500, pero es mucho más suave. Si configuro esto como una variable, voy a agregar otra, que voy a llamar umbral. Entonces en este umbral de actualmente sé que quiero que esto sea quinientos Esto va a ser cuando voy a desencadenar mi nuevo evento. Y en realidad voy a atar este de aquí, dos a 500, sólo para tener todo bonito y ordenado. Vamos a limpiar esto un momento. Aquí vamos. Vamos a ver cómo se vería esto actualmente. Entonces voy a abrir la vista previa con shift y barra espaciadora. Y puedo ver que si agrego plus y si agrego menos, va en pasos de 100s Y a las 500, esto es lo que quiero. Esta barra está llena. No obstante, ahora simplemente iría más allá de este número. Y yo quería, una vez que llegué es cambiar a mi nueva pantalla. Vamos a saltar al prototipo y seleccionemos nuestro botón más. O actualmente tenemos es que si hacemos clic en él, aumenta en 100. Entonces hagamos clic en más y agreguemos una acción, y queremos agregar una acción condicional. Ahora aquí puedo decir si el contador y se puede ver que consigo algunos presets es igual a mi umbral Entonces lo que quiero que esto haga es que quiero agregar una acción, que es a la que quería navegar. Y ahora puedo elegir aquí la página cuando esa configuré. También podría elegir cómo quiero que naveguemos. Tan inteligente, anima esto apagado. Sólo lo voy a dejar al instante por ahora. Ahora podrías estar tentado con el else de agregar algo como esto, para establecer la variable aquí y luego usar realmente esta parte Así que usa contador y luego contador más 100. Y entonces simplemente podrías eliminar esta parte de aquí arriba. Sin embargo, no hagas eso. Seguiría funcionando, pero lo que pasaría es que saltaría a 500 y sólo entonces la próxima vez que hagas clic, saltará a nuestro viento. Entonces lo que puedes hacer es simplemente dejar esto vacío porque importa en qué orden suceden las cosas. Entonces primero uno al contador para aumentar si hacemos clic. Y entonces queremos que Figma revise, ¿ya estamos llegando a nuestro umbral? Vamos a probar esto. Vamos a seleccionar este abierto están en fuego Preview y se puede ver que saltamos en pasos de 100. Al revés todavía funciona. Aquí no necesitamos hacer nada. Y a medida que llegamos a los quinientos, estamos saltando a nuestro nuevo cuándo Y fíjate como realmente salta en el momento en que estamos llegando a este número. Quiero señalar algo con lo que podrías encontrarte cuando trabajas con declaraciones condicionales. Entonces aquí tengo un ejemplo y es casi idéntico. Y en realidad estoy usando exactamente la misma colección para esto. Entonces lo que está pasando aquí es que tengo un contador. Vamos a saltar a Prototipos. Y usamos éste antes de que veas que el consejo sube por uno. El total sube por el precio. Entonces este será el total. Yo quería decir. Si el precio total alcanza el umbral, que sigue siendo de 500, entonces salta por encima y di que es envío gratis. No obstante, si echamos un vistazo a esto, entonces se puede ver que esto en realidad no está funcionando. Voy más allá de mi umbral a las 500 y nada cambia. Si estás trabajando con declaraciones condicionales, entonces necesitas ser realmente, muy preciso. Entonces toda la configuración es correcta. No obstante, dice igual el umbral. Entonces antes eso estaba funcionando, sin embargo, nunca llegaremos exactamente a 500 como múltiplo de 60. Entonces, deshagámonos de esto y digamos que el total es mayor que. Y ahora podemos volver a usar nuestro umbral. Y ahora saltemos hacia atrás y veamos si eso está funcionando. Se puede ver que estamos subiendo, estamos llegando a 500, y estamos saltando a la nueva pantalla con envío gratis. Y ahora también necesitaríamos considerar nuestro menos. Entonces, si hago clic en gemidos, también tengo una declaración condicional aquí ahora y estoy saltando de nuevo a mi pantalla anterior Sí, incluso podríamos salirnos con la suya con una página si estamos agregando algunos booleanos 40. VARIABLES: 06 declaraciones y booleans: Prototipado con booleanos y variables. Entonces actualmente tenemos una configuración como esta donde tenemos, vamos a ejecutar esto. Tenemos una sudadera con el precio de 60. Podemos agregar esto a nuestra canasta. Aumentará el número y aumentará el precio total. Y luego una vez que alcanzamos este umbral de 500 con saltar por encima a esta nueva página, con envío gratis. Y si reducimos las cantidades entonces estamos saltando hacia atrás. Entonces esto funciona bien, pero en realidad podemos reducir esto a una sola página si usamos booleanos Así que aquí tengo una página que incluye el envío gratis ya e importante, esto está todo configurado como diseño automático. Echemos un vistazo a lo que está sucediendo actualmente aquí. Entonces si hago clic más, entonces estoy agregando un artículo y el precio total aumenta por el precio de las sudaderas Ahora, abramos nuestra colección. Podemos ver que tenemos el contador, que es éste de aquí. Entonces tenemos el precio, que está aquí, nuestro total, que vinculamos a éste. Como pueden ver, tenemos el umbral, que dijimos a 500. Ahora voy a agregar otra variable, y voy a llamar a esta, que va a ser un envío gratuito booleano por defecto Voy a tener este set en false. Ahora antes que nada, necesito vincular este envío gratis a este valor booleano aquí Vamos a seleccionarlo. Y luego en su panel Propiedades debajo de la capa, haga clic en el ojo, pero no haga clic en él. Así como eso se asegura de que sea un clic derecho y luego vas a obtener las propiedades. Y ahora da clic en el envío gratis, que se establece en false. Y esta parte del envío gratis va a desaparecer. Aún lo puedes ver en tu menú Capas. Bien, ahora vamos a establecer alguna lógica. Así que vamos a saltar a Prototipos, y vamos a presionar nuestro botón más aquí Entonces lo que quiero hacer ahora es que quiero agregar una declaración condicional. Y quiero decir, si el total es mayor que el umbral, entonces lo que quiero hacer es que quiero establecer la variable de envío gratis de pliegues a true. Si vuelvo así menos, quería hacer lo mismo. Entonces quiero agregar unas declaraciones condicionales. Y quiero decir si el total es menor que el umbral establecido, entonces lo que quiero hacer es volver a establecer la variable de envío gratis en false. Ahora vamos a cerrar esto y echar un vistazo. Si esa cera. Si golpeo plus, estamos subiendo, estamos alcanzando nuestro umbral y aparece el envío gratis. Y puedo ir más arriba. Pero a medida que baje y vuelvo a golpear el umbral, luego se ha ido para alternar de nuevo el envío gratis 41. DOCUMENTO: 01 Prototipos de documentación con flujos: Entonces, una vez que hayas terminado tu prototipo, quieres compartirlo con otros. Echemos un vistazo a las formas en que podríamos hacer esto. Entonces aquí tengo un ejemplo de prototipo, y se puede ver que estoy trabajando en la misma página en mi diseño móvil así como en mi diseño de escritorio. Y también se puede ver que ya tengo configuración de diferentes flujos. Si hago clic en el fondo gris mientras estoy en la creación de prototipos, y se puede ver aquí abajo una visión general de todos mis flujos. Entonces lo que me gusta hacer es que me gusta darles un poco de estructura. Entonces utilizo trapeador para flujos móviles y muertes para flujos de escritorio. Y entonces puedo tener el mismo flujo, así que inicia sesión, así tengo inicio de sesión móvil y un inicio de sesión de escritorio. Y entonces dos estarían en navegar y agregar. Y puedes ver que actualmente solo tienes esa configuración para móvil. También puedo barajar lo hace aquí, por ejemplo I. Puedo simplemente moverlos y luego puedo ordenarlos en el orden o cambiarles el nombre de la manera que necesito. Ahora, saltaremos a nuestro modo de presentación. Se puede ver aquí en el lado izquierdo, los tengo muy bien ordenados y así puedo verlo móvil y de escritorio uno junto al otro y simplemente puedo hacer clic a través de todos ellos y obviamente se conectarán con todo, todo el prototipo. Pero aún puedo saltar a secciones específicas que quiero destacar. Ahora bien, esto es bastante agradable, pero puedo agregar una capa adicional de visión general para todos los que ingresen a mis archivos. Observe cómo cuando pasamos el cursor sobre uno de estos flujos, obtenemos un enlace aquí para que podamos hacer clic en Copiar enlace. Entonces, por ejemplo, para el inicio de sesión móvil. Y entonces lo que me gusta hacer es que me gusta establecer un pequeño panorama general. Aquí tengo una de una página para mi vista móvil y otra para mi escritorio. Y por cierto, es posible que solo tengas una si solo estás trabajando en nuestra aplicación móvil o también podrías tener varias tabletas de pie. Eso realmente depende de lo que estés trabajando. Y entonces todo lo que hago aquí es escribir diferentes flujos que quiero o así tal vez algunos de ellos aún no he trabajado. Y luego simplemente selecciona tu texto, enlaza, y luego puedes copiar el enlace que acabas de copiar del lado derecho aquí desde los flujos dentro de esta pequeña visión general. Así que cualquiera que ingrese a mi archivo podría hacer clic directamente en esos enlaces para que no necesiten entender que tienen que ir a Vista previa ni nada. Simplemente dan click aquí y luego se abriría la Vista Previa. Y dará una visión general de mi prototipo. Siempre comenzará directamente en el flujo al que agregué el enlace. Las pequeñas burbujas al lado es de algo que me gusta usar. Entonces puedes ver aquí en mi pestaña de diseño, esto es como desde un archivo externo. Así que vamos a saltar por ahí. Vamos a abrir este archivo. Y aquí simplemente tengo configuración de variantes. Entonces puedo ver en qué fase es para probar y en qué fase se encuentra el prototipo. Entonces aquí tengo el primero es que el prototipo está en progreso. Entonces, por ejemplo, ver libro, no he terminado este flujo todavía no he terminado este flujo y por lo tanto necesita ser probado. Y aquí se puede ver que el inicio de sesión al prototipo siempre ha sido, ya se terminó y actualmente se está probando. Absolutamente puedes personalizar esto a tus necesidades. Podrías agregar un nombre de responsabilidad, podrías agregar fecha, lo que necesites aquí. Esto me gusta bastante porque de esta manera, ya podemos planificar todos los flujos y ordenar diferentes pasos que queramos construir como prototipo. Y también podemos ver qué pasa en las pruebas. Y aquí por ejemplo las pruebas ya se han hecho y por lo tanto tenemos que volver atrás y prototipo necesita adaptación. Entonces probablemente haya algunos comentarios de las pruebas y voy a reelaborar mi prototipo en consecuencia. Además, como esto está configurado en un marco, simplemente puedo presionar Reproducir y usar esto como una diapositiva de presentación. Y también recuerda nuestro pequeño truco de que podemos incrustar fotogramas animados dentro de la presentación. Entonces aquí, estos son mis prototipos completos, así que este es mi marco de desplazamiento vertical, y simplemente coloqué esto en mi presentación aquí. Y ahora puedo tocar esto. Vamos a apagar esta. Y puedo desplazarme por esto. Puedo hacer clic en elementos individuales y realmente puedo configurar mi diseño así. Y también puedo mostrar mi visión general con los flujos. Para que pueda tener una presentación que incluya mi prototipado. 42. DOCUMENTO: 02 Compartir enlaces de prototipos: También puedes invitar a personas a tu archivo o simplemente a tu prototipo enviándoles un enlace. Hay pocas cosas a considerar al hacer esto. Podrías invitar a personas directamente a través del enlace para compartir a tu archivo de creación de prototipos. Entonces necesitarían presionar el botón de reproducción y podrían ver el prototipo en acción. Ahora muchas veces es posible que no quieras gente en tu archivo de diseño. Sólo quieres presentarles el prototipo. Y eso podría ser solo en tu prototipo como tal, embebido en la vista de presentación con algunos flujos diferentes. O podría ser una presentación que configuraste y es visible y se puede hacer clic en la vista de presentación. Entonces, en lugar de compartir todo el archivo, mientras esté en la vista de creación de prototipos, observe cómo cambia el botón para compartir prototipo. Entonces, en nuestro archivo de diseño, verás que simplemente se llama Compartir. Y luego en nuestro prototipado View, Share Prototype, si hacemos click en esto, solo compartiremos el link a esta vista de prototipado. Incluirá todos los flujos que configures. Ahora antes de compartir nuestro prototipo, queremos asegurarnos de que esté configurado exactamente de la manera en que queremos que la persona del otro extremo lo vea. Entonces bajo opción, podemos elegir qué tamaño queremos mostrar nuestro prototipo. Y entonces también podemos elegir si queremos mostrar u ocultar nuestros flujos. Y así todo lo que configuramos aquí se almacenará en nuestro enlace para compartir. Y entonces la persona del otro extremo obtendrá exactamente esos ajustes. Eso no solo incluye la configuración en la vista de creación de prototipos. Si volvemos a nuestro diseño, recuerde que podríamos en el prototipo, mostrar la configuración del prototipo para que pueda escuchar el color de fondo del conjunto. Y lo más importante, podríamos configurar un dispositivo. No obstante, hay que tener un poco de cuidado con esto si estás trabajando puramente, digamos en vista móvil. Y ahora saltemos hacia atrás. Entonces podemos agregar un dispositivo a su alrededor, lo cual en realidad es muy agradable para una presentación. Sin embargo, si estás mezclando móvil y escritorio, entonces nota lo que sucede aquí porque nuestra vista de escritorio, realidad seremos hundidos en este dispositivo. Entonces, si estás mezclando dispositivos, asegúrate de tener tu dispositivo configurado en ninguno. Voy a saltar de nuevo al primer flujo donde quería comenzar. Y ahora puedo presionar share prototipo. Entonces aquí puedo invitar vía correo electrónico, o también puedo establecer la preferencia por el enlace. Y aquí se puede elegir entre puede editar, puede ver, y puede ser prototipo. Ahora, si invitas con puedes editar, eso significa que las personas tienen acceso completo a tu archivo y pueden editar tu diseño. Esto también podría conllevar costos adicionales para los nuevos editores. Así que ten mucho cuidado cuando y si compartes este. Puede ver es gratis, pero significa que las personas pueden ver todo tu archivo de diseño. Ahora, queremos quedarnos en los prototipos de Kent View, así que solo compartimos la vista de prototipos, incluida nuestra descripción general de flujo. Y ahora puedo invitar por correo electrónico o establecer el enlace también, y simplemente copiar un enlace y enviarlo. Tan pronto como las personas ingresen tu archivo, también siempre podrás editar sus derechos. Así que cualquiera que tenga el enlace ahora puede simplemente abrir este enlace ya sea en su navegador o saltará a esa app de Figma si la tiene abierta. Y verás que aunque no estén conectados, obtienen un pequeño adelanto y aún así les puede gustar saltar a través de tu prototipo. Con el enlace. También podrías abrir el prototipo si tienes instalada una app de FIG my en su dispositivo móvil. Ahora, con este, solo necesitas tener un poco de cuidado porque este tamaño de pantalla que configuraste en Figma debería ser del mismo tamaño que se ajuste a tu dispositivo físico que estás usando. De lo contrario, se va a estirar o juntar. Y esto podría llevar a resultados extraños. 43. DOCUMENTO: 03 Documentación de componentes interactivos para el handoff: Hablemos de cómo podríamos documentar las interacciones y Figma. Hasta ahora, echamos un vistazo a cómo comunicamos nuestra configuración para la creación de prototipos en general. Entonces, ¿cómo podemos mostrar esas interacciones de una página a otra Pero creo que también realmente necesitamos comunicarnos y sobre todo documentar las microinteracciones. Entonces, ¿qué sucede en hover y todos los diferentes estados que están incrustados en nuestros componentes interactivos Sus componentes pueden estar almacenados en el mismo archivo en una página separada, o pueden estar en un archivo completamente diferente y se extraen en bibliotecas compartidas por cable. Entonces como estoy trabajando con un ejemplo realmente simplificado solo para mostrarte cómo configurar la documentación, solo tengo algunos componentes aquí y simplemente los guardo en su propia página. Por cierto, si quieres mover componentes de una página a otra, entonces no puedes simplemente copiarlos y pegarlos. Es necesario seleccionar el componente o componentes dicho, haga clic con el botón derecho y luego ir a pasar a la página. Y puedes seleccionar el destino donde quieres enviarlos. Entonces vamos a usar esta tarjeta aquí como ejemplo y voy a mostrarte cómo documentar esto y cómo comunicar la interacción y poca animación que está sucediendo dentro del componente para tu mano al desarrollo. Entonces este es un conjunto general de, uh, uso, pero puedes ajustarlo absolutamente a tus necesidades. Pero vamos paso a paso. Entonces antes que nada, estoy tomando todos los componentes dijo, y lo estoy moviendo a este marco que configuré. Y fíjate como sigue siendo un conjunto de componentes. Pero en cuanto lo muevas a un marco van a desaparecer los pequeños componentes que se inscriban aquí. Entonces me estoy moviendo aquí y pueden ver que tengo esta configuración. Entonces tengo un encabezado de datos de uso siempre. En este caso, es genial tarjeta, le voy a dar un número. Y esta es la documentación. Aquí tengo un pequeño sello. Entonces esta también es una variante dijo que configuré abridores para ti en otro archivo. Y así puedes ver aquí hay diferentes etapas. Y así puedo pasar de un resultado demasiado difícil, lo que pasa bastante, y progresar y así sucesivamente. Entonces éste de aquí sería aprobado. Entonces porque moví mi componente principal dentro de este marco. Si vamos al panel Activos, se puede ver que tenía mis componentes locales, el que no me moví en un marco que está flotando por aquí. Y en cuanto lo muevas al marco, este es el nombre del marco de aquí arriba. Entonces puedes abrirlo y se va a guardar muy bien en su interior. Entonces esto va a dar un orden realmente agradable a todos tus componentes. Entonces lo que me gusta hacer es simplemente sacar una instancia. Entonces también puedo tener la instancia aquí porque aquí, por ejemplo, si tocaríamos esta hoja de documentación, entonces ya veríamos la animación sucediendo aquí en esta instancia. También puede agregar otra información. Entonces por ejemplo yo, bastante como tener una captura de pantalla. Así que aquí puedes ver todas tus Propiedades de Componentes. Solo voy a agregar esto aquí, agregar un poco de efecto, y luego puedes obtener una visión general muy agradable. Entonces, aunque todo el mundo pueda ver esto, si hacen clic en un componente, sigo dejando muy claro que este componente contiene diferentes propiedades. Y una de estas propiedades son los diferentes estados de default y se puede cambiar a un hover. Entonces solo estoy resaltando esto otra vez. No quiero hablar mucho más de documentación general porque ese es un tema diferente en un curso diferente que puedes tomar. Pero solo para mostrarte entonces voy a repasarlo. Entonces tengo mi configuración de especificaciones aquí. Para que puedas ver toda la medición, cómo se comporta todo. Y siempre puedo dar un poco de información de textos. Y esto es en realidad una parte de los interesados en estos momentos. Entonces aquí tengo mi animación. Y entonces lo que hago es que simplemente tengo una instancia aquí. Entonces uno por defecto y luego el estado hover. Y digo aquí en hover, se aliviará 800 milisegundos. Y luego por aquí en mis casillas de información, sólo puedo añadir un poco más de información. Aquí hablo del gatillo. Entonces en mi caso on hover y describí la acción un poco más. Ahora, estoy describiendo esto ya con un poco de CSS en mente. Esto no es necesario. También puedes simplemente describir lo que sucede. Pero si quieres un poco de notación CSS o cualquier otra notación de código, simplemente puedes saltar a la pestaña Inspeccionar. Y también tenga en cuenta que está compartiendo con el modo vista solo con su desarrollo. Entonces esto es lo que van a ver automáticamente. Y en cuanto seleccionan algún elemento, esta es su información. Entonces, lo que hice, simplemente copié la notación CSS de sombra posterior, por ejemplo , desde aquí, también puedes cambiar a iOS o Android dependiendo de en qué estés trabajando. Si te estás preguntando de dónde llegué a la escala de transformación, entonces quiero mostrarte un pequeño truco. Entonces ahora mismo en mis componentes dijo aquí que las imágenes son exactamente del mismo tamaño. Y luego en lugar de solo cambiar esto manualmente, lo puedes hacer es seleccionar la imagen y presionar K. Y el botón K abrirá el menú de escalado. Y ahora aquí puedes elegir una talla. También puedes elegir por dónde quieres empezar. Entonces estoy empezando desde abajo en el medio, y luego estoy agregando 1.2 por ejemplo y lo escalará en 1.2. Y ahora simplemente puedes usar esta escala, que será la misma y CSS. Y entonces lo que me gusta hacer es agregar un pequeño botón de reproducción porque realmente no hay nada como una demostración de lo real para transmitir tu idea. Y como configuro esto es, ES simplemente dibujar un marco y le agrego una instancia. Entonces la instancia contiene toda la interacción que configuraste un nuevo componente dijo Déjame mostrarte. Si salté a la creación de prototipos, entonces puedes ver aquí aquí es donde se configura mi interacción y luego esto obviamente como todas las demás instancias, heredará este comportamiento. Y así ahora, si hago clic aquí en el fondo, se puede ver que a esto se le llama animación de autos y al flujo se le llama tarjeta. Y simplemente puedo copiar el enlace. Y ahora puedo agregar el enlace para mostrar textos de animación. Entonces en cuanto alguien haría clic en play, entonces se abriría en este flujo y podrían ver la Micro Interacción como una pequeña demostración. Por supuesto, también podrías enlazar a todo tu documento. Entonces tengo un flujo separado justo aquí. Y por cierto, si presionas Z, entonces puedes alternar a través de la vista. Así que podrías tener una vista general de la página o simplemente podrías tener una vista de detalle. Y puedes ver que en la instancia, todas las instancias realmente estás usando a través de tu diseño. También verías su interacción. Configuraría una página para todos y cada uno de los componentes que estoy usando. Y si hay una animación, agrego la parte de animación. Si no tienes ninguna interacción, y obviamente no necesitas esto. Si te estás preguntando esta última parte aquí es simplemente el comportamiento receptivo. Entonces esto es solo sobre cómo mi componente y se sentaría en el diseño ya que el tamaño de la pantalla está cambiando. Así que puedes ver aquí estoy usando una grilla para mi diseño y sería siempre el mismo componente en simplemente cambiar el número de columnas que ocupa. Probar y documentar el comportamiento receptivo es un gran tema separado. Si te interesa, tengo un nuevo curso de aprendizaje completamente separado sobre esto. 44. DOCUMENTO: 04 Integración en documentaciones externas: Puede usar un sistema externo para documentar su diseño y código en su archivo Figma y el uso compartido, también puede seleccionar obtener código incrustado y luego simplemente copiar este código para incrustar. Algunas aplicaciones también se conectan directamente con Figma. Puede obtener una lista de las aplicaciones actualmente soportadas en el sitio web de Figma. Después haz clic en Comenzar, conecta Figma a otras aplicaciones, incrusta Figma. Y luego al final de esta página, encontrarás una lista de todas las aplicaciones actualmente soportadas. Y tenga en cuenta que esto suele ser aplicaciones basadas en navegador. Para que puedas tener tu documentación externa en Notion, confluencia de Dropbox. Y el que realmente me gusta es cero máximos. Entonces te voy a mostrar un pequeño ejemplo cómo funciona la incrustación con su altura. Entonces, uno de mis favoritos absolutos para documentación era cero alturas es el ejemplo del sistema de diseño de una década al que se puede acceder a través del diseño de puntos de césped de década. Ahora aquí haremos click en digital. Y esta página que estás viendo aquí, esto es todo incorporado de altura cero. Entonces queremos ver cómo documentaron sus interacciones. Así que hagamos clic en Componentes y un detalle muy agradable aquí también. Primero obtiene una visión general de todos los componentes y su estado actual para diferentes versiones. Simplemente hagamos clic en el primero, un botón y podrás ver que podemos elegir entre web, Android e iOS. Así que vamos a ir por la web ahora mismo. Entonces aquí instalaron su documentación. Y así obtenemos una anatomía general del botón, ejemplos de uso, especificaciones, etc. Y ahí están hidratados, te da la oportunidad construir esto de la manera que quieras. Podrías tener páginas separadas para el diseño y el código, o podrías tenerlo todo junto. De veras depende de ti. Y ahora lo que queremos ver es cómo nos muestran las ayudas a la cosecha. Para que veas lo llaman escaparate. Y en escaparate, hay una incrustación. Y puedes ver las diferentes ayudas de cosecha para este botón. Ahora vamos a saltar de nuevo a los componentes y se puede ver que por ejemplo vamos a la tarjeta que. También vinculan todo esto a Figma. Para que pueda volver a ver el uso de la anatomía. Y aquí lamentablemente no vemos el comportamiento. Pero lo que tengo, lo cual es muy agradable mostrarles un pequeño video sobre cómo usar esto en Figma. Entonces aquí también describen cómo se utilizan los diferentes estados. Y claro que también tienen una sección que explica cómo los miembros del equipo se conectan a los archivos Figma. Y por cierto, también puedes tener una copia de esos archivos Figma y jugar con ellos si no eres parte del equipo de tierra de la década, simplemente ve a la sección de la comunidad Figma, busca Decadron y podrás duplicarlos y jugar con ellos. Entonces probémoslo nosotros mismos. En su altura. Podemos conseguir un proyecto gratis y probarlo gratis. Y este es mi proyecto gratuito y puedo simplemente personalizar todo sobre esto aquí. Y aquí se ve la vista que es bastante similar ya a la que vimos con Decadron. Entonces lo que hice es en componentes, agregué solo una nueva página llamada tarjeta y puedes personalizar todas estas secciones a tus necesidades. Entonces aquí puedes ver que ya subí algunas cosas y como funciona esto es que puedes conectarte directamente con tu archivo Figma. Y así ya configuré esto aquí. Puedes ver simplemente tienes que agregar el enlace a tu archivo en cero. Te va a indicar cómo hacer eso. Y luego podrás pasar por todos tus elementos. Entonces aquí puedo pasar por mis colores, estilos, importantes, mis componentes, mis diferentes páginas. Y así todo lo que hice aquí, seleccioné tarjeta y puedes ver esto ya es editar. Si quisiera agregar el avatar, simplemente podría seleccionar esta prensa para agregar. Y entonces se puede ver que subiría todos los estados del avatar. Por lo que también subiría un default y el estado hover para mí. Vamos a deshacernos de esto porque no queremos esto en este ejemplo. Entonces aquí pueden ver que tengo mi tarjeta, así que tengo mis diferentes estados. Y también con los ajustes de diseño aquí, puedes personalizar esto. Así que podría tener diferentes formas de exhibir esto. Y también puedo agregar que me gustan mucho las propiedades de los componentes. Entonces aquí tienes hover y default en este momento y también podrías agregar más y agregar nodos y así sucesivamente. Entonces agregué mis especificaciones aquí, pero en realidad ni siquiera las necesitaría porque puedes simplemente hacer clic en cualquiera de las que lo importas de Figma y luego abrirá su propio modo de inspección. Así que aquí puedes simplemente hacer clic en los diferentes elementos y obtener toda la información diferente en vista de inspección. Entonces aquí arriba también se puede ver que en esta página estoy configurando todo, desde el diseño, desde Figma. Y entonces tendría una página separada aquí donde desde código podríamos conectarnos a ahora el componente de la tarjeta que está codificado. Así que es realmente como una manera fantástica de llevar todo a una página. Y como dije, esta es una configuración que sugiere la altura cero. También puedes mezclar todo esto en una página para que puedas tener tu diseño Figma y luego la conexión de código a continuación eso realmente depende de ti. Así que más abajo puedes ver que subí algunos ejemplos. Entonces aquí tengo las imágenes, para que puedan ver cómo se está utilizando este componente. No tenemos y lo que queremos agregar ahora es el comportamiento de interacción. Entonces primero quiero agregar mi prototipo. Entonces si hago clic en Play, Ese es el prototipo que quiero agregar. Entonces si hago clic aquí, entonces esto va a nueva página y también tiene mis microinteracciones incrustadas. Entonces voy a Compartir Prototipo y ahora necesito copiar el enlace para altura cero. No necesito una incrustación. Bien, volvamos a saltar a la altura cero. Y ya puedo ver para mostrar un prototipo, usar secciones de incrustación. Así que hago clic aquí y luego necesito seleccionar no código, no diseño subir sino en cama. Y ahora simplemente entro aquí mi enlace Figma. Y verás que está cargando directamente mi prototipo. Ahora puedo tirar de la ventana al tamaño que quiera. Vamos a hacer esto un poco más grande porque se puede ver que esto es especie de squished en la parte superior. Entonces ahora lo puedes ver bien. Ahora puedes ver que está incrustando mi prototipo y simplemente puedo pinchar a través de él. Si tienes más flujos, por cierto, y copias el enlace con una pestaña Flujos abierta desde Figma. Entonces también te va a mostrar flujos en esta vista previa. Ahora también quería simplemente agregar esta pequeña animación aquí del componente de forma aislada. Entonces no necesito toda esta documentación porque puedo configurar todo esto en altura cero. Lo que me gusta bastante hacer no lo he hecho en Figma y luego por ejemplo copio esos elementos de más de 20 de altura para explicación. Pero por ahora, todo lo que quiero es éste. Entonces, presionemos play para llegar a la pestaña Prototipos. Y ahora voy a cerrar mis flujos porque de lo contrario esto se vería y solo quiero mostrar esto. Y vamos a Compartir Prototipo, copiar enlace. Algunos en realidad van a agregar esto primero. Así que de nuevo, necesito usar Embed. Y luego copio el enlace que acabo de recibir de mi vista previa. Y es lo mismo que hicimos antes. Entonces ahora podemos abrir la ventana aquí. Y esto va a seguir siendo la forma en que configuraste esto. Entonces ahora tengo esta pequeña interacción y luego puedes ver mi componente en acción. Entonces así es como se vería nuestra página para cualquiera que la visite para que pueda ver que tenemos nuestros componentes con Inspect. Y luego aquí abajo tenemos nuestros ejemplos. Y al final tenemos nuestras microinteracciones mostrando, así como nuestro prototipo desplazable clicable aquí. 45. Gracias: Bien hecho para terminar este curso. No dudes en comunicarte con nosotros en moon learning dot io, siempre estamos interesados en escuchar tus comentarios. También harías como un gran favor si pudieras tomarte un minuto y dejar una reseña aquí mismo. Si te ha gustado este curso y también asegúrate de echar un vistazo a nuestros cursos adicionales. En Moody Learning punto io. Cubrimos todos los temas desde los cimientos mismos del diseño de UX UI hasta Figma e incluso algunos conceptos básicos de código. Asegúrate de visitar nuestro sitio web en Moody Learning dot IO, donde también puedes suscribirte a nuestro boletín.