Creación de prototipos interactivos con Figma

1. Introducción: bienvenido al curso de prototipado con Sigma. En este curso, vamos a aprender cómo podemos crear prototipos interactivos de Riel utilizando el software gratuito de diseño en línea llamado Sigma. Hola, Mi nombre es Neema y soy tu instructor para este curso a lo largo de los últimos 10 años se trabajan en decenas de aplicaciones móviles y Web tanto para starups propias como también para proyectos de clientes . Y en este curso, te voy a mostrar cómo realmente puedes crear un prototipo de trabajo completo. Pueden presumir ante colegas, amigos, inversionistas y demás. En primer lugar, vamos a pensar Project que ya hemos diseñado llamado Clean Kangaroo, que es una aplicación móvil para un servicio de entrega de lavandería. Vamos a tomar los diseños para la aplicación móvil y en realidad crear un prototipo utilizable con riel, transiciones, estados e incluso animaciones inteligentes. Vamos a probar nuestro prototipo en el mapa de higo en sí, y también vamos a echar un vistazo a la aplicación Sigma's Mirror donde podrás ver prototipos, vida, y también ver tus diseños cambian la vida ya que estás trabajando en ellos en el producto como un bono testamento también aprende cómo trabajan los equipos en sigma, cómo realmente podemos crear un equipo invitar a miembros del equipo a nuestro proyecto y trabajar con ellos dentro del mismo diseño. También aprendí a compartir una exportación, nuestros proyectos con clientes, colegas y así sucesivamente. Entonces si estás listo para aprender a crear hermoso prototipo para tus diseños usando mamá falsa , entonces salta justo dentro y te veré en este curso. 2. Importar la UI móvil: Muy bien, Así que sin más preámbulos, saltemos directo a crear un prototipo fuera de esta aplicación móvil que tenemos por aquí. Este es un diseño móvil para una aplicación llamada Clean Kangaroo, que es esencialmente proporciona. Ah, servicio de entrega de lavandería. Las personas pueden tener su lavandería. Yo cogí y dejé agradable y limpio. Y en realidad tengo un curso donde te muestro cómo puedes diseñar una maqueta móvil completa como esta. Um, en otro curso llamado Aprender Sigma diseñó un móvil completo, tú aux. Así que siéntete libre de revisar ese curso también, si quieres aprender a diseñar realmente maquetas móviles que se vean algo así. Pero para el propósito de este curso, nos vamos a centrar principalmente en sólo cómo crear un prototipo real a partir de esto. lo que antes de avanzar, por favor adelante y descargue el archivo de estigma para este proyecto aquí mismo, que estará disponible bajo el proyecto y el recurso está tab por aquí. Haz clic en eso y luego encuentras el recurso que puedes descargar desde ahí. Entonces una vez que tengas eso descargado, solo tienes que seguir adelante y abrir tu producto. App no importa si estás en un escritorio o Web, puedes crear prototipos en ambos. Ahora bien, si esta es tu primera vez que usas fig MMA, entonces dirígete a fig. Medog vienen del bro. Podrás apuntarte al servicio y luego seguir adelante y seguir con nosotros. Así que una vez que estés en fig ma, puedes simplemente ir a tu carpeta de borradores o a cualquier lugar donde guardes tus diseños y luego seguir adelante y simplemente arrastrar nuestro archivo de punto fix que descargaste. Por lo que debería ser un archivo llamado Clean Canguro Mobile. Tú y punto falso, así que simplemente sigue adelante y arrastra eso. Es un archivo un poco más grande, por lo que podría tardar algún tiempo en importarlo para darle algo de tiempo, y que una vez que se haya importado, verás que dice Archivo importado con éxito para seguir adelante y hacer clic en hecho y luego seguir adelante y solo ábrela haciendo doble clic en el archivo. Perfecto. Y la siguiente lección. Aprenderemos cómo funciona el modo de presentación y prototipado y Sigma 3. Crear prototipos: todo bien. Entonces como mencioné en la intro de este curso, una de las herramientas realmente eléctricas en fig MMA es su prototipado. Por lo que el prototipado nos permite dar vida a nuestros diseños para que realmente podamos ver todas las páginas año en acción. Entonces ahora mismo, si vas a este botón y pulsas presente, lo que nos permite ver cómo se verían nuestros diseños en realidad en un dispositivo como aquí. Y si bien esto es genial, como puedes ver en este momento, realmente no hay orden y estoy usando las teclas del teclado izquierdo y derecho para cambiar realmente entre esas páginas. Pero si quieres seguir adelante y realmente crear un prototipo para este diseño con herramienta de prototipado, en realidad podemos llevar este proyecto al siguiente nivel y crear un prototipo fuera de él. Entonces sigamos adelante y cerremos eso ahí mismo. Ah, y entonces adelante y abre. El panel prototipo aquí, como ven, nos da un pequeño adelanto. Aquí tenemos el dispositivo del iPhone 11 pro porque nuestros tamaños de pantalla o tamaños de marco están juego con la sonda iPhone 11. Um, y entonces incluso podemos cambiar el color de fondo de nuestro modo de presentación desde aquí. Y así ahora que estamos en el modo de prototipado, asegúrate de seleccionar aquí el modo de prototipado. Ah, en realidad puedes seguir adelante y crear conexiones entre páginas. Y esto es lo que quiero decir, si vas por aquí, en realidad podemos conectar este marco por aquí si lo seleccionamos, digamos este marco por aquí. Y así ahora estos dos marcos están conectados. Ah, y si toco en cualquier lugar de este marco en mi modo de vista previa, irá a esta página y puedo demostrarlo yendo de nuevo al modo de vista previa. Ahora bien, si toco en cualquier parte de la página, me llevará a esa página tutorial. Por supuesto, eso no es lo que queremos en este caso. En este caso, queremos realmente aplicar esa opción de prototipo al botón aquí para que puedas hacerlo también en modo prototipo. Si vuelvo aquí, verás que también obtengo un montón de opciones diferentes, que puedas elegir la animación para que sea instantánea, disolver inteligente, animar, entrar, salir eso. Dependiendo de cómo quieras que suceda tu animación, puedes seguir adelante y tuitear y jugar con los de aquí. No entraré demasiado en los detalles de las diferentes animaciones, pero siéntete libre de jugar con él y ver qué se siente bien. Y luego aquí, en realidad puedes seguir adelante y cambiar cómo quieres realmente activar ese cambio pagado por ahí , ya sea en la parte superior, que es lo que tenemos originalmente o en arrastre. Entonces si estás arrastrando algo en la pantalla mientras pasas el ratón o presionas sobre un montón de otras opciones, aquí está bien, puedes usar la tecla delete para realmente deshacerte de las conexiones prototipo aquí y luego Ahora lo que queremos hacer es realmente crear una conexión prototipo entre nuestro pero aquí y los pasos del tutorial y luego conectar estos botones para ir al siguiente paso tutorial y así sucesivamente. Y luego de aquí, queremos, por supuesto, por supuesto, saltar a nuestra página de pagos aquí y de nuestra página de pagos a nuestra página de mapa y te llega la idea. Entonces seguiremos adelante y conectaremos las barras superiores. Aquí también nos lleva a la página correcta ya que estamos haciendo clic y tal vez finalmente conectar este botón de cierre de sesión de nuevo a nuestra primera página aquí y realmente crear un bonito prototipo para nuestros diseños aquí 4. Agrega conexiones entre cuadros: todo bien. Entonces ahora que tenemos una idea de cómo funciona la presentación sobre prototipos, sigamos adelante y creemos un prototipo real a partir de nuestros diseños. Así que adelante y primero conecta esto pero en para conectar botón simplemente ir y dar click en ellos en este pequeño círculo en el medio. Um, es lo que permite seguir adelante y conectado a diferentes pantallas. Entonces vamos a hacer eso. Y luego seguiremos adelante y conectaremos nuestro botón de inicio de sesión, también. El pedido playa aquí porque no tenemos un registro con correo electrónico o Senado, pero opción Google aquí o diseñando nuestra página, no nos preocuparemos por eso. Um, así que vamos a seguir adelante y crear esas dos conexiones aquí de vez en cuando desde aquí. Queremos que este botón aquí nos conecte al tutorial. Paso dos página y luego el botón aquí para conectarnos a la historia será Paso tres página. Y luego finalmente, solo estoy haciendo doble clic aquí para seleccionar botones. Quiero que esta página me lleve o este botón me lleve al año base de pago en la página de pago. Quiero seguir adelante y conectar mi en la corte, pero en dos que mi página. Y luego la guardar abordó finalmente, a mi solicitud basada aquí. Y así tenemos la conexión configurada aquí. Ahora sigamos adelante y seleccionamos aquí nuestra página de solicitudes y luego seleccionamos la pestaña son del perfil aquí. Queremos seguir adelante e ir a la página de perfil y nuestros servicios a la página de servicios, y sólo tendremos que hacerlo en las otras páginas también. También aquí en la barra superior para la página del perfil, queremos solicitar que nos lleve de vuelta a aquí servicios para llevarnos a escuchar. Y luego por último y aquí queremos perfil para llevarnos aquí y solicitar que nos lleven aquí. Asegúrate de seleccionar aquí toda la caja del grifo. De lo contrario, podría ser difícil hacer clic. Creo que tenemos todo conectado aquí. lo único que nos falta en cuanto a la conexión es esta página de mapa aquí o esta sección de mapa aquí. Vamos a seguir adelante y simplemente enlazar eso aquí otra vez para que el usuario pueda tocar y cambiar su dirección. Ahora sigamos adelante y presentemos. Eso aquí podría tardar un segundo en cargar aquí. Pero una vez que estés aquí, podemos hacer el tutorial. Y eso funciona. Siguiente. Enfriar. Entonces solo dos cosas que voy a arreglar por aquí, uh, vamos a seguir adelante y eliminar esta conexión y en realidad vamos adelante y cambiar el botón hecho para que realmente volvamos a nuestro lug y página en su lugar. Y sigamos adelante y también conectemos el botón de cierre de sesión aquí también. El inicio de sesión aquí y luego nuestros pagos, pero adentro para ir a esta página de pagos en el perfil, y luego vamos a conectar el mapa con el mapa aquí es bajo. Y así ahora creo que tenemos todo conectado correctamente. Sigamos adelante y hagamos eso de nuevo. Entonces una vez que estemos aquí, probemos nuestro tutorial. Paso uno, navega para solicitar escuela. Tres ropas limpias. Impresionante. Eso nos lleva de vuelta aquí. iniciamos sesión. Eso nos lleva hasta aquí. Eso es bastante guay. Acude a nuestra página de perfil, podemos acudir a nuestros servicios. Podemos incluso volver a nuestro pago aquí. Ahora, esto nos llevará a través de mi página otra vez y en realidad podemos cerrar sesión desde aquí un oleaje que nos bloquearía. Entonces creo que eso es bastante guay. Hemos hecho un prototipo de nuestro proyecto aquí, así que tomemos una pausa rápida y luego en la siguiente lección, vamos a volver y ver cómo podemos realmente agregarle contenido de desplazamiento. 5. Scrolling en prototipos: Muy bien, entonces nuestro prototipo funciona, Pero aquí hay un pequeño problema. En realidad no podemos usar ningún contenido que se desplace a base de hierbas. Entonces esto. Escucha, vamos a aprender cómo podemos aplicar contenido inescrutable. Yo solo quiero mostrarles una cosa en los servicios aquí. Um, sigamos adelante y en realidad hagamos más larga esta página. Volvamos a nuestro modo de diseño aquí. Entonces primero, sigamos adelante y asegurémonos de que nuestra página de servicio aquí tenga las restricciones correctas. Cuándo hacer izquierda, derecha y centro para todas estas opciones aquí, y entonces ésta debe ser izquierda y derecha. Y abajo pronto. Nuestro marco debe ser receptivo. En realidad, para estos, queremos hacer top en lugar de center. Enfriar. Por lo que ahora mi página de servicios debería tener un bonito, lindas restricciones se aplican a ella. Um, Así que todo lo que quieren hacer aquí es en realidad seguir adelante y estirar nuestra página de servicios. Y luego sigamos adelante y solo, um, um, selecciona todos estos y usa el comando D para hacer otra copia. Simplemente colóquelos aquí y luego sigamos adelante y solo asegúrate de que nuestro grifo o esté encima de todo esto. Debería serlo. Entonces ahora, si vuelvo a mi prototipo mi modo de presentación aquí y voy a la pestaña de servicios. Aquí verás algo raro está pasando. Mi barra de pestañas está en la parte inferior. No obstante, esto debería permanecer en la página sin importar cómo se desplace. Y también lo mismo para mi barra de navegación aquí en la parte superior y las otras páginas. Eso no es un problema, porque no vamos a salir de la pantalla. Aquí no hay desplazamiento. Ah, pero aquí porque tenemos opción de desplazamiento. Ahora vemos que algunas de las cosas puestas aquí puede ser problemático, pero figura te da la capacidad de seguir adelante y realmente bloquear las cosas en su lugar. Entonces si vas y seleccionas tu barra de estado y luego mantén pulsado el turno y selecciona tu navegación y también las opciones superiores aquí, sigue adelante y marca esta casilla donde dice posición fija al desplazarte. Y así ahora, si vas adelante y vuelves a entrar en modo presentación Ahora ya ves, ya no tenemos ese problema. Y nos estamos desplazando por Lee en esta opción de lista aquí. Por supuesto, el único problema con eso es que parte del, um, texto aquí está oculto. Por lo que siempre puedes seguir adelante y agregar tal vez un poco de espacio en blanco o un rectángulo blanco debajo de la última opción aquí. No vamos a hacer eso aquí juntos, pero siéntete libre de hacerlo como ejercicio para ti mismo. Algo que podrías notar en nuestro modo de presentación aquí es que no hay un paseo entre las tiendas o las tarjetas de la tienda aquí en este momento, Así que sigamos adelante y añadamos eso para seguir adelante y cerrar esto. Vuelve a nuestros diseños con el fin de agregar opciones de desplazamiento horizontal aquí para estas tarjetas, tenemos que seguir adelante y realmente hacer thes selecciones airframe. Entonces sigamos adelante y arrastremos esto fuera de aquí. Entonces sigamos adelante y en realidad seleccionemos aquí todas mis tarjetas de tienda. Y luego podemos usar la opción Comando G para enmarcar estas selecciones y luego ir a la herramienta prototipo y luego, desde el comportamiento de desbordamiento, elegir el desplazamiento horizontal. Pero también tenemos que seguir adelante y cambiar el tamaño de este marco para que coincida o marco padre aquí, y luego ahora, si sigo adelante y entro en el modo de presentación ahora, podemos desplazarnos entre estas opciones. No obstante, esto no es muy ideal en este momento, porque , ah, hemos hecho este más grande porque es el que estamos viendo. Entonces, idealmente, en un prototipo real, querrías cambiar el tamaño de las otras cartas para hacerse más y más pequeñas como las tienes aquí en el marco. Pero de nuevo, esta herramienta es solo para crear algún prototipo básico que podamos mostrar, también. A lo mejor clientes o colegas sólo tipo de prueba nuestras ideas para el diseño aquí. Entonces una cosa que sí quiero mencionar cuando estás en el modo prototipo, verás este pequeño ícono aquí, que esencialmente representa cuál será la primera página de tu prototipo. Entonces si quieres cambiar esto y realmente tener esta página de solicitud, digamos ser tu página principal para el prototipo. se puede hacer. Y ahora si entro en el modo de presentación, se iniciará automáticamente en esta página en lugar de la página de inicio de sesión. O si sigues adelante y haces ese cambio de vuelta a la página de inicio de sesión aquí, en realidad mostrará la página de inicio de sesión aquí como mi primer marco. Enfriar. Entonces eso es prototipar para nosotros. Y la siguiente lección en realidad vamos a seguir adelante y mostrar este prototipo en undispositivo móvilreal dispositivo móvil 6. Prueba en un dispositivo real: Está bien. Entonces en la última lección, aprendimos cómo realmente podemos crear prototipos y previsualizarlos aquí mismo en nuestro mapa de fig . Por lo que hasta ahora, hemos podido presentar nuestro simulacro aquí arriba y el escritorio arriba de Sigma. Pero ¿y si realmente quieres tener una buena sensación para tu prototipo en nuestra aplicación móvil real ? Simplemente podemos hacer eso dirigiéndonos al modo presente aquí, y estoy dando clic en compartir prototipo. Entonces a partir de aquí, en realidad podemos copiar un enlace y luego mover ese enlace a nuestro dispositivo móvil para que puedas o enviarlo por correo electrónico a ti mismo o enviarte un mensaje de texto a ti mismo. Entonces como puedes ver aquí, puedes simplemente dirigirte a safari pegar ese enlace ahí dentro, y luego en realidad puedes seguir adelante y previsualizar tu prototipo Aquí está Bueno, um, um, aunque es en ah año de interfaz de página web, para que no se vea móvil. No se ve tan bien y limpio como queríamos. Ya ves, todas las páginas aquí funcionaron bien, pero figura en realidad tiene una aplicación ellos mismos también. Entonces si te diriges a la tienda de aplicaciones, um, y luego adelante y sólo tienes que seguir adelante y buscar el espejo de fig MMA y luego la primera aplicación ahí que ves Adelante y descarga eso. Entonces una vez que abras la app, Bob, solo necesitas iniciar sesión con la misma cuenta que estás usando para tus diseños y fig MMA. Una vez que inicies sesión, deberías poder ver ahora tu aplicación de una forma prototipo realmente agradable. Y si solo estás diseñando marcos individuales, también puedes ver tus obligaciones. Um, esta fig mamá, tu app en realidad nos ayuda a un prototipo y navegar por nuestros diseños ya que los estamos diseñando. Vida. Incluso si estuvieras diseñando un solo cuadro y quieres verlo en vivo en tu aplicación, solo podrías mantener tu teléfono justo al lado de tu computadora y empezar a diseñar y ver esos cambios cobran vida justo en la fig. Mamá, eres apus Bueno, así que esa es otra forma en la que realmente puedes navegar por tu vista previa aquí para ver tus diseños en tu dispositivo real. Bastante cool 7. Comparte nuestros archivos: por lo que compartir tus archivos de producto, es súper simple. Si subes aquí justo al lado de donde está tu propio avatar, en realidad puedes seguir adelante y hacer clic en el botón compartir desde aquí. En realidad puedes invitar a alguien directamente a entrar. Aquí s si escribes su correo electrónico y envías una invitación, éste les enviará el enlace. Um y luego desde aquí, basado en quién has invitado, realidad puedes seguir adelante y elegir qué tipo de permiso tienen, si solo pueden ver. O también pueden editar los diseños también. Entonces si solo lo estás enviando a un cliente, tal vez solo quieras que lo vean. Pero si lo estás enviando a otro diseñador que trabaja en este proyecto, puedes seguir adelante y elegir editar para su permiso. Ten en cuenta que este ajuste pertenece a compartir el enlace para que en realidad puedas obtener un enlace a tu proyecto que puedes darle a cualquiera simplemente yendo en copiar el enlace desde aquí. Y así una vez que haces eso, el enlace ha sido copiado en tu portapapeles. Entonces justo como ejemplo, he abierto ah página de Firefox aquí y pego enter una vez que no se cargue, podré ver realmente el proyecto y navegar por él desde aquí. Um, ahora mismo, no tengo ningún permiso para editar ni ver ninguna de las capas ni nada por el estilo. Todo el conduzca Oh es cambiar entre mis páginas aquí y ver diferentes páginas y simplemente navegar por los diseños. Por lo que esto sería genial si lo estás enviando a un cliente para que solo comparta ese enlace con ellos y luego elija la opción de vista. Incluso puedo ver a otras personas actualmente en esta edición de documentos obtener. Simplemente me está mostrando mi aplicación de escritorio. Aquí estar abierto es bajo e incluso te muestra otras personas abiertas en esta página. Incluso puedes seguir adelante y presentar los diseños desde aquí así como si eso funcionará como se esperaba. Entonces de nuevo, puedes compartir tus proyectos desde aquí, e incluso puedes seleccionar un marco individual eso si, por ejemplo, solo quiero compartir esta página de inicio de sesión aquí. Puedo ir a Aiken seleccionado y luego ir a compartir y luego elegir vinculado al marco seleccionado, que se elige automáticamente en este momento porque tengo solo un fotograma. Pero si quieres compartir todo el proyecto como lo hicimos antes. Simplemente sigue adelante y haz clic en cualquier lugar fuera de tu campus aquí, Um, Y luego puedes usar el share, pero y te voy a compartir tu fama un archivo con cualquiera que quieras. Siempre más que bienvenidos a compartir sus proyectos conmigo. Y estaré encantado de saltar y dejar algunos comentarios y comentarios para que ayudes a mejorar tus diseños. Ahora, en la próxima escucha, vamos a explorar cómo realmente se puede trabajar con equipos en la Fig MMA también. 8. Trabajar con equipos: Entonces como mencionamos antes, Sigma es realmente poderosa en cuanto a trabajar con un equipo. Entonces si quieres trabajar con un equipo en este proyecto o en cualquier otro proyecto, hecho de nuevo, puedes ir a la opción de compartir por aquí y luego escribir el correo electrónico de esa persona en. Obtendrán un enlace donde realmente puedan trabajar contigo en este proyecto. Pero antes de que hagamos eso, digamos que estás trabajando con un equipo en múltiples proyectos y realmente quieres configurar ese equipo para múltiples proyectos en tu fig MMA. Entonces para hacer eso, primero tenemos que ir al falso mi página de inicio que me meto en la aplicación Web. Solo tienes que ir a la opción de menú y elegir volver a los archivos. Y luego a partir de aquí. Si voy aquí abajo, veré que hay una opción para crear un nuevo equipo, así que eso es lo que voy a hacer. Te pedirá que des a tu equipo y nombre. Um, así que imaginemos que estamos trabajando con un equipo de canguro limpio en este proyecto. Crea equipo, y luego podrás seguir adelante y añadir a tus colaboradores desde aquí simplemente poniendo su correo electrónico. Entonces voy a seguir adelante e invitar a uno de mis compañeros a unirse a mí en este proyecto. Entonces voy a poner su correo aquí. Adelante y continúa. Y ahora te pedirá que elijas tus planes de equipo. Entonces si estás trabajando con varias personas, um, quizás quieras ir con una planta profesional u organizativa, pero el plan gratuito en realidad te da acceso a hasta dos editores y tres proyectos. Entonces sigamos adelante y elijamos este iniciador por ahora. Y entonces tenemos un equipo aquí donde realmente podemos asignar el logotipo. Podemos cambiar el nombre y la descripción y todo aquí también. E incluso puedes agregar más personas a tu equipo desde aquí. Una vez durante tu equipo, puedes seguir adelante y crear un nuevo proyecto. Aquí s así vamos a seguir adelante y crear un proyecto. Y llamémoslo de IOS simulacro. Y luego puedes elegir qué tipo de permiso nivel tendrá la gente del equipo de canguro limpio para que yo pueda elegir. Pueden o editarlo o lo pueden ver, o puedes hacer que invite solo lo voy a dejar a todos en Clean Kangaroo pueden editar, y voy a seguir adelante y crear proyecto. Y una vez que creé mi proyecto, puedo o bien crear un nuevo archivo eran sólo arrastrar archivos desde el exterior hacia aquí. O como ya tenemos un borrador para el proyecto Clean Kangaroo aquí, voy a seguir adelante y en realidad arrastrar esto a la derecha en mi proyecto limpio de canguro rus Marca aquí. Y así ahora si entro aquí y lo abro, tenemos acceso a ella aquí, y entonces mi colega podrá sumarse también a fin en este proyecto. Y ahora, desde aquí, hasta se puede ver un pequeño avatar al que se han unido en el proyecto el. Entonces ahora, mientras estoy haciendo mis propios retoques al diseño, pueden saltar y empezar a hacer cambios a otras páginas tan bajos. Entonces Bueno, estoy aquí, tal vez haciendo mis propias ediciones. Ah, estarán trabajando en el proyecto conmigo en tal vez otra página. Y puedo ver su trabajo aquí si hago clic en su avatar aquí arriba. Y así ahora desde aquí, en realidad puedo verlos funcionar. La vida s así si tienes múltiples personas trabajando contigo esto, pero puedes ver exactamente quién está haciendo quién está trabajando en qué ahora mismo. Obsérvalos también. Y entonces incluso puedes seguir adelante y dejar comentarios para ellos también. Entonces si recuerdas hablamos de esta herramienta común también puedes decir en realidad, al solo golpear C en tu teclado, puedo seguir adelante y dejar un comentario aquí y decir, Tal vez podamos decirles cuándo se cobrará el pago. Deja ese comentario para ellos y podrán realmente responderme un oleaje directamente en fig MMA de nuevo con un taburete común. Puedes ir a cualquier parte de la página y dejar un comentario para esa parte de la página s para que los otros diseñadores sepan exactamente de qué estás hablando. Si también tocaste esta opción de comentario aquí desde un lado, también puedes ver todos los comentarios y navegar por ellos y dejar respuestas y rápidamente saltó a los comentarios a los que tal vez quieras responder o para ver las respuestas que tu equipo ha hecho por lo que de nuevo muy poderoso. Y puede usar la llave de escape para salir de esa herramienta común. Enfriar. Entonces eso son equipos para ti y figura otra vez. Es súper potente, y realmente te ayuda a ser más productivo con tus diseños y con en los de tu equipo. 9. Uso de superposiciones para tutoriales: todo bien. Entonces, hasta ahora, hemos podido armar un prototipo bastante básico que funciona muy bien. Y hemos probado tanto en Sigma como en nuestros dispositivos móviles reales también. Entonces ahora vamos a llevar las cosas un poco más allá y explorar algunas de las herramientas más avanzadas a las que tenemos acceso en prototipado para tus propios proyectos de diseño y prototipos está bien, te animo a que utilices algunas de estas herramientas para realmente haz que tu prototipo se vea y sienta, riel. Entonces lo primero que vamos a hacer es en realidad seguir adelante y explorar qué superposiciones son en prototipos. Eso lo vamos a hacer creando una nueva forma de pasar por nuestro tutorial. Paso 12 y tres por aquí. Entonces como puedes ver por aquí, conectamos estas tres páginas, um, um, usando los siguientes botones y luego usando nuestro tutorial, pero en nuestra página de inicio de sesión. Pero qué señal también te leyes a hacer es en realidad abrir y superponer en la parte superior de la página que ya está abierta. Entonces, esencialmente, eso nos daría una mejor manera de presentar realmente estas tarjetas tutoriales, contraposición a presentar nuevas páginas para cada una de ellas. Entonces para demostrar que vamos a seguir adelante y en realidad duplicar cada una de estas tarjetas emocionantes fuera de estas páginas, luego colocarlas en algún lugar aquí arriba. Y luego vamos a seguir adelante y cambiar nuestras conexiones para pasar por esa tarjeta tutorial de allá. Entonces primero lo primero, sigamos adelante y seleccionemos nuestro tutorial. Paso una página seleccionada tarjeta tutorial. Asegúrate de tener todo seleccionado, um, um, dentro de nuestra instancia de tarjeta tutorial por aquí. Y luego mientras sostienes viejo, puedes seguir adelante y arrastrar una copia fuera de aquí, que es lo que queremos hacer. Y voy adelante y hago lo mismo por dos. A Rocard. Paso dos, arrastre una copia aquí. Y por último pero no menos importante, sigamos adelante y hagamos lo mismo para nuestro tutorial. Paso tres tarjeta. Y solo voy a seguir adelante y asegurarme de que estos aires se alineen adecuadamente solo para mantenerlos organizados. Muy bien, Así que primero lo primero, sigamos adelante y seleccionemos esta conexión principal desde el botón tutorial por aquí. Déjame seguir adelante y acercar un poco por aquí. Enfriar. Entonces en lugar de ir por aquí, vamos a seguir adelante y eliminar esta conexión específica entre el botón de emoción y esta página. Simplemente seleccione esta conexión y luego elimine rápidamente en su teclado que seguirá adelante y simplemente quite esa conexión. Y luego vamos a seguir adelante y arrastrar una nueva conexión a esta tarjeta tutorial, el 1er 1 por aquí que tenemos y ahora por el lado derecho, lugar de navegar a voy a seguir adelante y seleccionar, abrir excesivamente y otra vez eso nos va a dejar quedarnos en la página que estaban encendidas y simplemente seguir adelante y abrir. Estos tiene superposiciones en la parte superior de la página, y verás cómo funciona eso en tan solo un segundo. A continuación, lo que queremos hacer es simplemente seguir adelante y vincular estos botones adecuadamente también. Vamos a seguir adelante y seleccionar este 1er 1 por aquí. Quitemos esta conexión para el botón y sigamos adelante y dragamos nueva conexión al siguiente paso. Y en lugar de navegar a, queremos seguir adelante y en realidad extrañeza con la que intercambiar. Asegúrese de seleccionar eso, porque de lo contrario la superposición no funcionaría correctamente. Adelante y hagamos exactamente lo mismo aquí. Seleccionemos esta conexión y eliminemos por aquí y arrástrela a esta página por aquí y otra vez. Quieres cambiarlo para parar con. Y por último, para este botón que tenemos por aquí el botón hecho en lugar de volver a navegar a esta página? Porque ya estamos en esta página y acabamos de abrir y excesivamente, realidad podemos cambiar Navigate para simplemente cerrar superposición y duplicar bastante cerrado esto justo ahí. Entonces no sigamos adelante y probarlo pulsando aquí el botón de modo presente. Simplemente pensamos que es segundo para refrescarse, y luego vamos a seguir adelante y hacer clic en nuestra tarjeta tutorial, pero en y luego, como pueden ver, la ficha editorial está aquí arriba y todo funciona como se esperaba. No lo único aquí que habrías notado es que no tenemos ese mismo fondo oscuro . Y así las superposiciones tipo de mezclarse con el fondo. Vamos a seguir adelante y trabajar en eso ahora mismo, así que vamos a cerrar esto y luego lo que queremos hacer es que queremos seguir adelante y seleccionar esta primera tarjeta por aquí, seleccionar la conexión por aquí que tenemos, y luego otra vez aquí nos da un montón de opciones, que pasarán. Entonces, en primer lugar, tendrás la opción de seleccionar dónde quieres que esté lo excesivamente. Entonces, por ejemplo, si tienes un menú en contraposición a una carta por aquí que quieres mostrar, podrías seleccionar algo así como la parte superior izquierda. O si tienes algo que va a presentar desde abajo, puedes hacer centro inferior. Por lo que estas opciones funcionan bien para, como, menús o barras de pestañas y cosas así que quieres abrir temporalmente en tu página. Y luego tienes dos opciones por aquí. Uno está cerrado. Al hacer clic afuera. Vamos a seguir adelante y seleccionar eso, y voy a explicar en segundo qué hace eso. Y luego sigamos adelante y añadamos fondo detrás de la superposición, que es lo que queremos. Por aquí, te damos la opción de color, que solo queremos dejarnos negros. Y luego queremos seguir adelante y dijeron que pagarán ciudad a Escribamos 45%. Entonces ahora, si presenté notaré dos cosas nuevas ocurrieron aquí. Adelante y abramos la tarjeta tutorial. Entonces ahora, como pueden ver, tengo un poco de fondo oscuro. Ahora, um, puedes seguir adelante y oscurecerlo si quieres, pero creo que esto es bastante bueno por ahora. Impresiona a continuación. Siguiente que funciona. Y luego, si recuerdas, seleccionamos una opción que nos permite cerrar el exceso tocando afuera. Entonces, esencialmente, lo que eso significa es que si tocas en cualquier lugar fuera de lo demasiado visible se cierran automáticamente . Entonces intentemos eso por aquí. Vamos a hacer click estaban aquí, y eso funciona también. Por lo que ahora el usuario tiene la opción de simplemente salir del tutorial en cualquier momento. Pero con sólo hacer click en el exterior, o pueden pasar por él y rápido hecho como de costumbre. Eso es bastante guay. Y se simplifica nuestro registro de trabajo. Incluso puedes seguir adelante y quitar estos tutorial Paso un paso dos paso tres páginas. Pero por ahora, no voy a hacer eso. Entonces así es como utilizas superposiciones en prototipado 10. Enlaces de apertura: Yo quiero mostrarte otra cosa realmente genial que puedes hacer con el prototipado. Entonces digamos que para la página de inicio de sesión por aquí, queremos seguir adelante y enlazar este botón por aquí, o estas condiciones de servicio y política de privacidad para abrir realmente una página Web cuando un usuario hace clic en ella. Por lo general, eso es lo que sucede en muchas aplicaciones. Al hacer clic en este enlace, saldrá adelante y abrirá sus términos de servicio y política de privacidad. Ahora puedes seguir adelante y separar estos en dos enlaces diferentes si quieres. Pero por ahora, con el propósito de la lección, sólo voy a conectar esto a un enlace. Entonces lo que quieres hacer es seguir adelante y seleccionar el texto y asegurarte de que estás en modo prototipado . Vamos a seguir adelante y añadir una interacción de on tap. Entonces de nuevo, lo que eso significa es que cuando el usuario toca este botón o el texto aquí, entonces haz algo, y en este caso, lugar de navegar o hacer otra cosa, lo que queremos seleccionar es enlace abierto, y lo que esto nos permite hacer en realidad es poner en una U R L por aquí desde donde se abrirá una página web en una ventana separada donde se llevará al usuario. Entonces en este caso, acabo de poner en google dot com, pero puedes reemplazarlo por cualquier proyecto en el que estés trabajando, um, um, para aplicarlo realmente a cualesquiera que sean los casos de uso. En su caso, Sigamos adelante y presentemos eso. Y ahora, si quieres probar esto, solo hacemos clic en él aquí y notarás que se abrirá otra página web. Te pondremos click y continuaremos hasta ese enlace. Sé que esto no es un super ideal para un prototipo, pero realmente es lo más cercano que podemos conseguir en este punto a abrir enlaces directamente desde un prototipo. Bastante cool. Yo también quiero mostrarles una última cosa en esta lección. Veamos que decides en algún momento presentar tu prototipo en un dispositivo diferente. Um, simplemente puedes seguir adelante y hacer clic en cualquier lugar fuera de tu lienzo donde haya un área vacía , y luego de lado por aquí otra vez. Si bien estás en el panel de prototipos, verás que tienes una lista de dispositivos por aquí. Pueden seleccionar de, Así que definitivamente vas adelante y juegas con eso, um e incluso sigue adelante y cambia el modelo de tu iPhone o dispositivo que tienes. Por lo que puedes cambiar el color de este iPhone, por ejemplo, a verde medianoche o plata y gris espacial. Y hasta puedes llegar tan lejos como cambiar el fondo en tu prototipo a tal vez un color más claro también, ¿eh? Para que cuando se presente, sea bastante único para tu proyecto. 11. Agrega animaciones: Algo que habrías notado es que hasta ahora hemos estado usando la animación instantánea, lo que esencialmente solo significa cambiar instantáneamente entre páginas o navegar entre páginas o abrir superposiciones en lugar de volverse más complejas y agregarle animaciones. Pero ¿qué es genial en Fig Mayes que puedes agregar algunas animaciones realmente un aspecto realista y agradable a tus proyectos también? Entonces eso es lo que vamos a explorar en esta lección. Entonces lo primero que quiero mostrarles es que en realidad se puede seguir adelante y seleccionar la opción tutorial por aquí donde creamos una conexión para abrir un excesivamente y luego se puede seguir adelante y seleccionar la animación, también. Vamos a mudarnos. Entonces, ¿qué movimiento hace es eso? En lugar de solo mostrar esta superposición al instante en la parte superior de la página, vamos a seguir adelante y en realidad lo animamos a nuestra página, así que muéstrale cómo funciona eso. En un 2do 1er pasemos por un montón de opciones por aquí. Cuando seleccionas el movimiento, tienes un montón de opciones en cuanto a dónde se animará el objeto, por lo que puedes hacerlo desde el lado derecho hasta el lado izquierdo de izquierda a derecha, arriba a abajo y de abajo hacia arriba. Entonces para algo como esto, creo que compró en el trabajo superior muy bien. Y entonces no voy a entrar demasiado en los detalles de lo que significan las opciones de. Pero esencialmente, así es como se reproducirá la animación. Si seleccionas temporada, la curva de animación será más suave en la apertura. Si seleccionas easy out, la animación será más suave en el cierre o el final de esa animación. Y luego, si seleccionas que está dentro y fuera, seguirá adelante y en realidad hará una transición suave dentro y una transición suave hacia fuera lineal simplemente seguirá adelante y la mantendrá muy básica. Por lo que este es el tipo de animación más básico que se puede tener. Creo que el que mejor se ve es el fácil de entrar y salir porque va a crear. Es realmente una transición suave. Ambos muros de la forma están entrando, y cuando se detiene y se ralentiza, esta es la cantidad de tiempo que tardará en completarse esa animación. Entonces, esencialmente, si quieres frenar una animación, solo podrías aumentar este número. Está representado en segundos Mili. Entonces ahora mismo está en 300 milisegundos, por lo que 1000 milisegundos serían un segundo. Entonces esto es técnicamente 1/3 de segundo. ¿ Por qué no vamos adelante y cambiamos esto a medio segundo? Creo que por algo como esto, se vería mejor y te darás cuenta de nuevo. Aquí abajo, obtendrás una especie de animación de muestra como baja. Si vas adelante y pasas el cursor y haces clic en él, se reproducirá y te mostrará cómo se verá esa velocidad. Por lo que durante un segundo o 1000 milisegundos, reproducirá una animación como esta. Y si haces 500 milisegundos, haremos un poco de animación más rápida, así que en realidad es ver esa inacción. Entonces ahora si juegas esto, verás que la carta entrará de abajo muy bien. Yo puedo ir a través de ella y desaparecería de abajo de donde venía. Bastante cool, muy suave, muy realista. 12. Transiciones de página: Muy bien, así que ahora tenemos una bonita animación aplicada están excesivamente por aquí. Vamos a seguir adelante y crear algo bonito para el resto de las páginas. aquí está bien, así que se ve un poco más realista e interactivo. Así que vamos a seleccionar nuestra página de inicio de sesión por aquí. Y entonces lo que quiero hacer es crear una nueva conexión desde el registro con correo electrónico pero por aquí a mi página de pago. Y por aquí quiero realmente seguir adelante y seleccionar. Empuje. Esencialmente, lo que eso va a hacer es simplemente ir adelante y levemente de la página ocho sea así de esta página, se irá adelante y se deslizará hacia esta página, que es lo que queremos. Típicamente, en un caso como este, entonces queremos reemplazar éste en lugar de instantáneo. Nosotros queremos hacer empuje también y de nuevo eso hará lo mismo y desde el mapa. Ponlo por aquí, adelante y seleccione esta conexión por aquí entre la dirección de guardar y una playa de solicitud aquí y en lugar de instantáneamente lo que intentamos, mudarse y hacer desde arriba. Seguiremos adelante y probaremos eso y veremos cómo se ve. Creo que para el resto de las páginas se ve bastante realista. Por lo que realmente no necesitamos seguir adelante y cambiar nada por ahí. Algo más que puedes hacer como ejercicio es ir adelante y crear más conexiones y más animaciones entre, Digamos, el mapa pero por aquí y el pago en el botón de cierre de sesión Zaslow. Entonces deja eso como un ejercicio para que hagas. Sigamos adelante y ahora jugamos esto. Entonces ahora si hacemos el registro con correo electrónico, se deslizará en esa página, como puedes ver, lo hará en Card bastante bonita dirección guardada, y nos llevará a esta nueva página por aquí. Pensándolo bien, tal vez sería mejor si te mudas de abajo a arriba. Entonces voy a seguir adelante y sólo hacer ese cambio. Y realmente, con cosas como esta se trata de experimentar y probar cosas diferentes, Um, aquí no hay ningún tipo de respuesta 100% correcta o incorrecta. Eso es realmente lo que se ve más realista y más amigable para el usuario. Yo lo diría ahora si sí guardo dirección, creo que eso se ve mejor. Y entre mis otras páginas, funciona como se esperaba también, Bastante cool 13. Mapas interactivos: así que olvídate que será agradable mostrarte una manera realmente cocinada. Puedes convertir un mapa o una imagen de un mapa como este en un prototipo real que se vea y se sienta real. Entonces, para hacerlo primero como siempre, asegúrate de que estás en el modo prototipo por aquí y luego sigue adelante y selecciona el mapa. Uh, rectángulo por aquí. Entonces esta opción por aquí, donde se ve rectángulo, que representa el mapa por aquí, y voy a seguir adelante y muro sosteniendo turno y Ault, Um y es importante que hagan esto juntos. Entonces sosteniendo, cambiando de culto, vamos a seguir adelante y sostener la esquina por aquí y sólo hacerlo un poco más grande. No demasiado, porque de lo contrario distorsionará la imagen. Yo, Eso es bueno. Entonces ahora lo que quieres hacer es seguir adelante y seleccionar el marco del mapa por aquí todos juntos. Acude al sitio por aquí, lado derecho por aquí, donde dice comportamiento de desbordamiento. Cambiemos eso al desplazamiento horizontal y vertical, y verás cómo funciona eso en tan solo un segundo. Pero antes de hacer eso, no queremos que nada más que el propio mapa se mueva aquí, así que no queremos que la búsqueda y los botones de aquí se estén moviendo. Sigamos adelante y agreguemos algunas restricciones a todos estos elementos. Entonces algo que podrías hacer es seguir adelante y seleccionar la barra de estado por aquí y luego, mientras mantiene turnos como la barra de búsqueda, luego selecciona el icono del cursor por aquí y también la dirección de guardar. Creo que eso es todo lo que queremos tener quedándonos en esta página. Por lo que ahora dirígete al panel de diseño y sigo adelante y selecciono esta opción posición fija al desplazarme. Entonces ahora, si presentas este prototipo, verás que en realidad podré desplazarme por ahí y el mapa y se ve bastante realista . Funciona. Entonces sí, así es como se crea un mapa interactivo usando la herramienta de prototipado de fig mas. 14. Jugar con GIF: Pensé que un prototipo siendo curso que no estaría completo hasta que pueda mostrarte una manera realmente en GIFs animados en tu proyecto para que realmente tus diseños se sientan modernos y completos. Entonces, por supuesto, puedes arrastrar cualquier Jif desde fuera desde tu carpeta de descargas o en cualquier otro lugar a tu proyecto de figura, y puedes seguir adelante y colocarlo como una imagen en cualquier lugar de la pantalla. Y sólo va a seguir adelante y trabajar, como se esperaba cuando sigas adelante y lo presentas en una herramienta de animación realmente útil que me encontré no hace mucho tiempo. Ojos esto aquí mismo llamó sangriento. En realidad está diseñado por Airbnb, y como lo explican, te permite agregar fácilmente animaciones de alta calidad a cualquier aplicación nativa. Por supuesto, aquí sólo lo estamos agregando a un prototipo. Pero se te ocurre la idea. Realmente nos ayudará a crear más interactivos en prototipos reales fuera de Sigma. No voy a pasar por el proceso de registro, pero ah, necesitarás crear una cuenta. Si quieres usar Lottie, sí tienen un enchufe en fig ma, lo que puedes seguir adelante y buscar archivos Lottie en el tapón ins y luego seguir adelante e instalarlo. Y de nuevo, si eres completamente nuevo en fig MMA y quieres aprender todas estas cosas, como cómo usar enchufes y qué pueden hacer por tu proyecto, definitivamente te recomiendo revisar mi móvil completo. Eres tú X cursos bajos. Pero para fines de esta lección, sigamos adelante e instalemos ese enchufe. Entonces, si es tu primera vez en los enchufes Soling, simplemente dirígete al botón de enchufes gestionados por aquí y luego busca archivos lawdy y sigue adelante e instálalo. Una vez que lo tengas instalado, puedes seguir adelante y encontrarlo por aquí. Entonces tengo una tonelada de enchufes por aquí. Me encanta usar enchufes porque simplemente me hace la vida más fácil. En. Como pueden ver, puedo encontrar muchos archivos por aquí. Voy a seguir adelante y abrirla. Y entonces otra vez, si no tienes ningún conteo, podría pedirte que esperes por aquí. Así que simplemente haga una pausa por aquí. Si necesitas iniciar sesión y luego volver a la lección, y luego una vez que vuelvas a entrar, puedes ir a buscar. Y como puedes ver, tienen un montón de gifs animados de aspecto bonito que puedes usar en tu proyecto, que es super cool. Entonces solo para fines de demostración, solo voy a seguir adelante y seleccionar uno de estos, um Jeffs por aquí, así que no lo sé. Hagamos éste por aquí. Se ve genial. Y asegúrate de convertirte a Jeff aquí. Entonces ahora sigamos adelante y seleccionemos nuestro marco de pago por aquí. Yo quiero seguir adelante y sólo ponerlo por aquí sólo para demostrar y luego seguir adelante y click en dos Fig MMA. Y como puedes ver, lo agregó ahí mismo. Por lo que ahora simplemente podría seguir adelante y agregó, En cualquier lugar que quieras, vamos a ver. Lo voy a poner por aquí y puedes redimensionarlo si nos quieres bien para que podamos hacerlo a pantalla completa . Podemos ir tan lejos como incluso recortarlo. Y si quieres recortarla, puedes hacerlo desde aquí. Ahora asegúrate de no recortar en realidad ninguna parte de la animación hacia fuera. Adelante y presentemos. Y ahora, como puedes ver, seguirás adelante y tocarás esa animación por aquí. No es súper relevante en este caso, pero si sí tienes una página, por ejemplo, en la que quieras explicar algo o mostrar tu precio o anunciar algo, agregar un bonito así podría ser una buena manera de impresionar a tus usuarios. Enfriar. Así que siéntete libre de jugar con eso y añadir diferentes animaciones a tu diseño mientras trabajas con prototipos. 15. Animate inteligente: todo bien. Entonces antes de terminar el curso de prototipo aquí, quiero mostrarte una cosa más realmente cool en fig MMA, usando el prototipo to y eso se llama smart, animate, smart, animate realmente te permite crear algunas de esas transiciones realmente suaves entre una página que se ve similar o entre diferentes estados de la misma página. Y entonces lo que eso realmente significa es que digamos que tienes una página y quieres mostrar algo expandirse o colapsar. Esos serían realmente grandes ejemplos de cómo puedes usar smart, animate toe, animate toe, hacerlos lucir riel y sentirte real para los usuarios usando la herramienta prototipo. Entonces para demostrar, realidad voy a crear otra copia de la página de solicitud aquí. Y entonces lo que vamos a hacer es crear un estado donde si el usuario toca, digamos esta tarjeta de la tienda de Jax Laundry por aquí, se expandirá y mostrará tal vez más detalle o una descripción o algo así. Eso es bastante típico en una aplicación como esta, donde tienes quizás múltiples tarjetas que estás mirando porque te permite navegar por la información mawr . Entonces digamos que quieres saber más sobre esta lavandería Jax. A lo mejor leer algunas de las calificaciones, aprender más sobre los precios y demás, pero lo mantienen sencillo. Simplemente voy a crear otro estado de esta tarjeta y luego añadirle tal vez un texto descriptivo también. Entonces lo que quiero hacer es ir adelante y duplicar esta página de peticiones por aquí solo sosteniendo culto y luego arrastrando un ejemplar hasta aquí. Eso es bueno. Ahí mismo. Entonces ahora vamos a esta página por aquí. Siéntete libre de seguir si quieres. Lo primero es lo primero. Voy a mover a Thies para guardar cartas fuera del camino con sólo mantener el turno y hacer el montón de teclas de flecha de veces lo mismo por aquí. Ahora, una cosa que realmente quiero enfatizar aquí es que si quieres usar animate o smart animate correctamente en sigma, debes asegurarte de que mantengas las cosas en la misma capa y en la misma jerarquía por aquí. Entonces, si cambias las capas por aquí, la animación probablemente no funcionará como esperabas. Yo mismo he cometido ese error varias veces. Tan solo quieres asegurarte de que no cometas el mismo error y luego tratar de averiguar cuál es el problema. Entonces ahora quiero seguir adelante y mover esta tarjeta principal por aquí que estoy mirando a la esquina. O en realidad, tal vez arrastremos esto un poco por aquí para agregar más especies y luego seguir adelante y simplemente mover eso allá arriba y voy a seguir adelante y mantener turno y expandir eso a lo largo de todo el ancho. Y sigamos adelante y solo eliminemos esto. Elige aquí el texto de tu tienda de lavandería y luego selecciona la tarjeta por aquí. Volvamos al diseño y sigamos adelante y sólo escondemos el tiro de gota por aquí. No lo queremos en el estado a menos que voy a agregar unos libros de texto haciendo clic en té y luego arrastrando libros de texto por aquí. No sólo escribo con una izquierda la línea. Esta es la lavandería de Jack. Hacemos todo lo posible para mantener a nuestros clientes satisfechos con su lavandería. Solo estoy escribiendo textos completamente aleatorios por aquí en. Entonces voy a seguir adelante y solo desprenderme el estilo del texto por aquí. Y cuerpo selecto Carla 14 significa mejor para una descripción, texto y solo vas a asegurarte de que esté alineado correctamente es bajo, y creo que todo lo demás se ve bien ahora de nuevo, puedes agregar un montón de otras cosas debajo de esto más adelante y tal vez incluso hacer este pergamino a base de hierbas si quieres. Pero sólo para mantener esta misma encuesta, voy a hacer un animate inteligente con justo lo que tenemos aquí para que sienta que el usuario quiere leer más información sobre la lavandería de Jack. Simplemente pueden hacer clic en él, y luego se animará inteligentemente en este fotograma por aquí donde van a leer más sobre. Y tal vez si vuelven a arriba en la imagen, volverá al estado. Entonces, igual que cualquier otra conexión, sigamos adelante y seleccionemos esta tarjeta por aquí. Ve al prototipo y creo una conexión a esta página por aquí y ahora, en lugar de una animación instantánea quieres elegir inteligente, animar, verás figura te da un buen tipo de animación por aquí para explicar qué inteligente animate hace tan bajo por aquí es simplemente colapsar o expandir esta tarjeta por aquí simplemente similar a lo que estamos haciendo. Estamos ampliando esta tarjeta para mostrar más información Así que he aliviado dentro y fuera seleccionados por aquí. Y entonces en lugar de 700 milisegundos, tal vez puedas hacer 300. Um, es mejor. Servirlo más rápido transición por aquí. Y luego, por último, quiero seleccionar aquí este guardia de puerta y luego dibujar una conexión a esta página por aquí y luego hacer lo mismo. Inteligente, animado. No quiero mencionar por la opción a lo largo de un año se puede seleccionar navegar a y luego lo mismo por aquí. Entonces ahora si presentaste, verás que tengo mis tarjetas de lavandería por aquí, y luego si hago clic en ella, se ampliará y me dará más opciones para leer. Si me vuelvo a poner encima, se va a ir. No otra vez si quieres crear una transición de transacciones más rápida porque creo que es un poco lenta ahora mismo, podemos hacer 200 milisegundos, y luego para ésta también. Hagamos 200 milisegundos ahora. Si probó, creo que eso se ve bastante bien. Enfriar. Entonces ese es un ejemplo de un enemigo inteligente. Yo mismo he puesto otro ejemplo aquí, donde esencialmente pasamos de esta opción de perfil a esta de aquí. Si hacen clic en el mapa por aquí para que el usuario haga clic en este mapa por aquí, simplemente seguiría adelante y se expandiría. Y luego pienso rápido otra vez, iremos a la página del mapa que tuvimos bastante cool. 16. Animaciones de Hover de botones: Está bien. Por último, quiero mostrarles cómo se puede usar el enemigo inteligente en los botones también. Esto podría no ser súper relevante para una aplicación móvil donde realmente no tienes un estado de hover para botones. Pero digamos que estás trabajando en una aplicación Web y quieres crear una configuración de posición fija o estado del ratón para tus botones. Um, así que definitivamente podrías usar smart animate para esa opción es baja, um, de social más a mi página de componentes por aquí en mi proyecto de grupo limpio puede. Entonces lo que vamos a hacer es ir adelante y primero encontrar este botón slash habilitado, um, componente por aquí. Y entonces voy a seguir adelante y simplemente crear una instancia fuera de ella sosteniendo viejo y arrastrándolo lejos. Y sigamos adelante y cliqueemos con el botón derecho sobre eso y realmente hagamos desconectar instancia y crear un nuevo componente fuera de eso porque queríamos buscar separados de este componente por aquí, también le cambiamos el nombre, pero en adelante la slash hover así. Y luego voy a seleccionar el fondo por aquí, o el fondo del botón, ir a diseñar y seguir adelante y separar el estilo y hacer que el relleno tal vez un poco más oscuro es todo para que parezca que estamos rondando encima de ella. Por lo que ahora simplemente puedo ir a la opción habilitada para la slash de botones. Ve al prototipo y yo sigo adelante y seco y creo una conexión a este botón por aquí y ahora, en lugar de hacer clic, quieres seguir adelante y seleccionar mientras pasas el cursor, y eso hará lo que esperabas mientras pasas por encima de este botón irá adelante y navegará a esto, pero en su lugar. Y lo que queremos usar es, por supuesto, la opción inteligente, animada, para que suavice la transición entre esto y esto por aquí, y verás cómo funciona eso en tan solo un segundo. Pero primero, sigamos adelante y hagamos. Está dentro y fuera, y creo que 300 milisegundos probablemente lo suficientemente bueno por aquí. Entonces ahora si vas adelante y solo seleccionas nuestro botón, slash habilitado y haces presente y luego como se esperaba, mientras que un hover, saldrá adelante y cambiará de color, y se animará inteligentemente en ese botón hacia adelante slash hover componente aquí. Bastante cool. Bastante útil para un proyecto como este. Entonces ahí tienes. Es así como aplicas animaciones inteligentes en Sigma 17. Componentes interactivos: Muy bien, así que una cosa genial que quiero mostrarte en Figma y en la herramienta de prototipado es que ahora puedes realmente crear componentes interactivos, lo que significa que ahora puedes crear interacciones entre componentes botones o incluso diferentes tarjetas tutoriales basadas en cómo interactúan los usuarios con él. Número cuatro, los componentes interactivos se lanzaron como una característica. Tienes que crear múltiples páginas con diferentes estados de esos botones. Y eso significará tener muchos marcos duplicados solo para mostrar sus componentes cambiando entre. Pero ahora es tan simple como crear un nuevo botón de variante y en crear conexión entre esas variantes en base cómo interactúan los usuarios con ese componente. Entonces para mi caso, te voy a mostrar cómo realmente puedes animar tu botón para que cuando el usuario lo esté tocando en la app móvil, vaya adelante y refleje esa pestaña con un color más oscuro, que imita cómo suele verse un botón cuando un usuario lo presiona, por lo que les da algún tipo de retroalimentación. Entonces lo primero es lo primero, me refiero mi página de componentes por aquí. Voy a seguir adelante y seleccionar ambos botones, así. Y luego por el lado derecho voy a seguir adelante y combinarlos como varianza. Ahora, adelante y sigue este paso si no lo has hecho ya, para que tengamos variantes de este botón. Y voy a seguir adelante y renombrar la propiedad 1 a estado. Por lo que de nuevo, tenemos un estado deshabilitado pero en estado y luego habilitado el estado de botón. Y voy a seguir adelante y en realidad duplicar este habilitado uno presionando Comando D. Y voy a crear un tercer estado llamado tapped, así. Y golpeó Enter por ahí. Y para este botón de pestaña, voy a hacer doble clic y seleccionar mi color de fondo por aquí. Y quita este primario y cámbialo a un poco de un color más oscuro de un tono similar. Tan solo para demostrar que este botón está siendo tocado cuando el usuario realmente lo toca en el prototipo. Sigamos adelante y cerremos eso y pasemos a tu pestaña de Prototipo. Y entonces lo que quieres hacer es seguir adelante y crear una interacción entre este botón aquí, que es el estado habilitado y la pestaña. Ve por aquí. Y simplemente puedes hacer eso dibujando una conexión al igual que nuestros marcos. Pero ahora con nuestros componentes aquí abajo, y del lado derecho obtendremos un montón de opciones para que podamos hacerlo al click para que cuando el usuario haga clic en ese botón, vaya adelante y lo cambie o lo cambie con ese estado tocado. O podemos hacer en arrastre mientras se pasa el ratón, mientras se presiona. Y si tienes algún tipo de juego que estás diseñando, puedes usar el gamepad de barra de teclas, un montón de otras opciones también. Ahora para nuestro caso, queremos hacer mientras presionamos, porque eso significa que en cuanto el usuario toque ese botón, saldrá adelante y cambiará a este estado. Y luego en cuanto lo suelten, seguirá adelante y cambiará de vuelta al estado por aquí. Ahora por defecto, podrías tener una opción de animación instantánea por aquí. Por lo que definitivamente podrías hacer uno instantáneo, lo cual tiene más sentido para esta opción aquí. Pero ten en cuenta que definitivamente puedes hacer animate inteligente si tienes cosas como casillas de verificación o activando y desactivando, donde en realidad puedes mostrar una animación medida que el usuario hace clic en esos componentes. Y puedes ver ese cambio en tu prototipo. Entonces ahora solo para ver cómo funciona esto, voy a dirigirme a mi página de maquetas. Vamos a seguir adelante y a ejecutarlo. Quiero seguir adelante y tocar Login. Y como puedes ver como tabulador, irá adelante y cambiará ese color o ese estado a ese estado. Y luego cuando lo suelte, seguirá adelante y regresará al estado habilitado, lo cual es impresionante. Ahora puedes hacer eso con cada botón. Pero ten en cuenta que por ejemplo, para este botón de aquí, probablemente sea mejor crear otra variante para que tengamos una versión blanca de nuestro botón y luego una versión de tap ancho de nuestro botón también. Pero dejaré eso como un ejercicio para que lo hagas. Y como puedes ver, esta nueva interacción funciona con todos nuestros botones. Mientras sean el componente de botón, seguirá adelante y trabajará en todas mis páginas y marcos en Figma, lo cual es hermoso porque esto era realmente difícil de hacer antes de los componentes interactivos. Ahora por supuesto, puedes usar componentes interactivos entre múltiples componentes diferentes. No tiene que ser solo botón. Puedes usarlo dondequiera que tengas una interacción con un componente que se repite por todos los marcos, como los botones. Te daré un ejercicio que hacer para los componentes interactivos. Y así en nuestra página Servicios, por lo general, cuando un usuario toca una de estas filas en una aplicación de iOS, generalmente se muestra esta interacción cambiando el color de fondo a un color gris claro ligeramente. Entonces dejaré eso como ejercicio y lo haremos juntos en la próxima conferencia. 18. Solución de ejercicios de componentes interactivos: Está bien. Espero que hayas estado siguiendo hasta ahora y hayas podido crear esos componentes interactivos para nuestros servicios se elevaron por aquí. Por lo que como se mencionó en la conferencia anterior, en una aplicación para iPhone o una aplicación para iOS, típicamente cuando un usuario toca una fila en una tabla como esta, seguirá adelante y cambiará a un color ligeramente diferente, generalmente gris tardío, solo para indicar al usuario en qué fila exactamente están tocando. Entonces en este momento si toco mis filas, no pasará nada como se esperaba. Pero si nos dirigimos de nuevo a nuestro simulacro arriba y vamos a nuestra página de componentes donde tenemos nuestras filas. Podemos seguir adelante y crear una versión de tap donde podamos mostrar este feedback al usuario. Así que sigamos adelante y pinchemos en la lista de servicios y vayamos a la pestaña de diseño aquí arriba. Y sumemos variados por aquí. Y vamos a seguir adelante y llamarlo tocado. Para este otro lo dejará como predeterminado. Simplemente voy a seguir adelante y dar clic en toda la variante de la lista de servicios y cambiar esta propiedad quería quedarse. Entonces sabemos para qué es todo esto. Y ahora como se mencionó, para este color de fondo, queremos seguir adelante y simplemente elegir un color gris claro ligeramente más oscuro. Nada demasiado loco. Sólo para especie de mostrar esa retroalimentación del usuario tocando en esa fila o esa celda. Y ahora, como hicimos en la conferencia anterior, nos dirigiremos a la pestaña Prototype y crearemos una conexión entre este estado predeterminado a la pestaña S8. Y cambia el onclick a, lo adivinaste, presionando pared. Seguiremos adelante y lo cambiaremos al estado golpeado. Y queremos que la animación sea instantánea. Entonces vamos a seguir adelante y cerrar eso. Y ahora si vuelve a dirigirse a nuestro prototipo, no necesitamos refrescar ni relanzar el prototipo. Podemos simplemente usarlo en el mismo. Y como pueden ver ahora, como estoy tocando en esa fila, vamos a seguir adelante y cambiar ese color, que se ve muy realista para una aplicación para iPhone móvil. 19. Crear fluidos de nuevos prototipos: Desde que Figma anuncia algunas nuevas características para la función de prototipado, también anunciaron algunas nuevas formas en las que puedes guiar a los usuarios o espectadores a través de tu prototipo y luego incluye crear diferentes flujos . Ahora, un flujo y un prototipo definen por lo que pasará ese usuario a medida que atraviesan el prototipo. ¿ Cuándo empezarán? Y a medida que pasan por la aplicación, ¿ dónde terminan? Por defecto, han nombrado uno a nuestro prototipo de flujo. Entonces si seguimos adelante y jugamos este flujo uno nos llevará por el prototipo que hemos creado, que nos iniciará en la pantalla de inicio de sesión. Y luego si seguimos adelante y damos click en Regístrate y nos llevará a través cada paso de registro hasta que nos lleve a la página principal. Pero ahora con Figma es característica de prototipado. En realidad puedes seguir adelante y crear múltiples flujos para que si quieres mostrar tu aplicación, veamos si el usuario ya está conectado. Podrás exhibir un flujo diferente mediante la creación de múltiples flujos diferentes, nos permite ahorrar tiempo a la hora de presentar nuestro prototipo a nuestros compañeros o clientes para mostrar diferentes resultados o resultados diferentes. Y para ahorrar tiempo en cuanto a tener que hacer click a través de múltiples páginas para llegar a donde se quiere llegar. Entonces voy a seguir adelante y crear un segundo flujo. Pero antes de hacer eso, sigamos adelante y nombremos a este flujo un nuevo usuario. Y esto es sólo darle un nuevo nombre. Nada cambia realmente con un prototipo. Pero ahora tenemos este nuevo punto de partida de flujo de usuario. Ahora asegúrate de estar en la pestaña Prototipo para que realmente puedas ver tus flujos. Pero esencialmente, quería nombrar a estos nuevos usuarios para que sepamos que este es el flujo cuando un nuevo usuario se registra o en realidad incluso abre la app de canguro limpio. Y ahora quiero crear un nuevo flujo llamado usuario login. Entonces esencialmente un usuario que ya ha iniciado sesión, sólo vemos este flujo en lugar del nuevo flujo de usuario. Y así para hacer eso, voy a ir adelante a la página de solicitudes porque esencialmente esta es nuestra página principal que queremos ya son usuarios de registro a los que acudir cuando abran por primera vez la app. Y simplemente por tener seleccionada esta pieza de solicitud, voy a seguir adelante y dar clic en el signo más además del punto de inicio del flujo para agregar un punto de partida. Y vamos a renombrar esto a usuario inscrito. Y así ahora tenemos dos pisos diferentes, uno para un nuevo usuario y otro para un usuario inscrito. Y si hace clic en el Flujo de Usuarios de Inscripción haciendo clic en este ícono de juego por aquí. Como cabría esperar, el prototipo comenzaría en este marco y nos permitiría interactuar igual que antes, pero ahora con un punto de partida diferente. Y ahora en este lado del panel izquierdo por aquí podemos ver que tenemos diferentes pisos que podemos llevar nuestros televidentes son usuarios a través. Entonces si quieres ahora navegar cuando un nuevo flujo de usuarios se vería como si pudiéramos ir al nuevo flujo de usuarios e ir a partir de ahí. O si quieres saltar a un flujo de usuarios de registro, podemos ir a nuestro flujo de usuarios de registro e ir desde ahí. Y la belleza de esto es que cuando sí compartes tu prototipo, personas que tienen acceso a él, podremos ver también los flujos que tienes y pasar por los diferentes flujos también. Ahora una cosa sí te recomiendo si sí quieres compartir tu prototipo con otras personas, sobre todo con personas que podrían no estar en tu equipo. En realidad puedes seguir adelante y escribir una pequeña descripción sobre tu flujo para que gente entienda de qué se trata este piso. Entonces en la descripción aquí, sólo voy a seguir adelante y escribir. Este flujo es para usuarios registrados de RD con canguro limpio, limpio, limpio. Y vamos a seguir adelante y cerrar eso. Y así ahora, si vuelvo aquí, verás la descripción también está en mi prototipo, lo cual es genial. Y ahí lo tienes que es tener diferentes flujos en tus prototipos. 20. Exportar nuestros diseños: todo bien. Creo que estamos listos para darle este proyecto a nuestro cliente ahora. Entonces creo que ahora estamos listos para exportar nuestros marcos aquí. Ahora, hay un montón de formas en que puedes exportar cosas en fig MMA. Um, así que el 1er 1 es se pueden exportar los marcos, claro. Y para hacerlo, puedes ir a las capas y vamos a ir adelante y colapsar todas las capas usando la opción l y así eso simplemente colapsará todo. Entonces es bonito aquí, y puedo seguir adelante y solo seleccionar un fotograma y luego estamos sosteniendo turno, seleccionamos mi último fotograma aquí, y así que eso seleccionará todos los fotogramas en el medio. Asegúrate de tener el marco seleccionado y nada de lo que no quieras exportarlo. Y luego a partir de aquí, puedes encontrar los siguientes cuatro tap y seguir adelante y rápido plus, Y si te desplazas por aquí, verás que estamos exportando nueve capas aquí con una resolución de una X. Si quieres aumentar la resolución a dos X, puedes hacer eso desde aquí. Se puede seguir adelante y en realidad elegir qué, ¿ cuatro meses? Quieres que tu exportación esté en puedes seleccionar PNG, hay J Peg SPG y PDF. Por lo que con esos marcos seleccionados, puedes hacer exportar nueve capas en. Una vez que hagas eso, te preguntará. Prepárate para exportar eso, y te preguntaré dónde quieres que se haga tu exportación. Una vez que hagas eso, abrirá aquí este navegador de archivos, desde donde podrás seleccionar la carpeta en la que quieres exportar tus capas o tus marcos. Y luego si sigues adelante y haces clic, guárdelo irá adelante y los colocarás ahí. Y así si arrastré esa carpeta por encima, como pueden ver, se ha ido adelante y exportado todos mis fotogramas en PNG separado cuatro meses para mí aquí, lo cual es bonito. Puedo enviarnos a mi cliente, Así que esa es una forma de exportar si quieres exportar ciertas cosas. Entonces vamos por ejemplo, Adelante y acercar aquí y digamos que quieres exportar justo este ícono por aquí. Ah, puedes seguir adelante y seleccionarlo, y mientras tienes su seleccionado, asegúrate de que por aquí en el panel de capas esté seleccionado de hecho y luego ir a exportar y golpear el icono más, obtendrás una bonita vista previa de su exportación. Aquí es largo, y luego incluso se puede seguir adelante y agregar múltiples exportaciones. Entonces si quieres que uno de los íconos sea solo una resolución extra, otro para tener dos resolución extra y puedes seguir aquí y agregar más resoluciones y exportaciones MAWR aquí, agregará un bonito Suffolk a mi archivo. Aquí está así esto exportará cero cero uno dash shop porque este es el nombre de esa capa o ese marco aquí que estoy exportando. Entonces si quieres cambiar el nombre de tu exportación simplemente, tendrás que cambiar el nombre de tu capa aquí. Entonces si lo hago, vamos a un icono de tienda aquí. Ya puedes ver ahora dirá Exportar icono de tienda. Y así si exporto eso, exportará tres versiones del mismo, una con una resolución ex, otra con dos X y tres x Esto es común en una gran cantidad de APS, donde necesitarás resolución múltiple basada en el tamaño de la pantalla. Por lo que de esta manera puedes seguir adelante y exportar tu icono de tienda que una vez que lo guardes de nuevo. Si abrí mi carpeta aquí, verás que hay tres copias diferentes, una con una resolución extra. Entonces este es uno x dos X y tres x Así que eso es bastante genial. Muy práctico. Sólo voy a borrar eso. A partir de ahí. También puedes golpear comando shift E y eso solo abrirá esta pestaña de exportación. Y eso sólo te mostrará algunas de las exportaciones que puedes hacer desde aquí. Ah, que probablemente antes hiciste. Entonces desde aquí, puedo seguir adelante y elegir lo que quiero exportar, y luego seguir adelante y exportar desde aquí también. Entonces, de nuevo, lo mencionas usando el cambio de mando E. Y así es como exporta y cifra. 21. Handell de código: otra herramienta de ahorro de tiempo en fig. MMA mira este panel de código aquí mismo. Realmente no hemos hablado de ello, pero funciona como la magia. Y te mostraré por qué. Sigamos adelante y acerquemos nuestra página de pago por ejemplo aquí haciendo clic en cualquier objeto dentro y yendo a mi código tap aquí. En realidad puedo obtener el código para el estilo de ese objeto aquí. Entonces si estás familiarizado con CSS o estás diseñando para un proyecto IOS o Android aquí en este panel de código en realidad te ayudará a recrear exactamente lo que hemos creado aquí pero dentro un entorno de desarrollo real. Entonces si estás trabajando con desarrolladores y quieres que realmente salten y sean capaces de convertir estos diseños en aplicaciones riel en vivo, lo más fácil que puedes hacer es invitarlos y luego contarles sobre este panel de código para ir y realmente copiar y pegar. Ah, exactamente el código que necesitan para volver a obtener estos ciertos elementos. Si cambio esto, ya verás, en base a lo que he seleccionado, seguirá adelante y me mostrará el código para ese objeto. Si aísla solo todo el marco, aquí mostrará el código para solo mi marco. Entonces, como el color de fondo de los blancos, el ancho y la altura y cosas así. Por lo que eso podría ser súper útil. Y te animo a que aproveches eso si estás desarrollando una app o si tienes desarrolladores trabajando contigo 22. ¿Qué sigue?: todo bien. Enhorabuena por terminar aquí el curso de prototipado. Aprendimos una tonelada de cómo realmente podemos agregar un prototipo súper básico todo el camino a aplicaciones más avanzadas agregando en animaciones, fuera transiciones usando smart, animar a la transición entre diferentes estados y cómo podemos realmente compartir nuestro proyecto con amigos, los inversionistas de Kali y así sucesivamente. Entonces, ¿qué sigue para ti? Bueno, hay mucho que puedes hacer desde aquí. Por supuesto, recomiendo que crees más prototipos, practiques con él, compartas con tus amigos y realmente se lo muestres a la gente, sobre todo si estás trabajando con clientes. Este sería un gran lugar donde se les puede mostrar un prototipo de cómo sería su aplicación . Si estás trabajando en una aplicación propia o en un diseño propio, realmente puedes presumir de este prototipo que tienes para tu propio proyecto para desarrollarla y realmente hacer que sea más fácil para ellos entender lo que quieres del producto. Siéntete libre de compartir también tu prototipo conmigo. Estaría escondiéndome para sacarlo y dar algunos comentarios. Si eso es algo que estás buscando, incluso puedes intentar aplicar prototipos a proyectos web también, ¿eh? Entonces si estás trabajando en proyectos web o revisando proyectos en los que has estado queriendo trabajar , este sería un momento perfecto para hacerlo. Realmente creo prototipos bonitos, utilizables para eso también. Y de nuevo, como siempre, siéntete libre de enviarme cualquier pregunta o diseño para comentarios. Mi correo es lo inteligente en gmail dot com Y la próxima semana aquí en Skill Shirt también estará compartiendo un curso sobre cómo puedes crear un diseño U. Y para una aplicación Web para nuestro proyecto de canguro limpio aquí también. Entonces gracias de nuevo por tomar este curso y con ganas de verte en un futuro, claro.