Prototipo y animaciones en Figma

1. Remolque del curso: En este curso de figma, vas a aprender todo sobre las características de prototipado de figma y cómo aprovecharlas para crear un prototipo de la vida real desde cero. También vas a aprender unos flujos de trabajo y los consejos avanzados y características de la creación de prototipos en Figma. Y yo mismo he sido diseñador de UI UX más de tres años y he estado usando Figma durante muchos años. Y me apasiona enseñar esto a otras personas que estaban todas auto-motivadas. Y queremos llevar sus habilidades de prototipado y Figma al siguiente nivel. Y luego en la segunda parte, claro, vamos a crear un prototipo desde cero, cual elegí una aplicación móvil de la comunidad Figma. Ahora vamos a comenzar con una visión básica de qué es la creación de prototipos en Figma y cómo funciona. Pero antes de comenzar a introducir el prototipado de figma, veremos el proceso de diseño para entender mejor. 2. Proceso de diseño: Antes de comenzar con el prototipado, quiero compartir con ustedes por qué la creación de prototipos es tan importante en el proceso de experiencia de usuario. Entonces ¿qué es la experiencia del usuario y por qué es tan importante la creación de prototipos? La experiencia de usuario es la emoción y actitud de una persona sobre el uso de un producto, sistema o servicio en particular. Cuando diseñamos productos, es muy importante asegurarnos de que estos productos realmente están resolviendo un problema para el usuario y que sean útiles para el usuario. De lo contrario, el usuario no lo va a utilizar. Tan simple, un prototipo. Puedes comprobarlo al principio para asegurarte de que estás siguiendo el camino correcto. Si miramos hacia atrás, muchos equipos de diseño utilizan el método de cascada. Esta es una calle de un solo sentido sin muchos comentarios y prototipos incluidos. Entonces, los equipos de diseño se dieron cuenta durante la última década de que necesitan ser otra mejor manera probar las ideas primero y se dieron cuenta al principio del proceso si las cosas salen bien al final. Porque con el método de cascada, una vez que una aplicación está en la etapa de prueba, es muy difícil volver atrás y cambiar lo que ya ha estado en la fase de concepción. Por lo que no se produce ningún software que funcione hasta tarde durante el ciclo de vida. Hola cantidad de riesgo e incertidumbre. El enfoque del diseño centrado en el ser humano es muy diferente porque el ser humano está en el centro de todo el proceso para todo el proyecto. Y ayuda a lidiar con los comentarios lo antes posible porque el usuario está involucrado en cada paso del proceso. Entonces lo interesante aquí es que este enfoque se trata de mejorar toda la experiencia lo largo de todo el proceso, yendo y viniendo y retrocediendo. Por lo que incluye la investigación de usuarios en varios pasos a lo largo de su proyecto. Entonces es muy importante escuchar realmente al usuario y comprender sus necesidades y deseos, y comprender realmente lo que le ayuda a procesar una tarea específica o general, a comprender su vida diaria. Eso te ayuda al final a diseñar algo que el usuario realmente necesita. Es un método no lineal. Para que puedas volver a la creación de prototipos una y otra vez. Entonces en este curso nos vamos a centrar en la creación de prototipos si es el mismo método para cualquier medio que uses. Y te voy a ver en la siguiente parte. 3. Prototipo: Antes vamos a empezar a construir nuestro prototipo con nuestra idea que tenemos en mente. Hablemos brevemente sobre los fundamentos de la creación de prototipos. Por lo que los prototipos te ayudarán a demostrar y comunicar tus ideas con los demás. Estos pueden ser sus colegas, partes interesadas o usuarios para las pruebas de usuario y le ayuda a ahorrar tiempo y dinero porque no necesita construir todo el producto. Pero empieza con un prototipo sencillo y barato. Puedes probarlo y aprender mucho antes de construir realmente el producto. No te preocupes, si no eres diseñador, cualquiera puede construir un gran prototipo rápido. Entonces no necesitas ninguna habilidad especial para eso. ¿Qué es el prototipado rápido? Por lo tanto, la creación rápida de prototipos es un proceso iterativo. Esto quiere decir que es repetitivo. El proceso se utiliza para visualizar cómo se verá un sitio web o una aplicación con el fin de obtener retroalimentación y validación de usuarios, partes interesadas, desarrolladores y diseñadores. Cuando se usa bien, creación rápida de prototipos mejorará la calidad de sus diseños al mejorar comunicación entre las distintas partes, reduciendo el riesgo de construir algo que no uno quiere decirlo así de verdad simple. ¿Qué necesitas para la creación de prototipos? Un prototipo no está diseñado para ser una versión completamente funcional de un sistema, sino que solo está destinado a ayudar a visualizar la experiencia del usuario del producto final. Entonces, si la calidad es demasiado baja, gente realmente no va a creer que el prototipo es un producto real. Y si la calidad es demasiado alta, estarás trabajando toda la noche y probablemente nunca terminarás. Por lo que la calidad no debe ser demasiado alta, no demasiado baja, sino justa. Puedes prototipar no solo pantallas, aplicaciones o sitios web, sino casi de todo. prototipos es un excelente método para probar diseños. Sean cuales sean los diseños que estés diseñando, ya puedes empezar a pensar en qué tipo de pantallas o interfaces necesitas integrar en tu prototipo y poner a prueba realmente tu idea. 4. Demostración del proyecto: En esta parte del curso, elegiremos una aplicación móvil de la comunidad Figma para aplicar diferentes tipos de prototipos y animaciones en Figma. Como ahora ve un ejemplo de una aplicación móvil, la aplicación Dr., la cual elegí para hacer nuestro ejemplo. Este ejemplo incluye los diferentes tipos de prototipo, componentes interactivos, ejemplos y animación con el fin de preparar una demostración completa de una aplicación y convertirse en una aplicación real instalado en un smartphone. Ahora comencemos a probar el prototipo de nuestra aplicación en la que ya trabajé ayer. Como primer paso, da clic aquí , comienza a abrir la aplicación. Siguiente. Nosotros primero elegimos, sí. Vuelves a la primera pantalla desde aquí, donde elegir el otro botón aquí para escribir correo electrónico y contraseña. Regístrate. En este paso, podemos elegir el género, femenino o masculino Next, y seleccionar la edad. Siguiente. Aquí el usuario puede añadir la imagen de su perfil, sea cual sea por cámara o galería. Haga clic aquí para finalizar los pasos de registro. Es bueno. Ahora hemos creado una nueva cuenta. Y eso es lo que vamos a construir desde cero en las próximas partes, claro, y te voy a ver en el siguiente video. 5. Añadir prototipo: Entonces ahora vamos a elegir esta aplicación de la comunidad aquí, derecho, Dr app. Y elige con esta lista de pick Figma. Y ahora buscaremos en nuestra aplicación. Sí, así es. Haga clic aquí. Obtenga una copia para obtener la aplicación en el espacio de trabajo de su cuenta. Entonces, eso es todo. Nuestra aplicación está lista para agregarle un prototipo y animaciones. Entonces vamos a agrupar estas dos pantallas para moverlas porque no necesitamos en nuestro ejemplo, vamos a elegir esta aplicación porque veo que contiene diferentes tipos de pantallas de las que nos puede aplicar varias herramientas Figma. Y ahora quiero preparar el espacio de trabajo, la ubicación de algunas pantallas. Pongo esto aquí y esto aquí. A continuación terminamos con el resto. Y esto de aquí, nos acercamos aquí. Copiar y pegar para esta pantalla. cambiaremos el nombre creando cuenta. Y ahora selecciona los elementos y elimínalos. Utilizaremos esta pantalla para cargar cuando el usuario esté esperando la creación de su cuenta. Después de cambiar este texto a crear cuenta y moverlo en el centro de la pantalla, veo que este lugar es el mejor para esta frase. También desde mi experiencia que la ubicación de los indicadores de carga siempre está en el centro de la pantalla. Justo aquí. Reorganice este un poco a la izquierda. Empieza ya a hacer el prototipado de la primera pantalla. Haga clic aquí en prototipo. Selecciona la pantalla y la vincula con la segunda pantalla para construir esta conexión entre ellas. Esta ventana que apareció contiene todos los detalles de la interacción. Aquí está la naturaleza de interacción elegida. Y aquí está la acción realizada por el usuario que activará la acción de la aplicación en tap, al arrastrar mientras presiona. Y después del retraso, cuándo lo elegirá ahora y cambiará el retraso a 1,500 milisegundos. Entonces aquí el tipo de animación por ahora elegimos Smart Animate. Este es el fin de la animación. Elegimos de nuevo esa animación lineal y cambiamos este parámetro de retardo de animación a 400 milisegundos. Pero puedes elegir la interacción en detalles de animación que quieres construir tu primer prototipo. Probemos ahora esta primera interacción. Como ves, nos movemos de la pantalla uno a dos con la interacción elegida. Ahora completa la segunda interacción con el mismo método. Pero para esta interacción, elegimos la animación push y cambiamos el retraso a 300 milisegundos. Entre estas dos pantallas, utilizamos el mismo tipo de traducción y mantenemos los mismos parámetros que la pantalla anterior. Ahora para sí, elegimos la pantalla de inicio de sesión. Aquí, solo verificando los detalles de la interacción. Y como los demás, mantén los mismos parámetros. N para n 0 registrarse. Aquí tenemos una conexión desde la pantalla de inicio de sesión con este botón a la página principal. En este nivel, hacemos las interacciones entre los pasos de registro de la misma manera. Y de este botón a la siguiente pantalla. Después terminar para todas las pantallas con el mismo método. En mi opinión que estos parámetros tengan vínculos entre pantallas es especial para este tipo de aplicaciones. Podemos ver en otros sectores de aplicaciones que se puede cambiar el tipo de animación para dar otra experiencia para el usuario, por ejemplo en aplicaciones de juegos, siempre las transiciones entre las pantallas sean mucho más rápidas. Además, cambiamos la duración a 3,000 milisegundos y elegimos para el tipo de animación. Animado inteligente. Y para este lineal, también por duración de animación, se debe aumentar el parámetro a 500 milisegundos devueltos. Ahora en el centro del espacio de trabajo. Cambiemos para esta interacción, el tipo de animación a smart animate. Lineal 500 milisegundos. Probemos ahora el resultado de estas interacciones. Haga clic aquí para realizar pruebas. Siguiente. Aquí agregaremos un botón de retroceso. Continúa ahora con esta opción a la pantalla de registro. Regístrate y termina. Esta es la interacción de retardo para abrir la pantalla de inicio de la aplicación. Regresa al espacio de trabajo y haz zoom aquí. En primer lugar, agregaremos el icono de retorno para las pantallas. Aquí desde el icono, si me enchufo justo en este campo, volver a buscar un icono. Aquí está la lista de iconos que podemos elegir uno para usar en el retorno entre pantallas, elegimos este icono, icono de importación, Genial, el icono se agrega con éxito. Sólo vamos a cambiar el tamaño y moverlo. Aquí a la izquierda de cabecera. Puede elegir otros tipos de iconos de icono. Si enchufo, recomiendo usar este complemento porque contiene muchos tipos de iconos según los requisitos de su aplicación. Cambia de aquí su color al blanco. Y con copy paste, añadimos para los demás. Nuevamente para este anuncio el mismo icono y terminar las otras pantallas para que sea funcional y podamos agregar una interacción. Debe hacer clic en el icono y elegir la selección de marco. Ahora agreguemos la interacción de retorno para pantallas que contengan iconos, mantengamos la misma configuración aquí. Y para la animación, elegimos Empujar la duración a 400 milisegundos y seguimos agregando una interacción para esta pantalla. Pero no funcionó correctamente. Añadiremos la selección de fotogramas al resto de pantallas. Siempre es necesario activar esta opción para que los componentes puedan ser utilizados en las interacciones entre las pantallas. Pasamos ahora a la acción de traducción e intentamos nuevamente agregarla. Mantenga las mismas opciones y continúe a las siguientes pantallas. No es necesario configurar los ajustes de enlace para el resto de interacciones. Figma mantiene automáticamente las mismas configuraciones de pantalla anteriores. Nuevamente, pondremos a prueba los avances que hemos logrado . Muy bien. Todos los iconos están trabajando de nuevo al modo de diseño y zoom aquí en esta pantalla. Copie ahora la pantalla del tablero y cambie el nombre del subrayado del tablero uno. Y los dos segundos, tablero subrayan dos. Aquí agregaremos un pop-up al hacer clic en la imagen de perfil. Agrega un rectángulo haciendo clic en desde la zona con forma. Para personalizar una capa negra, vamos a utilizar una forma muy sencilla hacer un tinte negro en la pantalla principal. Por lo tanto, cambiamos el color del rectángulo a negro y disminuimos la intensidad del color así después de ajustar el rectángulo a toda la pantalla. Pero este rectángulo para el pop-up, elegiremos en este lugar aquí a la derecha, en la parte superior, justo encima de la imagen de perfil. Aquí cambiamos el radio de la forma. Escogeremos un color blanco, claro. Ahora agregando los elementos de pop up, comenzando con foto de perfil. Este enlace para entrar en pantalla de perfil. También puede personalizar el tamaño de fuente a 25 para que sea legible para el usuario. Agregar el segundo enlace para ingresar en la configuración del perfil. Y finalmente el botón de cierre de sesión. Aquí para el enlace de cierre de sesión, podemos elegir el color rojo para diferenciarlo de los botones del otro. También puede agregar un icono de cierre de sesión desde el complemento. Escogeremos este icono para darle una buena experiencia al usuario. Personalizamos la altura y anchura del icono para que sea más legible en el pop-up. Cambiando de nuevo el color a rojo. En tus elecciones, siempre debes tomar en consideración cualquier tipo de usuario que vaya a utilizar tu aplicación y asegurarse de dar la misma experiencia para todos. Agregamos el prototipo necesario para este pop-up. Escogeremos el estilo para mostrar y ocultar el pop-up. Al hacer clic en la imagen. Para el botón de cierre de sesión, debe activar la selección de fotogramas para usarlo en la interacción del prototipo. Ahora, elegimos los detalles de interacción que son compatibles con nuestra aplicación. Genial, intentemos filmar nuestro prototipo a este nivel. Bonito. El pop-up funciona bien. Ahora regresando a nuestro espacio de trabajo para completar el resto del prototipo. Continúa ahora, agrega un pop-up para elegir la opción quién puede cambiar tu foto de perfil. En primer lugar, se cambió el nombre de esta pantalla para cambiar de nombre. Y cópielo aquí donde podamos crear nuestro pop-up change picture como nombre para esto. En la pantalla inicial, agregaremos un icono aquí, lo que significa que podemos cambiar la foto de perfil. Haga clic aquí. Plugins icono de phi. Busca aquí un ícono de cámara. Ahora podemos usar este icono, pero cada uno puede elegir su propio icono. Oh, es importante en esta parte. Entonces podemos ponerlo en una elipse, eligiendo esta parte de la elipse de formas. Ahora, mueve el icono al centro del círculo. El icono se ha ocultado. Está por debajo del círculo. Con esta opción, Traer al Frente, ella puede moverse arriba. Explicamos exactamente el uso de esta opción en el primer curso. Al comenzar con Figma, cambiamos el tamaño y lo movemos así. Agrupar a los dos así para moverlos juntos. Ahora lo movemos dentro de una foto de perfil. Ahora en la segunda pantalla, agregaremos un pop-up para que el usuario pueda elegir la forma de cambiar su foto de perfil, lo que sea, elegir una imagen de la galería, o tomar una foto con su smartphone. Primero, agregaremos una capa negra usando rectángulo con baja transparencia de color negro. Configuraremos los parámetros de apariencia del rectángulo como la pantalla anterior. Y ahora agrega un rectángulo para papá. Cambiemos el color del pop-up a blanco y agreguemos dos iconos, uno para la galería y otro para la opción de cámara. Personalizaremos estos dos iconos aquí. En el pop-up. Cambiaremos el ancho y altura del icono de la cámara a 30, y lo mismo para el otro icono. Siguiendo los comentarios de mi proyecto anterior, siempre debes usar los íconos para que sea más fácil para el usuario hacer su elección rápidamente. Entonces agregaremos las palabras, cámara y galería con la misma fuente para esto. reagrupamos así para personalizarlos juntos. No olvides agregar el botón Atrás a la pantalla inicial. Vamos ahora a sumar la interacción entre estos marcos. Cambiar al modo prototipo. Elige este ícono y enlaza con la pantalla de abajo. Para la animación, elegimos instantánea. Y la interacción de vuelta a la primera pantalla. Aquí cambiamos un poco en los campos de entrada para el campo de comida y contraseña. Pero primero, probaremos nuestro último cambio de prototipo. Vamos a empezar. Libros. La palabra cámara no existe en modo prototipo. Aquí a la izquierda, verificaremos la ubicación de esta palabra y compararemos con las demás. Como veis, se debe mover aquí justo debajo de la galería. No sé por qué se coloca aquí, pero siempre cada componente debe estar debajo de la pantalla correspondiente. Y vamos a intentarlo de nuevo. Genial, el pop-up apareció correctamente. Ahora volvemos a cambiar en este campo de. Primero, ajustaremos esta entrada de texto para ancho 300 y para alto 40. Y también cambiamos el tamaño de fuente a 14. Con el mismo método cambiamos el segundo archivado por contraseña. Estamos haciendo este cambio porque veo que estos campos son difíciles de leer para el usuario. Posteriormente, agregaremos íconos para dar una mejor experiencia que la versión inicial. Quiero mover el correo electrónico y la contraseña a la izquierda para poder agregar iconos aquí. Entonces desde el icono, si me enchufo, importamos dos iconos, uno para la contraseña y otro para el correo electrónico. Quiero elegir un icono como persona para campo masculino y una clave para contraseña. Después de importar los iconos, nos moveremos a la izquierda del campo, pero debemos personalizarlo ante todo. Ahora quiero cambiar el color para esperar. Genial. Ahora la pantalla se ha vuelto mejor. Pero aún así, deberías ajustar este Olvidé mi contraseña. Y el subtítulo de pantalla. Ahora seleccionaremos todos los cambios que hemos realizado para copiar en la siguiente pantalla. Antes eliminamos esto para poner los nuevos campos en su lugar. Pega aquí, y pon en el centro de la pantalla. A diferencia del otro, cambiamos esto. Genial. Ahora hemos terminado de esta pantalla, y los veré en la siguiente parte. 6. Agregar animación inteligente: Empezamos ahora con esta pantalla para agregar algo de animación a esta imagen, cambiada a modo de diseño. Primero, hacemos una copia para la pantalla. Lo copiamos justo debajo del otro. Siempre cuando quieras agregar una animación en una pantalla, debes duplicar la pantalla inicial y hacer los cambios en la segunda. Y luego elegimos la mejor configuración y el tipo de transición entre ellas. Y cambiamos el nombre a on-boarding para apuntar a. Ahora, ¿qué vamos a hacer? Deslizamos la imagen ligeramente hacia arriba, así para que la animación de movimiento aparezca al usuario cuando el mouse se cierne sobre la imagen. Agreguemos ahora el vínculo entre estas dos pantallas. Así que negro solo la imagen de la primera pantalla y enlazada con la segunda pantalla así. Ahora deberías cambiar mientras se desplaza la opción y cambiar el efecto de animación a animación inteligente. Y también podemos cambiar el retraso de la animación a 500 milisegundos. No olvides eliminar este enlace. Dejamos solo los viejos enlaces de pantalla inicial. Vamos a probar los cambios realizados. Como ves ahora, cuando pasas el mouse sobre la imagen, comienza la animación. Pasamos a la otra animación en este botón, empieza. Haremos lo mismo que la otra animación. Copia la pantalla inicial y pega aquí. Cambiar el nombre a on-boarding 2.3. Sólo para diferenciar entre pantallas. Cambiaremos el color o aumentaremos la saturación del azul. Así. De la misma manera, eliminar los enlaces viene de la pantalla inicial. Eliminamos los vínculos entre las pantallas para poder hacer nuestra elección de animación. Y agrega una nueva interacción entre este botón y la pantalla de arriba. Dejamos los parámetros como la primera animación. Pero debes agregar el enlace principal al hacer clic, Comenzar para pasar a la siguiente pantalla. Muy bien. Incluso los parámetros están configurados correctamente. Simplemente cambie el tipo de animación para empujar y reduzca el tiempo de animación a 300 milisegundos. Aquí, cada uno de ustedes puede elegir su propia configuración para realizar otro tipo de animación. Probemos ahora los cambios realizados en el botón. Genial. La animación está bien configurada. Al pasar el ratón sobre el botón. Y después de unos milisegundos, el color cambia con una animación suave. Simplemente, me di cuenta de que es necesario disminuir un poco el retraso de esta animación. Para esta animación a 300 milisegundos. Intentamos en otro momento. Bien, es mejor ahora con los últimos cambios. Entonces ahora volvemos a hacer todo eso con la segunda pantalla, el botón de animación y la imagen. Es bueno ahora, después de agregar las animaciones necesarias para esta pantalla, son similares a las animaciones de la primera pantalla. Vamos a probar en modo prototipo. Aquí hemos cambiado el tipo de animación en comparación con la otra pantalla. Vaya, se me olvidó agregar el enlace. Cuando hago clic en el botón. Volvemos aquí en modo prototipo. Simplemente lo agregamos como las otras interacciones. Lo dejamos así por defecto está bien configurado. Sólo un comentario aquí. Siempre la configuración de interacciones permanece como la última configuración agregada. Comprobamos ahora el resto de los enlaces. Y vamos a intentarlo de nuevo. Bien, todas las interacciones están parametrizadas. El siguiente paso, agregaremos diferentes animaciones en estos botones. Copia, registra la pantalla y pega aquí justo debajo de la pantalla inicial. Y cambió su nombre para inscribirse? Sí. De la misma manera, paseaba otra pantalla y moverla por debajo de esta. Aquí, cambiamos el nombre a inscrito. No. Una de las pantallas para la animación cuando el usuario quiere elegir? Sí. Y la otra pantalla para la animación de NO elección. Como se ve en la demo prototipo al inicio del curso, cuando el usuario pasa el mouse sobre uno de los botones de sí o no, el color cambia de azul a blanco. Entonces para comenzar, hay que cambiar el color de dos botones a azul. Aquí elegimos el mismo color de botones sí, con este selector de color. Pero la palabra NO está desaparecida porque ella era del mismo color, azul. Por lo que debes cambiar su color a blanco y activar esta subasta. Llevar al frente. Ahora ya hemos terminado esta pantalla. Pasamos al siguiente. Para esta pantalla, agregamos la animación del botón. Sí. Voy a cambiar el color a blanco para esto. Y agrega esta opción trazo para personalizar un contorno como el otro botón, cambia de color a azul con el color del picker. Nuevamente, en el mismo caso deberías cambiar el color de la palabra sí. Segundo, cambiamos el color de los botones NO, a azul. Y nuevamente, Traer al Frente. Sigamos con la segunda pantalla, cambiando el color de los botones, a diferencia de la pantalla anterior. Pero primero voy a cambiar el tamaño de la frontera para que quede más claro. E.g. I. Fijo un libre. Esta pantalla está casi lista, igual que otro botón solo voy fijar el tamaño del borde a tres. Cambiemos ahora al modo prototipo para agregar la animación entre las pantallas. En primer lugar, eliminaremos todos los enlaces para estas dos nuevas pantallas. Y para la pantalla inicial empezamos con sí, eliminado de aquí. Y vincula la pantalla de inicio de sesión con el registro Sí, pantalla. Elegimos este tipo de animación solo para dominar las diferentes herramientas de Figma y ver más técnicas que pueden ayudarte en tus propios proyectos. Y ahora agregamos el enlace de animación de interacción sí, con la pantalla justo debajo, elijo mientras flotaba subasta para activar la animación y cambiar la animación para que se disuelva. Y lo mismo para el botón NO, desvincúlelo de la pantalla de registro. Desplázate hacia abajo hasta esta pantalla donde agregamos la interacción del botón del panel. Quedamos ahora que se registró la conexión entre la pantalla inicial y la pantalla de abajo. No. Bueno, ya terminamos para estas dos animaciones. Vamos a intentarlo ahora. Mixto. Como notas aquí, cuando pasas el mouse sobre uno de los botones, el color cambia. Haga clic. Sí, nos dirigimos a la pantalla de inicio de sesión. Y lo mismo para el botón NO. Vaya, aquí notamos que los campos de correo electrónico y contraseña desaparecieron así en la pantalla de inicio de sesión. Regresamos a nuestro espacio de trabajo para corregir el problema. Cambiar el modo de diseño. Siempre elegimos esta opción, selección de grupos para que sea más fácil para nosotros mover los componentes sin cambiar las medidas entre ellos. Primero, seleccionamos todos los componentes y crecimos con esta opción. Después voy a poner en el centro de la pantalla y dar click en traer al frente. Y lo intentamos de nuevo. Es bueno ahora los campos han aparecido para ambas pantallas. Por lo que seguimos agregando otra animación sobre las opciones masculinas y femeninas en esta pantalla. Aquí, agregamos una animación simple cuando el usuario quiere elegir una de sus opciones, el círculo se expande ligeramente, como se ve en la demo del prototipo. Al igual que los otros ejemplos, hacemos dos copias de la pantalla inicial. Aquí, simplemente cambiando el nombre de las pantallas para diferenciar entre ellas. Empezamos con opción de correo. Selecciona el botón y cambia el ancho y alto a 105. Ahora vamos a agregar otro tipo de animación que he usado en mis proyectos personales. Y como digo, todos pueden inventar otro tipo de animaciones y disfrazarlas como deseen. También, puedo cambiar el tamaño de fuente de los mismos y ponerlos en el centro del círculo. Bonito. Esta pantalla está lista. Podemos pasar al siguiente. Para esto justo haremos lo contrario. Los cambios estarán en el botón hembra. la misma manera, debe cambiar el tamaño del botón y el tamaño de fuente de f. ahora las pantallas están listas, pasamos al modo prototipo. Entonces desde la pantalla inicial, selecciono esa opción y la vinculo con la pantalla de abajo, donde puedo elegir mientras se desplaza por los parámetros de interacción y modo instantáneo para la animación. Terminamos con la subasta femenina. Voy a enlazar desde la pantalla inicial a la segunda pantalla, manteniendo la misma configuración para los detalles de interacción. Vamos a probar ahora estos últimos cambios. El botón hembra no funciona. Vuelve al espacio de trabajo para comprobar el problema. Selecciono el parpadeo femenino. ¿Debería cambiar aquí mientras se cierne. Opción. Genial, vuelve ya a revisar el prototipo. Ahora la app está funcionando bien. Aquí solo completaremos los pasos hasta la pantalla de inicio. Vamos a añadir un spinner aquí en esta pantalla, justo arriba creando cuenta. Es necesario en experiencia del usuario agregar un indicador como el spinner para que el usuario sepa que hay un proceso ejecutándose en la aplicación. Y te veré en la siguiente parte. 7. Crear un Spinner: Entonces aquí voy a agregar nuestro spinner. Sólo voy a crear un rectángulo para poder ver nuestro spinner también. Voy a crear un círculo contigo. Y usaremos la forma más sencilla de preparar nuestro spinner. Aquí voy a cambiar el color del rectángulo para leer y personalizar en tamaño de círculo de 500 por 500. Entonces puedes ver aquí que tenemos estos arcos estando aquí. Para que podamos venir aquí. Aquí. Vamos a hacerlo como el 65 por ciento. Y si puedes dejarlo así, o si quieres crear un radio fronterizo aquí, 43 es bueno para mí. Para que veas que puedes moverlo y más adelante es lo que vamos a hacer. Entonces esta va a ser nuestra primera cita del spinner. Podemos cambiarle el nombre al spinner superior derecho. Bien, este va a ser nuestro primer estado. Ahora vamos a duplicar otro. Entonces lo que vamos a hacer en el siguiente estado va a rotar hacia abajo. Para eso queríamos como 90 grados. Aquí vamos a cambiar el nombre del segundo elemento a spinner. Abajo derecho. Agregamos los estados izquierdos del spinner, apresurado u otro elemento y lo separamos así. Después lo roto a 180 digresión y cambio el nombre a spinner izquierda. Y terminamos ahora con el último estado aquí y cambiamos así su digresión. Además, cambiamos el nombre a la izquierda arriba. Entonces vamos a crear un cuerpo con todos estos componentes. Vamos a combinarlos como variante. Esta va a ser la posición. Entonces es importante que cuando vayas a animar algo de manera inteligente, necesites los mismos nombres. Elipse 111. Empecemos con éste y cambiemos al modo prototipo. Ahora vinculamos esto al elemento inferior derecho aquí en los detalles de la interacción, elegimos después de la opción de retraso y cambiamos la duración a un milisegundos. Deja eso en la parte inferior derecha. Pero para el estilo de animación, podemos elegir el smart animate y para ello elegir la opción de facilidad de entrada y salida. También arregla esto a 200 milisegundos. la misma manera necesitas completar el resto de elementos. Mantenga los mismos ajustes aquí. Cambie esto a después del retraso. Pero estoy volviendo al último estado porque olvidé cambiar una duración a un milisegundo. Completamos ahora la interacción del último elemento. Agregamos este tipo de animación para tener después de cada arco rotar hasta el final de su ciclo y luego comienza el otro arte y lo mismo para los demás. Con el fin de tener una hilandera completa. El spinner está listo, solo ve aquí en el lado izquierdo y cambiamos al nav assets. Pero después de todo, debes cambiar el color de los elementos a negro. Cambiar el modo de diseño. Selecciona los estados, y elige de aquí color negro. Vuelva a los activos ahora y haga un zoom aquí para la pantalla de creación de cuenta. Arrastre el componente así. Pero aquí hay un pequeño problema donde se debe disminuir el tamaño de cada componente. Ya hemos terminado de reducir el tamaño de todos los componentes. Regresamos ahora a la pantalla. Como notas, el tamaño se reduce y es más consistente con el resto de los elementos de la pantalla, y elegimos la posición superior derecha de la animación inicial. Movemos el componente en el centro así. Bueno. Probemos este spinner. Simplemente elegimos esta pantalla y damos clic aquí para comenzar. También notamos que el tamaño del spinner es incluso mayor que los elementos en la pantalla. Entonces volvimos al espacio de trabajo y deberías disminuir el tamaño de todos los estados así. Bien, movemos un spinner al centro así. E inténtalo de nuevo. Aquí solo queda cambiar la velocidad de movimiento de cada componente. Para tener una animación suave, se debe ajustar el retraso de cada interacción entre los arcos. Selecciono el primer enlace y cambio la duración de la animación a 100 milisegundos. Y repita lo mismo para el resto de estados. Creo que este cambio nos va a dar un mejor resultado. Bueno Ahora para continuar, pero puedes elegir otros tipos de animación y otros detalles de interacción. Todos a su elección pueden adaptar el spinner y hay otro tipo de indicador de carga. Todos pueden probar otro tipo con el mismo principio de animación inteligente como el spinner, por ejemplo, cargando indicadores de progreso lineal del comprador. Terminamos el prototipo de esta parte de una aplicación de Dr. y ahora retiramos estas dos pantallas. Ahora hemos terminado nuestro proyecto a partir del cual utilizamos varias técnicas de prototipado y diferentes tipos de animaciones que pueden ayudarte en tus próximos proyectos. Y te veré en la última parte del curso donde veremos el resultado final. 8. Resumen final: Finalmente cambiar al modo prototipo. Y vamos a probar nuestra aplicación. Haga clic y comience y continúe abriendo nuestra aplicación. Elige esta opción para pasar a la pantalla de registro. Aquí, probando este ícono de cámara, que podemos agregar las pantallas correspondientes para estas dos opciones, cámara o galería. Para este paso, el tablero está abierto donde puede cerrar sesión y volver a la pantalla de inicio de sesión. Ahora ya hemos terminado, y los veo en el próximo curso.