Diseña una aplicación web

1. Trailer del curso: Hola, Bienvenido al curso de diseño web con Figma. Y en este curso vamos a aprender a diseñar una aplicación web de muestra donde la gente pueda ver películas juntas. Si tienes pollo, un curso previo, también sacaremos una versión móvil de esto. Y así en este curso vamos a estar trabajando y luego aplicación web para su corazón. Y yo, yo mismo había sido diseñador UI UX por más de tres años y he estado usando Figma durante muchos, muchos años. Hoy, soy tu instructor para este curso. Entonces, al final de este curso, tendrás las habilidades opuestas a diseñar un sitio web que sea visualmente atractivo y fácil de navegar. Nuevamente, cómo importar y usar una imagen específica y tu espacio de trabajo. También aprenderemos a usar el diseño automático que podemos crear, que para los diseñadores de manera, usaremos un poderoso complemento para generar algunos datos de muestra para nuestro proyecto. Nuevamente, aprendemos cómo podemos agregar nuestros componentes, animación inteligente e introducción de muestras entre las pantallas. Entonces, si estás listo para aprender a diseñar una aplicación web hermosa y sencilla usando Figma. Salta a la derecha y comencemos. 2. Herramienta de marco: Bien, así que vamos a ponernos en marcha. Tengo Figma, ábrelo aquí es solo un proyecto vacío. Primer paso, sólo estoy pasando por el francés va a parar aquí. Podemos esto y simplemente haga clic en algún lugar aquí en la pantalla. Y esto otra vez y generar un foramen o que pueda ser como una página para nuestro sitio web. Entonces si quieren ser follaje D, puedo modificar toda la propiedad a partir de aquí a la derecha. Mostrar cuando elegimos 124, el testigo, y 2000 y 84, la altura. Bonito. Solo aléjese para personalizar mi espacio de trabajo. Ben, de aquí en la parte superior del marco, podemos cambiar el nombre de la pantalla. Pero en este ejemplo, voy a elegir la página de préstamos. Ahora con esta paleta de colores, elegirían un color azul. Con esta opción, podemos personalizar nuestro color así. Prefiero esto mejor para empezar a diseñar mi FirstPage. Bien, ya estamos listos para comenzar a diseñar nuestra landing page. Y chicos, nos vemos en el siguiente video. 3. Página de aterrizaje: Así que ahora comencemos a construir nuestra página y reenviemos la primera página de cualquier sitio web. No debes usar las técnicas y trucos y tu diseño para extraer al usuario para intentar entrar en los detalles, pero obtendrás. Por lo que en la primera página de nuestro sitio web, vamos a utilizar en el emperador Franz de tamaño de texto y el color. Además, la simplicidad de los componentes que lo utilizan tiene un papel muy importante en la experiencia del usuario. Empezamos primero para agregar texto en el centro de la pantalla. Entonces de la misma manera, Hey chico y elegí texto aquí en la sección derecha, voy a cambiar el tamaño del texto a 64 y el regreso aquí y la pantalla para escribir una frase corta, por ejemplo banner, ¿verdad? Ver es mejor. ¿Qué cambia mejor juntos? Sí, bien. Película, Saludos así. Después haga una copia para este impuesto. Y voy a, voy a escribir algo más aquí. Ahi esta. Justo antes de completar, cambiaré el tamaño del texto para esta herramienta, 56 y continuaré. O encuentra una nueva sala de pesas durante tu elección favorita. Con tus personas favoritas. Sí, es una buena película justo debajo del primer año. Media. Después selecciona el aceite en, agruparlos así. Estos son el dedo del pie para esto. Y nuevamente, voy a cambiar el tipo de archivo en el segundo sesgo de texto aquí. Eso es. Para el primero, elegiré un robot. Además, podemos hacer crecer el tamaño para esta herramienta, la herramienta y personalizarla o cambiarla varía un poco así. Debemos mantener siempre la misma alineación de dos textos. Ahora, voy a agregar una imagen aquí a la izquierda. Entonces por ahora tengo ADD un preso B, C, que lo usaremos para nuestro ejemplo. Y lo agregaré más adelante como castigo en la descripción del proyecto. O pregunta, ¿por qué dice que es así? Lo movemos justo al centro de la pantalla. También agregamos la letra más hacia la izquierda. Entonces es bueno. No, sí, bonito. Bien, el siguiente paso, agregaremos el botón de navegación entre la pantalla. Así que vamos a trabajar con el siguiente video. 4. Botones: En este video, vamos a agregar un botón aquí justo debajo del texto. Entonces para hacer botón en Figma, aconsejo usar un rectángulo de muestra y luego personalizar Bezier que el rho aquí sea más rectangular así. Y muévelo con lo mismo. Y luego está la otra zona de arrugado adentro y están surfeando. Y ahora voy a elegir una especie de herramienta para ser, ser irregular y con los otros colores de la pantalla es un buen paso a paso. Estamos preparando nuestro botón. Nos falta de nuevo el texto. Podemos escribir el conocimiento conjunto. Darán al usuario la opción de unirse a una película desde el, desde la página principal. Entonces después de cambiar el tamaño del texto a 24, lo mueve textos a la sensible del rectángulo. Ahora voy a cambiar el radio fronterizo a diez. Sí, es bueno. Agarre el rectángulo y el texto con la Selección de grupo de opciones. Por lo que los dos componentes son grupo se adhieren en el mismo componente, que será el botón nombre. Ahora podemos movernos y presto magia juntos como uno, también. Como tu boca para elegir el lugar correcto y el buen del PDF para el botón. Bien, aquí justo debajo de este texto , son los mejores días. Sí. Si tienes alguna otra sugerencia, escribe un comentario en la sección de revisión del curso y gracias, eso es todo. Entonces en el siguiente video, agregaremos aquí en la parte superior de la pantalla y navegación, pero cambiaremos entre este verde. Además, agregaremos el logo para nuestro inicio. Así que vamos. 5. Barra de navegación: Aquí vamos a agregar dos enlaces para hacer una barra de navegación. Así que copia este texto de los disparadores de botón comen como la primera longitud. Olvídate de unirte a la página. Debe cambiar el texto a 32. 32, o para ser más legible para el usuario y eliminar esto antes y después de mover cada año por una flecha. Aquí en este lugar. Hacer una copia. Ahora para el segundo enlace, al que renombraremos este encubierto. En esta página, el usuario podrá descubrir las diferentes películas y películas que vive el término. Y otros que programan con el, con el filo de participar y lo que cambió con sus amigos. Y aquí podemos usar el super cool para entrar ahí landing page. Tenemos el diseño a Bree aquí, así que voy a hacer clic en Más. Va a germinar esto, ¿de acuerdo? Ahora es súper loco complejo y no tiene ningún sentido. Mostrar voy a dar click en este y voy a la columna. Y podemos elegir el justo entonces aquí. Eso nos va a dar, entonces podemos usar las cosas del león. Bien. Ahora, puedo alinear los enlaces de la barra de navegación olas del lago. Mueve este enlace al inicio de la tercera variable y únete en el segundo canon. Ahora, puedo ocultar este truco genial y el nombre de pantalla otra vez y haciendo clic. Ahora, comencemos a preparar el logo de nuestro alcista. En primer lugar, hacen una copia para este texto y lo pegan aquí y lo cambian por, por el nombre de la plataforma. Entonces creo que elegiré un nombre de muestra como ver, ver o ver parte. Sí, ¿a qué parte es ir aquí? ¿Con este nombre? Vamos a añadir una imagen como esta, la cual tengo en mi PC. Y agregarán lo posterior como un archivo adjunto. Y la descripción de la presión. Diré que ¿es un poco más pequeño así? Y te voy a mover inténtalo junto al zoom in a una mejor opción, su base. Y con su misma forma de ejemplo de Button, voy a agrupar así este componente de zapato. Griego en grupos y conferencias y cambiar el nombre vulnerable. Ellos organizan nuestro proyecto. Salta aquí. Y lo vamos a mover a esta parte izquierda de este árbol. Sí, entra aquí. Entonces ahora hemos terminado esta página y vemos en el siguiente video, diseñamos la segunda pantalla. 6. Pantalla de unirse: Empecemos con la segunda página conjunta. Aleje y ajuste nuestro espacio de trabajo. Voy a mover la página de préstamos aquí y hacer una copia. Pegar. Bueno, conservar el mismo degradado y color. Nuevamente para mantener la barra de navegación porque se repite en todo el proyecto. Pantallas. Aleje y mueva las dos pantallas aquí. Nosotros, amigos, en nuestra pantalla. Estás dentro. Ahora cambiaremos el nombre a página de régimen. ¿Bien? Bien, bien. En primer lugar, elimine los componentes ahí solo para mantener la barra de navegación. Y luego como hemos visto en la presentación del proyecto aquí a la derecha, vamos a, agregaremos un pequeño formulario que incluye algunos campos de madurez para que los usuarios lo acompañen con la persona y los datos justo antes de unirse a ver una película con amigos. Empecemos por agregar tu rectángulo aquí. Lo voy a ajustar así, sólo para que se presente en medio de la pantalla. Ahora voy a cambiar este color a un azul más oscuro, como falta de suerte. Y ajustar la transparencia a 50. Sí. Sí, Bien. Bien. Ahora vamos a agregar el radio del borde, mostrar que se forman. Está rodeado y será más un Red Bull. Seguimos ahora agregando el primer campo de texto con el rectángulo de muestra. De la misma manera de los chips de mantequilla. Lo arreglaremos aquí. Después le cambió la red de cuello con esto. Con este parámetro. personalizar el color y el boulder como lo arreglaré a tres. Ahora puedo cambiar el color. Voy a elegir el color de este botón aquí en la primera pantalla para que sus pantallas salgan constan. Otra vez. Voy a seguir cambiando el color del rectángulo usando el altavoz solo para detectar el color. Y para los campos, de nuevo, es mejor ajustar el radio del borde a, HA, Sí, es perfecto. Ahora voy a hacer una copia desde el enlace Descubrir ij aquí arriba, arriba del fago. Pero como ves ahora, se saca deliberado porque está oculto por lo rectangular. Debes usar la rama opcional de Frank para que el texto se publique con el frente del compuesto principal. Bueno. Ahora nos movemos cada uno aquí y cambiamos esta bola de uno a dos. Seguirá cambiando el texto para renombrar. El primer miedo, la difusión debe completarse un poco más abajo. Pero la fuerza de fusión, el rectángulo, agrega la letra tanto para que haya base pueda tomar las otras alimentaciones. Puedo arreglar esto por lo general a 1060. Sí. Bien, bien. Ahora seguimos con esto. Ahora voy a copiar estos dos componentes para archivar el resto de los pies. Bueno. Ahora germinamos el último y estamos películas aquí van a cambiar para estas dos principales. Voy a añadir un botón justo debajo. Entonces aquí agregaremos el botón o simplemente copiarás este botón y pegarás cada uno aquí. ¿Bien? Agregamos el border-radius, al igual que los demás componentes. Cambia el tamaño de fuente a 28. Y esta única herramienta para augurar. Pues mueve los textos y la pierna central así hará los últimos cambios de buen gusto. Y vamos a ir a ver en algo y al lado izquierdo de la pantalla. Bien, muy bien. Entonces aquí vamos a agregar lo mismo, como texto, copiar esto, y pegarlo aquí. Sólo para conservar el mismo parámetro de los textos en el antiguo proyecto. Podemos escribir reloj, ver cuando Francia está en algún sentido, deberías saber crecer para que sea más bola roja y tomar las capas aquí a la izquierda. Además, puedo crecer el tamaño solo para que los amigos se sientan atraídos por los oídos. Sí. 90 es bueno. Película posterior en la parte superior y el centro de la pantalla como Like this. Sí, Exactamente. Cambiaremos el color de Francia a otro cálido para que sea más atractivo porque el costo de nuestra plataforma es presupuesto en amigos y cómo participar y divertirse con tus amigos con esta técnica es ampliamente utilizada en muchas plataformas y muchas, muchas aplicaciones de seguimiento de gestos usuario a una cosa específica como este ejemplo. Bien, continuemos ahora para agregar una foto del final de la página aquí normalmente contienen un enlace de notas de copyright política de privacidad qué información de contacto y redes sociales necesitan el icono, Insertar una foto contiene información que mejore el futuro de anulación exterior. Entonces voy a usar esta herramienta rectangular desde aquí y dibujar un rectángulo sobre el ancho del teléfono de la página con el reductor. Entonces sólo voy a revisar esa respuesta en el lugar correcto. Ahora cambiaremos el color de la falla. Entonces vamos a agregar dos enlaces en el, a la izquierda para la página Acerca de Nosotros y la página de contacto. Y también a través de otros indirectos, comenzamos con la sección viral izquierda. Así que de la misma manera, copiado descubre textos de la barra de navegación y pega y pega cada año. La misma sonda es probablemente o haga clic en el enlace y elija esta opción rama o frontal. ¿Bien? Uh, bien por ahora. Cambiemos el tipo y tamaño de fuente a 24. Cambiará ahora el texto para este nombre para hablar esos y hacer otra copia para contactar sus nombres. Bien, bueno para esta parte de la continuación ahora a la parte derecha de la carpeta, donde agregaremos los enlaces de redes sociales para pegar aquí. Así nivel base la sintaxis y otra longitud uno al lado del otro. Cambia este grupo Facebook, y este a través de Twitter. Entonces usaremos la opción de cuadrícula para alinear correctamente los enlaces de las fotos. Seleccione el frente y la actividad del altavoz. Corro una línea, este enlace al final del segundo color, y este al principio. Entonces con el mismo método, puedo alinear las otras piernas. También puedes aumentar el número de Kelvin a para más detalles. Entonces es bueno para éste. Ahora voy a desactivar la opción para verde y hay dos enlaces, icono del econ. Si enchufo Azure, ML, variedad y elección, puedes volar para apoyar esto. Puedo escribir en este campo, Facebook. Bien, puedo compartir esta. Después de hacer clic. Importante aquí. Dirían canadiense importado en mi espacio de trabajo? Vuelva a subir. Ahora Fu, mira el ícono de Twitter. Twitter, que sirve a la columna vertebral. De nuevo, haga clic. Bien. Ahora vamos a por supuesto mañana, el tamaño de este icono de herramienta para que se convierta en un tamaño similar para el texto completo. Y vamos a hipotecar aquí. Pero luego otro fregadero. Debes cambiar el color a blanco para que sea más consistente con el dx. Bien, bueno para éste. Continuar con el segundo tocino, creo 20, es un buen tamaño para este cheque. Acercar y mover éste a la izquierda del texto. Entonces a través de otro siguiente, pondremos el enlace. Muy bien. Esta pantalla ya está lista y Jamal a C sale entrar al espacio de trabajo. Muy bien, chicos. Ahora hemos terminado esta página y nos vemos en el siguiente video para diseñar la pantalla Discover. 7. Pantalla de Discover: Hola amigos. Entonces comencemos a hacer la pantalla de descubrimientos. En primer lugar, voy a mover el segundo componente aquí y hacer una copia para esto para conservar la misma plantilla de anterior. Acercar. Y cambiamos el nombre para descubrir a Bache. Después voy a eliminar componentes antiguos de la página. Ahora podría ser desde los enlaces de la barra de navegación. Éste. Conservar el mismo estilo en pantalla de la aplicación. Por lo que es muy importante en tus diseños usar la misma fuente para la oración y las palabras. Sigamos escribiendo un sentido de muestra para dirigir al usuario a unirse y ver algunos. ¿Correcto? Películas y programas de TV de Bros. Bros desde aquí. No, no, no. Simplemente navega por películas y programas de televisión. Aquí se muestra el tamaño del texto a 48. Y la herramienta Type frontal. Nuevamente, iba a aumentar el tamaño a 56 y quitar cada uno de aquí un poco en la parte superior. Aquí vamos a agregar tres oxígeno para que los usuarios puedan elegir las mejores películas favoritas o mostrar la lista de sentimientos. Empecemos a agregar un rectángulo aquí en el centro. Lo muevo el botoncito así. Y ahora cambiaremos el color a negro a partir de aquí. Bien, bien. Pero lo que puedo volver a cambiarlo así y llevar la transparencia a 80. Ahora es muy bueno. Entonces vamos a hacer una copia y pegar aquí. Nuevamente, otro rectángulo al lado del otro. Ahora puedo mover los componentes en Israel en la parte superior así. Cuando podamos comenzar a preparar sus batallones de este rectángulo. Copia de nuevo desde la barra de navegación y pega aquí. Entonces para este oxígeno, voy a escribir el top, como el top o las películas más populares. Míralo en la plataforma. Agenda, el tamaño a 24 a 28. Sí, es bueno ahora, así que una película aquí. Pero debes activar o hacer clic en la opción Brand24 y continuar eligiendo la mejor. Al igual que yo, está bien. Hagamos una copia para el rectangular secundario. Y lo cambiaremos Georgina, cuando el usuario pueda elegir el general de película que sus palabras ver. Nuevamente por la última opción, el modo. Sí, Más. Dar al usuario para ver más películas o terminar. ¿Correcto? Ahora voy a agregar tres iconos para el distrito. Voy desde el plugin de lucha. Para el primero puedo escribir la droga como las piernas son link. Para, cambiar la expresión a me gusta, mejor o favorito, para mostrar más icono. A la siguiente página voy a elegir esta. Desplázate hacia abajo, y luego vierte el icono de llegar a la siguiente barra. Ahora puedo dibujar la opción general. Sí, Schwann, Baker. Y para cuanto más oxígeno pueda buscar en fila con el siguiente. ¿O qué pasa? Sí. Bien. La página siguiente. Aquí, vamos a importar esto. Yo puedo. Bien. Ahora no dijimos que íconos y los movemos en un rectángulo. Entonces chicos saben que vamos a cambiar el color de los íconos a y, debería ser consistente con el resto de los demás componentes. Bien. Bueno. Terminamos con el motociclista de febrero. Y ahora voy a mostrar los mejores días para el para el icono aquí y ahí estaba el barómetro nosotros fixture AT. Y lo mismo para la segunda pirámide. Se moverá cada uno aquí en el centro del primer rectángulo. Bien, está bien. Ahora, continúe con el segundo. Bueno, nos dijeron la misma configuración y terminamos con la última. Puedo arreglar el mismo recorrido perimetral a 180 grados así. Por último, me muevo cada uno aquí en el centro como los otros íconos que voy a escribir otra frase aquí están el otro botón a la vida para motivar o animar al usuario a unirse a sus amigos. Entonces copia de la primera y bases aquí. Ahora voy a escribir casi como ver lado a lado en la vida real? Sí. ¿Funcionaría esto? Cambiemos el tamaño de fuente a 24. Prefiere el mejor año, y el tipo de fuente a regular. Bien, entonces es perfecto con esta circunnavegación. Ahora voy a cliente los componentes para que sean más legibles y atractivos para dibujar los del usuario. Empecemos ahora con este rectángulo, que contendremos los carteles de películas aquí en el lado izquierdo. Y cambiamos el degradado a 550 por la fe Händel es incompleto. Ahora puedo moverlo aquí. Sí, aquí vamos a simplemente, voy a reagrupar los componentes de la pantalla así para reorganizar mi componente púrpura. 8. Plugins potentes: Hola chicos. Aquí en este rectángulo agregaremos la imagen de cuatro desde una poderosamente, que encontraremos en este video donde podemos o presentar las películas que están mostrando ahora con, con su postura. Bien, así que hacemos clic con el botón derecho del ratón y elegimos plugins. A continuación, haz clic en el plugin Unsplash. Para mí, el plugin en la muestra. Pero si no se importa a tu espacio de trabajo, puedes hacer clic en, encontrar lo vegano y simplemente importado. Este plugin contiene mucha imagen de alta calidad. Te recomiendo usarlo. Buscamos cualquier tipo de imagen. Personalmente, lo uso mucho en mi proyecto. Aquí buscaremos tablero de términos para sentir fuerzas. Y luego para nuestra página aquí mismo, muévala en la barra de búsqueda y desplazador para descubrir la lista de carpetas. Para que pueda recortar este como el primer póster para mi sentimiento. Aquí, no debes esperar a que esta herramienta indicadora entre las empresas desde el final de la EMH. Bien, bien. Dice importado con éxito. Sigamos buscando otro póster. Éste o éste. Ahora, aprendiz, voy a importar éste. ¿Bien? Bien, continuar con esta imagen covalente más para esta es buena ahora, sí, la voy a importar. Bien. Desplácese hacia abajo más dos. El último. Volveremos aquí en las mejores representaciones. Una de esta imagen. Sí, éste, núcleo de kriptón. ¿Correcto? La imagen se importa con éxito en mi espacio de trabajo. Ahora los vamos a evaluar del mismo lado que es el caso. Esto terminamos con esto. Bien. Ahora vamos a moverlos a nuestra caja. Bien, somos buenos chicos. Ahora ya terminamos con esta página y dos en el siguiente video para agregar un prototipo y una animación inteligente. 9. Prototipo y animaciones: En este video, agregaremos enlaces de introducción o navegación entre la pantalla y otra vez, animación para algunos componentes porque estoy aquí y la primera página de aterrizaje de pantalla y el centro comercial switch strip. Bien, comencemos con el botón aquí. Haga clic en el círculo y vincúlelo con la página conjunta. ¿Bien? Esta es una ventana de detalle de interacción. Desde aquí personalizaremos o interactuaremos entre la página y podremos mostrar el tipo de navegación o en movimiento. También la duración cuando estás cambiando de una pantalla a otra. Para esta interacción, voy a arreglar esta. Entonces voy a hacer clic o hacer clic en oxígeno y navegar por fagos conjuntos. Y aquí podemos elegir de esta lista, el tipo de animación. Pero para, pero para mí ahora voy a mostrar la animación instantánea. Sigamos agregando los enlaces a la barra de navegación con las otras pantallas. Únete a esta página como la introducción de botón. De nuevo, te voy a mostrar lo mismo parametrizar el enlace de progreso y ahora el enlace Descubrir. Bien, bien. El enlace se agrega con éxito con la misma interacción que pensamos. Ahora estamos terminando el resto de interacción entre los verdes anaranjados con el mismo método. Entonces, para la imagen del logotipo que elegimos, cuando hagamos clic en el logotipo, volveremos a la página de inicio así. Muy bien. Ahora vamos a probar la introducción pinchando aquí. En primer lugar, voy a usar el botón, llegar el comercio de largo y ancho con el resto de navegación de vuelta aquí en el espacio de trabajo. Bien, ahora voy a agregar la animación a esta imagen de la landing page. Pero antes que nada, cuando vamos a agregar animación para cualquier componente, debe copiar la pantalla urgente fin de hacer que esa innovación cambie en la segunda pantalla y dar la situación inicial que el original es Gideon como no lo hacen. Mueve el segundo enlace justo debajo del primero así, luego regresa al modo de diseño. Entonces ahora nos acercamos aquí y cambiamos el nombre a la animación de página de préstamo uno. Seleccionar la imagen de cambiar nuestra intuición con este parámetro, lleva a cero. ¿Bien? El zoom hacia fuera a la interacción entre estas dos pantallas con armadura a pesar. De nuevo cambiar al modo prototipo, eliminar por longitud de la segunda página, así. Después agreguemos la interacción de la imagen en la primera pantalla. La segunda pantalla. Aquí en la ventana de detalles de interacción. Voy a elegir cualquier opción y caeré con la animación voy a Navy cuando los ajustes predeterminados. Bueno. Intentemos no, la primera animación. Muy bien. Así que enfrenté el mouse sobre la imagen se volteó con irritación que establecemos en los ajustes. Vuelve para agregar la segunda animación. Ahora, la segunda animación referente al botón, cuando el usuario sobre el ratón, sobre el botón, la corriente se vuelve un poco más oscura. Entonces antes que nada, voy a agregar otra copia para el cambio de pantalla internacional al modo de diseño y bases aquí, pero ninguna animación. Aquí. Nuevamente cambió el nombre a herramienta de animación de página de préstamo y regresar a través de la tabla. Así que voy a eliminar todos los enlaces de la pantalla y ajustar la interacción del botón con su joint venture después de editar el color del botón de aquí, y cambiar el modo de diseño de color y seleccionar la paleta de colores. Así que solo voy a escoger o semejanza para tenerlo ahí. Buen topo, el color más oscuro. Bien, bien, Jim Crow en la MU y dirección. El primer paso, debes eliminar esta navegación entre la pantalla original y el dolor gigante. Y el vínculo entre el botón con la nueva pantalla. Para esta voy a elegir, estamos bajando el oxígeno. Para la animación. Voy a asegurar la animación inteligente como esta pequeña demo. También para el día. Cámbiala a través de 200 milisegundos para que la animación sea más rápida. Bien, genial. Ahora vamos a terminar con el enlace entre el botón y la página gigante. Para esta configuración, dar el mismo padre. Solo arregla las articulaciones de animación. Muy bien. Ahora podemos probar esta nueva animación. Entonces como observas aquí, cuando más toca el botón, las versiones en color así. Y luego haga clic, navegamos a la siguiente pantalla. Así que volvamos ahora a nuestro espacio agregar otra admisión para su página descubierta. Nuevamente, al igual que la misma animación deberías copiar la segunda página del original. Cambia el nombre al scroll de la página, y asegúrate de que para esta animación, se trata de justa imparcial. Cuando el usuario pasa el mouse sobre uno o el analizador, el componente cambia el encabezado, las otras fuerzas y solo se enfoca en el póster de la película Seleccionar para mostrar más detalles. Entonces el primer paso es dibujar un rectángulo para elegir un fetal más oscuro. Cuando, cuando se seleccionan los carteles. Acerque aquí para fijar el ancho y la altura del rectángulo. Bien. Ahora vamos a cambiar el color a negro y personalizar la transparencia a 50. Lo moveremos a un lado por ahora y eliminaremos este póster. Voy a usar esto como primer póster. Los detalles se mostrarán aquí en el centro así. Podemos arreglarlo juega con este parámetro de la herramienta. Por cada 1,230, 550 por los mismos cinco vendedores, fuerte. Después puedo agregar el filtro en el póster como este es un mundo diferente, ¿correcto? Ahora voy a agregar el título de la película con el mismo formulario para la silla Discover link copy and paste. Pero no debes usar la marca a la opción Frontal para tener un valor predeterminado. Bien, bien. Cámbielo para sentirse derechohabiente. Comparte ahora el tamaño del texto 64 y también el foráneo a escribir para moverlo al centro del rectángulo. Entonces la cima aquí. Ahora vamos a agregar un botón en el centro para darle al usuario la opción de comenzar a ver el feed. Entonces voy a copiar desde la pantalla el botón y pegarlo aquí. Bien. Ahora voy a moverlo exactamente en el centro. Cambiar esto no fue genial. Reloj. Y el formulario para advertir para asumir que no va a quitar este radio fronterizo de aquí. Reloj también debe ser digerido Toby totalmente visible y poner en el centro de la antena parabólica. Como también se puede agregar inyector a continuación que da un número de visitantes. Cuando empezó a ver la película, el conserje extranjero dice a 22, el tipo de fuente a irregular. Y vuelve a cambiar el tamaño del texto a 24 para que sea más legible y cambie el texto. Por ejemplo sexto, a través de la observación, la observación de la médula. Bueno, animamos a la derecha. El texto es muy pequeño. Para que quede claro, volveré a nombrar locos. Bien, Muy bien. Terminamos con la última modificación sobre el título y la mantequilla. Entonces chicos aquí, vamos a agregar la interacción con la pantalla. Cambiar a modo prototipo, mostró el mismo póster y vincularlo con una nueva pantalla como esta. Entonces aquí en el detalle de la interacción, voy a cambiar este a lo que sea en modo. Para esto tan bueno, mantén con la misma configuración. Otra vez para la animación. Terminó con el enlace entre el reloj, pero luego se ganó una página gigante. Porque de lo contrario el usuario antes de comenzar a lavarse los pies y se debe completar el registro para variable, estamos terminando ahora con esta animación es tu boca. Ves nuestro entrar al espacio de trabajo y haz clic aquí para probar y navegar en nuestra aplicación. Como ves aquí, cuando más y el Forster de los componentes cambia a la página de animación. Y el botón funciona directamente, redirigiendo al usuario a la página gigante. Para los otros carteles, puedes completarlos como ejercicio de práctica. Nuestro sitio web funciona correctamente. Vuelve a nuestro espacio de trabajo para verlas. Otra vez. Se puede agregar otra pantalla con el fin de mejorar y hacer una nueva opción a la plataforma. Así que muchas gracias chicos por ver. Aquí hemos terminado este curso y deseo que estés aprendiendo cosas nuevas conmigo. Por fin un adiós, y te veré en el próximo curso.