Aplicación web de reproductor de música Figma Cómo diseñar una aplicación web completa

1. INTRODUCCIÓN: Bienvenido a este curso de diseño figma UI UX. Mi nombre es sí entonces cada fila tres y Albert instructor en este curso. En el curso Figma, vas a aprender a diseñar una aplicación web completa. Eres un diseño UX UI de una completa extrañarla clara aplicación web en este curso, echemos un vistazo ese proyecto que vas a diseñar en este curso. Entonces este es el diseño bancario de nuestra app web que vas a decidir en este curso. Se puede ver que tenemos nuestra bonita barra lateral. Entonces vas a aprender a aguantar diferentes graffiti Kw. Y luego aquí tenemos nuestra bonita sección, y luego después de eso tendremos nuestra sección de artículos mágicos. Y ahora si hago click en este ícono plus y luego podré ver esta bonita caja modelo. Y si hago clic afuera, se va a eliminar. Y si hacemos click en el ciclo cerrado, se va a eliminar aquí. Si bien diseñarás esta una app web, tú o UX, también vas a aprender a trabajar con el retipado, cómo hacer prototipo. Y puede agregar un tipo diferente de animación aquí. Hice todo lo posible para explicar todas y cada una de las partes de esta app que vas, vas a aprender de esta práctica, este componente de técnica, diferente tipo de ayuda a organizar tu proyecto para hacer muchas cosas más. Por ello, te aconsejaría encarecidamente que disfrutes de este curso. 2. Diseño de Sidebar: Bienvenido a este video. En esta parte, vamos a empezar a diseñar nuestra app de reproductor de audio. Entonces esta es la app básica que vamos a diseñar. Entonces, ante todo, voy a abrir nuestro nuevo fichero de diseño y Figma. Por lo que da clic en este nuevo archivo de diseño. Y voy a hacerlo y dispuesto a reunirme con el reproductor de audio de archivos de audio. Puedes darle cualquier nombre. Muy bien, por lo que ahora ante todo, necesitamos agregar un marco aquí. Por lo que voy a seleccionar este marco y luego este mazo parará 1440 y luego 24. Voy a seleccionar éste. Si quieres. También puedes cambiar el nombre, pero está bien. Vamos a tener sólo uno. Déjame cambiarlo. Podemos decir éste. Muy bien, entonces en nuestro diseño, tenemos la barra lateral, tenemos esta lista de álbumes, y luego tenemos esta lista de reproductor de música. Tan rápido, déjame dibujar este 1 primero y luego puedo hacerlo, vale, un momento. Entonces voy a tomar ayuda de este rectángulo y voy a dibujar este diseño. Debe ser exactamente de esta manera. Y aquí vamos. Entonces tenemos este diseño. Y ahora podemos agregar un color para éste. Entonces tenemos este tipo de color aquí. Entonces déjame cambiar el color. Y en realidad puedo copiar el color de este archivo. Nuevamente, copia este color que ya he creado. Entonces, ¿qué puedo hacer? Puedo abrir el diseño anterior que ya hice. Cualquier cosa. Éste está aquí. O si lo deseas, puedes elegir cualquier color, lo que quieras. Pero me gusta ese color. Hay una razón por la que voy a copiar este color de mi diseño anterior. Y el código de color va a ser. Entonces este es el código de color de este artículo. Voy a copiar este código de color y voy, voy a hacer que sea diseño de placa de color. Entonces, ¿qué puedo hacer? Puedo crear, puedo crear nuestro color se dice aquí. Así que vamos a llamarlo Sidebar Color. Y luego crea un estilo. Pero tenemos que cambiar este código de color a este código de color. Ahora se ve exactamente lo mismo que tenemos aquí en este momento. Y otro código de color que quiero copiar desde aquí, que va a ser este curso de color. Voy a copiar este código de color desde aquí y voy a crear otro color y estilo para este artículo, y luego lo usaremos más adelante. Entonces lo voy a llamar , voy a decir, Oh, música, jugar a la carta y crear un estilo aquí. Y luego aquí, voy a cambiar el color a este color. Pero no te preocupes, podemos, podemos seleccionar este color aquí. Pero, ¿qué pasó aquí? Este es nuestro color de la barra lateral. De acuerdo, entonces hicimos algún error aquí, o tenemos que cambiarlo. Entonces este sitio por color, y este es el color de la música. Entonces para el color de la música, vamos a azar éste, que va a ser así. Y para el color de la barra lateral, tenemos que cambiarlo a este color, que es este color. Voy a copiarlo. Y luego a partir de aquí, voy a cambiarlo a este color. Ahora podemos usarlo fácilmente ya sea éste o éste. Si selecciono este artículo a este color, va a seleccionar éste, pero va a seleccionar éste, pero necesitamos en este ítem aquí. Muy bien, así que ahora podemos añadir este marco aquí. Podemos añadir este diseño aquí. Tenemos esto, tenemos este EMS y luego lista de ítem para eso. Rápido, déjame dibujar nuestro círculo. Entonces vamos a tomar la mitad de esta herramienta de elipse aquí. Y luego voy a dibujar esta herramienta elipse y hacerla misma endurecida y blanca para que luzca círculo. Y antes de eso, déjame ejecutarlo para que podamos saber cómo se ve en dispositivo real. Y se ve así. Voy a quitar este ícono aquí. Se ve así. Y voy a aumentar un poquito más lo salvaje. Y entonces aquí lo voy a sumar al centro. Y entonces qué puedo hacer? Simplemente puedo añadir un derrame cerebral aquí y esta charla va a ser tres. Y luego voy a cambiar el color del trazo a color blanco. Y aquí vamos a colocar nuestra imagen aquí. Por lo que voy a hacer click en este lugar EMS. Y luego voy a seleccionar, y voy a seleccionar esta imagen. Aquí tienes. Entonces se va a sumar la MS Y entonces si yo, ahora tenemos esta aquí. Si hago clic en él. Vale, entonces por alguna razón no funcionó. De acuerdo, tan furiosa nuestra imagen. Y ahora debería poder ver esta imagen aquí. Ahora tenemos nuestro texto aquí para que podamos decir que el nombre va a ser Zhan do. Y lo vamos a colocar en el centro. Y dos chance style font size, voy a seleccionarlo a 20. Y si lo desea, entonces definitivamente puede agregar un estilo diferente. No se va a quedar bien aquí. Se puede elegir esto o puedes elegir cualquier otro diseño, lo que quieras. Voy a seleccionar. Tal vez podamos quedarnos con éste. Y luego después de eso, lo que tenemos, después de eso, tenemos estos dos ítems, música menos nuestro cálido favorito y luego el bloqueo. Entonces, lo que voy a hacer, voy a añadir un texto aquí y voy a decir lista de música. Y para este 1 primero necesito cambiar el estilo de texto. Vamos a cambiarlo a éste. Puedes elegir cualquier lista y eres cualquier estilo de texto que te guste. Eso no es un problema, así que podemos mantenerlo, puedes iniciarlo desde aquí. Y luego después de eso, vamos a tomar la mitad de este plugin. Así ícono de filtro y ya he instalado este plug-in llamado iconos de alimentador. Si no tienes éste, solo puedes instalarlo desde la comunidad de plugins. Y luego voy a decir, voy a tomar este ícono aquí. Entonces éste se encuentra ahora fuera del marco principal, principal. Entonces esa es la razón por la que voy a ponerlo aquí. Y ahora está aquí. Y lo voy a poner exactamente aquí. Y ahora sólo puedo cambiar el color a blanco. Entonces, ¿qué puedo hacer ahora? Y solo necesitamos tener esto o no, hazlo, no hagas éste. Necesitamos esta lista musical y esta, esta no esta elipse, necesitamos esta lista de música y esta de aquí. Y luego, está bien, así que ya está ahí. Entonces, ¿qué podemos hacer ahora? Básicamente, podemos hacer un groove para estos dos artículos. Y otra cosa es que rápido, déjame hacerlo grupal. Voy a llamarlo comando Z. y obviamente crecimiento, voy a renombrar el nombre del grupo. Estoy presionando Command Control R y el teclado. Pero también puedes hacer clic derecho y puedes cambiarle el nombre. Y voy a decir elemento de la barra lateral. Y ahora tenemos que cambiar el estilo, tamaño de fuente de éste. No necesitamos tener este tamaño de fuente más grande. Entonces, ¿qué puedo hacer? Podemos hacerlo aquí. ¿ Por qué no se muestra? Por lo que tenemos que elegir estos dos. Y luego en lugar de 16, en lugar de 20, voy a seleccionarlo a 16. Ahora, veamos cómo se ve. Se ve bien, pero ¿qué podemos hacer ahora? Podemos 60 está bien. Se ve bien. No hay problema. Pero solo quería saber que si es del mismo tamaño, bien, así que está en la misma línea. Genial. Ahora podemos duplicar nuestro grupo. Entonces, ¿qué puedo hacer? Voy a presionar el Comando D para hacer un duplicado. Y lo voy a añadir aquí de esta manera. Entonces voy a presionar el Comando D. Creo que tenemos tres ítems. Uno es L1, entonces favorito. Entonces voy a añadir el nombre que va a ser álbum aquí. Álbum. ¿Y entonces qué más tenemos? Tenemos nuestro favorito. Y entonces qué puedo hacer aquí? Voy a escribir tela. Por lo que siempre es una buena idea hacer todo se agrupe para que puedas duplicar el mismo diseño. Ahora podemos ver que tenemos algún tipo de diseño y exactamente desde la misma posición que viene. Y sí, pero esta cosa es ahora creo que necesito ajustarla porque no va a empezar desde el centro porque este campo, pero el texto es un poco más largo. Ahora está en la misma posición. Muy bien, así que ahora en el fondo tenemos un campo más llamado. Tenemos un campo más llamado. Ok, entonces otra cosa es que voy a ajustar nuestro marco porque la altura del marco es realmente grande. Entonces voy a sumar un poquito para que tengamos este mismo diseño. De acuerdo, Así que ahora en la parte inferior tenemos una opción llamada, también podemos agregar solo esta. Con éste. Ahora tenemos otra opción llamada bloqueo. Así que voy a dibujar un rectángulo aquí. Voy a dibujar un rectángulo aquí. Y entonces lo que voy a hacer, voy a hacer un derrame cerebral aquí y aquí. A partir de aquí, puedes definir desde donde quieres un derrame cerebral. Quieres el trazo desde todos los lados, o la parte superior o inferior o la izquierda. Por lo que actualmente nuestro trazo será de todos los lados, pero quiero tener un trazo solo desde la parte superior. Y hay una razón por la que voy a seleccionar este top. Y también quiero este estilo de trazo. En lugar de sólido, voy a agregarlo al guión. Y entonces ahora ¿qué podemos hacer? Podemos cambiar éste. Entonces, ¿cómo puedo cambiar este color? Entonces necesitamos el mismo diseño, pero por suerte, ya tenemos nuestro color que creamos. Nuestro color sigue. Entonces este es el beneficio de usar el color es decir que no necesitas copiar el código de color una y otra vez. Creas tu color es decirles que solo lo reutilizas. Ahora, tenemos estas cosas coloreadas. Otra cosa que necesitamos hacer cambios aquí, necesitamos cambiar nuestro color de trazo a blanco. Ahora se ve bien. Ahora aquí podemos poner nuestro ícono y el botón de logout. Entonces otra cosa que recuerdas aquí, tenemos la barra lateral, tenemos ésta, y nos hemos desalentado tan rápido, déjame cambiar el nombre de éste. Podemos decir guardia de bloqueo. Y aquí vamos a añadir nuestro ícono. Así que voy a seleccionar ícono, salir. Podrían tener un ícono de cerrar sesión, que va a ser este ícono. Voy a primero sólo para ponerlo dentro de la casa. Y entonces lo voy a llevar hasta aquí. Y podemos cambiar la altura y el peso a 35 por 35, luego cambiar el color a blanco. Entonces ya tenemos aquí. Déjame revisarlo, cómo se ve. Se ve bien. Pero también podemos haber comenzado desde esta posición porque nuestro ítem es de esta posición. Por lo que ahora tiene la misma posición. Y aquí podemos agregar un texto y podemos decir que logout. Cerrar sesión. Ahora tenemos este ítem y déjame ajustar éste. O podemos ajustarlo. Podemos abordarlo de esta manera. Por lo que ahora tenemos que presionar, necesitamos convertirlos en un grupo. Entonces nuestra Tarjeta Rectángulo, nuestro icono de bloqueo y el texto de cerrar sesión. Y lo voy a hacer grupo. Puedo decir cerrar sesión. Muy bien, entonces tenemos este diseño. Hasta ahora hicimos un muy buen diseño para nuestra barra lateral. Y en la siguiente parte comenzaremos a trabajar por el resto de la parte. Voy a detener este video aquí mismo. Nos vemos en la próxima conferencia. Adiós. 3. Diseño de lista de álbumes: Bienvenido a esta conferencia. En esta parte, comenzaremos a diseñar nuestra lista de discos. Entonces para eso, ante todo, voy a crear así que tenemos aquí esta lista de ítem. De acuerdo, tan rápido, déjame agregar este sistema de cuadrícula. Entonces lay-out grid, voy a agregar, así que en lugar de esta cuadrícula, voy a cambiarla a seis y luego cambiar nuestra cuadrícula a la columna R nada a seis. Por lo que necesitamos tener 1815. Todo lo que necesitas para tener tres. Necesitamos tener 1515 va a ser bueno. Entonces estos son nuestro sistema de red. Y a partir de aquí podemos identificarnos fácilmente a partir de esta parte, comenzaremos a diseñar nuestra tarjeta o todo. Entonces vamos a empezar a trabajar desde, ya sea desde aquí o desde aquí. Creo que se verá bien. Y seguiremos a éste. Y vamos a conseguir, vamos a tener este espacio, o podemos empezar desde aquí, desde esta línea y vamos a mantener este espacio. De acuerdo, tan rápido tenemos un texto aquí. Por lo que voy a añadir un texto aquí. Voy a decir lista de álbumes, lista vm. Entonces la lista de Adelman va a estar aquí. Y voy a cambiar el estilo del texto, no en éste. A lo mejor podemos darle a éste o algo audaz. Tiene casi el mismo diseño. Y no éste. Ni siquiera entiendo este texto. Tiene este término matemático. Esto no es un punto. A lo mejor podemos dar esta lista de discos. Y esta alumnus a la que vamos a llevar aquí. Y después de eso tenemos nuestra tarjeta rectángulo. Entonces voy a sacar la carta desde aquí a esta carta. Y tenemos un poco de radio fronterizo aquí. Así que voy a quedármela cinco. Y entonces tenemos este descarte ahora. Así que ahora creo que es muy grande, talla más grande. Vamos a hacerlo un poquito. Y encima de ésta, necesitamos otra tarjeta. Así que voy a, lo que voy a hacer, voy a duplicar esta tarjeta aquí. Y voy a hacerlo de menor tamaño. Entonces puedo agregarlo con éste para que consigamos exactamente lo mismo. De acuerdo, así que ahora tenemos descartar. Permítanme añadir, permítanme cambiar el color de fondo para que podamos entender. Entonces tenemos ahora otra tarjeta, pero debería estar en el mismo liberal ahora. De acuerdo, entonces yo, lo que quiero decir con eso, debimos haber empezado desde este lado. Se va a quedar así. Ahora tenemos éste. Ahora podemos aumentar el tamaño de éste y se va a quedar así. Muy bien, así que ahora tenemos esta tarjeta, tenemos esta tarjeta. Tan rápido. Permítanme cambiar el color de fondo de éste. Voy a cambiar el color de fondo de este artículo va a ser blanco. Entonces tenemos que añadir un efecto aquí. Ahora, se va a quedar genial. Por lo que tenemos esta tarjeta, tenemos esta tarjeta rectángulo y esta tarjeta está aquí. Entonces después de eso, vamos a tener que derecho? Puedo cambiar el color aquí, tal vez este color y voy a añadir un texto aquí. Va a ser r, l. No enumeren. Y podemos decir música pop. Y voy a mantener el mismo tamaño de fuente que estoy usando. Ambas músicas. Y aquí vamos a tener otro texto que voy a empezar desde aquí, desde esta línea. Y voy a decir 20 canciones. Que voy a decir 20 canciones. Por lo que ahora se ve realmente bonito. Entonces, ¿qué podemos, qué más podemos hacer aquí? Podemos añadir el icono 01 más aquí, que va a ser ícono de música. Entonces, ¿qué puedo, cómo puedo añadir éste? Voy a abrir el plug-in de este alimentador iconos. Y aquí voy a sars music, así que voy a arrastrar, voy a llevar éste aquí. Y voy a arrastrarlo aquí. Voy a sostenerlo aquí. Y ahora se ve muy bien tenemos esta música. Entonces, lo que voy a hacer ahora voy a hacer de grupo cada cosa por esta tarjeta. Entonces hacerlos en grupo y renombrar el grupo es, y podemos decirlo. ¿ Qué podemos decir? Podemos decir, podemos decir lista de discos, L bum, objeto vago aquí. Así que l un artículo. Entonces tenemos descarte, así que ahora podemos hacer múltiples cartas. Entonces voy a presionar el Comando D y vamos a hacerlo de esta manera. Y voy a presionar Control D para controlar el. Por lo que no necesitaremos esta tarjeta aquí porque vamos a tener añadir más tarjeta aquí, así que voy a quitar este artículo. Entonces otra cosa es que, así que digamos que lo voy a añadir de esta manera. De acuerdo, entonces ahora cómo organizarás éste. Para organizar éste, puedes simplemente lo que quiero decir por organizado, quiero decir que me gustará digamos que tienes como puedes ver que hay esta Honda tiene esto y esto tiene la misma distancia de estos artículos, pero éste tiene una distancia vigorosa y mayor. En ese caso, podemos utilizar este modelo que se muestra aquí. Se puede ver ordenado. Entonces lo que este nos ordena, voy a hacer por nosotros va a organizar nuestro carrito. Y nos va a dar el mismo peso y altura y el mismo espacio de todas y cada una de las cartas. Ya se puede ver tenemos este 19 y tenemos este 19 de aquí. Y luego voy a, para esta tarjeta, voy a tener que hacerlo en horizontalmente, como que sea solo un topo. Ahora, si quiero, simplemente puedo simplemente hacer cambios de éste. Así que de nuevo, voy a seleccionar éste. Y si presiono esto ordenado para que no tengamos ningún tema aquí. Si es visible, significa que sus datos ya están. Tiene la misma distancia que se puede ver en 1990. Y ahora, si quiero cambiar la distancia, simplemente puedo hacerlo y se va a ajustar automáticamente para mí. Ahora, tenemos la misma distancia, 111111111. Entonces, lo que voy a hacer, lo voy a mantener así. Voy a darle 14. Ahora cómo se ve. Se ve así. Por lo que voy a hacer un duplicado de este ítem. Tenemos este disco. Tenemos este artículo del álbum. Ahora, voy a llegar a un elemento más y duplicar. Entonces porque necesitamos la misma altura. Y lo voy a mantener 14 por 14. Y ahora no necesitamos tener este texto aquí. Voy a quitar este texto. Voy a eliminar este texto y este ítem. Lo siento, necesito quitar todo esto de aquí. Y también esto, también esta carta superior. Entonces más bien para esto, para este rectángulo, voy a quitar éste también de aquí. Por lo que ahora tenemos esta única tarjeta, y voy a hacer cambios de este diseño. Por lo que necesitamos tener un trazo para estos artículos. Por lo que voy a añadir un trazo aquí. Y necesito guiones, lo siento, necesito necesito en guiones golpe. Así que voy a cambiar el estilo de trazo sólido para guiar. Eso se ve bien ahora. Y ahora si quiero, también puedo cambiar el guión a tres para que consiga más espacio. Y dentro de éste, voy a presionar, voy a ir a, voy a diseñar un plus o simplemente puedo presionar el ícono Plus también va a funcionar. Pero en ese caso, tendré que dar mucho estilo de fuente, tal vez 96 para hacerlo más grande. También podemos hacerlo de esta manera. Por lo que tenemos este ícono de plus aquí. Significa que podemos, vale, así que tenemos que hacerlo en el centro. Quiero decir que no necesitamos tener este radio. Podemos mantenerlo en el centro para que luzca ícono de explosión. Por lo que nuestra lista de discos está lista. Entonces, ¿qué puedo hacer ahora? Puedo cambiar el ojo contiene el color del elemento del álbum. Podemos seleccionar en este color, no este color. Simplemente puedes agregar un poco de color y en base a tu elección, solo estoy seleccionando algún color aleatorio. Y luego a partir de aquí, puedo seleccionar éste. Vale, está bien, así que se ve bien. Entonces, ¿qué puedo hacer ahora? Simplemente puedo decir música rock. Música rock. Simplemente puedes agregar algunos tipos diferentes lista de música o nombre de música. No importa. Estamos aprendiendo cómo podemos diseñarlo, pero el texto puede ser cualquier cosa. Entonces ahora otra cosa, puedo cambiarla a 60. Para éste, puedo cambiarlo a 50, entonces puedo cambiarlo a 70607050 o a la derecha. Perfecto. Entonces conseguimos este diseño y podemos hacerlo más razonable. Creo que hemos terminado por este disco, esta parte aquí necesitamos trabajar una cosa más. Tenemos que sumar nuestra modelo, su amor por esta lista de álbumes de anuncios. Por lo que voy a detener este video aquí mismo y seguiremos con la próxima conferencia. Nos vemos en la próxima conferencia. Adiós. 4. Diseño de diálogos modales y creación de prototipos superpuestos: Bienvenido de nuevo una vez más. En esta parte, vamos a diseñar nuestra caja modelo para esta. Por lo que diseñaremos este tipo de cuadro modelo para crear álbum cuando el usuario haga clic en este botón. Para eso, ante todo, necesitaremos crear un marco. Así que voy a seleccionar un marco aquí y voy a simplemente dibujarlo aquí es en lugar de simplemente seleccionar de, sólo podemos seleccionar en este formulario. De esta manera, voy a llegar a diez a radio. Y vamos a cambiar el nombre de esta familia puede decir modelo de álbum. Entonces vamos a tener éste. Ahora. Podemos hacer esto de esta manera. Por lo que podemos añadir este texto aquí. Voy a añadir crear álbum. Esto es, esto es sólo un texto normal que podemos añadir. Pero si lo desea, puede cambiar la epigrafía, el estilo de fuente. Pero voy a mantener tu sentido de 16. Voy a añadirlo. 14, supongo. Bien, así que pongámoslo en el centro. Y ahora necesitamos diseñar nuestro filtro de entrada, relleno de entrada de diseño. Voy a tomar la mitad de este rectángulo y después podemos diseñarlo de esta manera. Y cambiemos esto a diez. O si lo desea, también podemos dárselo a 20. Y ahora voy a añadir un derrame cerebral aquí, es el golpe va a ser uno. Y para este color de relleno, lo voy a cambiar a blanco. Entonces, ¿qué podemos hacer? Podemos agregar un texto de placeholder dentro de éste. Podemos decir nombre del álbum. Es una especie de texto de placeholder que tenemos aquí. Y a partir de ahí, ¿qué puedo hacer? Puedo añadir aquí un botón más, y puedo añadir 20 aquí. Y ahora hagámoslo del mismo tamaño. Si ves este tamaño proveniente de este tamaño, este ícono, entonces significa que está en el mismo tamaño. Pero aún así, podemos agregar layout, layout grid. Por lo que podemos agregar columna. Columna va a ser cinco. Ahora podemos entender fácilmente si está en el mismo tamaño de nodo. Entonces si es de esta manera, si ves que este signo está apareciendo, entonces significa que lo es, comenzó en el mismo tamaño. También podemos cambiar la altura de este poquito. Muy bien, ahora, ya no necesitamos tener este show de grilla. Entonces voy a hacer la bala. Y ahora voy a añadir color de este grupo. Entonces voy a hacerlo en este color o tal vez este color. Y luego aquí podemos agregar un texto aquí. Por lo que podemos decir Save. Y podemos poner este nombre aquí. De acuerdo, entonces ahora no podremos verlo porque no conectamos éste. Y aquí quiero tener un botón Cerrar para que cuando el usuario haga clic en él, podamos desactivar nuestro diálogo modal. Para eso, de nuevo, simplemente podemos tomar la ayuda de este plug-in. Voy a decir ícono cercano aquí. Voy a empezar. Y tienen este ícono cercano. Podemos seleccionar éste. Y podemos ponerlo aquí. Pero me encantaría aumentar el tamaño en éste. Tal vez este tamaño. Y luego, bien, tan rápido tenemos que ponerlo dentro de este modelo. Y luego podemos sumar sólo un poquito aquí. Creo que vamos a ajustarlo aquí. Genial, se ve muy bien. Pero otra cosa es que necesitamos cambiar nuestros placeholders day font size porque en la prisión, el tamaño de fuente necesitamos un tamaño más pequeño. Podemos seleccionar. Nuestro 2416 sigue siendo más grande, así que voy a decir 12. Creo que para este patrón textos podemos mantenerlo a 20. Aún así, se ve muy bien. Por lo que ahora es el momento de agregar este prototipado para este modelo. Entonces, ¿cómo puedes hacerlo para hacerlo? Tan rápido, rápido en el prototipo. Y cuando el usuario haga clic en este botón, le mostraremos este diálogo modal. Por lo que tenemos estas interacciones ahora da click en ésta. Haga clic aquí. Ahora onclick, está totalmente bien. Entonces en lugar de llegar a la marina, vamos a mostrar medios abiertos o abiertos excesivamente. Vamos a mostrar que el diálogo modal es un poco ser pop-up modal al mismo ritmo. Entonces si hago clic en él, entonces me va a preguntar el destino dónde, qué modelo quiero mostrar nuestro nombre moderno es crear modelo de álbum. Ahora está conectado con éste. Ahora aquí tenemos un par de opciones. ¿ Qué es exactamente? Entonces. Hacerlo antes de eso, probemos qué podemos ver aquí? Entonces ahora tenemos éste y podemos ver este modelo, pero no podemos ver modelado correctamente. Pero normalmente, cuando abrimos un modelo, nuestro fondo es un poco decibelios. ¿ De acuerdo? Otra cosa es que si hago clic en este botón, no se va a desactivar. Si hago clic en, no va y visible. Pero debemos agregar esta funcionalidad es ¿cómo podemos hacerlo? Entonces aquí tenemos una opción que se llama agregar un fondo detrás de superposiciones. Entonces esto es lo que necesitamos. Ahora, podemos cambiarla oración dispersa. Ahora, deberíamos poder ver poco color de fondo que normalmente tenemos. Pero si quieres, si necesitas más color, puedes cambiarlo al 50%. Ahora, podremos ver más fondo gris aquí. Así va a funcionar esto, pero se había ido. Entonces esto es aquí tenemos, acuerdo, así que ahora podemos hacerlo. Pero ahora si hago clic afuera, no va a decibelios, pero normalmente debería desactivarlo cuando hago clic afuera. Para eso, hay otra opción llamada cerrar al limpiar. Entonces si selecciono éste y luego si hago clic en él, solo vas a desactivar se va a hacer doble, se va a hacer doble, pero nuestro ícono no está funcionando. Entonces para eso, lo que tendremos que hacer. Ahora, da clic en este ícono. Aquí. Tenemos que hacer click en las interacciones onclick. Y aquí tenemos ropa apagada y opción. Ahora, no vamos a ninguna parte. Hay una razón por la que no necesitamos seleccionar navegar o abrir superposición. Más bien, tendremos que seleccionar gloss over. Significa que queremos cerrar nuestro diálogo modal. Por lo que ahora podemos ver una superposición cercana. Tenemos éste aquí. Por lo que ahora si hago clic en él, se va a cerrar. Si hago click en, se va a cerrar. Si hago clic en él, se va a cerrar. Vale, entonces ahora otra cosa, tenemos alguna opción de mención también aquí. Entonces aquí tenemos la opción de animación, cómo quieres mostrarla instantáneamente, disolver o mover. Entonces si selecciono en la morfina, y luego aquí tenemos estas opciones. Son, podemos seleccionar éste de difícil si quieres hacerlo. Y también podemos cambiar la altura a 600 MS. Ahora veamos cómo se ve. Puedo ver nuestra caja modal viene de lo duro. Está pasando por lo duro. Entonces en lugar de fácil entrar y salir, sólo podemos hacerlo podemos simplemente hacer que sea adentro. Ahora. Creo que no podremos ver esta cosa. De acuerdo, así que me moveré en una facilidad en. Y aquí tenemos esta esta en 600 metros. Si quieres hacerlo desde el lado izquierdo, puedes seleccionar lado izquierdo, entonces va a venir del lado izquierdo. Se puede ver una voz modal viene de lado izquierdo y va a lado izquierdo. Estas son las opciones que tenemos en nuestra Figma. Si los quieres de abajo y entonces puedes hacerlo. Va a venir de abajo y nuestro fondo está deshabilitado. Esta es la belleza del prototipado figma, así que me gustó mucho. Entonces voy a seleccionar este top en lugar de 34, y luego lo voy a seleccionar a 300. Y veamos cómo se ve. Se ve realmente bonito. Y si hago clic en él, se va a ir. Muy bien, por lo que hemos implementado nuestro prototipado abierto sistema excesivamente. Y voy a detener este video aquí mismo. Continuaremos desde la próxima conferencia. 5. Reproductor de música y diseño de listas: Bienvenido a esta conferencia. En esta parte, trataremos de diseñar nuestro resto de las piezas. Ahora necesitamos diseñar nuestro carrito de música, bien, por lo que sabemos qué parte anterior hasta ahora hemos completado esta caja modelo y se ve realmente bonito. Hicimos un muy buen diseño. Y ahora vamos a tratar de sumar esta parte. Muy bien, entonces para eso, ¿qué podemos hacer? Básicamente ahora pasemos a la parte de diseño. Por lo que ahora vamos a diseñar nuestro carrito rápido. Por lo que tendremos que diseñar nuestra tarjeta desde aquí vamos a estudiar. Entonces voy a tomar ayuda de esta herramienta de rectángulo. Y a partir de aquí, voy a llevar este diseño hasta esta tarjeta. Y debería verse así. Y voy a sumar esto a diez. Veamos cómo se ve esta tarjeta. Por lo que tiene este diseño y tiene este color gris. Eso no es un tema. Por lo que tenemos este diseño de tarjeta y en el mismo tamaño y la misma distancia, lo tenemos. Entonces solo quería saber que si lo hemos agregado, vale, así que tenemos éste en la misma altura y peso. Ahora, necesitamos diseñar nuestra para que podamos hacer, podemos cambiar el nombre de este rectángulo. Podemos renombrar y podemos decir esa tarjeta musical. Ahora, tenemos que añadir nuestro ícono. Entonces para eso, voy a agregar este plugin y luego este relleno iconos. A partir de aquí puedo decir música. Entonces debería poder ver todo el ícono. Por lo que tenemos este ícono de herramienta y luego en el medio tenemos este 1. En primer lugar, voy a llevar éste aquí. Y luego lo voy a llevar dentro de la casa. Y entonces tenemos que cambiar la altura y el blanco sobre éste, tal vez 35 por 35. Ahora puedo, puedo arrastrar éste. Puedo arrastrar esto hasta aquí. Y luego voy a seleccionar este icono. Y de nuevo, tenemos que ponerlo dentro de esta casa. Y también podemos, entonces podemos ponerlo en el centro de éste. Después de eso, necesitamos, podemos tomar éste o también podemos rotar éste. Pero es mejor tomar éste porque ya tienes este ícono en el plug-in. Entonces, si estuvieras diseñando cualquier tipo de web, intentó usar diferentes tipos de taponamiento, hace que tu trabajo rara vez sea fácil. No es necesario diseñar este tipo de ícono una y otra vez. Por lo que solo necesitas usar este para que podamos diseñar tu trabajaré muy rápido. Por lo que de esta manera también puedes entender que si tienes exactamente la misma altura y ancho. Genial, Así que se ve así. Así que primero lo primero, voy a, así que ¿qué puedo hacer ahora? Podemos seleccionar estos tres íconos y luego podremos reproducir este ordenado para que podamos asegurarnos de que tenemos exactamente el mismo cable entre estos tres iconos. Se puede ver que se ajustó. Ahora aquí también podemos ver que tiene la misma altura y ancho y exactamente el mismo espacio entre ambos lados de estos dos. Así que no voy a hacer ningún cambio aquí simplemente les voy a hacer un grupo. Y entonces voy a decir ícono de música aquí. Genial. Ahora tenemos nuestra duración, nombre del álbum y este icono. Entonces para eso, voy a tomar ayuda de esta d herramienta. Entonces voy a poner el texto. Entonces tenemos esto, tenemos esto. Tenemos este tamaño de fuente más grande. Ahora. Así que déjame primero gens ella. Primero. Necesito cambiar el tamaño de fuente de éste a 20, supongo. Y entonces podemos ajustarlo aquí. Y simplemente puedo decir, Steve, 0.56. Y debería comenzar desde aquí. Se ve bien, pero déjame probar si podemos arreglar algunas cosas aquí, debería partir del tamaño para que esté en el centro. No, no está en el centro porque tenemos este ícono es más grande que éste, por lo que debemos mantenerlo desde la línea de fondo. De esta línea. Quiero decir, de esta línea. Ahora se ve bien, pero aún así, no se va a quedar bien aquí. Ahora está en el centro. Por lo que tenemos estas coacciones mostradas aquí y podemos hacer, podemos cambiar el color de la duración. A lo mejor podemos elegir este color y lo arreglaremos más tarde. Pero antes de eso, permítanme intentar agregar aquí un texto más, así que voy a duplicar este texto. Lo siento, no funcionó. Entonces voy a presionar Comando D. Así que sólo necesito seleccionar esta T y luego duplicarlo. Y ahora lo voy a poner exactamente a la misma distancia. A lo mejor aquí, puedo ponerlo. Y aquí voy a decir el nombre de la música. Podemos decir. Vamos a decir música rock, cómo se ve. Entonces se ve así, pero tendremos que cambiar el tamaño de la fuente. No necesitamos tener $0.21. Necesitamos tener 15 tamaño de fuente. Ahora tenemos este diseño. Está bien, genial. Entonces tenemos este flip en tamaño de fuente. Ahora. Creo que podemos cambiarlo a 14. Y entonces podemos mantenerlo de esta manera para que esté en el centro. Está en el centro. Y una cosa más que podemos hacer aquí, podemos agregar nuestro ícono aquí, que va a ser este ícono de música. Voy a revisar este 1. Primero. Pongámoslo en casa y luego arrástrelo aquí. Y podemos, tenemos este 190 a 192 o simplemente podemos r, podemos hacerlo ordenado para que consigamos la misma distancia. ¿ Y qué es éste? Este ícono de música, esta música bellota dentro del ícono de la música. Y luego esta música rock que la duración. Y ahora podemos hacer ordenado. Ahora tenemos la misma distancia. Gol, tenemos la misma distancia ahora. Y ahora voy a cambiar el color de este artículo. Entonces para cambiar el color del texto. Podemos hacerlo de esta manera. Y para éste podemos mantener este ícono. Pero otra cosa que podemos hacer es aquí. Por lo que ahora tenemos esta opción. Entonces ahora tenemos nuestra música. Entonces para cambiar este color de esta tarjeta de música, o podemos intentar agregar un poco de este color. Y veamos cómo se ve. Se ve así, pero aún así podemos aplicar nuestro sistema de gradiente lineal. Entonces ahora se ve esto, no se ve bien. Podemos mantenerlo de esta manera. Solo estoy tratando de agregar diferentes tipos de color de fondo. ¿ Y cómo puedes explorar éste? Entonces si lo necesitas, si quieres agregar gradiente lineal, entonces puedes hacerlo de esta manera. ¿ De acuerdo? Por lo que podemos usar este de esta manera. Pero si agregamos este poquito de oscuridad, entonces se va a quedar así. Y esto va a ser estos también. ¿ Verdad? Por lo que tenemos esta opción aquí. Se ve bastante bonito. Podemos mantener este color. Por lo que ahora podemos hacer todo este ítem en grupo. Entonces todo está en grupos. Voy a hacer que sea un grupo. Puedo decir elemento de música. Ahora, simplemente puedo dejarme comprobar si realmente seleccionamos este color. Entonces lo que teníamos en éste, en éste teníamos este color. Pero ahora añadí estos colores. Creo que se ve muy bien. Podemos mantener este color, pero una cosa que puedo cambiar aquí, puedo cambiar el color de ésta. En lugar de este color. A lo mejor este color negro se vería muy bien aquí. De acuerdo, así que ahora tenemos este elemento musical. Y ahora voy a hacer un duplicado. Y entonces voy a ponerlo aquí en esta distancia. Veamos cómo se ve. Se ve bien. Ahora puedo hacer duplicar, duplicar, y varias veces puedo intentar agregar éste. Por lo que tenemos esta lista de música ahora y aquí, y el último ícono para éste, como ya seleccioné de este estilo de color, voy a guardarlo esto. Y lo que pasó aquí, por qué perdimos todo este ítem. Y tenemos éste aquí. De acuerdo, así que hice un error aquí porque sólo necesitamos seleccionar éste en lugar de este color. Por lo que voy a presionar el Comando J it. De acuerdo, entonces lo que hice básicamente seleccioné este color de fondo para la parte integral más bien, solo necesito seleccionar esta tarjeta. Y luego a partir de aquí, de este color sigue, voy a seleccionar éste. Ahora aún es, somos capaces de ver nuestro diseño. Así que realmente me gusta este. Está bien, Una cosa que puedo hacer, puedo cambiar este color negro aquí a color blanco. Y se ve bien. También puedo cambiar este color a color blanco para este artículo, éste. Y también podemos cambiar esta música. Puedes seleccionar este grupo y cambiar este color a blanco para éste, y también este icono a color blanco. Y otra cosa que ahora tenemos que hacer es que necesitamos cambiar esta. Entonces una cosa que necesito hacerlo aquí, déjame que me petrifique por 35. Voy a quitar éste de aquí, y voy a este de aquí. ¿ Está bien? Así que voy a decir, voy a añadir un ícono diferente para este reproductor de música. Voy a decir este artículo aquí. Y voy a decir que te has contratado por la D5. Y luego solo arrástralo aquí. Por lo que ahora tenemos este diseño. Por lo que parece que hemos completado con éxito nuestro diseño. Y si hago clic en él, podemos ver nuestro álbum de crear aquí. Otra cosa es que desde aquí puedes compartir tu proyecto para usarlos al desarrollador. Y si hace clic en el inspeccionar, entonces los desarrolladores podrán ver esconderse en una amplia para la tarjeta y todo aquí va a cambiar. Se puede ver el viento y esconderse en este tipo. 1031031. Hola, D6 es cinco, altura es seis es cinco. Y todo lo que puedas compartir con el equipo. Y ahora vamos a exportar este diseño. Para exportar este diseño, ¿qué podemos hacer? Ahora ya no necesitamos tener esta opción de grid. Voy a quitar éste. Exportemos este diseño. Entonces, ¿qué puedo hacer? Puedo hacer clic en exportar y luego seleccionar PNG JPEG. Y entonces puedo decir exportar a casa, se va a exportar. Y si hago clic en él, deberíamos poder ver nuestro nuevo bonito diseño que acabamos de hacer. Muy bien, subiré este diseño. Voy a compartir este diseño. Ahora. Si quiero exportar éste, sólo tienes que seleccionar éste. Y luego también haga clic en el JPEG y exportar crear álbum. Y tenemos este diseño. Y para compartir el proyecto. Siempre tienes a este sheriff mostrado con un equipo. Simplemente puedes tirar del nombre y solo puedes enviar o simplemente puedes copiar el enlace. Muy bien, hemos terminado este bonito diseño. Voy a detener este video aquí mismo. Adiós.