Figma UI/UX - Diseñar una aplicación web completa UI/UX. Cómo aprender la mejor técnica de Figma (Base de proyectos)

1. INTRODUCCIÓN: Bienvenido a este curso de figma. Mi nombre es sí, tan h o tres. Y seré tu instructor en este curso. En este Figma, tu curso AUX, vas a aprender a diseñar una app web, tú una UX. Usando Figma. Diseñarás este proyecto web completo. Vas a aprender diferentes tipos de herramientas y la mejor práctica de CDMA. Aprenderás a crear grupo, cómo crear colores de componentes, diferentes tipos de blogs, y que acabas de ver plug-in y muchas cosas más. Este es el proyecto completo que vas a diseñar en este curso. Déjame mostrarte todas las funcionalidades, todo el diseño que he añadido en estas API web donde te huevos. Entonces en la parte superior tenemos nuestra barra de navegación, luego tenemos esta sección de calentador principal aquí, y luego nuestras opciones de tarjeta de propiedad aquí. Se puede ver que todas y cada una de las cartas han existido desde el mismo tamaño. Y se ve muy bien. Entonces tenemos esta paginación con un ícono diferente y luego esta marca seleccionó opciones. Después de eso, tenemos una sección Acerca de con tipo de características de cooperativas que ibas a aprender en este curso. Y luego tenemos esta sección de diseño de comentarios donde hemos agregado al carrito, luego este indicador y este botón Siguiente y el botón anterior. Después de eso, tenemos nuestro sistema de sustitución, y en la parte inferior tenemos nuestra sección de pie de página. Entonces mientras diseñarás esta app, vas a aprender a agregar diferentes tipos de plug-in, cómo usar el icono de esos plugin y utilizarlo en tu proyecto. Y después de eso, vas a aprender a agregar en nueva app. En una barra F, puedes ver nuestro botón de inicio de sesión y registrarte. Por lo que si hago click en la Inscribirse, Ahora estoy en la cara de inscribirse. Y también notas que hay un poco de animación en el momento de la creación de prototipos. Entonces vas a aprender a, cómo agregar prototipo en tu app web con animación, diferentes tipos de características de prototipo y muchas cosas más. Por lo que ahora si hago clic en este texto, ya tengo una cuenta, entonces sólo me vas a enviar a la página de inicio de sesión. Y se puede ver un poco de animación aquí. Y si hago clic en la página de inicio de sesión, me pasaré a la página de inicio. Y ahora puedo acceder a esta página de inicio. Por lo que este proyecto me va a ayudar mucho a aprender a diseñar una app web usando Figma. Después de diseñar y crear prototipos toda la app, también vas a aprender a exportar tu diseño, cómo exportar tu diseño, y luego cómo compartir tu archivo con otras personas los miembros del equipo para que de todo el mundo pueden acceder a tu diseño, pueden trabajar en equipo. Por lo que estos son los pocos equipos que van a aprender de este curso. Este curso te va a ayudar mucho a convertirte en un buen diseñador porque traté de seguir la mejor práctica, la mejor técnica de Figma. Por lo tanto, esconderé animarlos a inscribirse en este curso. Nos vemos en la clase. 2. Navegación de diseño: Bienvenido a esta conferencia. En esta parte, vamos a empezar a trabajar en nuestro proyecto. Entonces, ante todo, tendrás que iniciar sesión en Figma. Para que puedas ver que acabo iniciar sesión usando mi cuenta. Si aún no tienes tus comentarios en años, simplemente puedes registrarte usando tu dirección de correo electrónico. Y tan pronto como inicie sesión en su cuenta de Figma, podrá ver este tipo de dashboard si ya ha trabajado en algún proyecto anteriormente, entonces podría ver este tipo de reciente un proyecto de trabajo. Pero de lo contrario podrás ver sólo esta cosa. Por lo que ahora aquí podemos ver a menudo llamado nuevo resentido y luego nuevo Figma, archivo Faker Gem y luego nuevo archivo de entrada. Entonces para nosotros, vamos a empezar haciendo clic en nuevo archivo de diseño porque vamos a empezar a trabajar en nuestro proyecto desde el principio. Voy a hacer click en él, y después se va a abrir un nuevo proyecto. Ahora actualmente no tenemos ningún tablero de arte aquí. De acuerdo, entonces este es el tablero básico o Figma. En la barra superior, en la, en la barra de herramientas tenemos todas las herramientas que es capaz de nivelar dentro de Figma. Y luego tenemos esta opción de marco. Entonces primero tenemos que agregar un marco. Por lo que voy a hacer click en el marco y vamos a trabajar en una web. Se puede ver que hay un par de opciones. El tamaño de la pantalla del teléfono. Si estás trabajando para teléfono, teléfono FU, una interfaz de usuario de aplicación móvil, entonces puedes seleccionar cualquiera de estos. Pero para nosotros, vamos a diseñar nuestras aplicaciones web. Voy a hacer clic en la parada de cubierta. Y en la parada de cubierta, podrás ver este tipo de vistas. Por lo que voy a seleccionar el índice 121440 por diez a cuatro. Entonces nos va a dar un tablero de arte. ¿ De acuerdo? Entonces esta es nuestra salida principal. Ahora tenemos nuestro tablero de arte y por aquí tendremos que diseñar nuestra app. Entonces vamos a lograr en este tipo de diseño en este curso. Entonces si vamos a tener nuestra barra de navegación, entonces vamos a tener e-mails, estas cosas. Y luego tendremos nuestra lista de propiedades, luego la paginación y nuestra opción de suscripción. Por lo que más o menos, trataremos de lograr este tipo de diseño. Y también tendremos que diseñar una sign-off y asignar a ritmo para nuestra aplicación. Entonces empecemos a trabajar en ello. Tan rápido tenemos nuestra próxima parte. Entonces, ¿cómo podemos sumar a nuestro ayudante? Entonces agrega nuestra barra de navegación que vamos a crear, vamos a tomar ayuda de esta herramienta de rectángulo. Y voy a dibujar un rectángulo en la parte superior. Y aquí vamos. Voy a dibujar un rectángulo aquí. Y si miro esta imagen aquí, podemos ver que esto es un color blanco, fondos, así que voy a cambiar el color. Entonces una vez que seleccione su barra de navegación, entonces tendrá opción de agregar este color de fondo, haga clic en el relleno, y luego tendrá una opción para seleccionar el color blanco. Y ahora no entendemos nada porque nuestro trasfondo también es amplio. Entonces, ¿qué puedo hacer aquí? Quiero añadir, quiero agregar nuestro efecto aquí. Así que si haces clic en el efecto, entonces nos va a dar nuestra sombra. Entonces hay un par de sombras aquí si quieres, simplemente puedes jugar con esto. Te dará sombra interior. Entonces nos va a dar sombra desde adentro. Pero tenemos que tener una sombra paralelita aquí. Y ahora déjame ejecutar la app para que podamos ver nuestros cambios de vida. Si estamos haciendo algún cambio. Si hago clic en el botón Ejecutar, entonces se va a abrir a una nueva pestaña aquí. Y aquí vamos. Podemos ver que esta es nuestra barra de navegación. Ahora tenemos que agregar un texto aquí y luego nuestro elemento de menú. Por lo que simplemente podemos tomar ayuda de esta herramienta de texto, click en el texto. Y aquí, voy a escribir un texto llamado Find home. Genial. Ahora, tenemos que cambiar el tamaño de la fuente aquí. Entonces este es el formulario dice por defecto 12, pero voy a seleccionar 44, éste. Y si quieres cortar algo, debes hacer click en esta película para poder seleccionar una opción y luego arrastrar y soltar. Y aquí tienes. Tenemos esta casa ahora aquí, pero es mucho más grande. Por lo que voy a seleccionar, Añadirlo a. Y luego a partir de aquí, me encantaría añadir aquí diferente tipo de diseño ya que tipo de color regular, voy a seleccionar con medio. Y luego aquí podemos simplemente seleccionar diferentes tipos de textos. Quiero decir, font-family name, eso es por defecto aquí. Esto no va a quedar bien. Voy a seleccionar uno diferente. De acuerdo, así que se veía así. Entonces se ve así. Y tal vez éste, no éste. Y no tiene ninguna oportunidad. Y podemos dar éste o podemos intentar sumar otro. De acuerdo, así que se ve bien. Creo que podemos probar un par de opciones más y no hace ningún cambio. De acuerdo, entonces se ve bien. Me gusta este y luego voy a cambiar el color de éste. Por lo que podemos agregar este color por defecto para éste. De acuerdo, entonces ahora tenemos esta opción y luego necesitamos agregar nuestro Now para artículos, así que tenemos cuatro artículos aquí, casa de propiedad, nuevas listas, inicio de sesión e inscribirse. Por lo que voy a hacer click en la herramienta Texto. Y a partir de aquí voy a empezar a sumar éste. Por lo que podemos hacer aquí una cosa más, que es que siempre tendremos que hacerlo yo voy a hacer click sobre ésta. Y aquí podemos sumar nuestro sistema de red. ¿ Cómo podemos sumar nuestro sistema grid? Entonces voy a seleccionar el marco. Y tan pronto como selecciono el marco, está la opción llamada Layout Grids. Si hace clic en éste, entonces va a agregar un sistema de cuadrícula para nosotros. Entonces ahora se ve así, pero definitivamente podemos, podemos cambiarlo. Por lo que ahora podemos, en lugar de la talla diez, podemos sumar 60. Entonces se va a quedar así. Y también podemos seleccionar, si solo necesitamos columna, entonces sólo va a agregar columna. Pero si necesitas columna y fila, y entonces podemos también, tal vez necesitemos tres columnas. También se puede contar la columna cinco columna. Entonces en lugar de 20, puedo seleccionar cinco, o tal vez pueda seleccionar dos. Entonces este es el espacio en eso, genial, pero necesitamos columna y fila. Necesitamos rejilla de esta manera. Podemos quedarnos con éste y se ve bien. Ahora podemos añadir nuestro texto aquí. Entonces primero, voy a empezar desde aquí. Por lo que puedo decir a casa. Y ahora aquí tendremos que cambiar nuestro tamaño de fuente porque no necesitamos tener 32. Por lo que podemos sumar aquí. Creo que podemos sumar 16 aquí, y también podemos probarlo en nuestra vista en vivo en tiempo real. Entonces se ve bien. Para que podamos seguir con 16. Ahora, he añadido éste. Por lo que ahora no necesito hacer click aquí una y otra vez. ¿ Qué puedo hacer? Puedo presionar, puedo seleccionar este texto y luego puedo presionar Control D para hacer un duplicado. Y se puede ver tenemos dos ítem aquí. Ahora puedo arrastrar éste aquí, y luego simplemente puedo cambiar el nombre del texto. Simplemente puedo decir que puedo decir propiedad. ¿ Y qué tenemos aquí? Tenemos nuestro nombre, propiedad, lista nueva. Y entonces voy a duplicarlo. Y luego voy a sumar la propiedad. Voy a añadir nueva lista, nueva lista. Y luego tenemos nuestra firma, tenemos nuestra opción de inicio de sesión, pero para iniciar sesión, tenemos este trasfondo. Entonces voy a tomar ayuda de esta herramienta rectángulo Londres. Voy a dibujar este rectángulo aquí. Y debo añadir un radio de borde para este rectángulo. Para añadir un radio de borde, tendré que agregarlo aquí. Voy a seleccionar 20 y luego cambiar el color de fondo a este color. Y necesito ajustarlo. Se pueden ver 18 de cada artículo que estábamos manteniendo una distancia. Así que voy a mantener este aquí. Y luego déjame probar cómo se ve aquí, por lo que se ve bien. Y entonces, ¿qué puedo hacer? Puedo añadir texto aquí. Simplemente puedo decir Iniciar sesión. Y luego a partir de aquí, simplemente puedo añadir éste aquí y el centro. Y tenemos otro. Voy a hacer un duplicado. Y éste va a ser nuestro, éste va a ser nuestro apunte. Entonces éste va a ser nuestro registro. Inscríbase. Muy bien, entonces, está bien, genial. Se ve realmente genial. Ahora puedo hacer una cosa. Entonces esto, este texto y este fondo, debería Meca creció porque cuando vamos a hacer prototipo, no necesitamos hacerlo groove. Entonces cuando vamos a hacer prototipos para que cuando usuario haga clic en cualquiera de esta área, podamos mostrar el prototipo. Entonces lo voy a hacer grupo. Entonces para que sea un grupo, necesito presionar el control Z en mi teclado o puedes hacer clic derecho. Y luego también puedes decir dónde también puedes hacer click sobre él. Se puede decir grupo. Ahora, el grupo R está aquí. Y podemos simplemente cambiar el nombre del grupo aquí o Control R. Puedo decir Iniciar sesión, botón. Genial. Se ve bien ahora. Y bien, así que todo está bien. Una cosa que quiero mostrarte ahora, así que ahora hagamos un grupo toda esta parte. Por lo que este botón, esta nueva lista propiedades sine de casa y tiempo finito, voy a presionar comando para encontrar a casa solo este ítem. Y voy a presionar el Comando Z. Y ahora simplemente puedo arrastrar todo esto un poco si quiero. Entonces no tendré que hacer esta cosa. Y si yo, aunque quiera, puedo aumentar el blanco de éste y de esta manera todo automáticamente va a sumar cofre. Incluso si quiero, digamos que quiero cambiar el, digamos que quiero cambiar el tamaño de la fuente. Digamos que quiero cambiar el tamaño de fuente de este artículo. Digamos que quiero cambiar el tamaño de fuente de ésta aquí. Entonces también puedo cambiarlo desde aquí. Y de esta manera, simplemente podemos cambiarlo. Entonces selecciona esto, y luego simplemente puedo cambiar 16 a 20, luego va a más grande. Pero necesito tener 16 aquí. Por lo que se ve realmente genial ahora. Perfecto. Por lo que por fin hemos agregado nuestra barra de navegación. Creo que hay que añadir solo este poquito porque los textos se han vuelto un poco más pequeños porque aumentamos el tamaño. Por lo que ahora se ve realmente bonito. Por lo que hemos añadido con éxito nuestro letrero. Hemos agregado nuestra barra de navegación. Y en la siguiente parte, vamos a aprender a agregar esta pantalla de inicio. Así que voy a detener este video justo aquí y verte en la próxima conferencia. Adiós. 3. Imagen de portada del hogar y diseño de tarjetas: Bienvenido de nuevo una vez más. En esta parte, trataremos agregar esta página de inicio y diseño. Para hacerlo, ante todo, voy a dibujar aquí nuestro rectángulo. Entonces selecciona este rectángulo y de aquí, o tal vez desde aquí. Entonces desde en el medio, voy a dibujar aquí un rectángulo, esta parte a esto. Entonces la altura será un poco más grande, creo. De acuerdo, déjame revisarlo como se ve aquí. Por lo que se ve como este tamaño de una pantalla. Y creo que está bien tener el tamaño de la pantalla. Y tal vez pueda arrastrarlo un poco hacia abajo. De acuerdo, así que ahora aquí podemos simplemente arrastrar nuestra imagen del archivo. Por lo que ya he descargado este EMS. Así que déjame probar Que lío he usado aquí. Por lo que he usado en este de aquí. Por lo que he usado en esta imagen. Creo que éste, no éste. He usado en éste. Así que déjame arrastrarlo aquí y luego soltarlo aquí. Y luego si haces clic en el lado derecho, entonces se va a añadir éste. Entonces si vas a hacer esto de esta manera, entonces al principio, se va a mostrar automáticamente el tamaño completo de la imagen. Entonces este no es el mejor enfoque. Así que voy a quitar éste. Pero figma tiene esta opción, así que por favor correo electrónico opción. De acuerdo, entonces, ¿qué podemos hacer? Voy a seleccionar éste aquí y luego voy a ir a mi directorio aquí. Y luego si hago clic en él, y luego digamos que quiero agregar esta imagen aquí y luego abrirla. No se va a mostrar aquí. Ahora, si hago clic derecho, si lo hago ahora se puede ver si pongo el cursor con el ratón, puedo ver esta imagen ahora si hago clic, clic derecho. Así que ahora si hago clic en mi ratón en el más a la izquierda, entonces va a agregar esta imagen aquí. Genial. Por lo que ahora podemos ver en esta imagen en el, encima de los e-mails tenemos otro rectángulo. Entonces voy a dibujar este rectángulo por aquí, va a ser de color blanco. Rectángulos tan rápido que voy a añadir un poco de radio fronterizo aquí, tal vez cinco píxeles. Y entonces voy a añadir éste aquí. Y puedo ver esta cosa. Déjame ver qué más tenemos aquí. Tenemos un botón y tenemos un texto aquí. Por lo que voy a añadir texto por aquí. Voy a hacer click sobre éste, y luego voy a escribir el texto aquí. Puedo decir que encuentre la casa de sus sueños. Genial. Así que puedo, oh, vale, para que podamos aumentar el tamaño de la fuente rápidamente. Por lo que tal vez necesitamos 40. Y lo voy a sumar de esta manera. Y ahora se ve bien, pero todavía podemos ajustarlo de esta manera. Y entonces podemos minimizar, podemos disminuir el tamaño de la fuente a 36, o se ve bien, pero podemos cambiar el color y podemos añadir un poco de diseño del texto para que podamos elegir diferentes tipos de textos. Font-familia. Se ve bien. Voy al azar o al color de éste. A lo mejor este color, solo estoy usando algún color aleatorio. Pero si tienes tu color favorito o si tienes algún color seleccionado, entonces definitivamente puedes usar este aquí. Y ahora después de eso, voy a dibujar nuestro rectángulo. Entonces, ¿cómo se puede hacer un rectángulo? Haga clic en la herramienta rectángulo. Y luego voy a dibujar este rectángulo de esta manera. Y voy a tener que añadir el radio fronterizo aquí. Por lo que da clic en este radio fronterizo. Y luego voy a cambiar el color de fondo de éste. Este no. A lo mejor un color diferente o algo cercano a leer. Tal vez este color rojo. Y aquí voy a escribir un texto. Puedo decir que reserve su cita. Así que simplemente no puedo ajustarme aquí porque el tamaño de la fuente es demasiado. Entonces voy a seleccionar 16, y luego todo debería funcionar. Y déjame intentarlo. ¿ Por qué tenemos o simplemente podemos decir reservar cita en lugar de reservar tu cita porque está tomando un poco más de espacio. Y ahora puedo decir esto. Entonces se ve tan bien. No hay problema con eso. Me gustó y todo está bien hasta ahora aquí. Y quería mostrarte una cosa más. Entonces si quieres agregar un borde aquí, ¿cómo lo puedes hacer? Por lo que definitivamente puedes hacerlo. Hay opción llamada trazo, y si haces clic en el Trazo, entonces se va a añadir el borde. Y también puedes cambiar el color del borde a un color diferente. Y también puedes cambiar el tamaño del borde. Tal vez quieras tener un tamaño más grande de Boehner. Entonces entonces puedes elegir entre este modelo. Y entonces si vienes aquí, podemos ver esta frontera aquí. E incluso también se puede seleccionar el estilo de borde aquí. Por lo que se puede decir centro afuera. Y luego si quieres este o diferente tipo de frontera, también puedes ver en lugar de sólido, tal vez lo necesites en dashboard y luego también puedes ver estos indels a menudo usan APR aquí. Por lo que hay un par de opciones que puedes aplicar en función de tu requerimiento. Pero por ahora no necesito tener esta frontera. Voy a desactivarlo. Si haces click en la opción i se va a desactivar y luego se va a habilitar de esta manera también. Entonces si haces clic aquí, se va a hacer el muro. Si hace clic aquí, entonces él va a intervalo. Ahora, si vengo aquí, todo se ve genial. Pero me encantaría añadir un poco de gradiente lineal aquí. Entonces si hago clic en este lineal, por lo que en lugar de esta manera, intentaré agregarlo de esta manera. O de esta manera se ve realmente genial. Ahora voy a hacerlo un poco más cerca. Aquí vamos. Todavía podemos ver un poco de sombra en el fondo aquí. Pero hay un par de otras opciones. A lo mejor puedes probar este chef angular. Entonces se va a quedar así. Y tal vez tengas un chef de diamantes y luego se va a quedar así. Y tal vez usted tiene forma radial va a verse así. Para que puedas jugar con éste. Por lo que voy a simplemente seleccionar el lineal. Y entonces simplemente puedo mantener este aquí. Muy bien, voy a detener este video aquí mismo, y diseñaremos nuestra esta parte en la próxima conferencia. Nos vemos en la próxima conferencia. Adiós. 4. Diseño de tarjetas de propiedad: Bienvenido de nuevo una vez más. En esta parte, vamos a empezar a trabajar en esto, en este sistema de tarjetas que tenemos para nuestra propiedad. Muy bien, para hacerlo, ¿cómo puedo hacerlo? Entonces, ¿qué podemos hacer? Entonces , ante todo, necesitamos aumentar nuestro tamaño del marco. Por lo que voy a seleccionar el marco. Y luego en el fondo, entonces voy a simplemente arrastrar un poco, tal vez esto. ¿ De acuerdo? Y luego después de eso, tendremos que, ahora tenemos esta mirada. Vale, tenemos esta barra de navegación, tenemos este bucle. Ahora aquí vamos a sumar esta tarjeta. Entonces para agregar una tarjeta, ante todo, voy a añadir este rectángulo. Digamos que vamos a empezar desde 123 y este árbol, vale, vamos a empezar desde esto o quizás desde aquí. Empecemos desde aquí. Entonces esta es la belleza de usar este sistema de rejilla para que podamos entender fácilmente para todos y cada uno de los artículos. Entonces vamos a empezar desde ahí, y luego quizá desde aquí, voy a conseguir esto agregado rápido desde aquí y después, lo haremos. Muy bien, así que una cosa que se nota es que tenemos diseño similar para todos y cada uno de los artículos que normalmente tenemos en nuestra aplicación web. Entonces para eso primero, vamos a hacer toda esta parte sólo una vez, y luego vamos a hacerlos agrupar y luego simplemente podemos duplicarla. De esta manera. No tendremos que hacer entonces lo mismo una y otra vez. Y este es el mejor enfoque. Por lo que en su mayoría tendrás que trabajar de esta manera. Por ejemplo, si estás mostrando un elemento de datos 100 en un carrito y luego tú, y definitivamente no vamos a hacer eso 100 cartas por separado. Cuando se ve exactamente igual, ganarás uno, entonces solo necesitas hacer un duplicado. De acuerdo, así que ahora primero tenemos nuestros correos electrónicos en la parte superior. Entonces para agregar un lío. Entonces voy a en otra tarjeta para el EMS, otro rectángulo aquí encima de éste. Por lo que podemos simplemente añadir esta tarjeta tal vez desde esta línea. Y entonces esta carta contendrá nuestra descartada, principalmente contener nuestra imagen. Por lo que ahora voy a sumar la imagen rápidamente. Entonces a partir de aquí, voy a hacer click sobre ese lugar. Y luego voy a seleccionar esta imagen. Y se va a ver aquí, lleva algún tiempo. Y en cuanto tenga éste, puedo pasar el puntero y puedo ver esta imagen. Ahora da click en el ratón y tienes esta imagen. Voy a añadir poco de un radio border-de cinco pixeles también para el carro principal y que tenemos, voy a añadir un radio de borde, cinco píxeles. Ok, entonces ahora tenemos este EMS y tenemos este carrito. Genial, se ve muy bien. Ahora rápido. Tenemos que añadir una sombra aquí. Entonces para añadir efecto aquí en el carro principal, no el rectángulo. El rectángulo seis, que es nuestra tarjeta principal, no la tarjeta EMS. Ok. Nuestros rectángulos cardíacos MS seis horas. Este es un rectángulo. Entonces una cosa que también puedes hacer es que simplemente puedes cambiar el nombre de la zona para que puedas entender lo que estás haciendo. Simplemente podemos decir correos electrónicos rectángulo, rectángulo, sea lo que sea. Por lo que ahora de esta manera podremos entender realmente y podemos, y éste simplemente podemos decir carro principal. Podemos decir tarjeta principal, vale, ésta, y de esta manera podrás identificarte con mucha facilidad. Ahora, voy a añadir un efecto aquí, nos va a dar una sombra aquí. Y de nuevo, puedes jugar con la sombra, puedes agregar diferente tipo de sombra. Puedes hacer tantas cosas con esta desde que dijimos a un lado, tal vez quieras difuminar para, tal vez quieras una cuadra ocho. Entonces se verá así. Te va a dar una opción un poco más borrosa en la parte inferior. Está bien, genial. Ahora tenemos que cambiar el color de fondo de éste. Entonces voy a añadir este color paragon. Y se ve así. Ahora tenemos nuestro, nuestro precio, nuestra ubicación, y nuestro botón aquí. Por lo que voy a sumar rápidamente este precio aquí. Por lo que voy a hacer click en esta tecnología T. Y desde aquí voy a empezar este precio. A lo mejor podemos decirlo y luego solo algún texto aleatorio. Y voy a cambiar el color de éste. A lo mejor esta luz o luz verde, este color claro. No se ve bien. Podemos elegir uno diferente. Sí, se ve bien. Y ahora tal vez podamos arrastrarlo un poco más cerca de esta imagen. Y entonces puedo añadir, vale, así que ahora para ajustar éste, ¿qué puedo hacer aquí? Principalmente se puede ver que nuestro tamaño de rejilla es realmente más grande. Entonces esta la razón por la que no somos capaces entenderlo. Entonces, ¿qué puedo hacer? Simplemente puedo agregar solo la rejilla. Por lo que haga clic en el sistema de rejilla. Entonces en lugar de la talla 16, puedo sumar 40. Vale, ahora, ahora me dan un pequeño tamaño de rejilla. Así que puedo entender fácilmente desde el susurro, no he empezado. En este texto. Entonces voy a, en lugar de esto, también podemos cambiar el nombre del texto aquí. Simplemente se puede decir precio oro. Ahora puedo hacer un duplicado, así que presiona Comando D, Entonces puedo empezar desde la misma línea. Ahora, espero que entiendas que por qué he añadido este pequeño tamaño de rejilla. Podemos ver que estamos empezando desde esta línea, ésta, se puede ver esta línea. Y puedo tomar un poco más de espacio. Y entonces simplemente puedo cambiar el nombre de éste. Simplemente puedo decir que la ubicación va a estar aquí. Entonces ubicación, se puede decir Londres. Podemos decir que la ubicación es Londres. Y definitivamente si quieres, simplemente puedes cambiar el color de éste. Entonces me encantaría tener un color diferente para éste. Tal vez este color. Y tal vez me encantaría agregar diferente familia de fuentes para el texto. Genial. Tal vez éste. Sí, podemos hacerlo. Y ahora podemos añadir un rectángulo para el botón de reserva. Por lo que voy a empezar este botón de reserva de aquí a aquí. Nuevamente, ajustarlo desde el medio y creo que no desde ahí. Podemos ajustarlo. Podemos añadirlo desde esta parte. Podemos añadirlo desde aquí. Sí, creo que podemos hacerlo de esta manera. Podemos dejarme ver cómo se ve. Se ve bien, pero podemos cambiar primero el color de fondo. Y para añadir éste, voy a elegir este color de fondo y añadir border-radio 20. Y ahora podemos agregar un texto aquí. Podemos decir reservar ahora. Y este es el botón de libro ahora que acabamos de diseñar. No está en el centro. Rojo frío, se ve muy bien ahora. Y ahora podemos duplicar esta tarjeta y hacerlo. Entonces puedo decir rectángulo, este rectángulo seis es nuestro libro. Ahora. Botón. Tan rápido, ¿qué podemos hacer? Podemos hacerlos en grupos. Entonces este libro ahora y este botón de libro ahora está juntos. Entonces vamos a hacerles una prensa grupal Comando G, y luego podemos decir, ¿qué podemos decir? Podemos cambiarles el nombre y podemos decir botón Libro llamado, tenemos Desagrupar éste. Por lo que ahora tenemos este grupo botón Libro. Y luego estas son tarjeta principal, este precio y este precio. Para que podamos cambiarlo a este texto. Simplemente podemos decir ubicación porque esto está bien, así que creo que lo hicimos de una manera diferente. Ok. Así que déjame deshacer. De acuerdo, entonces éste debería ser ubicación. Por lo que voy a añadir ubicación aquí. Entonces el rectángulo cinco, el rectángulo cinco no es éste. Por lo que esta cita de libro. Entonces vemos esta cita de libro, este botón de libro aquí, y luego esta imagen, luego la ubicación que el precio, luego el carro principal. Pero hay otro texto que se llama cita de libro. Por lo que esta cita de libro es este botón aquí, este texto. Ok. Entonces estos son lo principal que está conteniendo esta tarjeta. Entonces voy a hacerles un grupo juntos. Por lo que voy a presionar el Comando Z. y podemos decir, podemos renombrarlo, podemos decir una propiedad a granel, objetivos de tarjeta principal. Así que ahora esta cosa sostiene todo nuestro sistema podemos jockey juntos. Podemos ponerlo en cualquier lugar, donde queramos. Entonces tenemos estas cosas. Voy a presionar el Comando D, Entonces voy a presionar esta cosa aquí. Y tal vez de esta manera. Y entonces tal vez podamos presionar una vez más y luego va a hacerlo, una vez que estés duplicado, va a ajustarlo automáticamente por ti un par de veces. Por lo que ahora puedo ajustarlo de esta manera. A lo mejor vamos a empezar desde estos dos y luego podemos hacerlo de esta manera. Por lo que ahora aquí cuando arrastramos y soltamos, podemos ver que todavía tenemos este 20 por 20. Y luego tenemos esta tarjeta 2020. De todos y cada uno de los artículos estamos manteniendo 20 por 20 distancia. Vale, ahora déjame ver cómo se ve genial. Se ve realmente bonito. Por lo que se ve muy bien desde ambos lados. Tenemos el mismo diseño. Entonces otra cosa que podemos hacer ahora, podemos hacer esto para ítem de nuevo en un grupo porque en la parte inferior necesitaremos un ítem más para éste, ¿verdad? Entonces, ¿cómo podemos hacerlo? Podemos hacerlos grupales, grupales, grupales. Entonces voy a presionar nuevamente el Comando G. Y aquí simplemente puedo cambiar el nombre de éste y puedo decir, así que si voy a renombrar éste y lo voy a decir. Artículo de guardia primera fila. Genial. Entonces ahora como todos estos están en grupo, ¿qué puedo hacer? Simplemente puedo moverlos y luego solo puedo ajustarlo de esta manera. Puedo ajustarlos de esta manera. Ahora creo que desde ambos lados estamos teniendo, desde este lado estamos teniendo el mismo espacio, y desde este lado estamos teniendo el mismo espacio. Vale, genial, se ve muy bien. Entonces así es como puedes organizar tu archivo. Puedes arreglar tu documento, cualquier tipo de diseño que estés haciendo. Simplemente puedes hacerlo. Simplemente puedes seguir esta técnica y luego definitivamente puedes hacerlo. Ahora, ¿qué puedo hacer? Puedo, así que antes de duplicarlas, creo que necesito aumentar tamaño de mi marco principal, la altura del mainframe. Entonces lo voy a aumentar de esta manera. Vamos a añadirlo de esta manera. Y ahora qué puedo hacer? Sólo puedo seleccionar éste. Voy a hacer un duplicado Comando D. Así que voy a presionar, voy a ponerlo aquí justo en el fondo de este artículo, tal vez una línea. Y exactamente lo mismo que es en esta posición. Entonces voy a presionar nuevamente el Comando D, y va a sumar uno más para. Ahora. Déjame ver cómo se ve aquí. Se ve realmente bonito. Ahora, tenemos estos tres bonito diseño que me gustó mucho. Genial. Por lo que hemos diseñado algo realmente único en esta parte. Y voy a detener este video aquí mismo. Y seguiremos con desde la próxima conferencia. Trataremos de arreglar algunas cosas más e intentaremos agregar algunas características más en este proyecto en la próxima conferencia. Nos vemos en la próxima conferencia. Adiós. 5. Diseño de páginas: Bienvenido de nuevo una vez más. En esta parte, intentaremos agregar un poco de paginación en nuestro aspirante, en nuestra app web. puedas ver que éste se ve realmente genial, realmente agradable. No hay problema con eso. Pero aquí primero voy a sumar nuestra paginación. Entonces para agregar una paginación. Entonces vamos a tratar de agregar este tipo de paginación aquí, similar a ésta. Este no. Pero sólo por idea básica, vamos a sumar a este tipo de paginación aquí. Para agregar primero una paginación, voy a añadir aquí un rectángulo. Y voy a empezar a diseñar este rectángulo. Este rectángulo exactamente desde este lado, para que coincida exactamente con lo mismo. Y a partir de aquí coincide exactamente con lo mismo. De acuerdo, Entonces si es coincide con la misma línea, entonces podrás ver este tipo de línea. Significa que estamos en lo mismo o estamos en la misma línea. ¿ De acuerdo? Aquí tenemos exactamente lo mismo. Y luego fresco. Por lo que ahora tenemos este diseño y podemos intentar agregar un color diferente, creo, para nuestra paginación. O tal vez podamos probarlo en este color y fresco. Por lo que definitivamente podemos sumar nuestro fondo, nuestro radio fronterizo. Entonces digamos añadir el radio fronterizo cinco. Y ahora por aquí vamos, vamos a sumar nuestra paginación. Entonces, ¿cómo podemos sumar nuestra paginación? Para sumar nuestro número de paginación? Vamos a dibujar un círculo. Por lo que voy a hacer click en esta herramienta de elipse aquí. Empecemos la paginación desde aquí. Y para hacerlo exactamente circular, tenemos que asegurarnos de que ancho y alto sea lo mismo. De acuerdo, entonces tenemos Y 28, entonces tenemos 28 altos. Y luego, y luego se verá exactamente un círculo. Se verá exactamente círculo. Y también podemos hacerlo un poco más grande y después hacerlo 38 por 38. Y este y este tamaño, tenemos éste y podemos añadir un color de fondo para éste. Entonces este es el color de fondo de nuestra vegetación. Y otra cosa que podemos hacer es con esta paginación, podemos sumar un borde. Déjame ver cómo se ve con esto. De acuerdo, así que tenemos que añadir un poco más grande tamaño de borde. Entonces éste, y esto no va a quedar bien porque ya tenemos un color de fondo coloreado, por lo que necesitamos que sea blanco y sean colores diferentes para que podamos podamos ver éste. Por lo que voy a aumentar el tamaño de la frontera a cinco. Ahora podemos entenderlo. Pero no necesitamos tener VIH, creo que para bien, o tal vez tres, lo bueno. Y tratemos de agregar un color de fondo diferente para este radio fronterizo y cómo se ve. Vale, no se ve bien, así que creo que no necesitamos agregar un color de borde aquí porque ya tenemos este color de fondo. El motivo por el que este color de fondo y ajuste aquí. Por lo que ahora tenemos que sumar, necesitamos diseñar unas cuantas cosas más aquí. Entonces el primero va a ser nuestro número. De acuerdo, así que empecemos agregando un texto aquí. Entonces esta elipse va a ser nuestra paginación, nuestro número de paginación. Y luego voy a añadir un texto sobre esta paginación. Y tenemos que tener, vale, Así que primero permítanme ajustar este texto aquí. Vale, déjame añadir sorteo por el más rápido aquí. Si escribo el de aquí, entonces sólo puedo ponerlo en el medio. Y para esta paginación, no necesitamos tener este tamaño de fuente porque va a verse diferente. Y así que más bien voy a elegir el regular. A lo mejor podemos elegir éste también. Entonces, ¿dónde está el regular? Y eso por defecto tendrá. Entonces si en algún lugar de nuestra recursiva regular, no estoy recibiendo la normal aquí, está en alguna parte, debería ser regular. El texto está escrito de esta manera. O bien, está en lo difícil que no hay idea de. Entonces podemos simplemente agregar tal vez esto, entonces no va a parecer. Simplemente podemos empezar a establecer aquí. Por lo que no viene de esta manera. Podemos. ¿ Qué pasa con este de aquí? Creo que podemos iniciarlo aquí. No viene nada con éste. Entonces nada lo es. Ok. Entonces creo que tenemos estos regulares aquí. Esta es la habitual o puedes elegirla por tu cuenta o puedes cualquier otra opción. Creo que no lo conseguimos, pero tenemos algo diferente a éste aquí. Genial. Tenemos esta opción aquí en momento. Entonces voy a este. Este estilo de texto no sólo es ágil aquí porque anteriormente usamos este. Hay una razón por la que tenemos esta opción aquí. Para que podamos elegir uno nuevo de texto aquí. Y de aquí a aquí. Y tal vez éste. De acuerdo, entonces es un poco más grande. Para que pueda darle este aquí y puedo ponerlo en el centro. Ahora veamos cómo se ve. Se ve así. De nuevo, creo que ahora está en el centro. Oh, exactamente. No está en el centro, por lo que necesitamos ponerlo en el centro. De acuerdo, así que hay bastante centro. Ahora, voy a hacer que sea un grupo para que podamos decir número base, este número. Entonces este número y esta paginación, vamos a hacer de ellos un grupo juntos. Y podemos decir, podemos decir conseguir artículo de paginación, podemos decir pg nation item es item, cool. Y luego voy a hacer un duplicado. Voy a ponerlo aquí. Ahora. Déjame probar cómo se ve. Se ve bien. Entonces, ¿qué puedo hacer? Sólo puedo presionar duplicar y duplicar y duplicar y duplicar. Creo. No hay problema con eso. Por lo que ahora puedo ahora tenemos este número de duplicados. Entonces antes de hacer algo más rápido, voy a hacerles un grupo por completo, todo el ítem de paginación para que si tengo volver a agregar y sembrar o si tengo que ponerlo en otro lugar, entonces pueda simplemente hacer es que lo voy a hacer crecer. Y lo voy a decir, artículos de paginación, voy a decir imaginación, Originación. Vale, genial. Ahora, ¿qué puedo hacer por todos y cada uno de los artículos? ¿ Puedo hacer cambios? Entonces, por ejemplo, vamos a añadir este es dos. Voy a quitar éste y voy a sumar dos aquí. Y porque el primero va a poder ícono. Entonces voy a quitar este 1 primero 1, y voy a quitar esto, quitar el último de aquí, porque aquí vamos a agregar un ícono de botón siguiente. Entonces, ¿cómo puedes hacerlo? He instalado R, instalé un plugin llamado ícono de alimentador. Me voy a llevar la mitad de este ícono. Entonces si no sabes cómo instalar el ícono, por lo que simplemente puedes hacer clic en navegar conectando a la comunidad. Entonces aquí desde aquí, simplemente puedes buscar icono y luego solo puedes instalar el ícono. Se abrirá. Para que puedas ver que aquí hay muchos íconos. Solo tienes que hacer click en Instalar, entonces solo vas a aparecer aquí. Entonces cuando hagas clic en él debajo del plugin se va a mostrar éste. Por lo que voy a instalar estos iconos de relleno. Ya instalé éste. Voy a conseguir un par de iconos de aquí, me va a mostrar éste. Para que pueda ver esta flecha icono de derecha e izquierda. Por lo que esta voy a seleccionar, y voy a seleccionar esta flecha a la izquierda donde cayó. Entonces está aquí ahora. Así que sólo voy a arrastrarlo y luego voy a ponerlo aquí. Y bien, así que la otra cosa es que lo es, ha salido fuera de ésta. Entonces lo que voy a tener que hacer, tendré que arrastrarlo y ponerlo dentro del número de originación. Tenemos que está dentro de la paginación. Éste, está bien. Ahora déjame ver. De acuerdo, podemos ver este aquí. Y para éste también, necesitamos tener el ícono correcto. De acuerdo, entonces está aquí ahora. Y donde está, éste que tenemos en éste está aquí en el último. Entonces voy a arrastrar éste hasta el último aquí. Vale, entonces tenemos éste aquí y déjame probar éste. Por lo que no podemos ver este aquí. Déjame ver qué pasó exactamente aquí. Así que está bien, así que no viene aquí. Déjame que me retiren. De acuerdo, entonces tenemos esta opción de herramienta aquí. Por lo que voy a quitar toda esta parte de aquí. Voy a eliminar éste. De acuerdo, Así que podemos, podemos, podemos desactivarlo aquí desde rápido para que sea visible. Ahora. Ahora voy a añadir este ícono aquí. Y este ícono se va a añadir aquí. Vale, genial. No podremos verlo porque está fuera de nuestros marcos. Entonces, lo que voy a hacer, lo voy a poner aquí. De acuerdo, así que en cuanto lo pongamos aquí, no es utilizable porque el tema está aquí. Por lo que deberíamos, debemos darlo fuera de éste aquí desde ahí. Así que voy a ponerlo sólo compensado de éste. O podemos simplemente ponerlo en el fondo, entonces todavía va a funcionar. De acuerdo, para que podamos tener estos temas aquí. Rompimos tantas cosas para esta de aquí, incluso ésta va a bloquear desde aquí. Genial. Ahora debería mirar. Entonces tenemos éste, pero este elemento de flecha está dentro de éste. Entonces, lo que podemos hacer aquí, solo podemos arrastrar éste dentro de este texto de esto en las cosas de la cubierta. Y sí, ahora está funcionando para que no necesites ponerla dentro de esta vegetación aquí. Entonces hicimos un error cuando sí lo necesitamos de esta manera. Por lo que sólo tenemos que ponerlo siempre y cuando esté dentro del marco de este texto. También puede funcionar aquí. No comes no es obligatorio ponerlo dentro de ese uso elemento de paginación como esta manera. Por lo que definitivamente también podemos hacer esto aquí. Pero cuando tratamos de hacerlo, rompimos algo. Esa fue una razón. Ahora está funcionando perfectamente. Ahora. Permítanme azar rápidamente el número de texto. Entonces voy a presionar este brazo dos a 32 va a ser C, y entonces éste va a ser, pues, éste va a ser cinco, y éste va a ser seis. Y después de las seis, voy a sumar doble punto, punto triple, y luego voy a sumar siete. Éste va a ser ocho. Este va a ser nueve. Sólo nueve. Y éste va a ser, entonces éste va a ser o de n Este va a ser 12. Genial. Entonces ahora ¿qué puedo hacer? Simplemente puedo ajustar aquí y éste también en el centro. Genial. Por lo que ahora tenemos este 1123456789101112. Tenemos esta bonita paginación. Otra cosa que podemos hacer, tendremos que hacer excelentemente. Tendremos que hacer markdown una opción que esté marcada. Por lo que voy a seleccionar éste. Tal vez puedas seleccionar cualquier opción aleatoria. Entonces, ¿qué podemos hacer? Básicamente, podemos cambiar el color de fondo de este artículo. Tendremos que añadir un color de fondo diferente para éste. Déjame ver cómo se ve. Estoy contento con este color. Y entonces simplemente puedo elegir este color blanco desde aquí. Y aquí tienes. De acuerdo, pero este rojo no va a quedar bien aquí porque tenemos qué? Ya tenemos un color de fondo. De acuerdo, entonces estamos cambiando éste. Eso no está bien. Tenemos que cambiar este color rojo a algo diferente. Y no lo haré exactamente éste. Podemos intentar que podamos atar el negro, supongo. Sí, el negro se va a quedar bien porque éste está marcado. Aún así. No estoy contento con éste. Un poco de sombra de este fondo uno. Pero el problema es que ya tenemos un color de fondo. Esa es la razón por la que el marcado se va a quedar bien directamente. Entonces tenemos éste o aún podemos probar un color un poco más claro en esta área. Tal vez esta área. De acuerdo, entonces se va a quedar bien y voy a cambiar el color del texto a negro. Genial. Entonces ahora es fácilmente identificable cuál es inteligente? Por lo que tres está marcado aquí abajo. Tan bonito. Hemos diseñado algo realmente bonito en esta parte. Voy a detener este video aquí mismo. En la siguiente parte, intentaremos agregar algunas características más en esta app. Nos vemos en la próxima conferencia. Adiós. 6. Acerca del diseño de las características de la sección: Bienvenido de nuevo una vez más. En esta parte, vamos a tratar de sumar aquí una sección más, que será sobre sección en el lado izquierdo, vamos a poner nuestro EMS y el lado derecho, vamos a sumar otro sexual. Déjame mostrarte cómo podemos hacerlo. Entonces para hacerlo, ante todo, necesitamos aumentar el tamaño de nuestro marco principal, que es nuestras paradas de cubierta. Por lo que voy a seleccionar este texto fuera. Y luego voy a aumentar el tamaño de nuestro marco principal. Entonces voy a arrastrarlo un poco más de esta manera. Genial. Ahora, si miro aquí, entonces podemos ver que tenemos este espacio y nuestra aplicación ya se ve genial. Tenemos pixel perfecto. Y entonces todo se ve realmente genial en la posición perfecta. Todo bien aquí. Y a lo mejor vamos a tratar de agregar un poco de modificación si es de volver a repetirse. Pero por ahora, voy a añadir aquí una sección más, que va a ser sobre sección. Y aquí vamos a tener un par de detalles. Entonces vamos a añadir este aquí. Así que primero voy a diseñar, voy a añadir aquí un rectángulo. Venimos por aquí, pincha sobre el rectángulo. Y entonces tal vez desde aquí. A lo mejor desde aquí podemos ir desde aquí. Para que podamos dibujar un rectángulo. Y de este lado a este lado, o tal vez este lado. Este lado. Y un poco más grande. Y ahora déjame ajustarlo con la misma posición para que podamos ver esta marca roja. Entonces significa que estamos en la misma posición. Entonces aquí voy a poner nuestros e-mails aquí. Por lo que voy a hacer click en esta imagen de lugar, y después voy a seleccionar esta imagen aquí. Entonces recibí este correo electrónico de Internet. simplemente puedas descargar cualquier correo electrónico o puedes usar cualquier imagen aquí. Ahora si hago clic en él, tengo estas imágenes por aquí. Y ahora más en el lado derecho, barra lateral derecha podemos poner, déjame ver cómo se ve, qué tan grande se ve en el tamaño real. Entonces se ve así. Y podemos intentar agregar algunas otras cosas aquí, algunas otras cosas. De acuerdo, entonces podemos sumar a qué, lo que quiero decir con éste. Para que pueda sumar otra sección. Entonces, ¿qué puedo decir de este rectángulo? Puedo decir de Sección. Y voy a dibujar aquí un rectángulo más, tal vez de este lado a esta posición. Ahora va directamente a este tamaño. De acuerdo, entonces ahora tenemos exactamente el mismo tamaño desde el lado derecho y en la misma posición de esta imagen. Por lo que podemos, sigue aumentando el tamaño de nuestra, de nuestro carrito. Y luego puedo añadir un radio de borde de cinco píxeles, poco de sombra, un poco de sombra, sombra paralela. Y luego voy a añadir este color de fondo blanco. Por lo que ahora tenemos este tipo de visión. En la parte superior. Primero voy a sumar sobre nosotros. Entonces, ¿qué puedo decir? Simplemente puedo cambiar el nombre de éste. Puedo decir de los detalles. Aquí. Voy a añadir un texto, y el texto va a añadir aquí, voy a decir de nosotros. Así que sobre nosotros va a verse así por ahora. Y en la vista en vivo va a verse así, pero debería tener un tamaño más grande, tal vez 32. Y entonces sigue siendo una, vamos a añadir un color diferente para éste, ni exactamente no el negro. Cualquier color. Solo estoy seleccionando algún tipo de, o tal vez aún pueda seleccionar este color ya que estás usando estos modos de color. Entonces para este estilo de texto, podemos elegir uno diferente. Podemos elegir un color diferente, un diseño diferente. Y tal vez éste o éste, o éste, o éste o bien, se ve bien y lo malo. Para que podamos usar este aquí y solo podemos ponerlo aquí. Y después de eso, vamos a sumar una especie de colapso de que se muestra aquí. Podemos simplemente agregar una opción de tarjeta más aquí. Entonces, ¿qué podemos hacer por esto? Por lo que se ve muy bien. Estoy contento con eso. No hay problema con eso. Pero voy a sumar un auto apagado que se muestra aquí. Entonces sobre nosotros, simplemente puedo decir. Vamos a renombrar este rápido sobre Título. Tengo éste sobre el título. Todos estos Acerca de la sección. Entonces aquí primero voy a dibujar un rectángulo más. Voy a tomar la mitad de este rectángulo. Por lo que voy a añadir un texto de detalles aquí. Simplemente podemos cambiar el tamaño de éste de esta manera. Y así hemos añadido peso Hamas más grande que el tamaño medio de nuestro diseño. Para que podamos sumar este aquí. Y luego tenemos este diseño de Sean. Y podemos añadir nuestro color de ícono aquí. Entonces, ¿qué podemos hacer ahora? Lo que quería hacer aquí, quería agregar título y la descripción para eso. Simplemente puedo Loren ipsum solo para algunos textos aleatorios o también puedes usar algún plug-in. Eso no es un problema. Por lo que simplemente puedo seleccionar a Laura Nixon, este título aquí. Y luego puedo seleccionar un texto aquí. Puedo poner aquí este texto, y luego lo voy a cambiar a 14. Y aquí vamos. Tenemos este 14. Y ahora puedo seleccionar 1619. Y podemos ajustarlo de esta manera. Podemos ponerlo, lo siento, podemos poner nuestro texto en el centro. Podemos poner nuestro texto en el centro. Puedo poner nuestro texto en el centro. Y luego podemos añadir un radio de borde, cinco píxeles aquí, un poco de radio fronterizo. Y también podemos hacer esto de esta manera. Entonces este es el rectángulo que podemos decir sobre el artículo, sobre el artículo. Y éste va a ser sobre el texto del ítem. Entonces sobre el elemento, sobre el texto del elemento. Y aquí tenemos que dejar que cambiemos primero el color de fondo. Podemos elegir este color de fondo y para el texto, podemos elegir este color de texto. Rápido. Entonces tenemos este y este color. Y aquí podemos poner un icono de uno. Podemos tirar a un icono aquí. Y aquí vamos. Podemos poner 21 ícono aquí. Por lo que de nuevo, podemos tomar la salud de nuestra, este plugin de íconos que tenemos instalado se llama icono de filtro. Y yo voy a elegir esto. Voy a elegir este ícono aquí. Y voy a arrastrarlo hasta aquí. Voy a ponerlo aquí. Y aquí tienes. Voy a cambiar el color a blanco. Genial. Se ve bien, pero necesito ponerlo dentro de las cosas de la cubierta. Así que voy a poner un arrastrar y soltar en el escritorio. Ahora, debería poder hacerlo. Por lo que ahora podemos ver este ícono también está aquí. Entonces, ¿qué podemos hacer ahora? También podemos renombrar el nombre de diacrónico puede decir de ellos flecha hacia abajo. Por lo que tenemos sobre el elemento que alguna vez toma átomo y sobre el artículo, éste. Estas son las tres cosas que ahora podemos hacer. Grupo Voy a presionar Comando Z y voy a decir Acerca de ítem. Podemos decir de ellos tarjeta, cool. Por lo que tenemos esta tarjeta de artículo del aeropuerto, y ahora podemos añadir esto sobre la tarjeta del artículo aquí. Y podemos añadir estas tarjeta de artículo morada aquí. Vamos a sumar descarte de tiempo múltiple. O podemos hacer una cosa. No necesitamos tener esta cosa. Creo que podemos dejarme intentar duplicarlo. Cómo se ve. Ahora podemos duplicarlo un par de veces. Ahora tenemos este bonito diseño de tarjeta. Pero para la primera, quiero tener cosas diferentes. Quiero abrirlo y quiero mostrar nuestro texto, vale, es una especie de opción de llamada. Entonces para hacerlo, primero déjame ponerlo aquí. Déjame probar cómo se ve. Todavía es que está dentro de éste. Y entonces podemos trotarlo aquí un poco más. ¿ De acuerdo? Y luego sólo para este ítem, podemos hacerlo o, podemos nombrarlo. Podemos MDs uno sobre colapso de artículos. De acuerdo, y entonces voy a hacerlo un poco más grande para este artículo. ¿ De acuerdo? Y luego voy a quitar este ícono de aquí porque necesitaremos aquí un elemento diferente. Y entonces voy a poner este texto por aquí. Y luego voy a presionar el Comando D y arrastraré un poco hacia abajo. Y voy a añadir aquí un texto diferente con algunos artículos más. Para que podamos hacerlo. Puedes copiar y pegar un poco más de texto aquí. Por lo que normalmente se ve este tipo de diseño en una sección de absorción de llamadas o preguntas frecuentes. Entonces tenemos éste ahora voy a disminuir el tamaño de la fuente a 12. Genial. Ahora, se ve muy bien. Está bien, genial. Entonces otra cosa que podemos hacer es aquí. Podemos añadir un diferente, podemos añadir un ícono diferente, que va a ser un ícono de aplicación sobre la tarjeta de elemento. Y aquí podemos agregar, nuevo **** Salud tecnológica de nuestro icono llamado alimentador ícono. A partir de aquí, simplemente podemos tomar este ícono, que va a ser el ícono de la aplicación. Y este ícono voy a copiar. Y entonces voy a publicar, voy a ponerlo aquí. Voy a hacer el color blanco ghoul. Y otra vez sale fuera del marco. Así que voy a ponerlo aquí. Por lo que podemos decir, puedo cambiar el nombre de éste o se puede decir, compré colapso de artículo, flecha hacia arriba. Es así como podemos comprobar si tienen que hacerlo, si tienes dos postres, vale, por lo que otra cosa se nota que no está en la misma línea, por lo que podemos hacerlo en la misma línea. Entonces, ¿cómo podemos hacerlo? Podemos simplemente, ahora está en la misma, misma línea. ¿De acuerdo? Entonces cuando un usuario haga clic en él, cuando haga doble clic en él, entonces esto se va a abrir, y luego vamos a abrir éste también. De acuerdo, así es como estos Acerca de Nosotros la sección que hemos diseñado. Muy bien, y otra cosa que podemos intentar. Entonces en la siguiente parte, vamos a tratar de sumar nuestra, acuerdo, para que podamos agregar una cosa más aquí. Entonces si está abierto, entonces podemos simplemente marcar este ítem también. Lo que yo, lo que quiero decir con eso. Por lo que normalmente notarás que si esta tarjeta está abierta, entonces vamos a marcar esta también. Por lo que también podemos hacerlo. Ese no es un gran problema. Voy a dejar que intente agregar éste. Entonces antes de eso, déjame revisar lo que hemos utilizado. Hemos utilizado un radio más cinco. Está bien, genial. Así que voy a dibujar una línea aquí, otro rectángulo y ponerlo cinco. Y minimizar el, lo siento, necesitamos tener éste aquí. Esto y luego podemos simplemente marcar esto. ¿ Vamos a usar este color? Está bien, genial. Entonces tenemos éste o simplemente podemos usar el color blanco va a lucir también genial aquí. Pero no, no se va a quedar genial. Por lo que necesitamos ajustar éste de esta manera también. Es en cierto modo y podemos algún color. Tal vez este color. No, no se ve bien Exactamente. Por lo que podemos hacer básicamente podemos elegir algunos colores diferentes. Sí, tal vez sea bueno, pero también podemos cambiar el blanco a tal vez siete. Excel. Además, éste está abierto y éste está marcado. Pero sería bueno si pudiéramos elegir algún color realmente bueno, color claro que pueda identificarse fácilmente. Pero me estoy poniendo, tal vez este bloque se va a quedar bien. De acuerdo, voy a saltarme este de aquí. Muy bien, así que finalmente hemos diseñado esta sección promedio y se ve muy bien. Entonces así es como podemos diseñar nuestra sección Acerca y esta opción de colapso aquí. De acuerdo, así que voy a detener este video aquí mismo y continuaremos desde la próxima conferencia. Nos vemos en la próxima conferencia. 7. Diseño de deslizadores de comentarios: Bienvenido a este video. En esta parte, vamos a discutir sobre sección Acerca y no exactamente sobre sección porque en nuestra parte anterior, hemos diseñado nuestra sección Acerca en esta parte. Y básicamente quiero agregar una sección de comentarios. ¿ Está bien? Entonces cómo se verá es que va a ser una especie de opciones de slider o simplemente vamos a tratar de dar un aspecto así. Y luego podemos simplemente diseñar éste. ¿ De acuerdo? Entonces para eso, primero, déjame empezar a dibujar esta cosa. De acuerdo, Genial. Tendremos que aumentar nuestro, nuestro tamaño de marco, altura del marco. Entonces selecciona el marco y luego podemos, podemos aumentarlo desde aquí. Y luego fresco. Por lo que ahora aquí voy a sumar nuestra sección de comentarios. En medio, voy a añadir una retroalimentación sobre el título. Y luego después de eso, vamos a tener esta opción aquí. De acuerdo, tan rápido para agregar una sección de comentarios. Primero, voy a añadir un texto aquí. Y voy a agregar comentarios. Y rápido, déjame cambiar el tamaño de la fuente a un tamaño más grande, tal vez 36. Y podemos ponerlo aquí exactamente. Y déjame ver cómo se ve. Entonces se va a quedar bien. Entonces tenemos esta retroalimentación en la parte inferior, y luego tenemos esta retroalimentación, vale, genial. Tenemos esto offshore y podemos simplemente dibujarlo en medio de éste. Ok. Y sólo podemos añadirlo. Puedes tomar un poco de espacio desde la parte superior. Simplemente puedo hacer un poco de espacio desde la cima. Y después de eso, ¿qué podemos hacer? Básicamente, podemos en dos ítems aquí. Uno será nuestro artículo de tarjeta. Básicamente tendremos que diseñar una tarjeta en la parte superior de la tarjeta, vamos a mostrar la foto del alumno y luego la y la foto del alumno, luego el nombre y después el mensaje. En las otras dos cosas que queremos mostrar tan rápido, voy a renombrar el nombre. Se puede decir título de bolsa. Está bien, genial. Entonces este título de comentarios. Y después de eso voy a diseñar nuestro rectángulo. Tal vez podamos empezar desde aquí. Podemos empezar, puedo empezar desde aquí. Por lo que quiero mostrar dos ítem. Voy a tomar este tipo de tamaño, poquito de radio fronterizo, por lo que agregarás. Y entonces esta opción se va a sumar aquí. Creo que va a quedar bien. Entonces entonces voy a dejarme ver cómo se ve. Entonces este tamaño. Y luego pondremos aquí un botón y luego otro botón en el lado derecho. Y entonces vamos a tener que opción aquí y en la parte inferior agregaremos esta. De acuerdo, entonces se verá bien y tendremos que hacerlo, voy a decir retroalimentación parte principal. Y voy a diseñar, voy a sacar otra carta. En la parte superior. Podemos definir r. Podemos definir nuestra opción elipse aquí exactamente. Éste. Tenemos que hacerla misma altura y blanca, uno en dos. Y entonces podemos, vale, Así que necesitaremos un poco más de espacio desde la parte superior porque tenemos nuestro texto aquí. Por lo que sólo podemos arrastrarlo y podemos tomar de esta fila. Y entonces podemos tomarlo de esta manera, en medio de éste. De acuerdo, exactamente. Este es el medial. ¿ Cómo entiendes que esto es lo medial? Vamos, puedes ver este punto aquí. Y está bien, genial. Entonces aquí vamos a poner la foto y aquí vamos a sumar la sombra. Tan rápido, voy a añadir ese efecto. Voy a cambiar el color de fondo a este color. Y ahora va a parecer una tarjeta. Y no te preocupes, vamos a poner éste y tendremos que añadir un nombre aquí. Entonces, lo que puedo ver, voy a cambiarle el nombre. Puedo decir Feedback. Utilice nuestra imagen de perfil de usuario de MS. Y luego en el fondo de éste voy a poner etiquetas em. Se puede decir John Doe, sólo por un ejemplo, cualquier nombre que tengamos. De acuerdo, entonces y entonces podemos hacer una cosa. Podemos simplemente Ok, creo que no está en el centro o está en el centro, pero podemos ponerlo en el centro de éste. Ok. Ahora, está en el centro. Simplemente podemos cambiar el diseño del formulario. Podemos añadir un diseño diferente para este nombre. Podemos, tal vez podamos elegir, solo estoy seleccionando algunos textos aleatorios. Entonces si tienes alguna preferencia, si te gustaría usar cualquier otra, entonces definitivamente puedes hacer esta aquí. Esto no va a quedar bien. Para que podamos sumar éste. No, esto no va a verse así. Para que podamos elegir no me va a gustar éste. Este no. Ok, podemos seleccionar éste también. Pero somos Tomas bolt. Éste es bueno. Podemos elegir éste. Entonces una cosa que puedo hacer es aquí es que podemos hacer de este texto un componente. Para que una y otra vez, no necesitamos copiar de Loren Ipsum. Por lo que voy a seleccionar este texto. Voy a hacer clic derecho y luego lo voy a hacer componentes. Para que puedas ver Crear componente. Entonces, ¿qué significa este componente? Por lo que en cuanto éste se haya convertido en un componente, puede ver este ícono se ha cambiado y donde éste es un componente, APR, esta empresa aparece en este directorio de activos. Entonces tenemos esto. Ahora tenemos este componente, vale, que es este. Y ahora, si queremos, podemos usar este componente tantas veces como quieras. Entonces, ¿qué puedo hacer? Simplemente puedo arrastrarlo aquí. Y entonces puedo, puedo seleccionar éste, y simplemente puedo cambiar el color de fondo aquí también. De acuerdo, así que de esta manera, no tendré que copiar y pegar una y otra vez. Para que puedas, de esta manera puedes hacer cualquier cosa. Puede crear componente incluso si lo desea, puede crear componente de este elemento. Digamos componente omega, crear componente. Por lo que se ha convertido en un miedo aquí. Por lo que ahora solo puedes reutilizarlo tantas veces como quieras. ¿ De acuerdo? Entonces esta es la belleza de los componentes. Por lo que ahora has aprendido a usar componente, cómo crear un componente. Ahora si miro aquí, entonces puedo ver que tengo estas opciones. Y esta es la retroalimentación de los usuarios, pero ahora no necesitamos tener esta tarjeta grande. Entonces, ¿qué podemos hacer? Puedo cambiar el nombre de éste. Puedo decir que John Doe va a ser, podemos decir Renombrar de nuevo, simplemente decir feedback, nombre de usuario. Entonces todo es retroalimentación está bajo éste para que podamos dejarla hacer de ella un grupo. ¿ De acuerdo? Por lo que ahora este es el carro de retroalimentación coche principal. Sólo voy a minimizar esta tarjeta un poquito más. Y ahora veamos cómo se ve. Se ve así. De acuerdo, así que queremos poner nuestros e-mails aquí. Entonces, ¿qué puedo hacer? Así que puedo simplemente puedo simplemente descargar algunas imágenes, misma imagen de perfil, y luego puedo simplemente ponerla aquí. Ahora, simplemente podemos colocar nuestras imágenes en esta tarjeta. Por lo que ahora no tenemos ninguna imagen hasta ahora. ¿ Qué podemos hacer? Básicamente, podemos simplemente hacer click en este lugar imagen de Sean. Y entonces solo voy a seleccionar algunos e-mails aleatorios aquí. Y ahora tenemos esta opción. Ahora si hago clic en él, se va a añadir aquí. Y aquí vamos, deberíamos poder ver aquí la imagen. Lleva algún tiempo cargar la imagen. O simplemente podemos lo que pasó aquí. Está aquí. Para que podamos ver esta foto de perfil, imagen de perfil aquí. Y ahora hemos preparado esta tarjeta a la perfección. ¿ De acuerdo? Entonces ahora lo que tenemos, esta es la primera imagen, y esta es la imagen de perfil. Tenemos esta retroalimentación. Tenemos esta retroalimentación, nombre de usuario, tarjeta de comentarios, retroalimentación principal tarjeta de opinión título no está bajo este. Entonces estas son las cuatro cosas que necesitamos para hacer grupos. Entonces voy a presionar Comando G y luego simplemente puedo renombrarlo y puedo decir feedback, tarjeta media. Genial. Ahora, sólo podemos hacerlo de esta manera. Entonces ahora tenemos esta cosa. Voy a hacer que se duplique. Y a partir de aquí podemos sumar éste de esta manera. Tenemos esta tarjeta fuera mostrada de esta manera, pero no está en el medio. Tan rápido. ¿Qué podemos hacer? Tenemos estos dos carro principal. Ahora podemos hacerles un grupo, y luego podemos renombrarlo. Y simplemente podemos decir esa retroalimentación. Todos los artículos, puedes dar cualquier nombre. Y ahora podemos reorganizarlo. De acuerdo, tal vez este es el punto medio, vale, así que podemos ver que esta línea está apareciendo en el medio. Entonces este es el punto medio de éste. Uno, y ahora tenemos este ítem en el medio. Vale, entonces tenemos éste, es al menos no en el medio, pero sí podemos simplemente está en éste de esto, sólo podemos ponerlo en medio de este texto y ahora es mejor. Y ahora en medio de éste, queremos agregar ícono de herramienta. De acuerdo, así que todo está bien y rápido. Permítanme cambiar los correos electrónicos de este ítem. Entonces voy a seleccionar otra imagen que descargué. Y se va a inicializar rápido. Y tan pronto como se inicializó, entonces solo puedo reemplazarlo por éste. De nuevo, solo te vas a tomar algún tiempo para agregar este. Eso no es un problema. Sólo podemos hacer esto aquí. De acuerdo, entonces ahora tenemos que sumar, tenemos que dibujar un círculo aquí. Para nuestra, nuestras cuatro horas. Esta opción. O podemos hacer una modificación más aquí. Creo que olvidé añadir éste. Podemos sumar un borde de éste. Entonces agreguemos un borde para que se vea mucho mejor. Entonces voy a sumar aquí un borde. Entonces podemos decir que el derrame cerebral va a ser tres. Y luego, vale, entonces lo que hice aquí básicamente, así que creo que agregué este borde para esto, para este rectángulo. De acuerdo, entonces agregamos nuestro rectángulo aquí por error. Entonces voy a controlar a Chet. Tenemos que hacerlo exactamente con los e-mails aquí, este MS principal, y aquí puedo añadir esta imagen. Voy a ponerlo a C, y luego voy a cambiar el color a blanco. Y aquí vamos. Creo que el blanco no es factible porque nuestro fondo es blanco. Para que podamos elegir este fondo uno. Y entonces va a mirar, está bien, así que tenemos el mismo diseño para ambos artículos. Genial, se ve muy bien. Y ahora, ¿qué podemos hacer? Podemos dibujar una nuestra vida para el botón de avance en un ciclo de vida, el botón hacia atrás. Y sólo puedo ponerlo en el medio. Y parece usar el tamaño perfecto aquí. Entonces voy a hacer que el hidrógeno los vea. Por lo que ya tiene 36 por 36. Y entonces voy a hacer el color blanco. Y entonces voy a añadir el efecto aquí. Y entonces puedo poner este ícono de flecha por aquí. Entonces tenemos nuestro ícono de flecha en nuestro plugin de peck. Por lo que voy a añadir este se llama icono de filtro, y luego voy a elegir este ícono aquí, está aparece aquí. Entonces menos que arrastrarlo aquí, ponlo aquí, y luego arrástrelo aquí. Entonces tenemos éste y éste, ambos de los dos. Por lo que sólo podemos hacerles un grupo. Se puede decir Retroalimentación flecha izquierda fría. Por lo que ahora tenemos esta flecha de retroalimentación que queda exactamente en el mismo tamaño. Creo, creo que está en la misma posición porque, vale, así que déjame arreglarlo. Es será estadística con 36. Por lo que ahora está en el grupo. Entonces, ¿qué podemos hacer? Sólo podemos medirlo de esta manera, por lo que es en este tamaño. Ahora, vale, para que podamos hacer un duplicado. Así que voy a hacer un duplicado. Y entonces podemos ponerlo de la misma, de la misma manera. ¿ De acuerdo? Creo que estamos en el mismo botón de posición ahora podemos simplemente rotar en lugar de usar un ícono diferente. ¿ De acuerdo? Entonces tenemos que rotarlo de esta manera. Genial. Entonces ahora se ve exactamente lo mismo, es la misma imagen, mismo ícono que estamos usando aquí. Entonces se ve muy bien. Y ahora qué puedo hacer? O podemos añadir nuestro punto ci aquí, en realidad tres elipse aquí. Entonces voy a tomar ayuda de esta elipse, y luego voy a dibujar esta elipse aquí. ¿ Y qué puedo hacer? Simplemente puedo decir diez por diez y vamos a intentarlo. Veamos cómo se ve. Sí, se ve bien, pero va a ser bueno si pudiéramos sumar algunos más, 151515 por 15. Y ahora, ¿qué puedo hacer? Yo puedo, vale, Así que podemos, tan rápido uno podemos añadir color diferente. En primer lugar podemos añadir un color diferente. Y para el segundo, podemos usar, y para los otros dos colores podemos usar En este color. De acuerdo, entonces voy a añadir éste, entonces voy a duplicarlo 234. Veamos cómo se ve. Entonces tenemos todo color y para el primero, vamos a cambiarlo a, vamos a hacerlo activo. Significa que podemos darle de diferente color, significa que el primero está activo aquí. Genial, se ve muy bien. Perfecto. Por lo que hemos agregado esta sección de comentarios y aspecto agradable. Entonces, ¿qué podemos hacer? Por lo que simplemente podemos marcar todos estos artículos, y luego simplemente podemos convertirlos en un grupo. Entonces podemos renombrarlo. Podemos decir artículos de puntos de retroalimentación. Así que cada vez que trabajas para cualquier tipo de diseño, solo tienes que asegurarte los estás haciendo un groove para que después puedas reutilizarlo y no rompas nada. Y no rompes nada bien. Por lo que voy a detener este video aquí mismo y lo seguiremos desde la próxima conferencia. Nos vemos en la próxima conferencia. Adiós. 8. Sección de suscripción al diseño: Bienvenido a esta conferencia. En esta parte, vamos a diseñar nuestro sistema de boletín de suscripción. Por lo que ahora, hasta ahora hemos diseñado esta esta parte. Así que realmente me gustó este diseño. Espero que lo hayan disfrutado y aprendan mucho. Ahora. Es hora de agregar nuestro sistema de suscripción por aquí. Entonces, ¿cómo puedes hacerlo? Por lo que es un sistema de tejidos blandos muy básico que vamos a diseñar. Nada elegante y no es una tarea difícil. Tan rápido voy a sumar nuestro marco. Voy a diseñar un rectángulo aquí. Voy a añadir un rectángulo justo después de éste. Creo que aquí voy a dibujar un rectángulo. Y déjame ver cómo se ve aquí. Por lo que este rectángulo y aquí podemos agregar o podemos colocar nuestro EMS, o podemos colocar un MAs de fondo son entonces podemos simplemente agregar nuestro campo de entrada y luego la parte inferior, podemos agregar. Y para hacerlo, ¿qué podemos hacer? Básicamente, vamos a agregar nuestra imagen de fondo o simplemente podemos agregar tal vez algún color aquí en lugar de imagen de fondo. Y entonces podemos simplemente, ¿qué podemos hacer? Simplemente podemos añadir éste donde está. Entonces podemos simplemente cambiar los APRN poco esto, o tal vez 10%. Entonces nos va a dar sombra a este tipo de estudiosos, pero tal vez el 80%. Y luego podemos intentar volver a sumar como para que tengan un par de otras opciones. Por ejemplo, puedes elegir esta pantalla. Puedes elegir esta luz y color. Se puede elegir esta luz dura y un par de otras opciones que tienen. Pero normalmente se pasa a través. Y entonces aquí podemos simplemente seleccionar 20 por ciento nos va a dar este tipo de cosas. Está bien, genial. Entonces tenemos estas opciones, pero en lugar de ésta, podemos seleccionar este color, tal vez pueda algún color lineal. Por lo que escalar, el color no va a quedar bien aquí. Entonces, ¿qué puedo hacer aquí? Lo siento. Necesito, simplemente podemos agregar puedo simplemente colocar una imagen de fondo aquí. Entonces podemos simplemente colocar un fondo humanos, tal vez estas cumbres. Y va a hacerlo, lo siento. Por lo que necesito seleccionar éste aquí. ¿ Dónde está este rectángulo? Ocho. Entonces esta ayuda rectángulo va a ser nuestro rectángulo de suscripción. En el rectángulo de suscripción, tendremos que agregar nuestra imagen de fondo. Así que probemos éste. Entonces no deberíamos ponerlo encima de este rectángulo. Vale, entonces no estoy seguro de qué, lo que hicimos aquí básicamente. Entonces permítanme quitar éste porque hicimos algunos cambios aquí. Entonces la razón por la que está creando problemas, así que voy a dibujar aquí un rectángulo. Y este es nuestro primer rectángulo aquí. Ahora voy a colocar la imagen. Entonces voy a colocar la imagen, y después voy a colocar esta imagen se va a mostrar aquí, genial. Entonces se ve muy bien. Y luego te voy a quitar tu nombre. Podemos decir suscripción. Entonces el nombre va a ser subíndice mostrado y encendido. Déjame ver cómo se ve. Se ve realmente bonito. Y encima podemos sumar uno, esta opción. Un campo de entrada. dibujar nuestro campo de entrada usando nuestro rectángulo. Agreguemos el radio fronterizo, entonces, tal vez un poco más, tal vez 20 píxeles. Y entonces tenemos éste. Y luego tenemos éste en el centro. Tenemos esto. Está bien, genial. ¿ Y qué podemos hacer? Simplemente podemos añadir éste. Y tal vez podamos intentar sumar algún borde. Podemos sumar algún borde va a ser C. Y podemos cambiar el color del borde a blanco. Y ahora no necesitamos tener éste. Podemos mantenerlo blanco, gris claro. O podemos quitar este color de fondo. Podemos mantener este aquí de esta manera. Y primero agreguemos aquí un texto de marca de posición. Por lo que podemos decir IMO, en realidad para comer sólo ser visible aquí porque tenemos una imagen de fondo. Por lo que hay que añadir, hay que añadir aquí un color de fondo. Por lo que hay que añadir aquí un color de fondo. Entonces voy a habilitar este color de fondo. Y entonces esto, entonces este dx va a poner en el centro. Ahora, podemos identificar nuestro texto, pero ¿qué podemos hacer? Simplemente podemos aumentar nuestro tamaño de fuente hasta el texto y luego podemos simplemente reorganizar. Puede ser desde aquí, correo electrónico. Y entonces tal vez podamos definir nuestro botón Enviar aquí. Podemos definir nuestros diferentes botones. Por lo que este color se ve realmente bonito. Ya no quiero cambiar este color. Por lo que aquí podemos añadir un botón y la altura del botón y lo que va a ser igual. Entonces, ¿qué puedo hacer? Simplemente puedo duplicar este rectángulo. Y lo voy a poner en el mismo nivel, de la misma manera. Pero voy a minimizar, sin embargo. Voy a minimizar el peso de éste. Y entonces definitivamente necesitamos cambiar el color a un color claro, este color. Y entonces se va a quedar genial. Entonces no necesitamos tener este derrame cerebral aquí. No necesitamos tener esta frontera. El color de fondo es este radio moderno para éste, este borde. Pero ¿para qué sirve esto? Voy a quitarlo llamado Suscribirse botón entrada. Y aquí tendremos que poner un texto. De acuerdo, Así que primero déjame hacerles un grupo, suscribir entrada, llenar y suscribir entrada para el grupo McDermott, voy a decir suscribirse entrada. Y desde aquí voy a sumar nuestros textos. Se puede decir suscribirse. Puedo poner aquí este subíndice. Este es el texto de suscripción. Entonces tenemos este campo de entrada y luego tenemos este texto. Se ve realmente bonito. Voy a hacerles un grupo. Por lo que este botón Suscribirse, les voy a hacer un grupo. Voy a cambiarle el nombre. Voy a decir botón Suscribirse. Aquí vamos. Por lo que tenemos el botón suscribirse y tenemos estos suscribirse diseñados. Perfectamente. Genial. Entonces se ve muy bien, y realmente me gustó este. Y en la siguiente parte, diseñaremos nuestra sección de pie de página. Por lo que voy a detener este video justo aquí y seguiremos con desde la próxima conferencia. Nos vemos en la próxima conferencia. Adiós. 9. Diseño de la sección del pie de página: Bienvenido a esta conferencia. En esta parte, vamos a empezar a diseñar nuestra sección de pie de página. Por lo que hemos hecho tantas cosas hasta ahora. Pero ahora es el momento de diseñar nuestra sección de pie de página aquí. Entonces para hacerlo tan rápido, creo que no necesitamos tener esta masa de espacio en nuestro pie de página. Por lo que simplemente podemos minimizarlo un poco. Voy a seleccionar este texto fuera, y luego lo voy a minimizar un poco más. Y luego desde aquí creo que puedo añadir esta opción put. Entonces voy a tomar un diseño de rectángulo desde aquí. Entonces puedo diseñar éste aquí. Genial. Y luego rápido, voy a añadir este color de fondo. No exactamente este color. Creo que este color. Déjame ver cómo se ve. Quería usar este color. Creo que creo que estamos usando este color sigue siendo, es realmente grande. No necesitamos que no necesitamos este tamaño más grande de nuestro pie de página. Podemos minimizarlo. Y luego puedo saborearlo. Sí, lo es. Ok. Ahora, se ve muy bien o podemos usar un color diferente, tal vez. Déjame probar cómo se ve si uso un color diferente en lugar de este color, qué pasa con este color es ligeramente oscuro. Supongo. No se ve mal. Se ve bien. Voy a quedarme con éste. Y ahora, ¿qué puedo hacer aquí? Por lo que básicamente, podemos sumar dos partes diferentes, dos secciones diferentes para ésta. Y a lo mejor puedo añadir un título aquí. Y luego podemos simplemente agregar opción de colapso, anotar opción de colapso aquí. Entonces, ¿qué puedo hacer primero? Primero cámbialo a Pie de página, rectángulo de pie de página, sea lo que sea que estamos escribiendo. Y entonces voy a añadir un texto aquí. Entonces vamos a llegar a la sección. Lo vamos a empezar desde esto, esta rejilla. Voy a añadirlo. Podemos decir servicios y hacerlo un poco más grande. De acuerdo, Entonces en lugar de, podemos decir 24 tal vez, y luego podemos sumar, bien, así que 26. Y luego antes y después podemos traducir para ajustar la familia de fuentes de ésta. Podemos elegir exactamente este color, este, creo. Y, um, pero en la parte inferior, también podemos sumar una longitud desconocida. Entonces, ¿cómo podemos diseñar este subrayado? Creo que podemos elegir uno diferente. Creo que éste podemos elegir. Y quería conseguir algo realmente audaz o algo realmente único. Y sí, se ve bien, pero entonces tendré que hacerlo un tamaño más grande. De acuerdo, así que quédate con éste. Entonces ahora después de eso, voy a sumar nuestro subrayado. Entonces para dibujar un subrayado, normalmente prefiero usarlo de esta manera en lugar de usar la herramienta de línea. Porque la herramienta de línea es poco difícil a veces de diseñar. Por lo que voy a añadir border-radio 20, y luego la altura va a ser tres. Entonces podemos seleccionar el color a blanco o ejecutar este color. Y entonces puedo, puedo, puedo dibujar esto. Puedo arrastrar este color solo, justo al fondo de este servicio. Genial, Se ve bien. Por lo que ahora también puedo disminuir la altura a dos píxeles. Se ve bien. Ahora, puedo añadir aquí un par de artículos. Servicios que podemos decir. Ahora aquí puedo decir desde aquí solo puedo empezar a escribir. Puedo decir, puedo decir nuevo hogar, Pero definitivamente el tamaño de la fuente será muy pequeño aquí. Tal vez 161616 sea realmente pequeño. A lo mejor 2424 será bueno. Entonces casa va a ser 24. Ahora, voy, voy a añadirlo desde aquí y voy a duplicarlo. Creo que en este espacio. Se ve bien. De acuerdo, entonces voy a duplicarlo un par de veces más. Frío. Entonces tenemos éste. Podemos decir nueva era propiedad de casa nueva. Propiedades inmobiliarias. Y sólo estoy escribiendo algunos servicios al azar. Sólo por sólo para agregar algún texto aquí llamado apoyo préstamo bancario. Puedes agregar a cualquier texto lo que quieras tácticamente, en realidad no importa. Entonces préstamo bancario bancario, después podemos agregar tarjeta de crédito. Por lo que debe ser banco no L, debe ser préstamo bancario. Y luego creando tarjeta de crédito, hazla capital. Muy bien, por lo que se ve muy bien. Entonces, ¿qué podemos hacer ahora? Podemos hacerlos en grupo. Por lo que toda esta parte guardia puerta, préstamo bancario llamado apoyo y el nuevo grupo McDermott hogar. Voy a hacerles un grupo. Voy a hacerles un grupo. Y luego lo voy a decir. Artículo de servicios. Entonces puedo. Vale, entonces otra cosa tenemos que hacer grupo para éste y esta, lo siento, estos para hacerlos un grupo también podemos decir comida o título. El título y luego voy a hacer un duplicado. Y sólo puedo ponerlo aquí. Y luego puedo duplicarlo también. Y aquí vamos. Entonces esta es la belleza de esta cosa. Y ahora en lugar de servicios, por lo que podemos decir simplemente producto, servicios incidentes, podemos decir producto. Y aquí vamos. Por lo que tenemos estas superficies, tenemos este producto características, tenemos esta opción también producto, y luego podemos cambiar algo desde aquí podemos decir que va a ser podemos decir que todos los inmuebles. Bienes raíces y luego la Parte D, después se viste. Y entonces se puede decir centro comercial. Después centro comercial y arriba. Y luego podemos agregar tarjeta. Y luego podemos decir teléfono y solo escribiendo algún nombre aleatorio, teléfono del jardín. Así tarjeta de producto y teléfono. Y aquí podemos agregar otra cosa. Podemos. ¿ Qué podemos hacer? Normalmente tenemos este tipo de cosas en la foto, pero podemos agregar 21 texto más y una descripción más aquí en realidad. Por lo que tal vez podamos, podemos editar texto aquí. Simplemente podemos agregar un texto. Podemos decir meta futura. Objetivo futuro. De acuerdo, Así que básicamente, en lugar de esto, simplemente podemos duplicar este título de carpeta. De acuerdo, entonces tenemos este título de foto aquí, así que sólo podemos arrastrar éste de esta manera. Y entonces simplemente puedo decir meta futura o futuro, meta futura. Y entonces cómo se ve, va a lucir genial, pero no necesitamos tenerlo, vale, está bien. Podemos simplemente, ¿por qué simplemente podemos decir 80 o tal vez un 100? Y luego podemos agregar nuestro texto aquí. Podemos decir, nuestro objetivo futuro es que el Congreso se describa aquí. Y entonces, ¿qué puedo hacer? Básicamente, puedo disminuir el tamaño de la fuente a 40. Y como les dije antes que tenemos nuestra, hemos creado este activo aquí. Entonces voy a arrastrar esto. Texto aquí. Y sólo puedo ponerlo ahí. Genial. Por lo que ahora tenemos estas tres opciones. Entonces podemos simplemente hacerlo o simplemente podemos añadir algunos textos más, pero creo que no necesitamos añadir más texto aquí. Pero la única cosa que podemos hacer aquí, definitivamente podemos agregar un par de nuestro ícono aquí. ¿ A qué me refiero con esto? Entonces tenemos esto, tenemos esto, nuestro, tenemos nuestro plugin aquí. Así ícono de filtro. Por lo que simplemente podemos decir facebook. Entonces podemos decir Instalar, entonces podemos decir Twitter, LinkedIn. Vale, entonces tenemos este ícono aquí. Para agregar esos ícono. ¿ Qué puedo hacer? Simplemente puedo tomar ayuda de las herramientas Elipse y luego puedo dibujar este ícono. Así que asegúrate de que se vea igual. Entonces va a ser tardía de manera tardía. Entonces debería comenzar desde el mismo tamaño y luego cómo se ve ahora. Entonces no es tardy. Agreguemos un 35 por 35. Aquí vamos. Entonces en lugar de esto, voy a elegir este color blanco para que se vea realmente bonito y tengamos éste. Entonces, ¿a qué te refieres con eso? Así que ahora vamos a tratar de agregar este plugin, este ícono rápido. Entonces tenemos este ícono. Y podemos decir rápido, Facebook. Y lo voy a poner aquí. Y déjame intentarlo. Voy a arrastrarlo dentro de la caja. Para que pueda ver este ícono de Facebook está aquí. Ahora como tenemos nuestro ícono, tenemos nuestra elipse. Hagamos de ellos un grupo. Por lo que podemos decir ícono social. Ahora, duplicarlo. Entonces Comando D, y voy a ponerlo en este espacio. Antes de eso. Déjame ver cómo se ve. Ahora, puedo duplicarlo cuatro veces más, así que necesitamos una es para Facebook, instagram, Twitter, y LinkedIn. Ahora, déjame quitar este ícono rápido. Por lo que voy a agregar ahora ícono de Instagram. Entonces este plug-in, estos iconos de relleno. Entonces voy a añadir Instagram. Entonces voy a añadir Instagram. Por lo que su Instagram va a aparecer aquí. Y lo voy a poner aquí. Y luego voy a quitar este ícono rápido. Y luego voy a añadir Twitter. Supongo que hay aquí. Para que simplemente pueda arrastrar este Twitter. Y de aquí puedo quitar éste también. Entonces hay tutor va a estar en LinkedIn. Y puedo hacer esto linkedin también aquí. De acuerdo, así podemos ver cualquiera de estos porque todo es epi o fuera de este marco. Entonces, lo que tengo que hacer, necesito simplemente arrastrar todo dentro de este marco. Ahora, deberíamos poder ver nuestro ícono. Genial, se ve muy bien. Me gustó. Muy bien, por lo que hemos implementado con éxito esta sección de pie de página, y se ve muy bien. Y en la siguiente parte, vamos a diseñar nuestro login e inscribirse ritmo. Y después tendremos que sumar la sección de prototipos. Por lo que voy a detener este video aquí mismo y seguiremos con la próxima conferencia. 10. Regístrate e inicia sesión en el diseño de página: Bueno, bienvenido de nuevo una vez más. En esta parte, comenzaremos a diseñar nuestro login te paga una UX. Por lo que normalmente vamos a diseñar esta cosa. Entonces en nuestra página de registro, vamos a tener tres de espectáculos. Y en la página de inicio de sesión, vamos a tener dos opciones. Entonces, ante todo, lo que me encantaría tener, me encantaría. Así que permítanme derrumbarlo éste. Por lo que necesitaremos un marco más. Déjame intentarlo, echarle un vistazo, en ese, nuestro diseño principal, si algo falta aquí, todo está bien. No necesitamos hacer nada aquí. Todo se ve genial. No queremos cambiar nada. Perfecto. Y ahora aquí, haga clic en el marco. Tenemos que sumar uno más, que se llama Índice TO 14 por 14. Y aquí tienes. Aquí. Primero voy a arrastrar, voy a, voy a diseñar, voy a tomar un rectángulo saludable. Entonces voy a añadir un rectángulo este lado. Entonces, pero antes de eso, déjame intentarlo. Creo que tenemos que ir un poco por este lado para que podamos ver la media es pegar. Entonces en lugar de 47 por ciento, hagámoslo 70 por ciento para que consigamos una pantalla más grande, una más grande. O simplemente podemos ir simplemente a ejecutar éste. Así que solo quiero volver a correr simplemente. De acuerdo, así que vamos a cambiar el nombre. Podemos decir inscribirse. Esto va a ser todo inscribirse ritmo. Entonces voy a correr ritmo de diseñador para que podamos ver exactamente qué tan grande es nuestro rectángulo en nuestra pasta de registro. De acuerdo, así que lleva tiempo. De acuerdo, entonces tomamos más espacio para éste. Así que voy a, voy a, lo que voy a hacer, voy a seleccionar este rectángulo. De acuerdo, vamos a hacer clic en el abajo primero. Voy a hacer esto de esta manera. Entonces entonces obtenemos más espacio en el lado derecho. Ahora para este rectángulo, voy a añadir a nuestros MAs, vale, así que voy a añadir una imagen para ésta. Yo puedo elegir éste. Déjame, déjame probar quién quiere lucir bien? Entonces ahora tenemos éste. Voy a presionar éste. Vale, no se ve bien. Por lo que voy a quitar éste. Tal vez el otro. Podemos elegir éste o tal vez podamos probar éste. Entonces, ¿qué pasó aquí? Entonces, ¿por qué presionamos esto? De acuerdo, así que he quitado el en vez de inmenso, he quitado todo el asunto, así que no debería hacerlo de esta manera. Así que permítanme reemplazar el desorden. Entonces voy a reemplazar esto por éste. Por lo que se ve bien. Ahora, creo que se ve mejor que el anterior, pero crea un poco de sombra. Pero podemos elegir una imagen más, que es DC mess. A lo mejor podemos probar este TMS o el otro. El otro también es bueno. A lo mejor éste exactamente éste cabe en esta pantalla pequeña, más pequeña. Sí, va a encajar. Entonces voy a quedarme con éste. Y ahora voy a tomar ayuda de este rectángulo, vale, Primero necesitamos tener un texto aquí. Entonces voy a poner un texto aquí. Podemos decir sign-off. Podemos decir firmar. Permítanme aumentar el tamaño de fuente de éste. Entonces tendremos que agregarlo, tal vez 2032, no ahí. Y aquí, podemos añadir éste aquí. De acuerdo, así que si queremos, también podemos cambiar el color de éste, tal vez de esta manera. Ahora, ¿qué podemos hacer? Podemos simplemente agregar un rectángulo aquí. Y podemos cambiarlo a 20. Un poquito más. A lo mejor es abundante. Y entonces podemos sumar nuestra frontera aquí. Y podemos cambiar el fondo a blanco. Genial, Se ve bien. Entonces, ¿qué puedo hacer ahora aquí? Podemos simplemente añadir un nombre aquí va a ser nombrado es una especie de texto de un placeholder. Así que voy a arrastrarlo aquí. Y para este placeholder, no necesitamos tener que agregarlo a. A lo mejor necesitamos tener 16. Y aquí vamos. Tenemos éste. Ahora les voy a hacer un comando de grupo G. Podemos decir que el nombre del grupo es, podemos decir nombre, input, float, input, filter. Y 21 cosa más que quiero hacer. Yo quiero hacerlo. Que sea un componente porque para el mismo diseño, necesitamos nuestra fase de inicio de sesión para que podamos reutilizarla. Entonces hazlo gran componente o control ultra k, se va a hacer componentes. Entonces el icono ha sido coloreado, icono se ha cambiado y en el activo, también podremos ver esto. De acuerdo, así que ahora déjame duplicar esta 11 cosa más que necesitaremos. Entonces éste es por nombre y éste va a ser por nuestro e-mail que vamos a tomar de qué? ¿ Usuario? Correo electrónico. Y entonces vamos a tomar, para éste, vamos a decir contraseña. De acuerdo, entonces vamos a tomar contraseña y también podemos añadir una casilla de verificación tipo de cosas aquí si queremos marcar la casilla, ¿por qué no? Entonces para eso, permítanme tratar de habilitar esta cuadrícula de diseño ruidoso rápido. Por lo que este diseño de rejilla va a ser 50. Y podemos agregar nuestra casilla de verificación aquí. Así que simplemente puedo dibujar la casilla de verificación justo debajo aquí. Tal vez aquí podamos. Puedo dibujar una casilla de verificación tipo de cosas aquí. Y luego lo puedo igualar con el mismo tamaño. Es decir, el punto de partida, podemos igualarlo. Ahora, se ve así, pero debería tener la misma altura y peso. Por lo que empezamos a los 30. Es de 30 por 30. Y tal vez podamos sumar un borde. Déjame atar cómo se ve. Si agrego aquí un borde y se parece a D. Así que tal vez podamos cambiar el tamaño del borde y luego cambiemos el color a blanco. Y cómo se ve. Se ve así. Pero el gris se ve bien. Y voy a dar un poco de radio fronterizo aquí. Genial, se ve bien. Aquí. Habrá que añadir un texto. A lo mejor podemos decir simplemente de acuerdo con términos y servicios, términos y condiciones. Por lo que concuerdan con términos y condiciones. Voy a ponerlo en el correo. Y veamos cómo se ve. Por lo que concuerdan con términos y condiciones. Se ve bien lo hemos iniciado desde el punto de partida de éste. Y genial. De acuerdo, entonces ahora tenemos que agregar un botón más. Entonces, ¿por qué no añadimos de nuestro componente, de nuestro, de nuestro componente que hemos creado? Porque nosotros, nosotros, yo quiero, porque quiero tener lo mismo, porque quiero tener el mismo botón de tamaño. Entonces en lugar de este nombre. Y primero creo que no necesito tener rápido. Permítanme cambiar el trasfondo de éste. Voy a añadir este fondo. No necesito tener esto no necesito tener esta frontera aquí, así que voy a quitar la frontera. De acuerdo, así que no necesito esta frontera. Déjame ver cómo qué puedo ver aquí? Parece que sigue siendo yo tengo esta frontera. No sé por qué. Tengo esta frontera. Se ha eliminado ahora. Sí. Ok. Por lo que este trazo los va a quitar ahora. Ok. Entonces no tengo ninguna frontera ahora. Entonces, ¿qué puedo hacer ahora? Puedo tal vez podamos intentar cambiar el color del botón, un poco de este color. Sí, podemos intentarlo. Puedes quedarte con éste y luego voy a editar texto aquí y la iluminación media, podemos decir, apuntarte. Genial. Por lo que vamos a sumar estos textos de registro en el centro. Y tendremos que añadir Este texto un poco más grande, tal vez 24. Y aquí vamos. Podemos ver la sign-off en este espacio. Se ve realmente bonito que hayamos diseñado nuestro ritmo de registro. Ahora, ¿qué podemos hacer aquí? También podemos agregar algunas cosas más, por lo que simplemente podemos duplicar esta y luego podemos mantener lo mismo para nuestro inicio de sesión, está bien, y haremos algunas modificaciones. Entonces, ¿qué puedo hacer? Voy a duplicar todo esto, voy a duplicar todo este fotograma. Comando D. Cool. Entonces voy a cambiar el nombre para firmar esto, así que la página de inicio de sesión. Entonces aquí voy a hacer los cambios. Entonces en lugar de inscribirme, voy a hacer que inicie sesión y no necesito tener a Nim en mi página de inicio de sesión o lo siento. No necesito que se llene el nombre. Entonces, ¿qué puedo hacer ahora? Sólo voy a jalarlo un poco más cerca de éste. Y tampoco necesitamos tener esta casilla de verificación aquí. Y en lugar de esto. De acuerdo, entonces creo que no hice éste. Éste y éste sólo para que sea un grupo en pausa. Puedo decir botón de inicio de sesión de lo podría hacer en la página de registro de registro, pero olvidé hacerlo. Para que puedas hacerlo agrupar para que podamos rastrearlo fácilmente. Ahora el inicio de sesión. Por lo que aún no es grupo. Entonces este inicio de sesión inferior y estos mazo de inicio de sesión y este lado inferior y no es Desagrupar. Ahora creo que lo es. De acuerdo, entonces ahora solo podemos acercarlo un poco más y debería estar en la misma línea. Y entonces también podemos ajustarlo de esta manera. Vale, vamos a ver qué podemos ver ahora? Genial. Deberíamos poder ver este aquí. Pero no estoy seguro exactamente de lo que está pasando. Entonces esta es nuestra pasta de inicio de sesión y tenemos nuestros correos electrónicos, y esta fue nuestra página de registro. Entonces tenemos nuestros pagos de inicio de sesión, nuestra base de registro, y tenemos nuestro texto. Esto no va a ser cubiertas para mí en lugar de escritorio, voy a cambiar el nombre a, podemos decir casa. Muy bien, así que aquí voy a hacer un poco de modificación de éste. Por lo que esto toma debe estar en el nodo central en la parte superior, en éste. De acuerdo, así que tal vez de esta manera. Déjame correr este y veamos cómo se ve. Voy a seleccionar éste. Y si corremos éste, deberíamos poder ver. Ahora podemos navegar a ritmo diferente porque aún no tenemos en el prototipado, pero espero que podamos hacerlo. Entonces en la siguiente parte, ahora se ve bien. Así que inicia sesión. Y otra cosa que olvidé agregar aquí es que podemos agregar un texto aquí. Puedo decir, se me olvidó añadir éste. Por lo que deberíamos tener aquí un texto y deberíamos agregar un texto aquí. Y podemos decir que ya tienen sesión de cuenta, inicie sesión aquí. Por lo que podemos simplemente debería partir de este lado y voy a hacer que se duplique. Entonces lo voy a llevar a la siguiente parte aquí en el ritmo de inicio de sesión porque necesitaremos tener aquí un texto más. Podemos decir, no tengo cuenta, regístrese aquí y solo necesito cambiar el texto. Podemos decir que no tienen cuenta. Puedo decir que nunca vengas apuntarte aquí. Muy bien, perfecto. 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. 11. Prototipos con animación: Bienvenido a esta conferencia. En esta parte, vamos a empezar a trabajar en nuestra sección de prototipos. Hasta ahora hemos diseñado esto. Ahí hay tres. Reencuadre o ella paga. Uno es la página principal, así que uno es nuestra página de inscripción, y luego uno es nuestro signo en pares. Por lo que ahora podemos pasar de este lugar a este inicio de sesión o inscribirse pegar. Por ello, necesitamos agregar aquí nuestro prototipo y lo voy a hacer en esta parte. Entonces para agregar un prototipo, se puede ver aquí en justo al lado este diseño tenemos una pestaña llamada prototipo. Por lo que voy a hacer click sobre este prototipo. Entonces en cuanto hagas clic en este prototipo, ahora tendrás opción de agregar prototipo, ¿de acuerdo? Por lo que cuando el usuario haga clic en el ritmo de inicio de sesión, cuando el usuario haga clic en la página de inicio de sesión, queremos enviarlos al ritmo de registración. Cuando hagan clic en la página de inicio de sesión, queremos enviarlos a la página de inicio de sesión. Así que vamos a añadir prototipo para el inscrito tan rápido, necesario hacer clic exactamente en este Texto de Regístrate y puedes ver que la garrapata ha sido seleccionada en el lado izquierdo también, no selecciones todo el grupo, vale. Sólo los textos, sólo el grupo o botón que quieras hacerlo por nosotros. Aquí tenemos este texto firmar apagado. Por lo que ahora si hago clic en él, entonces podré arrastrarlo, tal vez aquí u otros componentes. Entonces si quería ir a la pasta de inscripción, simplemente puedo hacerlo. Y en cuanto deje caer éste, un pequeño pop-up va a salir de aquí. Y aquí podemos seleccionar nuestra opción prototipo. De acuerdo, Así que por ejemplo, qué tipo de prototipo queremos tener onClick o sobre droga, o mover el ratón sobre el ratón, dejar el ratón hacia abajo y un par de otras opciones. Entonces para nosotros, ahora queremos tener desclick. Significa que el usuario hará clic en la página de inscripción. Vamos a enviarlos a la pasta de inscripción. Por lo tanto, necesitamos seleccionar en click. Si quieres agregar un Jagger y arrastrar y soltar, entonces tendrás que hacer este tipo de cosas, bien, dependiendo de tu requerimiento. Por lo que voy a hacer click en el onclick. Y entonces aquí tenemos que seleccionar navegar a ella es porque que vamos a navegar de un fotograma a otro fotograma. Estamos en casa y pero queremos movernos para apuntarte a ritmo. Por lo tanto, necesitamos sumar este navegar y ellos tienen un par de otras opciones. Por ejemplo, superposiciones abiertas, superposición de hisopo, cerrar superposición abiertamente y un par de otras opciones. Por lo que se abren superposiciones tipo de caja modelo. No vamos a discutirlo aquí ahora. Por lo que voy a hacer click en este navegar a donde queremos ir. Ya seleccionamos este apunte ahí arriba. Se seleccionará el motivo por el que son firmante. Pero aquí también puedes moverlo. También puede seleccionar inicio de sesión. Entonces va a seleccionar nuestra página de inicio de sesión. Pero queremos volver a, queremos pasar a la pasta de inscripción. Y ahora justo después de eso, tenemos a nuestros enemigos y sección. Entonces cuando, mientras que nuestro usuario hará click en el ritmo de la registración, si queremos mostrar cualquier tipo de animación, entonces podemos hacerlo haciendo clic aquí, se puede ver este instante en lugar de instantáneo, simplemente podemos decir mover adentro, salir, deslizarse adentro, deslizarse hacia fuera. Por lo que voy a seleccionar, o también puedo, voy a seleccionar diapositiva en. Se va a quedar así. Y también podemos seleccionar éste aquí de lado izquierdo, de abajo a arriba, de arriba a abajo. ¿ Y qué pasa con estas pequeñas animaciones? También tendremos esta opción para ver esto. Esto nos va a dar este tipo de ideas. Y disolver es así. Y salir es así y esto. De acuerdo, entonces tenemos estas opciones aquí. Y entonces empujar va a verse así. De acuerdo, entonces también puedes ver cómo se va a quedar. Entonces voy a usar esta diapositiva en. Y ahora voy a, ahora vamos a ver qué podemos ver aquí? Entonces esta es nuestra base y tenemos nuestra suscripción. Y si hago click en este cierre, entonces podemos ver nuestra base de inscripciones. Genial. Se ve realmente bonito. Acabo de notar que deberíamos agregar una cosa más aquí. Primero, completemos el prototipado de Sean. De acuerdo, entonces ahora tenemos que asegurarnos de eso, vale, Y una cosa más que cuando el usuario haga clic en el inicio de sesión, debemos enviarlos a la página de inicio de sesión. Por lo que si hago clic en él, ahora, podemos enviarlos a nuestro ritmo de inicio de sesión y luego desclicar para pegar el inicio de sesión. Entonces permítanme venir aquí desde la firma hasta el inicio de sesión, y también podemos agregarlo aquí. Entonces vamos a firmar el inicio de sesión. Y a partir de aquí, en vez de deslizar, voy a decir leve o lata, podemos dar diapositiva aquí, también la misma animación. Ahora vamos a darle una oportunidad. Tenemos que ejecutarlo rápido. Y también tendremos que agregar prototipos desde aquí. Entonces si ya tienes una cuenta, entonces simplemente podemos enviarlas a ritmo de firma. Ok. Por lo que voy a asegurarme que se pueda ver éste ahora voy a hacer click en el inicio de sesión. Por lo que estamos en el diseño de pasta ahora necesitamos agregar prototipado para estos dos textos. De acuerdo, entonces si, si hay en ritmo de inicio de sesión, entonces los enviaremos. Ok. Entonces te los enviaremos que está en ya tengo una cuenta. Significa que o bien ya tienen una cuenta, por lo que simplemente pueden iniciar sesión. Por lo que nos vamos a pasar a navegar hasta el inicio de sesión. Entonces vamos a sumar este deslizamiento. Y si desde los pares asignadores, si no tienen cuenta, entonces podemos enviarlos a inscribirse base. De acuerdo, por lo que ahora deberíamos poder hacer click sobre él. Así que no tengas una cuenta inscribirte aquí. Voy a hacer clic. Entonces estamos en ritmo de inscripción y ya tenemos una cuenta, luego inicia sesión aquí, y luego inicia sesión. Entonces, ¿qué podemos hacer cuando el usuario haga clic en el botón de inicio de sesión? Les daremos acceso a nuestro hogar. De acuerdo, entonces cuando un usuario haga clic en el botón Iniciar sesión, les vamos a dar acceso a. Les vamos a dar acceso a nuestra página de inicio. Para que podamos hacer clic en éste. Y luego podemos decir onclick, entonces nunca llegar a de aquí a la página principal. Entonces así es como también podemos sumar nuestra navegación. Entonces, por ejemplo, tienes tal vez 50 o 60 páginas. Para que esa vez te será muy difícil arrastrar éste de aquí a allá a, a tu pantalla deseada. Entonces en la interacción, simplemente puedes agregar tu, simplemente puedes agregar tu todo. Quiero decir, eres opción de prototipado. Simplemente puedes seleccionar, hacer clic, navegar a la pantalla y luego al instante. Entonces para éste, la animación que voy, voy a seleccionar. Déjame probar cómo va a verse. Por lo que voy a seleccionar Disolver. Veamos cómo se ve. Entonces si hago click en este inicio de sesión, y aquí va. Por lo que ahora estamos en este cool basado en casa. Se ve realmente bonito. Por lo que hemos agregado con éxito nuestro prototipado. Ahora, déjame intentarlo de nuevo. Estamos en ritmo de firma. No tengas cuenta inscribirte aquí. Estamos en una página de inscripción y luego ya tenemos un inicio de sesión de cuenta aquí. Y luego iniciar sesión, cerrar la sesión aquí. Ya tienes un inicio de sesión de cuenta. Y a partir de aquí estamos asignando y necesitamos agregar una opción más aquí. Por lo que si hago clic en el botón Registrarse, no va a hacer nada. Entonces, lo que quiero tener cuando haces doble clic en la registración, significa que lo han hecho con éxito. Entonces podemos enviarlos a los pagas de inicio de sesión para firmar. Por lo que podemos sumar un prototipado más aquí en nuestra base de inscripciones. Voy a resbalar éste. Y luego se muestra indirecto. Entonces la camarilla, así que onclick y luego navegue hacia y en lugar de ninguno, voy a decir iniciar sesión. Y luego en lugar de instantáneo, ¿qué puedo decir? Puedo decir deslizarse adentro. Está bien, genial. Por lo que si hago click en este cierre, estamos en la firma. Y si hago click en el inicio de sesión, entonces estamos en nuestra base domiciliaria. Por lo que hemos agregado estas teclas de sección de prototipado. Entonces, ¿qué más nos queda? Creo que hemos hecho todo lo que queríamos tener en nuestro proyecto. Y espero que ustedes hayan aprendido mucho de este curso porque hemos diseñado nuestra web completa. Y te va a ayudar mucho. Se va a añadir tu próximo disponible en tu portafolio. Por lo que este es nuestro diseño completo completamente funcional UI UX que acabamos de terminar. Y nuestro prototipado también está funcionando. Y todo está funcionando perfectamente. Ningún tema en absoluto. Muy bien, así que gracias por inscribir este curso. Adiós. 12. Exportar tu diseño y compartir el enlace: Bienvenido de nuevo una vez más. En esta parte, te voy a mostrar cómo podemos exportar y compartir nuestro diseño. Hemos completado nuestro proyecto, hemos diseñado todo. Hicimos nuestro prototipo. Ahora, es el momento de compartir nuestro diseño con el equipo o la gente de todo el mundo. O tal vez estás trabajando en equipo. Por lo que tendrás que compartir el enlace o tendrás que compartir el diseño con el equipo de desarrollo para que puedan construir la app y puedan escribir su programación y esas cosas. De acuerdo, entonces ahora, ¿cómo puede hacerlo? No hay nada que aura es muy fácil. Por lo que ahora me voy a pasar a esta parte de diseño. Entonces esta es nuestra app y todo está funcionando a la perfección. Nada demasiado temprano. Entonces hicimos todo y luego iniciamos sesión, luego todo. Entonces tenemos tres frame, por lo que ahora podemos exportarlo por ejemplo, al principio, voy a exportar esta homepage. De acuerdo, Entonces, ¿cómo puedo hacerlo? Entonces selecciona el marco, y luego en la parte inferior tendrás una opción Exportar. Ahora desde aquí, puedes seleccionar opciones de exportación. Entonces, qué tipo de formato único, tal vez PNG JPEG o SPC. Digamos que quiero JPG. Y luego voy a hacer clic en Exportar a casa. Entonces se va a descargar. Ahora, si hago clic en él, entonces podré ver el diseño. De acuerdo, este es el formato y simplemente puedo acercar, y luego simplemente puedo ver todo el diseño en formato JPEG. También puedes probar otro formato. Y se ve muy bien. De acuerdo, Así que de esta manera, puedes descargar todos y cada uno de los fotogramas que hayas diseñado. Ahora, descarguemos el marco de registro, tan slick marco de sign-off. Y en la parte inferior puedes simplemente decir Exportar de nuevo, JPEG, y luego puedes exportar, apuntarte ritmo. Ahora si hago click en la página de inscribirse, ahora podemos ver nuestra página de inscribirse ha sido descargada. Hemos descargado nuestra página de inscripción. Ahora da click en la página de inicio de sesión y va igual. Entonces no importa cuántos tengas. Simplemente puedes seleccionar tu marco y luego solo puedes descargarlo. Y también puedes, también puedes descargar dos veces, tres veces, cuatro veces tal vez necesites archivar y solo puedes seleccionar, puedes agregar varias veces, luego se va a descargar tres tiempos. Así que necesito sólo uno. Entonces voy a seleccionar JPEG y luego exportar el inicio de sesión. Y déjame revisarlo para que podamos ver nuestra página de inicio de sesión está aquí. Ahora, lo más importante es que cómo compartir este archivo a cualquiera. Por lo que podrás ver opción llamada Compartir, haz click en ella. Y luego aquí se puede ver un par de instrucción. Entonces sólo para leerlo atentamente. Aquí están diciendo que para agregar editores, mueva rápidamente este archivo de empleos a un proyecto. Puedes hacerlo en un archivo de proyecto y luego puedes agregar un tipo diferente. Para que puedas agregar la dirección de correo electrónico de la gente y luego reciben una invitación. Y aquí se puede ver Set Rol de la misma. Por ejemplo, sólo se les puede dar permiso para ver. No quieres darles permiso para editar. De acuerdo, así que ahora si seleccionas puedes comerlo y si pones el Emulab y luego si mandas la invitación, la persona va a recibir la invitación tendrá acceso a tu, este marco para todo su archivo en este proyecto para editar y actualizar. ¿ De acuerdo? Si solo quieres mostrarlos, entonces simplemente puedes hacer click en can view. Y luego también puedes seleccionarlo. Cualquiera que escuche, sólo las personas invitadas a este expediente y mucha opción de seguridad que tienen. Y, pero en general, también puede hacer clic en el enlace Copiar. Después para terminar con este enlace se puede compartir y luego cualquiera puede acceder a este enlace. Por ejemplo, si lo agrego aquí, entonces tendré una opción. Así que ya estoy en este navegador. Por lo que definitivamente tendrán una opción, pero vamos a abrir nuestro abierto un pájaro diferente en navegador cognitivo. Y aquí voy a pegarlo. Y veamos qué podemos ver aquí. Entonces se va a cargar la pieza. Y ojalá podamos ver nuestro proyecto aquí. Y aún así se está tomando algún tiempo. Está bien, genial. Por lo que aquí está nuestro archivo completo. Se puede ver este es nuestro expediente completo. No estamos encerrados. Figma nos está preguntando qué podemos seguir accediendo a nuestro diseño, acceder a nuestro archivo, y luego lo podemos ver, pero no tenemos ningún acceso para editarlo. Podemos hacer cualquier cambio aquí. Podemos cambiar cualquier cosa aquí. Sólo podemos verlo aquí. Sólo podemos verlo aquí. Genial. Y entonces puedo hacerlo. Esta es la página de inicio, este es el ritmo de inscribirse, y este es el signo en parejas. ¿ De acuerdo? Y así es como va a verse. Entonces así es como puedes compartir tu proyecto. Diseñarás con cualquiera, podrás descargar, puedes dar acceso a tu proyecto a cualquiera. Y así es como funciona principalmente. Espero que hayan plantado y gracias por inscribirse en este curso.