Figma UI/UX - Diseñar una aplicación web de Messenger UI/UX

1. Introducción: Bienvenidos a este curso. Mi nombre es ayer, Chelsea y Albert instructor en este curso. En este curso, vas a diseñar una aplicación web Messenger completa, UI UX, usando Figma. Si bien diseñarás este messenger una aplicación web, te va a aterrizar una interfaz de usuario UX y diferentes tipos de características y mejores prácticas de Figma. Te mostraré cómo usar diferentes tipos de herramientas de Figma para diferentes características de diseño. Aprenderás cómo hacer grupo, crear un sistema de rejilla de retroalimentación de componentes, cómo usar Figma, plug-in, prototipado de figma con cualquier malla que se muestra cómo hacer prototipo, ofrecer características en vivo y diferentes tiposde animales que se muestran. Al final, aprenderás a compartir tu diseño y a exportar tu diseño. Después de terminar este curso, tendrás un proyecto completo del mundo real que podrás agregar a tu portafolio. Por ello, te animaré mucho a disfrutar de este curso. 2. Crear proyecto y diseño: Bienvenidos a esta conferencia. En esta parte, vamos a empezar a trabajar en nuestros proyectos. Por lo que en cuanto inicies sesión en tu cuenta de Figma, podrás ver este tipo de interfaz de usuario y desde aquí necesitas hacer clic en un nuevo archivo de diseño. Entonces voy a dar clic en él. Y luego nos va a abrir un nuevo archivo de proyecto. Y a partir de aquí, tendremos que crear nuestro marco. Entonces vamos a trabajar en la aplicación web. Entonces voy a seleccionar un marco. Y desde aquí podrás sentarte deck stop y el deck stop, aquí habrá un par de opciones. De acuerdo, entonces a partir de ahí, voy a elegir esta tienda DIG, 14401024. Entonces en cuanto selecciono éste, tenemos este layout. Ahora primero y ante todo, voy a cambiar el nombre de éste. Voy a decir casa. Ahora, necesitamos diseñar nuestro encabezado aquí. Y en el encabezado vamos a tener nuestra foto de perfil y luego el nombre. Y luego vamos a tener dos secciones aquí. Uno estará aquí y otro estará aquí. De acuerdo, así que antes de eso, voy a seleccionar la cuadrícula aquí y hacer clic en la cuadrícula de diseño de cuadrícula. Y en lugar de esta cuadrícula, voy a seleccionar columna. Y luego voy a seleccionar 20 columna. ¿ De acuerdo? Nos ayudará mucho diseñar. ¿ De acuerdo? Ahora, desde aquí, voy a diseñar nuestra sección de cabecera aquí. Entonces voy a dar clic en este rectángulo y dibujar aquí. Por ahora voy a justo, bien. Entonces ahora sí tenemos nuestro encabezado aquí. Y ahora desde aquí dando clic en este campo, podemos agregar un color diferente. Por este de aquí. Podemos agregar un color diferente. Pero por ahora, déjame esconder este para que podamos ver nuestra celda T. Entonces este es nuestro color que tenemos ahora, creo que este color es bueno. A mí me gustó. Y ahora después de eso, voy a volver a mostrar esta columna. Y aquí voy a tener una sección más para mostrar nuestra información de usuario, lista de usuarios. De acuerdo, entonces para eso voy a seleccionar nuestro rectángulo aquí. Y después de eso, hasta esta columna, esta columna, voy a poner esta rectangular tal vez de aquí. Voy a poner esta columna. Voy a tomar esta columna de aquí. Y después de eso, voy a definir nuestro, voy a definir nuestro trazo aquí. Ahora, ocultemos este supuesto sistema de rejilla. ver cómo se ve. Entonces se ve así. También quiero tener un color blanco. Entonces desde aquí voy a tomar poco espacio aquí. De acuerdo, así que creo literalmente espacio desde aquí. Ahora. ¿ Qué podemos hacer? Quiero tener color blanco aquí y también quiero tener un pequeño radio de borde aquí. Entonces voy a poner border-radius aquí, tienden a pixel, y luego voy a cambiar el color de fondo. Voy a elegir el color blanco, color de fondo que tenemos aquí. Entonces se ve así ahora. Pero sería bueno que lo mostráramos de esta manera y luego tomáramos poco espacio desde aquí, desde el lado izquierdo y desde el lado derecho. Por lo que este va a ser nuestro carrito principal y área principal donde pondremos nuestra lista de usuarios. Muy bien, y ahora aquí están justo por aquí. Quiero tener otra sección para mostrar los mensajes. Entonces déjenme habilitar el sistema de rejilla. Entonces este es nuestro sistema de red. Y pongamos éste aquí. No de aquí. Yo estaba hablando de éste. Lo pondremos hasta esta grilla y vamos a empezar nuestras masas desde aquí. Voy a seleccionar otro rectángulo aquí. Y a partir de aquí, desde aquí mismo, voy a iniciar la sección de mensajería de nuestra aplicación y asegurarme de que tengamos la misma altura y peso. Y aquí vamos. Este es nuestro punto de partida y este es nuestro punto de partida. También. Se puede ver el símbolo de la crucecita en el lado izquierdo. Significa que se inicia desde el mismo tamaño, desde el mismo lugar. Entonces, si ocultamos nuestra grilla, entonces deberíamos poder ver este tipo de cosas aquí también. Aquí también podemos ver este tipo de cosas. Lee ahora ponemos border-radius diez pixeles para ese. Entonces voy a poner border-radio diez para este también y luego agregar el trazo. Si hago clic en esta plática, nos va a dar la frontera. Y luego al dar click en él, voy a agregar el color blanco para que tengamos mismo color para estos dos artículos. De acuerdo, Ahora tenemos este pequeño espacio. Y desde aquí voy a, no necesitamos tener este espacio modelo, así que voy a aumentar este espacio desde aquí, un poco de espacio desde aquí mismo. De acuerdo, entonces estas son las dos secciones principales donde vamos a tener nuestro contenido principal. Entonces por aquí, pondremos nuestra información de usuario como nuestra foto de perfil para eso, para el usuario conectado y luego el nombre. Y aquí vamos a poner todos los mensajes de chat y luego aquí están todos los usuarios y luego aquí todos los mensajes de chat aquí. Entonces voy a parar este video aquí mismo y continuaremos con desde la próxima conferencia. Nos vemos en la próxima conferencia. 3. Diseño de artículos de la lista de usuarios: Bienvenidos de nuevo una vez más. En esta parte, trataremos de diseñar nuestro encabezado y nuestra barra lateral. Entonces para eso primero, voy a seleccionar la elipse aquí. Y en esta elipse, voy a diseñar esta herramienta de elipse aquí. Por lo que aquí pondremos nuestros correos electrónicos y nos aseguraremos de que tengamos exactamente la misma altura y blanco. Entonces voy a poner 60 por 60 y ponerlo aquí. Y después de eso, queremos tener aquí nuestro radio fronterizo. Por lo que no molestan las ideas. Quiero tener una frontera aquí y cambiar el tamaño de la frontera a cinco. Y lo voy a hacer de color blanco. Por lo que se verá así. Si se requiere, entonces haremos cambios. Y ahora después de eso, quería tener un nombre aquí. Por lo que voy a dar clic en la herramienta de texto. Y aquí voy a decir John Doe. Y voy a seleccionar el tamaño de fuente a 16 píxeles. Aquí están, tal vez podamos elegir 20 y ponerlo en el medio. Y ahora desde aquí puedo elegir diferente familia de fuentes aquí, basta con hacer clic en ella, lleva hasta el texto. Y podrás ver un par de font-family ellos que han agregado. Y voy a elegir algún nombre al azar aquí. No se está mostrando aquí. A lo mejor esta la podemos elegir, no esta. Podemos elegir éste en realidad. O si hay algo mejor. Y va a verse así. Se va a ver así. No esta es muy pequeña. Esto, y esto. Y esto. Voy a elegir, creo que esta, esta fue mejor. De acuerdo, pero aquí no hace ningún cambio. Entonces voy a elegir este tilo o teníamos algo llamado, Bien, éste. Ahora, aquí voy a poner nuestra imagen para poner un EMS. Tienen un error aquí, así que colóquense el desorden. Por lo que necesita seleccionar, debe seleccionar la herramienta Imagen. Y desde aquí, solo sube tu foto de perfil, sube tu foto que quieras mostrar. Por ejemplo, voy a elegir éste aquí. Y se muestra que añadiendo MS y después de una caída a pedazos, mientras que podrás ver esta imagen en tu boca, sólo tienes que seleccionar esta, y luego se va a agregar tu herramienta de elipse. De acuerdo, así que ahora no quiero tenerlo cinco para la foto para la frontera. Voy a tener tres. De acuerdo, Ahora se ve bien. Perfecto. Y aquí, por aquí queremos tener nuestra lista de mensajes. Pero antes de eso primero, necesitamos tener aquí una barra de fuentes. Entonces voy a definir un rectángulo aquí. Y pon este rectángulo, o radio de borde. Voy a decir frontera radio diez píxeles y añadir a bordeado aquí, cambiar el color de fondo a color blanco. Y aquí, aquí mismo, exactamente, lo podemos hacer. Entonces aquí podemos, podemos, podemos, también necesitamos tener un botón aquí. También necesitamos tener aquí un botón del mismo tamaño. Así que voy a duplicar este y luego arrastrarlo aquí y luego cambiar el tamaño de este para el botón. Nosotros lo podemos poner aquí de esta manera. Entonces puedo aumentar este. Aquí. Pondremos nuestro ícono y aquí sólo podemos pagarlo. Simplemente podemos agregar una textura. Podemos decir, podemos decir sars, sars nombre de usuario aquí. Y voy a cambiar el tamaño de la fuente a 15 píxeles. Y tal vez color, o puedo hacer un poco de color de cobertizo para este. El color de la sombra. De acuerdo, así que ahora se ve bien. Ahora aquí voy a poner nuestros correos electrónicos. Voy a poner un ícono aquí para eso. Ya tengo instalado un PECC se llama goal para ir a los plugins. Y aquí se puede ver que nuestro icono alimentador. Por lo que si aún no lo has instalado, entonces simplemente aún puedes hacer clic en el plug-in Find More y luego simplemente buscar este ícono de filtro o puedes usar cualquier otro plug-in para mostrar el ícono aquí. Por lo que voy a dar clic en el icono de la carpeta. Aquí. Voy a agregar sars. Sars. Por lo que tienen un ícono de sars. Voy a simplemente ponerlo ahí. Por lo que aquí está el icono de Búsqueda. Entonces voy a sólo seleccionar esta opción aquí, icono sars, y ponerlo aquí. En el centro de éste. Ahora puedes ver que éste está fuera del marco. Nuestro mainframe está en casa, así que sólo voy a arrastrarlo dentro de este marco. Muy bien, entonces este es nuestro ícono de búsqueda, y ahora después de eso, quiero tener nuestro par de opciones aquí. Viene aquí. Voy a quitar esta. Por lo que aquí te mostraremos nuestra lista de usuarios. De acuerdo, entonces cómo vamos a mostrar una lista de usuarios, vamos a tomar un rectángulo saludable aquí. Voy a dibujar un rectángulo aquí. Y luego este rectángulo de aquí. Voy a dibujar este rectángulo. Y voy a sumar diez pixeles para este rectángulo, para este auto, para este artículo, para este rectángulo. Y luego quiero tener un color blanco, como el mismo color que estamos manteniendo, pero quiero tener un trazo aquí. Entonces selecciona un trazo aquí. Ahora, se ve así y por aquí, creo que podemos aumentarlo. Tenemos que poner nuestro único icono, luego el nombre y el mensaje, y la duración, y luego puntito aquí. Entonces, ¿cómo lo haremos? A quién podemos duplicar éste porque necesitamos el mismo diseño. ¿ De acuerdo? Entonces voy a duplicar este. Entonces Comando D, Control D y luego solo ponlo aquí. Pero aquí no lo vemos. Parece que nuestro rectángulo y nuestro EMS, EMS, pero no se muestra aquí. Entonces esta es nuestra elipse. La elipse a, déjenme traerlo al frente. Podemos decir H nada ahí. Entonces voy a borrar este. Y hagamos un duplicado de nuevo. Y luego arrástrelo aquí de esta manera, y luego rastrearlo aquí. De acuerdo, Entonces el tema es que no está al frente. Por lo que debería mostrarnos. Se puede ver Traer al frente, da clic en el traer al frente. Y ahora está al frente. Entonces voy a simplemente ponerlo aquí. Y luego voy a agregar nuestro nombre aquí. Entonces esta es nuestra herramienta de elipse. Yo lo voy a hacer , que sea un nombre. Voy a dar un nombre aquí, así que voy a decir Rename. Entonces aquí está nuestra elipse, esta. Entonces voy a cambiar el nombre de éste. Voy a agregar esta una forma en que se está moviendo aquí. Entonces esta elipse va a ser nuestro nombre. Entonces presione Control R, n aquí. Voy a decir aquí icono de usuario, lista y la lista de usuarios. Y después de eso, voy a agregar aquí nuestro nombre. Entonces digamos que podemos decir, podemos decir Francisco. Francisco. Y se puede ver que está tomando la familia de fuentes anterior que hemos utilizado. Entonces para la familia tipográfica, para la, para el nombre está tomando esta. Y estoy contento con eso. Si lo desea, sólo puede cambiar el nombre de la familia de fuentes aquí. Y después de eso, así y está tomando un pixel 15 como deben tamaño de fuente. Y luego necesito un texto más para las masas. Podemos decir: Hola, ¿cómo te va? Pero para eso, quiero tener 12 píxeles. Aquí. Quiero tener 12 pixeles. Y ahora aquí quiero poner nuestra duración aquí. Entonces voy a poner un tiempo aquí. Voy a decir, digamos 09 para 1915 PM. Este es el tiempo que mostramos. Pero está tomando color blanco. ¿Por qué es eso? Debe ser de color blanco. Donde se está llevando el color blanco. Este no debe ser el caso. Permítanme borrar este. Entonces volvamos a poner el texto aquí . Ahora seguimos trabajando. Entonces pongamos un 90915, 15 PM justo a la hora del mensaje cuando el usuario ha enviado. Y aquí quiero tener tres puntos para eso. Quiero dibujar un punto T aquí, como un punto de tamaño pequeño usando Elasticsearch, digamos cinco píxeles por cinco píxeles y simplemente cambiar el color a negro. Entonces ahora se ve así. Creo que podemos hacer con tres píxeles por la altura, y la altura es de tres por tres. No es bueno. Entonces lo voy a hacer cuatro por 44 por cuatro. Y luego lo voy a duplicar Comando D y tomar un espacio y duplicarlo una vez más. Entonces estos son los tres puntos que acabo de agregar. Por lo que sería bueno si disminuyo la distancia entre estos dos. De acuerdo, entonces se ve bien. Entonces aquí tenemos esta elipse, una herramienta de elipse en Illustrator, hazlos un grupo. Entonces voy a presionar el Comando G. Y luego lo voy a poner aquí. Y el centro de éste. Ahora tenemos este t dot y voy a disminuir la altura de éste porque no necesitamos tener este número de altura. De acuerdo, así que ahora, bien, así que un poco más aquí. Entonces tenemos este diseño aquí. Ahora lo que tendremos que hacer, tendremos que agregar múltiples ítems de éste. Entonces lo que vamos a hacer básicamente los va a hacer un grupo y luego vamos a añadir varios elementos y luego vamos a agregar un scroll opciones. Entonces voy a parar este video aquí mismo y continuaremos con desde la próxima conferencia. Nos vemos en la próxima conferencia. 4. Desplazamiento vertical y de grupo: Bienvenidos de nuevo una vez más. En esta parte, trataremos de agregar lista múltiple, elemento de usuario múltiple, y luego intentaremos agregar una opción de escala. Entonces ahora tenemos este diseño y podemos reutilizarlo. Por lo que tendremos que hacer de ellos un grupo. Entonces este rectángulo, y luego esta es una lista o EMS y que hemos creado entonces este texto, este texto y este, y este grupo uno para este icono enseñado. Entonces estas son las cosas que contiene este ítem integral aquí. Entonces los voy a hacer de ellos un grupo. Así que selecciona todo esto desde la barra lateral izquierda. Asegúrate de haber seleccionado actualmente todos y cada uno de los artículos. Entonces voy a seleccionar Comando C y luego voy a renombrar int sensitive group para presionar Control R. O también puedes hacerlo dando click aquí. Para que puedas ver tu nombre controlador. Por lo que voy a decir lista de usuarios. Por lo que cuando estás trabajando en un gran proyecto, siempre trataste de dar un nombre significativo para que más adelante cuando hagas cambios, puedas averiguarlo fácilmente. Por lo que siempre es una buena práctica. Ahora tenemos este diseño y ¿qué podemos hacer ahora? Entonces voy a presionar Control D para este. Y luego lo voy a arrastrar aquí. Y ahora sólo necesito arrastrarlo una sola vez. Y después de eso, voy a solo quiero decir, solo necesito arrastrarlo una vez y he puesto eso, voy a simplemente presionar Control D, entonces va a automáticamente. Entonces presiona Control D, Control D, Control D, Control D hasta el final, Control D. Así que estas son la lista de usuarios que quiero tener. Ahora, vamos a correr como se ve. Vale, puedes, una cosa, puedes notar que hay algún ícono, hay alguna lista que va más allá de nuestro mainframe, por lo tanto, no podremos hacerlo. Entonces aquí es de donde viene. Aquí es donde sale, se llama funcionalidades que aquí vamos a aprender. ¿ De acuerdo? Por lo que ahora tendremos que hacerla opción escalable para que podamos ver resto de la parte y podamos llamarla verticalmente. ¿De acuerdo? Entonces cómo lo hacemos exactamente. Por lo que ahora tenemos toda esta lista de usuarios. Entonces estas son la lista que contiene todas nuestras cosas. ¿ De acuerdo? Entonces estas son las listas que contienen, se puede ver si selecciono esta, hay otra, pero la podemos ver. Ahora. Haz una cosa, seleccionar toda la lista de usuarios vuelve a seleccionar toda la lista de usuariosy conviértelos en un solo grupo. Por lo tanto, selecciona todo este artículo. Ahora bien, este contenido es todo. Entonces ahora los voy a hacer de ellos un grupo. ¿ De acuerdo? Ahora, de nuevo cambia el nombre. Podemos decir toda la lista de usuarios para un scroll, solo un nombre significativo. Por lo que ahora este grupo contiene toda nuestra lista de usuarios. Y más fácil todo este contenido en este diseño único es un diseño específico. ¿ De acuerdo? Por lo que ahora solo ven en el lado derecho, podrás ver opciones de diseño automático aquí. Solo necesitas dar click en él. En cuanto hagas clic en él, verás el contenido del clip. Por lo que solo necesitas dar click en el contenido de este clip. Una vez que hagas clic en el contenido de este clip, podrás ver que este grupo tendrá este tipo de forma. Ahora, podemos arrastrarlo y luego podemos ajustarlo con nuestro mainframe, que es que había esta casa desde esta premisa de forma todavía aquí, pero nuestro grupo sigue aquí ahora. Entonces lo que voy a hacer, sólo voy a agregarlo aquí. Muy bien. Ahora, queremos poder ver cualquier opción escolar. Entonces si lo refresco, solo veremos estas opciones. De acuerdo, entonces la cosa es que déjame mostrarte lo que quiero decir con eso. Ahora es todavía podemos ver las opciones de cráneo es todavía sólo tenemos esta funcionalidad aquí, como hasta aquí. También puedo, de nuevo, puedo arrastrarlo aquí. Se verá así. Entonces tenemos esta opción todavía aquí, vale, solo podemos llamar a este artículo. Ya ves que podemos desplazarlo ¿verdad? Nuestra, nuestra lista de usuarios está rota hasta aquí. Ahora, sólo tiene que seleccionar esta lista de usuarios y luego ir a la sección de prototipos. Haga clic en el prototipo. Aquí puedes ver el desplazamiento de desbordamiento. Por defecto, se selecciona sin desplazamiento. Tenemos que hacer cambios aquí. Entonces en lugar de no desplazarse, vamos a seleccionar el desplazamiento vertical de esa alma. Ahora, deberíamos poder ver nuestra lista. Aquí. Se puede ver que podemos desplazar nuestro artículo. Podemos desplazar nuestra lista. Es así como podemos hacer cambios, pero así es como podemos agregar nuestras opciones escolares. Entonces ahora tenemos estas opciones aquí. Fresco. Por lo que ahora has aprendido a hacer scroll. Hagamosuna cosa. Ahora. Yo puedo cambiar. Estas son imágenes como imágenes diferentes. Por lo que voy a volver a seleccionar Plessy lío. Y luego voy a seleccionar todas estas imágenes. Se va a tardar un par de segundos subir estas imágenes. Y en cuanto esté haya terminado de subir, deberíamos poder ver nuestras imágenes en nuestra boca cuando la movamos a mover. Entonces la imagen se redimensiona, así que sigue, está tomando tiempo. Nose está mostrando. Aquí vas. Se puede ver que ahora tenemos ocho correos electrónicos. Por lo que ahora voy a seleccionar este. Voy a presionar, así que ya tenemos esta. Voy a presionar uno aquí. Voy a presionar el segundo aquí. El tercero está aquí, el cuarto está aquí. Y de esta manera, puedes simplemente, solo puedes mostrarte, puedes simplemente poner múltiples imágenes aquí. Se puede ver esto. Ahora tenemos diferentes imágenes. Lleva algún tiempo refrescarlo. Por lo que ahora tenemos unas imágenes diferentes para cada artículo. Entonces lo que hice básicamente, simplemente hice clic en los correos electrónicos de este lugar y seleccioné todas las imágenes. Tarda unos segundos en cuanto se suba, entonces podrás ver todas las imágenes con un número con tu mouse. Y luego solo tienes que ir allí y simplemente darle clic uno por uno, y luego se va a pegar automáticamente aquí. Aquí vamos. Ahora tenemos una droga de Fannie Mae's para tarjeta diferente. Se puede ver y también podemos desplazarlo. Y también podemos desplazar este. Por lo que de esta manera si quieres, también puedes cambiar todas las imágenes aquí. Simplemente puedes hacerlo por tu cuenta. Es el mismo proceso. Por lo que ahora tenemos este scroll funcionalidades y diferente icono bajo diferentes imágenes. Así es como puedes hacerlo. Está bien, así que voy a alimentar a éste. Entonces has aprendido a hacer scroll y ¿cómo puedes agruparlo y cómo puedo hacerlo aquí de esta manera? En la siguiente parte, Trabajemos en este ícono. Al dar clic en el icono, vamos a mostrar nuestro modelo funciona para eliminar la lista. Nos vemos en la próxima conferencia. 5. Lista desplegable abierto de superposición prototipo: Bienvenidos de nuevo una vez más. En esta parte, vamos a agregar un artículo uno a uno aquí. Al dar clic en esta para eliminar esta lista, cómo lo haremos para eso, nuevamente, necesitamos definir un marco. Entonces voy a dar clic en el marco, y esta vez voy a dibujar un marco personalizado, como arrastrarlo de esta manera. De acuerdo, así que en lugar del marco uno, puedo decir, puedo decir borrar marco. De acuerdo, se puede dar cualquier nombre y quiero tener poco radio de frontera aquí. Entonces voy a ahorrar cinco pixeles. Y dentro de este marco Dillard, quiero tener dos botones. Uno es para retrasado, uno es cuadrado sin marco. Entonces, ¿qué puedo hacer? Aquí puedo definir un rectángulo. Y puedo definir nuestro rec, rectángulo aquí. Para este rectángulo, voy a dar celda 95 de radio frontera para que quede bien. Y voy a agregar color rojo y este color aquí que estamos usando aquí. Y después voy a poner un texto aquí. Y voy a decir que lo pongas al centro. El texto en lugar de 15, debería ser 12 porque es sólo un texto de botón normal. Ahora, ¿qué puedo hacer? Hacerlos un grupo, estos dos. Ahora, voy a duplicar este grupo para que pueda usar, puedo agregar otro botón. Y este botón va a ser este nombre de botón va a estar en un amigo. Yo puedo decir. Y botón Amigo. Ahora déjeme ponerlo en el centro. De acuerdo, entonces ahora sí tenemos este marco. Ahora bien, ¿qué tenemos que hacer? Necesitamos conectar este marco con este punto. Por lo que al dar clic en esta parte superior, podemos mostrar este. Vaya a esto, haga clic en este prototipo, y ahora haga clic en este grupo, en este grupo de puntos. No exactamente en el suelo. Eso se puede ver. ¿ Recuerdas que para esos tres puntos, tenemos un groove. Por lo que solo necesitas dar click en el grupo. Y entonces aquí lo harás, vemos interacciones. Haga clic en él y haga clic aquí. Aquí dice que cómo quieres interactuar, queremos tenerlo en click o en pista o encendido, bueno, queremos tenerlo en onclick. Y luego en lugar de navegar a, voy a aparecer y otra vez. Que esta superposición abierta nos ayude a agregar nuestro tipo de caja de modelo de cosas. Entonces ahora donde queremos hacer esta superposición abierta, queremos hacerlo con este frame delete. Ahora este nodo está conectado con este marco Gillette. Ahora aquí dice que añaden fondo detrás de superposición. No quiero tener ningún fondo, así que no voy a seleccionar aquí. Y luego dice cerrado al hacer clic afuera, quiero cerrarlo cuando el usuario hace clic en el exterior. ¿ Te voy a mostrar qué significa? Y ahora aquí tiene este sistema de animación desde donde quieres mostrar éste o desde donde quieres hacerlo, o quieres tenerlo instancia. Así que primero agreguemos esta animación muévete y salgas para que entiendas lo que quiero decir. Ahora bien, si ejecuto éste, si M aquí y si hago clic en él, aquí van. Nuestro delete, soy el frame lead va a venir aquí por defecto si hago clic fuera de él ido. Ahora tenemos que ponerlo manualmente aquí. Yo quiero mostrarlo cuando o haga clic en él, lugar de entrar en el centro, debería venir por aquí. Entonces, ¿cómo lo haré? Aquí, tienen una opción llamada centrada por defecto. Y aquí arriba a la izquierda del centro, arriba a la derecha, abajo lleva de donde fuiste desde donde quieres mostrarlo. Entonces digamos abajo a la izquierda. Haga clic en él. Se va a sumar aquí en la parte inferior izquierda. Pero aquí lo queremos mostrar. Por lo tanto, sólo se puede jugar con éste. Digamos que quieres mostrarlo en la parte superior derecha. Ahora si hago clic en él, entonces va a venir en esta parte superior derecha. De acuerdo, Así que sólo se puede decir. Entonces mi objetivo es enseñarte. Por lo que solo te estoy mostrando las opciones antiguas que más adelante puedes usar en base a tu requerimiento. Pero para este voy a seleccionar. En tanto, en cuanto me acueste con el mineral, sólo puedo arrastrarlo aquí justo después de éste. Yo sólo puedo arrastrarlo aquí. Ahora. Ahora bien, si lo refresco, debería venir aquí porque aquí hemos editado. Ahora, da clic en él y ya está aquí. ¿ De acuerdo? Entonces como tenemos fondo de cuello blanco y también tenemos éste. Entonces voy a hacer que voy a agregar un color diferente para este para que sea fácilmente visible. Entonces en lugar de esto, pongamos este color gris. Ahora. Es fácilmente visible aquí y lo podemos poner aquí. Pero si queremos, también podemos agregar un color diferente para éste, tal vez éste, y este color, ahora se ve bien, es fácilmente visible. Hago clic afuera, va, pero no quiero tener ninguna medida porque no es fácil de usar, porque no queremos mostrarle a nuestro usuario. Viene de abajo. ¿ Qué queremos tener? Queremosmostrar cuando o haga clic en el grado que muestra aquí. De acuerdo, entonces ¿cómo lo haremos? Ahora de nuevo, pasar a esta sección de prototipos. Y aquí tuvimos nuestra interacción aquí. Esto es lo que teníamos aquí. De acuerdo, entonces tenemos que dar clic en él. Entonces podemos ver esta aquí, nuestra anterior, y aquí tienen opciones. Entonces en lugar de morfina de animación, voy a seleccionar Instantánea sus asientos. Entonces no va a dar ninguna medida. Ya puedes ver en su lugar ahora. Ya puedes ver en su lugar ahora. Muy bien. Da clic en él, va a venir ahora cuando o bien haga clic en el botón de eliminar y botón de unfun, quiero también despedir este. Yo quiero quitar este. Entonces, ¿cómo lo hago? Así que ahora haga clic en este botón, haga clic aquí, y luego muestre esta indirección aquí. Haga clic en el onclick y se obtiene, sólo tiene que dar clic en este brillo sobre plomo porque teníamos una, tenemos solapamiento. Entonces solo quiero cerrar esta superposición. Por lo que cuando los usuarios hacen clic en esto, usted da clic en él, vemos esta superposición. Ahora da clic en el Eliminar. Se va a seguir por este camino. la misma manera podemos sumar también por esta injusta y fuera de Sean. Así que selecciona esto y amigo y ven aquí, selecciona este, onclick none, y haz clic en Cerrar superposición. Este también ahora está conectado. Ahora hago clic en él, se va a cerrar. Hago clic aquí. Muestra estas dos opciones. Entonces da clic en él, se ha ido. Entonces así es como se puede hacer superposición abierta de espectáculos, modelar la sección de trabajo de esta manera. Y luego también puedes hacer este tipo de lista. Espero que hoy hayas aprendido algo nuevo. Nos vemos en la próxima conferencia. 6. Diseño de envío de mensajes: Bienvenidos de nuevo una vez más. En esta parte, trataremos diseñar nuestro diseño de mensaje principal. Entonces aquí quiero, en la parte anterior, hemos terminado todas estas funcionalidades. Y entonces esta también está funcionando. De acuerdo, así que también podemos hacer poca fijación aquí, por ejemplo, que creo que solo podemos disminuir la altura del marco, un poco menos de ajuste. Y a lo mejor no puedo, no este como el mainframe. Hablo de este mainframe. Así que slick este mainframe y minimice, disminuya la altura de este. Ahora podemos ver que está arreglado. De acuerdo, Así que ahora voy a hacer un poco más. De acuerdo, entonces, vale, así que aumentémoslo un poco más. Ahora selecciona esta y ponla justo aquí. Y también este, el carro principal que contiene nuestro diseño principal aquí. Y también necesitamos volver a ajustar nuestro marco. Entonces da clic en dar clic en este marco que hicimos aquí. Y entonces sólo podemos ajustarlo hasta aquí. Por lo que ahora se ve bien. Ya podemos ver que ahora no tenemos este pergamino. Es decir, como nosotros en primer lugar, nuestro Heida era más que el tamaño de pantalla que tengo. Pero si no quieres hacer cambios, entonces está totalmente bien. Entonces ahora tenemos este punto de partida para este trazado desde aquí, y éste es de aquí. Y ahora sólo podemos llamarlo, ahora se ve mejor que el anterior, anterior. De acuerdo, entonces lo que hice simplemente básicamente no se confunde aquí. Entonces lo que hice, solo disminuyo la altura de este mainframe, que es nuestro marco de inicio, y luego solo agrego solo en este marco y luego solo ajusto estos marcos que contienen todo esto. Y entonces esto para que todo el marco de la lista de usuarios, solo ajústelo para que se vea mejor ahora. Y anteriormente era como si tuviéramos un poco de pergamino. De acuerdo, así que ahora aquí voy a agregar la opción d entonces aquí. Entonces lo que voy a tener aquí, voy a tener un emús y luego al lado de este EMS, el nombre, y luego la hora y luego el mensaje. Entonces lo que voy a hacer, sólo voy a duplicar esto, este emús. Y entonces sólo puedo ponerlo aquí. Y cuatro aquí. Voy a agregar un color de trazo diferente porque nuestro fondo es blanco. Entonces si elijo este ancho, entonces se va a quedar mal. No está mal exactamente. Incluso poseíamos entender este. No quieres visible. Ahora creo que está visible de color rojo, así que voy a seleccionar éste, y después de eso, tendré que agregar un nombre aquí. Entonces le voy a mandar Francisco. Francisco se va a acá y voy a poner el nombre aquí, 14 pixel. Y ponlo en el centro. Y en el mismo centro, voy a jalar el texto y será nuestro momento. O también podemos poner el tiempo aquí o en el medio. Si lo pongo aquí, entonces vamos a tener todavía un texto más. No. Por lo que se verá bien en el centro. Voy a decir den, den 12 PM. Y luego voy a hacer esto aquí y el centro. Y después de eso, lo que tendré después de eso, voy a tener el mensaje aquí, el cuadro de mensajes. Entonces para eso, para el cuadro de mensajes, voy a, voy a dibujar un rectángulo aquí. Voy a añadir el mensaje de aquí hasta aquí. Los libros de mensajes se verán así. Y voy a agregar un radio de frontera aquí. Así que agrega border-radio diez. Y el color de fondo de Jen o sin color de fondo, si se ve bien, entonces también podemos quedarnos con éste. Déjame intentarlo. Esta será la mejor solución. Entonces ahora este es nuestro buzón de mensajes. Y quiero tener un poco de sombra aquí, como en lugar de 100%, pongamos 50 versus n. entonces si uso un color diferente y no se ve bien en 50%, tal vez 70, 70% por ciento. Se verá así. Ponlo 80%. Tendremos este color claro y éste no se ve bien. Entonces voy a tratar de generar algunos otros colores. A lo mejor este color, este color, este. Y luego pon un gradiente lineal aquí. Entonces el gradiente lineal no va a ser visible aquí. Por lo que sólo puedo ponerlo aquí. Entonces en lugar de este color, voy a elegir el color blanco. Y luego voy a elegir el agua es porque en el mensaje siempre tenemos el color normal, normal para que el usuario pueda mirar en la pantalla durante mucho tiempo. Pero si estamos usando un color colorido que en mensaje colorido, entonces no puede ser muy malo. No es fácil de usar. Pero si tienes algo diferente, equipo diferente, por ejemplo, equipo negro o cualquier otro tema, entonces puedes intentar usar diferente color. Pero para el equipo blanco, para el fondo de cuello blanco siempre es mejor mantener a las masas en una sombra blanca. Entonces voy a minimizar esta altura. Y dentro de estos, solo puedo escribir en esencia aquí puedo decir, Oye, Hola, ¿Cómo estás? ¿ Cómo te va? ¿ Está todo bien? ¿ Está todo bien? De acuerdo, entonces este es el cuadro de mensajes que tenemos aquí. Por lo que ahora vamos a necesitar lo mismo aquí. De acuerdo, Así que ahora voy a duplicar, vale, así que vamos a duplicar otro, como este, este mensaje, esta imagen. Entonces voy a duplicar este. Y lo voy a poner aquí. Entonces voy a sólo duplicar este de aquí. Perdón. De acuerdo, Así que lo hice de manera equivocada. Entonces en lugar de hacer esto, voy a convertirlo en un componente. Entonces crea componente, entonces solo podemos usarlo desde aquí. Si desea crear componente, a continuación, sólo tiene que seleccionar el lío o cualquier componente. A continuación, haga clic derecho, haga clic con el botón derecho y , a continuación, haga clic en el componente Por ejemplo, este. Y luego haz clic en Crear componente, luego va a aparecer aquí. Y después podrás usarlo tantas veces como quieras sin ningún problema. Entonces ahora aquí, voy a poner esta cosa aquí. Y voy a duplicar éste, comando D. Así que en el mismo nivel, debería ser. Aquí podemos ver este es el medio. Muy bien, Así que aquí, ahora voy a cambiar el tiempo. Podemos decir. Podemos decir entonces cinco. Y luego aquí, aquí mismo, tendremos que escribir el nombre. Entonces voy a tomar y agregar el texto y lo voy a poner aquí. Voy a decir Jessica. Y lo voy a poner aquí como en el mismo nivel, pero cerca de éste. De acuerdo, entonces Jessica manda mensajes a Francisco. Y déjame comprobar si tenemos la misma altura o las mismas fuentes. Tamaño de fuente 1414. Ahora necesitaremos el mismo diseño aquí. Entonces lo que voy a hacer, los voy a hacer un grupo juntos. Estos dos por ítem, seleccionan este rectángulo bajo este texto. Entonces hazles un grupo y luego lo voy a duplicar. Y entonces lo voy a poner aquí. Y para este mensaje, lo voy a poner aquí y el lado derecho, en el lado derecho. Y luego lo voy a poner aquí. Voy a disminuir el tamaño. Es el blanco de éste. Y aquí van ustedes. Por lo despidos viene de, despidos viene de Francisco. Este viene de Jessica. Y entonces juntos podemos simplemente moverlo aquí. Sí, Pero todo está bien aquí. Pero agrupemos estas dos cosas así, esta, y luego esta Jessica, y luego esta vez estas dos y esta lista de usuarios. Entonces los voy a hacer un grupo, cortar todas estas cosas. Y tenemos que ponerlo en un fondo. Desde aquí. Voy a duplicar una vez más, este mensaje aquí. Y luego lo voy a poner aquí. Entonces estos son los dos mensajes que ha sido enviado por que ha sido enviado por Jessica desde aquí. Por lo que este mensaje viene de Jessica. Y aquí voy a poner una cosa más aquí. Entonces voy, voy a tener nuestra línea aquí, así adelante para agregar una línea. Podemos tomar herramienta de línea o podemos tomar la herramienta rectángulo. Por lo que prefiero usar esta herramienta rectangular para que podamos personalizarla fácilmente. Y después voy a disminuir la altura de esta. Pongámoslo a, luego añadimos border-radius y 90 click cell. Y aquí vamos. A ver cómo se ve. Se ve así. Y voy a seleccionar este. El color de éste es un bloque, creo. Por lo que podemos elegir este color a negro. Y no blog exactamente. Un poco de gris estaría bien aquí. Sí, Así que se ve así y lo mismo. Este mensaje viene de Francisco y despidos viene de Jessica. Permítanme cambiar el mensaje aquí. Puedo decir enviado aquí. Podemos decir, yo soy, voy a sumar diferentes masas aquí. Puedo decir que esta es Jessica de tus compañeros de tu universidad. Y luego segundo mensaje, ¿Cómo te va? ¿ Tan sólo unas S al azar para que se vea bien? Y comida? Y debería partir del mismo poema, misma posición aquí, como este punto de partida desde aquí. De acuerdo, entonces estos son los dos mensajes que han enviado Jessica y Francisco. Y después de eso, la derecha por aquí, quiero tener todos un cuadro de mensaje aquí. Por lo que voy a diseñar un cuadro de mensaje aquí. Voy a agregar un cuadro de mensaje aquí, aquí mismo. Y entonces debería partir de la misma posición que partió de esta imagen. Entonces cuando lo arrastra de esta manera, se puede ver esta cosa aquí. Entonces voy a poner este border-radio 90 pixel, no 90 pixel. Estaría bien si seleccionamos pixel de fiesta tal vez no sean píxeles apretados, nueve píxeles. De acuerdo, ahora aquí voy a poner, voy a agregar un trazo y cambiar el color de fondo a blanco. Y aquí tendremos que definir otros botones para eso. Voy a duplicar este. Y sólo para disminuir este blanco. Y éste va a ser para nuestro botón Enviar. ¿ De acuerdo? Por lo que empezar desde lo mismo, desde la misma posición que partió desde aquí. Ahora, estos otros dos botones aquí, los dos campos que tenemos aquí. Entonces esta, le voy a dar un color diferente. Entonces voy a agregar un color, color trazo que casualmente, desafortunadamente. Entonces en realidad no necesitamos tener un derrame cerebral aquí. Necesitamos tener un color de fondo aquí. Y entonces su objetivo ya no es visible aquí. Y aquí voy a agregar nuestro ícono llamado enviado con nuestro texto. Entonces aquí primero necesitamos editar texto aquí. Podemos decir aquí, podemos escribir aquí, podemos decir olor y ponerlo en el centro. Y justo después de eso, quiero tener nuestro icono llamado alimentador icono. Aquí, voy a agregar enviado. Y voy a seleccionar este icono. Y sólo ponlo aquí. Y voy a cambiar el color para que puedas ver los colores de selección aquí y casualmente de negro a blanco. Genial, se ve muy bonito, pero puedes ver que este ícono de enviar aparece fuera de nuestro marco. Por lo tanto, queremos poder verlo aquí. Entonces lo que voy a hacer, sólo voy a arrastrarlo dentro del marco. Entonces podemos ver nuestro botón Enviar. Creo que hay que ponerlo en el medio. De esta manera. Sí, este es el medio. Y esto es lo que tenemos aquí mismo. De acuerdo, así que este es nuestro lío arriba muestra n justo aquí. Quiero agregar un texto. Voy a decir teclea su tinte, su mensaje. Y voy a añadir este t dot. Y luego voy, lo que voy a tener, voy a agregar una sombra aquí. Podemos cambiar el fondo, podemos cambiar el color de éste. Al igual que este tipo de color. Podemos elegir pierna poco color sombra, este color. De acuerdo, así que todo está bien ahora se ve muy bonito. Por lo que hemos diseñado nuestras secciones de mensajes. Por lo que voy a detener este video aquí mismo y seguiremos desde la próxima conferencia. Nosvemos en la próxima conferencia. 7. Regístrate e inicia sesión Diseño de página: Bienvenidos de nuevo una vez más. Entonces hicimos nuestro mensaje de sistema de mensajes. Pero aún así necesito arreglar pocas cosas. Por ejemplo, aquí se puede ver que no tenemos esta frontera que tenemos aquí. Entonces voy a arreglar rápidamente este. Y tenemos esta frontera. El trazo es de tres. Entonces voy a elegir el trazo aquí. Y voy a poner este trazo. De acuerdo, entonces cometí un error. Necesito seleccionar este artículo solamente. Aquí voy a agregar el trazo. Stroke va a golpear C. Y un color de trazo va a ser este color que tenemos aquí. Y nosotros, bien, entonces ya tenemos un derrame cerebral aquí. Parece que por lo que voy a quitar este de aquí. Entonces aquí, haz doble clic en él, luego voy a cambiar el color del trazo. Porque ya tienes un trazo, porque acabamos de conocerlo componente. Y en nuestro componente, en nuestro diseño anterior ya tuvimos su trazo. Entonces solo haz doble clic en él. Y luego ves el ícono, y luego ves el color, luego cambias el color aquí. No hace falta agregar otro trazo aquí porque ya tenemos un borde para este. De acuerdo, entonces estas son las pocas cosas. Ahora, quiero diseñar nuestro registro y el inicio de sesión paga por eso. Voy a crear un marco aquí. Entonces vamos a crear un marco aquí. Yo sólo lo voy a hacer de esta manera. Es este pequeño marco. Y voy a agregar un radio de frontera aquí. Entonces podemos decir aquí, primero cambia el nombre. Voy a decir que se despida aquí. Y aquí voy a agregar, lo voy a mantener border-radius Cyprian pixel. Así que border-radio volteando pixel. Y aquí tendremos que agregar un texto y luego campo de entrada. Por lo que voy a sumar apunte aquí. Firme aquí. Por lo que este es el texto de registro. Y aquí tienes, tenemos upticks de diseño en el medio. Y voy a cambiar la fuente a 20 píxeles. Yo creo. Podemos, podemos, podemos seleccionar dos en pixel. Y aquí quiero tener que rellenar la entrada no a exactamente tres campo de entrada. Uno va a ser lucir así. Y voy a poner un radio de borde 22 pixel y añadir un trazo aquí y cambiar el color de fondo a color blanco. Aquí, voy a agregar un marcador de posición. Voy a mandar nombre. O podemos poner este nombre por aquí. Por lo que sería bueno que pudiéramos dar el nombre de esta manera. De acuerdo. Y déjame arrastrarlo un poco más. Y entonces esto va a ser nombre. Este va a ser campo de nombre. Y luego hagamos de ellos un grupo para que podamos duplicarlo. Entonces grupo y luego Comando D. Voy a agregar este va a ser e-mail. Entonces solo cambia el nombre al correo electrónico aquí. Entonces vamos a decir correo electrónico. Y después de eso, voy a tener esta D. Y esta va a ser contraseña. Por lo que este va a ser campo de contraseña. Parece que necesito aumentar la altura de este porque todavía necesitamos agregar nuestro botón aquí. Entonces y también hay que ajustar éste de esta manera para que empiece desde la misma posición. De acuerdo, genial. Por lo que ahora necesitamos agregar nuestros botones. Entonces para eso, voy a dibujar un rectángulo aquí y nuestro botón aquí. Entonces lo voy a poner 20 aquí. Pongámoslo en 90. Y luego le voy a dar nuestro color de fondo a éste, tal vez este color. Entonces tenemos éste y ahora necesito poner nuestro texto aquí y el centro llamado apunte. Y lo voy a sumar aquí y el centro. Muy bien. Por lo que parece, se ve bien ahora, pero aun así quiero tener un poco más de diseño aquí. Entonces lo que voy a hacer aquí, voy a seleccionar la Herramienta Elipse aquí. Y voy a añadir este tipo de elipse aquí. Y déjame mostrarte qué es exactamente lo que quiero agregar aquí. Quiero agregar aquí varios colores y el sitio. Entonces vamos a darle un color. Sólo un color al azar, este. Y ahora aquí está nuestra configuración. Esta están configuradas este marco, así que lo voy a poner dentro del marco. Por lo que ahora podemos ver este tipo de forma. Entonces voy a dibujar uno más aquí. De esta manera. Podemos agregar tantas como quieras y podemos apenas como dos ratones más adelante. Entonces ahora le voy a dar un, otro color a éste. A lo mejor este color. Pero de nuevo, necesito ponerlo dentro de este marco. Ahora, se verá así, pero no me gustó este color. Entonces lo que quiero hacer, Probemos un color diferente. Ahora. Se verá así. Se ve mejor que la anterior. Ahora sí tenemos estos dos diseños aquí en la esquina y la esquina lateral derecha. ¿ Y qué más podemos hacer? Déjame arrastrarlo de esta manera. A lo mejor podemos agregar un poco más de diseño aquí si quieres. De acuerdo, intentemos agregar un rectángulo aquí. De acuerdo, entonces dibujemos un rectángulo fuera de éste y le demos 90 píxeles y agreguemos un color a este rectángulo. Este rectángulo y este color. De acuerdo, así que ahora solo puedo arrastrar este rectángulo y esto, solo puedo rotar este rectángulo esta manera y ponerlo dentro de éste. Entonces lo que voy a hacer, voy a añadir un gradiente lineal a este y cambiar el color y de esta manera. Y tenemos ahora a este chef lineal. De acuerdo, entonces ahora ¿qué puedo hacer? Déjame cambiar el color aquí. Ahora, se ve así. Y voy a, voy a duplicar esta para agregar una opción más aquí, para agregar otra opción aquí. Por lo que se ve realmente bonito ahora. Entonces ahora si corro este, debería poder verte uno más. Debería poder ver este marco. Y vamos a ver cómo se ve. Entonces se ve así. Por lo que se ve realmente bien. De acuerdo, así que cuando haga clic en el botón Registrarse, los enviaremos a una página de inicio de sesión. Por lo que tendremos que diseñar una página de inicio de sesión también. Y una cosa más que quiero agregar, quiero agregar un texto aquí. Voy a decir que ya tienen una cuenta. Ya tienes una cuenta, ya tienes una cuenta inicia sesión aquí. Por lo que voy a disminuir este tamaño de fuente a 14 pixeles. No píxel como el tamaño de la fuente. Entonces póngalo aquí como este punto de partida. Ahora puedes ver estas cosas. Ahora, necesitamos duplicar este. Entonces podemos duplicar esta y luego podemos agregar el mismo diseño para nuestra página de inicio de sesión, pero tendremos que hacer algunos cambios aquí. Por lo que voy a dar clic en él. Voy a duplicar este. Y cambia rápidamente el nombre para iniciar sesión en lugar de cerrar sesión. Ahora, aquí, cambia el nombre para iniciar sesión. Entonces no necesitamos tener en ellos cuando el usuario va a iniciar sesión. Entonces lo que quiero hacer, quiero simplemente reorganizar este de esta manera. A partir de este punto de partida. En realidad, podemos deshacer éste de aquí. Déjame deshacer este. Y este es el punto de partida. Y este es el yo sólo voy a quitar esta contraseña aquí y cambiar el nombre a correo electrónico. Y esta va a ser contraseña. Y luego voy a arrastrar este botón para escuchar. De acuerdo, entonces parece que en este apunte, tan rápido cambia el nombre para iniciar sesión. Y necesitamos que sea un grupo. Entonces los voy a hacer un grupo y lo pongo aquí para el inicio de sesión. Y luego voy a arrastrar aquí este texto. Y esta vez puedo decir que no tienes cuenta, pues regístrate. Puedo decir que no tienes cuenta y luego voy a decir inscribirte, cerrar sesión, e iniciar sesión. Todo bien. Entonces ahora todos tenemos sign-off, tenemos inicio de sesión hasta que pueda ejecutarlo de nuevo, debería funcionar. Así que hicimos nuestro registro, diseño de página de inicio de sesión. En la siguiente parte, trataremos de conectar estas dos cosas o usando prototipos. De acuerdo, entonces tenemos esta, vale, así que tenemos que seleccionar esta. Y entonces puedo ejecutarlo. Así que regístrate, inicia sesión en nuestra página principal. Y aquí van ustedes. Entonces esta es la palabra inicio de sesión. Por lo que se ve realmente bonito. De acuerdo, voy a parar este video aquí mismo y seguiremos a partir de la próxima conferencia. Nos vemos en la próxima conferencia. 8. Prototipos con la animación: Bienvenidos de nuevo una vez más. En esta parte, trataremos de agregar nuestro prototipado, pero antes de eso, quiero tener un botón aquí. Y luego quiero iniciar el prototipado como tendremos que hacerlo. Necesito este tipo de diseño aquí para un cierre. Por lo que al hacer clic en este botón, mostramos un desplegable para tener mucho cierre de sesión. Y luego nosotros desde el logout, los enviamos a la página de inicio de sesión. Y a partir de ahí podemos hacer todo este prototipado. Entonces agreguemos un marco aquí. Uno es el marco de tamaño pequeño aquí. Entonces voy a dar el nombre aquí, logout. De acuerdo, así que ahora este es nuestro marco de cierre de sesión. Le voy a dar un radio fronterizo. Y aquí voy a diseñar nuestro botón aquí. Entonces voy a agregar un rectángulo aquí. Voy a dibujar un rectángulo aquí. Y luego aquí voy a agregar, le voy a dar 90 y después ponerle un color rojo. Y aquí quiero agregar el texto aquí. Entonces el texto va a ser lockout. Voy a decir cerrar sesión y poner este texto en el centro. Entonces ahora tenemos este marco de logout y luego tenemos este. Entonces cuando el usuario haga clic aquí, así que agreguemos un ícono aquí. Por lo que voy a agregar un icono de filtro. Voy a decir flecha. Yo estaba buscando en este tipo de icono con la flecha uno, este. Entonces voy a arrastrar este icono aquí, aquí mismo. Y voy a poner este color a color blanco. ¿ De acuerdo? Entonces, ¿dónde está este icono? Este icono ahora es iniciar sesión, cerrar sesión. De acuerdo, así que ya hemos visto dentro del marco. Déjame comprobarlo. Entonces aquí vamos. Tenemos este ícono. Entonces cuando hacemos clic en este ícono, mostramos estos fotogramas de cierre de sesión como de la misma manera que hicimos de la misma manera que hicimos para este. Entonces para eso, lo que voy a dar clic en el prototipado, haga clic en este icono. Y luego en interacciones aquí, y haga clic en él. Al hacer clic, queremos tener, y luego queremos tener nuestra superposición abierta. Y este término, queremos mostrar nuestro marco de cierre de sesión. Y cómo queremos mostrar. No queremos tener cuando la pérdida de usuarios, al hacer clic afuera, necesitamos este. Entonces en lugar de centrar esta vez, queremos hacerlo manualmente. Por lo que queremos demostrarlo. Nosotros lo queremos poner aquí mismo. Nosotros queremos ponerlo justo aquí mismo. Pero antes de eso, déjenme darle un color de fondo. De lo contrario, no va a ser visible. No podemos el rojo, como el color que usamos. Aquí. Creo que éste no se va a quedar bien. Para que podamos elegir este color, creo. O qué código de color tenemos para éste. Voy a copiar este, este código de color, y después lo voy a poner aquí. Y aquí van ustedes. Entonces este va a ser nuestro logout, o podemos hacer una cosa más. Podemos mantenerlo blanco. Y entonces podemos agregar una sombra aquí. Mantengamos el blanco y agreguemos efecto. Entonces será visible. Ahora bien, si estamos en el modo prototipo, entonces tenemos esta sombra aquí y queremos tenerla instantánea en lugar de agregar la navegación. ¿De acuerdo? Y en cuanto déjame intentarlo. Así que da clic en él. Haga clic en él. Podemos ver este botón de cierre de sesión. Y como añadí la sombra, podemos ver este logout. Podemos ver esta pequeña sombra aquí. Pero si lo deseas, también puedes elegir este color de fondo. Creo que sería bueno que usáramos este color de fondo. Entonces por lo tanto, voy a cambiar de nuevo el color de fondo a este código de color que tenemos. De acuerdo, lo hice en el lugar equivocado. Por lo que necesitamos cambiar el código de color. Aquí. Y ahora si vengo aquí, puedo ver este. Haga clic en nuestro sitio, va. Por lo que ahora otra vez, volvamos a este prototipo. Y aquí, cuando el usuario haga clic en el botón, queremos cerrar nuestro modelo. Entonces haga clic en esta indirección y esta vez haga clic en Cerrar superposición, y haga clic en ella. Da clic en este botón de cerrar sesión y se ha ido. ¿ De acuerdo? Entonces, en lugar de garras aquí, cuando haga doble clic en el botón de cierre de sesión de bloqueo, las enviaremos al marco de inicio de sesión. Entonces voy a sacar esta de aquí. Entonces en lugar de superposición de brillo, ahora esta vez queremos movernos para navegar a donde queremos navegar. Queremos navegar a los pares de inicio de sesión. De acuerdo, en la asignación de pares en lugar de instantánea, quiero tener animación morphing de esta manera. Y vamos a ver ahora qué tenemos Glick otro bloqueo. Y ya estamos adentro. Ahora estamos en este ritmo de fichaje. Estamos en pares de inicio de sesión. Y a partir de firmar paga, cuando el usuario haga clic en el ritmo de inicio de sesión, los enviaremos a nuestra página principal. Entonces lo que hice aquí no se confunde. Al dar clic en este botón, se abrirá éste. Y cuando haces clic en el botón Iniciar sesión, acabo de agregar botón de inicio de sesión onclick navegar a, en lugar de superposición de garras, navegar para navegar. Dos significa que queremos pasar a un nuevo marco o a un nuevo ritmo, lo que tú quieras decir. Así que da clic en el sobrino, llegar a partir de ahí. ¿De quién es amigos? Es decir, de navegar desde logout hasta quién es frame. Tú quieres ir, yo quiero ir a la página de inicio de sesión. Y aquí tendrás opción de agregar tu animación. Por ejemplo, he seleccionado morfina y él va a venir del lado izquierdo si quieres. Se puede hacer con lado derecho, arriba, abajo. Y aquí también puedes agregar facilidad fácil dentro y fuera presupuesto de disfraces, o tienen muchas funcionalidades aquí. Simplemente puedes hacerlo. Ahora tan pronto como el usuario haga clic en la página de inicio de sesión, el botón de inicio de sesión aquí. Los enviaremos a la página principal. Así que vuelve a dar clic en esta indirección. Aquí. Onclick, navega a, navega a donde, navega a nuestra página de inicio. Y aquí en vez de instantánea, quiero tener animación morphing. Entonces ahora si hago clic en el inicio de sesión, estoy en estas páginas de inicio. De nuevo, haga clic en este botón de cierre de sesión. Estoy en la página de inicio de sesión. Haga clic en la página de inicio de sesión. Estoy en el inicio de sesión. Sí, se va a trabajar solo. También va a funcionar aquí. Muy bien. Cierra sesión aquí y estamos en la página de inicio de sesión . Haga clic en el inicio de sesión. Estamos en esto estamos en esta página principal aquí tenemos otra cosa. No tengo una cuenta regístrate, así que cuando no tengas ninguna cuenta, deberíamos enviarlas al ritmo de inscripción. Entonces selecciona este y agrega la indirección aquí. Y desde aquí, selecciona ninguno para navegar a donde quieres enviar base de inscripción. Y aquí en lugar de instancia, puedes decir mover en esta animación o simplemente puedes elegir ésta solo por un ejemplo. De acuerdo, así que ahora da clic aquí, cierre sesión. No tienes cuenta regístrate aquí. Entonces aquí está el botón de registro. Y desde el botón de registro, necesitamos enviarlos a la página de inicio de sesión. De acuerdo, Entonces si tienen éxito es firmar aquí, luego después de la firma de la escuela de futbol, los enviaremos a la página de inicio de sesión, a la página de inicio de sesión para iniciar sesión. Por lo que voy a seleccionar para navegar a nuestro ritmo de inicio de sesión. Y en lugar de instancia aquí, queremos enviarlo a la mudanza. Y entonces podemos seleccionar esta animación. Ahora, cierre la sesión, sin llevar página de inicio de sesión. Los pares de asignación estaban en la aplicación principal desde el cierre aquí. Por lo que aquí ya tienen una cuenta de inicio de sesión. Necesito agregar también este prototipado. Entonces, si aún no tienes una cuenta, entonces te la enviaremos a la página de inicio de sesión. Entonces agrega esta indirección aquí, da clic en ella. Onclick, navega a. Esta vez va a estar firmando. En lugar de instancia. Agreguemos una dimensión inteligente como este tipo de cosas. En lugar de facilidad de entrada y salida, voy a decir gentil saber ya tienen un inicio de sesión de cuenta. Se ve así. Firmar, registrarse, iniciar sesión, iniciar sesión. Entonces, si solo inicias sesión con éxito, entonces cierra la sesión. De acuerdo. Entonces a partir de este, quiero tener diferente pierna emocional moviéndose del lado izquierdo para anotar este modelo uno. Entonces vamos a dar clic en esto. Tenemos éste. Pasta de inicio de sesión. No tienes cuenta regístrate aquí. No tienes una cuenta ya tienes una cuenta. El pago de inicio de sesión ya tiene una página de inicio de sesión de cuenta y de pares de inicio de sesión. Así que al hacer clic en el botón de inicio de sesión, quiero cambiar la animación. Entonces cuando vayan a la casa aquí, Seleccionemos esta pequeña animación. Nota aquí, como aquí, selecciona una pequeña animación. Y en lugar de fácil Nota, Establecer suave. A ver cómo se ve. Así que cierra sesión, y luego haz clic en el inicio de sesión. Entonces se ve así. Por lo que se ve bien. Voy a dar clic en él. Entonces se va a ver así. Entonces esta es nuestra página de inicio y tenemos esto se llama funcionalidades también. sesión. Y tenemos esta animación. O vamos a seleccionar el Rápido de lo que parece. Bloquear el econ it. Y entonces tenemos esto mostrado. Pero esto no es lo que yo, que estaba esperando. Entonces voy a seleccionar el deslizamiento. Voy a bloquearlo y dar clic en el inicio de sesión. Por lo que se ve bien. Y todo es totalmente funcional. Espero que hayas aprendido mucho de este curso. Y esta también va a trabajar con esto, estas cosas, estas también están trabajando sign-off. Todos no tienen cuenta. Ya, ten cuenta. Está funcionando perfectamente. Creo que aquí hay una pequeña solución, así que creo que no tengo necesito corregir la gramática aquí. Entonces no tengas una cuenta ya, ten un inicio de sesión de cuenta aquí. Muy bien, genial. Entonces todo está bien. Nuestra aplicación está funcionando completamente funcional. Simplemente podemos llamarlo, tenemos este sistema de mensajes, tenemos esta funcionalidades de inicio de sesión e inicio de sesión y cierre de sesión todo está funcionando perfectamente. Espero que hayan disfrutado. 9. Comparte y exporta nuestro diseño: Bienvenidos de nuevo una vez más. En esta parte, vamos a exportar nuestros diseños. Hasta ahora hemos diseñado nuestra aplicación, hicimos prototipos, y todo está funcionando funcional, completamente funcional ahora es el momento de aprender cómo podemos compartir nuestro proyecto con un equipo y cómo podemos exportar nuestro proyecto? Esmuy importante. Entonces primero, déjame discutirte. ¿ Cómo puedes compartir este archivo con los miembros de tu equipo? Por lo que ahora puedes ver que en el lado derecho habrá un botón llamado botón Compartir. Aquí mismo, puedes agregar la dirección de correo electrónico. Y entonces aquí también se puede seleccionar el candidato a rol o puede ver. Si seleccionas, puedes editar, entonces toda la dirección de correo electrónico que pondrás aquí, tendrán una opción para comer e incluso simplemente dar clic en ella se pueden ver. Entonces sólo tendrán opción de verlo aquí. Y aquí también se puede agregar condición solo las personas invitadas a este archivo de enlace o cualquier persona con el enlace. Por lo que si compartes, si compartes el enlace, entonces cualquiera podrá acceder a tu archivo. Pero si seleccionas solo a las personas invitadas a este archivo, quiero decir, el alumno, ingresarás usando solo correo electrónico. Tendrán opción de acceder a tu diseño. Entonces por ahora, basta con dar clic en cualquiera que tenga el enlace aquí. Solo necesitarías ponerlo aquí y luego puedes hacerlo aquí. Se puede ver ese enlace de copia. Por lo que voy a dar clic en el enlace Copiar. Y ahora voy a abrir un nuevo navegador aquí. El navegador privado donde no estoy conectado a mi Figma. Ahora aquí, debería poder ver todo el diseño, ¿de acuerdo? Y no podré editarlo. Se puede ver que me está pidiendo que inicie sesión, pero aún así puedo acceder a todo el diseño aquí. Por lo que este es marco hacia abajo no deseado. Así que tenemos este marco de registro, marco inicio de sesión, y este mainframe aquí. Entonces tengo esta opción, pero no podré hacer ningún cambio aquí. Esto es muy importante. Entonces no podré hacer ningún cambio aquí porque aquí no tengo ningún exceso. Y aquí, puedo ver este inicio de sesión de prototipos, firmar, y esta es nuestra página de inicio. Déjame mostrarlo en pantalla completa. Y hago clic en él. Cerrar sesión, Cerrar sesión, registrarse, iniciar sesión. Todo está funcionando completamente funcional. Y no tengas cuenta. Haga clic en el botón Registrarse. sesión. Ya tienes una cuenta. Todo está funcionando plenamente, está funcionando. Por lo que después de trabajar para completar tu proyecto, tendrás que compartir tu archivo con los miembros del equipo. Tal vez estás trabajando en un equipo de desarrollo, entonces el miembro de tu equipo va a seguir tus diseños a este enlace, ok, así es como puedes compartir tu enlace, tu enlace de proyecto, con tu equipo miembros o cualquier persona en si desea dar acceso al correo electrónico que sólo tiene que poner el correo electrónico y hacer clic en el botón. Esta es la forma de compartir tu proyecto. Y hay otra cosa. Seleccionemos éste aquí si quiero. De acuerdo, así que aquí se puede ver otro llamado inspeccionar. En el Inspeccionar, normalmente se ve todo el diseño, todo el layout, toda la pata ellos, la distancia, el escondite y código blanco y de color que has utilizado. Estos son una especie de propiedad CSS. El miembro de tu equipo también va a venir a buscar ayuda de este. Entonces solo necesitan hacer inspeccionar uno, por ejemplo, si selecciono éste, y aquí puedo ver el blanco de este rectángulo en particular es de 493 píxeles de alto, código de borde del radio superior izquierdo. Y estas son la propiedad all CSS. Por lo que los miembros de tu equipo pueden simplemente copiar este código y luego simplemente pueden usarlo en su aplicación web. Entonces así es como puedes inspeccionar este. ¿ De acuerdo? Entonces este es el beneficio de éste. Aquí puedes ver en el código CSS para este ítem. Ahora, exportemos nuestro diseño. Entonces este es nuestro marco. Ahora ven al click sobre el diseño y en la parte inferior podrás ver opción Exportar. Haga clic en él. Y aquí puedes ver el formato que deseas. Necesita formato PNG, formato JPEG o como formato ocupado o formato PDF. Seleccionemos el formato JPEG y pulsemos sobre eso. Aquí. Simplemente puedes poner cuantos quieras. Por lo que solo quiero uno y da click en esta casa de exportación. Y se ha descargado. Déjame hacer clic en él. Y aquí van ustedes. Este es nuestro diseño. Por lo que ahora podemos exportar nuestro diseño. Ahora quiero exportar, quiero, también quería exportar esta base de inscripción. Voy a seleccionar el cierre de sesión. Haga clic en esta Exportación, haga clic en JPEG. Y aquí vamos. Tenemos estos pares de registro. Es así como podemos exportar. Ahora, seleccione en estos pares de inicio de sesión y haga clic en esta exportación. Haga clic en este JPG y exporte un inicio de sesión. Si hago clic en el inicio de sesión, entonces aquí vamos. Tenemos este letrero en parejas. Así que has aprendido a exportar el registro, el inicio sesión y la base de inicio. Entonces esto es de esta manera, solo puedes exportar tus todos y cada uno de los fotogramas. Estos también son marco independiente. Por lo que también puedes, si quieres, también puedes exportar estos pequeños déjame exportar uno para ti. Da clic en él y ya ha completado la descarga. Estees nuestro marco. De acuerdo, así que estas son las pocas cosas que quería mostrarte. Entonces espero que les haya gustado.