Diseño de interfaz de usuario en Figma: crea una página de aterrizaje de una tienda de tenis paso a paso

1. Introduccion: Eh, hola, bienvenido a otra clase increíble de Figma conmigo, Ken Como siempre, me alegro de tenerte aquí. Ahora, en esta clase, vamos a diseñar una página de aterrizaje de zapatilla completa en Figma, y te guiaré paso a paso por el proceso, tal como lo haría en un proyecto del mundo real Ahora, como he mencionado, mi nombre es Ken, y soy diseñador web y educador, y mi objetivo con esta clase es mostrarte no solo cómo hacer que las cosas se vean bien, sino cómo pensar como diseñador, cómo estructurar una página web, cómo construir secciones y cómo crear algo que se sienta pulido y moderno de arriba a abajo Comenzaremos con la sección de héroes y luego pasaremos por las categorías, promociones, productos de tendencia, registraciones, incluso un mini feed de Instagram hasta que hayamos construido una página de destino completa que esté limpia y lista para ser agregada a tu portafolio. Este diseño de landing page también será tu proyecto de clase. Será una gran oportunidad para practicar un flujo de trabajo de figma del mundo real, mostrar su estilo y alejarse con una pieza terminada que pueda compartir o construir Incluso puedes agregar tu propio giro y creatividad a la landing page para que sea única. Dicho esto, ¿estás listo para empezar? Porque lo soy. Vamos a sumergirnos directamente en. 2. Demostración del proyecto de clase: Entonces quiero mostrarles una demostración rápida de lo que vamos a estar construyendo a lo largo de la clase. Este va a ser tu proyecto de clase. cuando terminemos esta clase, vas a terminar con algo así. Entonces solo voy a desplazarme, se puede ver que tenemos una bonita sección de héroes con dos botones de llamada a la acción. Tenemos una sección de productos destacados, categorías destacadas, y el usuario puede hacer clic e ir a esa categoría. Olvidé etiquetar estas categorías. Acabo de duplicarlos desde el primero. Pero no te preocupes. Contamos con una sección de descuento definitiva. Se puede conseguir el trato con este llamado a la acción. Tenemos un popular hot y trending kicks. Esto se supone que es ver más, para que puedan ver más. Pueden ser redirigidos a la página con más patadas calientes y tendenciosas Hay una breve introducción a nuestra historia, y puedo hacer clic para ir y Leerme. Tener una lista de correo firmar formulario de registro aquí. Si tus fans, tus clientes quieren estar al tanto de lo que sucede en tu tienda, pueden inscribirse aquí. Entonces tenemos feed de Instagram. Las personas que usan zapatos comprados en tu tienda pueden etiquetarla en Instagram o aparecer en el feed de Instagram de la tienda. Y tenemos un buen pie de página que estamos contratando porque esta tienda está contratando representantes de ventas. Hay otro recordatorio para inscribirse. Entonces, como puedes ver, esta es una página de destino agradable, simple, pero robusta, una landing page moderna. Y para cuando terminemos de trabajar en esto, habrás adquirido las habilidades para reconstruir cualquier landing page que quieras con IgMA Porque mi objetivo con esta clase es mostrarte un flujo de trabajo utilizable, mostrándote las diferentes herramientas y características con las que trabajarás la mayor parte del tiempo. Entonces con eso dicho, creo que es el momento de pasar al diseño real de la landing page. Entonces te veré en la siguiente lección. 3. Sección principal: Entonces aquí estoy dentro de mi tablero. Deberías estar en algún lugar así, y deberías tener al menos un equipo creado automáticamente para ti aquí después de crear tu cuenta. Entonces tengo un equipo por defecto aquí y se llama Ken the Dons Team Entonces ahora, dentro de Ken the Don's Team, solo tengo un proyecto de equipo predeterminado. Si quiero más proyectos, tengo que pagar tengo que actualizar al plan pago. Pero un proyecto es más que suficiente por equipo. Ahora, dentro de nuestro proyecto, podemos crear tres archivos de diseño. Entonces voy a hacer clic en este signo más. Y eso va a abrir un nuevo archivo de diseño, que no tiene título Voy a llamarlo landing page de Sneak Store. Ingrese o simplemente haga clic en cualquier lugar afuera. Y ahora aquí estamos. Entonces lo primero que quiero crear es un frame o lo que me gusta llamar una pantalla. Entonces, si selecciono esta herramienta aquí abajo, y si no es visible, simplemente haga clic en este menú desplegable y selecciónelo del menú desplegable. Seleccionar marco. Automáticamente verás diferentes plantillas con las que podemos empezar aquí. Y como estamos diseñando para escritorio, voy a abrir las plantillas de escritorio, y voy a seleccionar el preset de escritorio, que es 14 40 por 1024, y ese es nuestro tamaño de fotograma o mi tamaño de pantalla. Ahora, cambiemos a nuestra vista previa muy rápidamente. Queremos crear este encabezado. Tenemos este logo aquí. Entonces tenemos la barra de búsqueda y nuestra barra nerviosa. Veamos cómo crear eso. Empecemos con el logo. Entonces voy a volver a cambiar a nuestra obra de arte, y voy a seleccionar el texto también. Haga clic en cualquier lugar dentro del marco. Al hacer eso, la capa de texto se va a agregar automáticamente al marco, el marco de escritorio que agregamos anteriormente, y eso es lo que ves aquí. Como puedes ver, cada elemento es una capa. El texto es una capa y el marco es una capa. El texto está dentro del marco. Entonces voy a escribir patada y seleccionar afuera. Sólo voy a arrastrar estos mientras esto todavía está seleccionado, voy a ir al tamaño de fuente aquí y hacerlo. Vamos a aumentarlo a tal vez ese tamaño. Cambiemos esto también a peso de fuente negro, entre negro. Y quiero seleccionar esto e ir al color de relleno y darle un color grisáceo, así como así Hagamos esta patada blanca, ve a Phil, selecciona blanco. Entonces sigamos adelante y agreguemos la imagen de fondo para al menos poder ver el logo. Entonces voy a presionar Control Shift K para importar una imagen. Y tengo una carpeta de activos preparada para ti. Esta carpeta Assets va a estar disponible debajo de este reproductor de video. Así que solo descárgala si quieres seguirla, tendrá todas estas imágenes. Aquí está el fondo que utilicé. Ahora voy a seleccionar la esquina ahí y arrastrar hasta ese lugar, soltarlo, seleccionarlo, dr click y enviar para atrás. Ahí vamos. Voy a mantener presionada la tecla Alt y arrastrar esto y para evitar moverme hacia arriba y hacia abajo, mantendré presionada la tecla shift para limitarlo a justo esa línea recta y la voy a colocar ahí mismo Voy a cambiar esto a 16. Talla 16. Volvamos a cambiarlo a regular, y voy a darle color. Déjame llamarlo hogar por ahora. ¿O qué tenemos aquí? O tenemos colecciones de tienda, recién llegados. Así que mantén presionada Control y desplázate con una rueda del ratón. Tienda déjame cambiar el tamaño de eso. De hecho, lo que tengo que hacer es, si se trata de un libro de texto de párrafos así, puedes cambiar a auto Con para convertirlo automáticamente en un texto de una sola línea Y ahora puedo aguantar y cambiar para moverme en línea recta Colecciones. ¿Qué tenemos aquí? Novedades, perfil de blog. Perfil. Qué tenemos aquí. Perfil, entonces tenemos esa canasta de tarjetas. Vamos a ver cómo agregar esa canasta. Pero por ahora, déjame aguantar Control y alejar con una rueda del ratón y ahora espaciarlos. Mantenga presionada la tecla Mayús para seleccionar múltiples y presione estos dos. Mantenga pulsada la tecla Mayús para seleccionar eso. Creo que están bien espaciados de manera uniforme. Y ahora voy a hacer doble clic en esta imagen para poder redimensionar solo los lados Así. Puedo empujarlo en esta dirección o puedo jalarlo así porque quiero tener un área negra para el texto. Haga doble clic en eso, y ahí vamos. Por lo que ahora, Control Shift K para importar otra imagen. Y creo que el zapato que usamos para esa sección fue, déjame ver, tenemos ese par y ese zapato. Entonces tenemos esto. Entonces con eso, solo voy a hacer click y arrastrar luego voy a Alt y arrastrar déjame arrastrarlo aquí. Después mantén pulsada la tecla shift para seleccionar ambas, y pongámoslas ahí. Ahora, selecciona esto y haz doble clic en él para que podamos venir a subir desde la computadora para reemplazarlo. Tenemos ese par de snickers de falda. Y ahora, como pueden ver, está cortada en el costado. Así que voy a arrastrar así y asegurarme de que no lo jalemos demasiado y cortemos la parte superior. Así que voy a tirar del superior también. Creo que esa es una buena talla. Mantenga presionado el turno para cambiar el tamaño tal vez hasta ese lugar. Ahí vamos. Entonces, a continuación, sigamos adelante y agreguemos zapatillas que digan mucho. Entonces voy a seleccionar esto, mantener presionado y arrastrar hacia abajo, manteniendo pulsada la tecla shift para moverme en línea recta. Eso dice mucho. Aumentemos ese tamaño, tal vez hasta ese punto, arrastre y tire de eso. Redujamos la altura de la línea. Así como así. A continuación, descubre lo más fresco. Tengo este texto en alguna parte. Déjame ver. Déjame pegarlo aquí. Entonces voy a seleccionar el texto dos. Después haz clic y arrastra aquí mismo y pégalo ahí. Ahora bien, esto es demasiado grande. Quiero que sea talla 16. Entonces talla 16. No es negro. Debe ser regular, y debe tener una altura de línea de 22. No, 24. Déjame ampliar eso. Jala hacia arriba, cámbiala a una coma. Creemos también el botón. Estos dos botones, colección y exclusivas gotas. Así que voy a volver a cambiar aquí, mantener pulsada Control y acercar con una rueda del ratón. Voy a cambiar de herramienta de imagen a rectángulo y voy a arrastrar y dibujar una caja ahí. Y voy a seleccionar el texto también y simplemente dar clic en cualquier lugar aquí. ¿Qué dice aquí? Colección. Colecciones. Mantenga pulsada tecla Mayús para seleccionar el No, antes que nada, vamos a darle estilo al botón uno. Entonces voy a seleccionar esto, y quiero darle este color aquí. Entonces voy a golpearme en el teclado. Yo para escoger la herramienta cuentagotas, y voy a seleccionar un pixel que me guste así Y ahora este es nuestro color. Quiero cambiar el color de esto al fondo, así que voy a golpear I y ahora voy a muestrear un píxel del fondo, así como así. Seleccione esto. Quiero darle tanto radio de esquina de diez. Así como así. Ahora, seleccione esto, mantenga presionada la tecla Mayús, seleccione esta, mantenga presionada la tecla Alt y Mayús y arrastre. Después seleccionaré esto, seleccionaré eso y lo cambiaré a este color blanco. Esto debería decir gotas exclusivas. Gotas exclusivas. Ahora, de hecho, quiero cambiar esta alineación para alinear el centro porque siempre hemos querido alinear desde el centro, y voy a mantener pulsada la tecla Mayús y seleccionar este botón de fondo e ir a la alineación y alinearlo al centro. Esto ya está alineado al centro. Si mantengo pulsado Mayús y selecciono ambos, entonces ve aquí, no se moverá. Entonces ahí vamos. Entonces pienso, bien, todo lo que tenemos que hacer ahora es seleccionar esto y esto y tal vez empujarlos, tal vez hasta ese punto, pero seleccionar esto. Mantenga pulsada la tecla Mayús, seleccione esa esquina y arrástrala. Ahí vamos. Seleccione esto, mantenga presionada la tecla Mayús. Arrastre y seleccione estos dos para seleccionar la alternativa. Si quieres seleccionar esto, puedes seleccionar esto, puedes seleccionar esto, luego mantener presionada la tecla Mayús e ir seleccionando cada elemento, o puedes seleccionarlo y luego mantener presionada la tecla Mayús y luego seleccionar esa área. Deseleccionará el fondo que había seleccionado y seleccionará sobre qué más pasa el mouse Entonces con eso, puedo empujar esto hacia arriba solo un poco, y ahí vamos. Sigamos adelante y previsualicemos nuestra obra de arte. Lik a un lado, ahí vamos. Entonces esa es nuestra sección de héroes, y estoy contento con lo que tenemos. Ahora, notarás aquí hay cierta desalineación en la barra nerviosa El logo parece estar alineado más bajo que la barra nerviosa principal que los elementos del menú. Entonces volvamos aquí, seleccionemos el logo, seleccionemos todos estos textos, alineemos todo verticalmente al centro, así como así. Todo estará alineado recto verticalmente. Ahora, vamos a empujarlos hacia arriba así. Ahora bien, cuando tenemos esto, si lo explico un poco, hay esta alineación del texto dentro del cuadro de texto. Si lo alineamos a la mitad, se empujará a la mitad de este cuadro de texto. Y eso realmente ayuda a veces. A veces podrías querer que esté en esa posición, y verás más tarde. Entonces ahí vamos. Puedo cambiar esto a altura fija. ¿Dónde está? Ancho automático, así como así. Volviendo aquí, se ajusta automáticamente. Haga clic aquí también. Ahí vamos. Entonces así es como crear nuestra sección de héroes. En la siguiente lección, veamos cómo crear la sección de categorías destacadas. Sí, veamos cómo crear esto. Te veré en breve. No vayas a ningún lado. 4. Sección de categorías destacadas: Ahora es el momento de crear la sección de categorías destacadas. Así que volvamos a cambiar a nuestro editor de figma. Volviendo aquí, sólo voy a desplazarme hacia abajo. Ahora, notarás que no tenemos suficiente espacio. Entonces voy a mantener pulsado Control y luego seleccionar el fotograma. Mantén el control y desplázate hacia afuera para alejar el zoom. Después voy a seleccionar la parte inferior y simplemente arrastrarla para crear habitación. Mantenga el control y acerque el zoom. Ahí vamos. Así que sólo voy a aguantar y arrastrar esto. Y voy a cambiar el color de relleno. Como puedes ver, está mezclado porque hay blanco y gris. Así puedo cambiar el color haciendo clic en el signo más, y quiero seleccionar este negro así como así. Déjame asegurarme de que está en el medio del marco. Qué tenemos aquí. Permítanme copiar este texto desde este otro lado. Copia eso. Yendo a arrastrar este cambio esto a la talla 16, hazlo regular y alinearlo al centro. Seleccionaré esto y haré el mismo centro de alineación. Pero para esto, voy a hacer doble clic y pegar mi texto aquí. Acabo de copiarlo de otra parte. Tendrás que teclear eso. Y ahora con este seleccionado, voy a alinearlo al centro del marco, así como así. Esto ya está alineado. Tenemos resbaladizos y frescos, así que seleccionaré esto y voy a arrastrar fuga y fresco Y esto dice categorías destacadas. Categorías destacadas. Ahí vamos. Entonces ahora, esto nos está obstruyendo. Así que voy a seleccionar todas estas cosas aquí arriba y golpear el soporte izquierdo para enviarlo a la parte de atrás o simplemente a la derecha fuga y enviar a la espalda. Para que ahora esto esté frente a esta imagen. Seleccione eso y cambie el color. Ya tenemos este gris, y voy a reducir eso a la talla tal vez 24. Sí, creo que la talla 24 está bien. Por el espaciado entre letras, le voy a dar el 5%. Empujarlo hacia abajo, apenas un poco así. Tal vez incluso seleccionar a los tres y empujarlos hacia abajo. Hasta ese lugar. Volviendo aquí, necesitamos crear algo como esto. Ahora, como pueden ver, había intentado experimentar con este diseño a diferencia de estos otros diseños. Estos fueron los primeros diseños. Entonces estaba probando algunas ideas, pero no replicé eso Pero vamos a seguir adelante y crear este tipo. Entonces seleccionaré esta herramienta de rectángulo y arrastraré manteniendo presionada la función Mayús para asegurarme de que es un cuadrado y tal vez la dejaré ahí mismo. Mantenga presionado el control y haga zoom con una rueda del mouse, la rueda central del mouse, mantenga presionada rueda central del mouse para hacer una panoramica así. Y voy a seleccionar esto, darle un radio de borde de 20. Selecciónela copiar, pegar. Ahora tenemos dos copias. El otro ejemplar está encima de esto. Entonces voy a seleccionarlo y mantener presionada la tecla Shift Out para redimensionarla proporcionalmente Desplazarse tal vez hasta ese punto, y le voy a dar quizá un gris un poco más oscuro. Entonces voy a arrastrar esto a un oscuro No, vamos a hacerlo más ligero. No, más oscuro. Sí. Démosle un radio de esquina que sea la mitad del radio de la esquina exterior. Así que diez para que se vea más uniforme así. Y ahora quiero arrastrar esto ligeramente hacia arriba. Entonces voy a arrastrar esto. Entonces simplemente arrastraré esto y lo colocaré en algún lugar ahí. Ahora seleccionaré esto y mantendré presionada la tecla Mayús y seleccionaré esta. Controla G para agruparlos en una sola cosa. Y si selecciono, puedo alinearlos todos para estar alineados al centro en relación entre sí. Así que así. Ahora, sólo voy a aguantar y arrastrar esto. Y qué dicen patadas sustentables. Patadas sustentables. Voy a colocarlo ahí mismo. Voy a golpear el soporte derecho para llevarlo al frente. Está alineado con el centro. Pero ahora quiero seleccionar mantener presionada la Mayús para seleccionar eso y alinear el texto al centro de ese. Seleccione el Mayús de Control G para desagruparlos de manera que seleccione esto y esto y alinee todo alinee el texto al centro de eso Ahora, seleccionaré esto y reduciré el No, déjame mantenerlo en ese tamaño. Mantenga presionado el control y el mouse se arrastrará hacia afuera. Ahora voy a salir arrastrando esto, mantén presionado el turno para hacerlo más pequeño o escalarlo hacia abajo, ponerlo aquí mismo, corchete derecho. Y ahí vamos. Ahora, como pueden ver, no tiene sombra de caída, pero en la referencia, había añadido alguna sombra de caída. Entonces iré a efecto. Si selecciono efecto, automáticamente agregará una sombra paralela. Hay otros efectos, pero el predeterminado es la sombra paralela. Otros están aquí. Entonces creo que la configuración predeterminada de la sombra paralela está bien para mí. Entonces solo seleccionaré la imagen, luego seleccionaré esta casilla que la sostiene y alinearé la imagen al centro. Así como así. Ahora, creo que voy a hacer esto un poco más oscuro. Sí, y copia eso. Código, copia, selecciona esto. Vaya aquí, haga doble clic en Pegar. Haz esto blanco. Seleccione eso y arrastre de desplazamiento hacia fuera. Después Control D para repetir lo que acabas de hacer. Control D otra vez. Creo que esa es una buena talla. Voy a sacar turno D, salir turno y arrastrar una vez más, y ahí vamos. Así que tenemos una bonita sección de categorías destacadas. Entonces ahora todo lo que tenemos que hacer es hacer doble clic en cada imagen y reemplazarla con zapato diferente. Entonces digamos esto y tendrás que redimensionarlo. Así que voy a mantener pulsado para arrastrar este turno de mantener presionado hacia fuera para hacerlo mucho más pequeño. Y luego voy a arrastrar eso y eso arrastra los costados para asegurarse de que todos los lados de los zapatos sean visibles. Sí, está bien. Seleccione esto y esto y alinéelo al centro. Haga doble clic en esto, seleccione esta. Ahora voy a adelantar rápidamente esta parte, y nos vemos una vez que hayamos hecho esto. Así que adelante y haz esto. Entonces haz doble clic en eso. Eso ya es apropiado. Y ahí lo tenemos. Así que acabo de terminar de actualizarlos. Ahora, claro, vas a tener cambiar el nombre de estas categorías. Déjame ver cuáles son los nombres. Parece que acabo de duplicar la cosa y olvidé darle las categorías. Pero vamos a ver. Contamos con zapatillas de alto rendimiento. Ahora, parece que es demasiado grande. Entonces hagamos esta fuente, tal vez la talla 14. Entonces talla 14. Sí, performance snakers ediciones limitadas y patadas sustentables Déjame poner eso ahí mismo. Oh, no, agreguemos esto. Bien, así puedes tener otras categorías aquí. Yo sólo voy a dejar eso ahí o simplemente puedes quitar eso y simplemente dejar esas cuatro categorías que tenías. Creo que voy a seleccionar esto y hacer esto manteniendo presionada y desplazando y arrastrando la esquina Quiero hacerlo un poco más ancho que el texto aquí y luego empujarlo hacia arriba. Entonces vamos a previsualizar los cambios. Primero que nada, miremos lo que tenemos en el original. En mi original, creo que me gustaron más los colores que estos colores que tenemos aquí son demasiado oscuros. Entonces creo que solo voy a hacer estos un poco más ligeros. Vayamos al campo. Y sí, así, pero ahora pongamos el texto en negro. Así que volviendo aquí y escoge el negro. O simplemente puedes deshacerte de eso. Déjame ver qué pasará si nos deshacemos de eso. No, de hecho, creo que el problema es con los rectángulos de fondo, son demasiado oscuros. Así que vamos a hacerlos más ligeros. Entonces hagamos Bs más ligero también. Justo ahí. Entonces creo que eso me gusta más. Ahora, si volvemos aquí, se actualizará automáticamente, y ahora está nuestra sección de categorías destacadas. Necesitamos agregar un botón, igual que aquí, ver más. Entonces todo lo que tenemos que hacer es volver aquí, seleccionar esto y esto, luego arrastre el Control G para agruparlo, y luego asegurémonos de que lo alineamos al centro así. Ahora, controla Shift G para desagruparlo para que puedas seleccionar el fondo, ve aquí mismo y vamos a darle ese color negro Seleccionemos la fuente y le demos un color blanco. Selecciona eso y vamos a empujarlo hacia arriba, manteniendo presionada la tecla shift para moverte en línea recta. Vuelve aquí, y ahí está nuestra sección de categorías destacadas. Entonces creo que ese es un buen lugar para terminar con esto. En la siguiente lección, echemos un vistazo a cómo crear esta sección de descuentos, que ya estoy seguro probablemente ya sepas cómo hacerlo, pero te veré en breve. 5. Sección de descuentos: Ahora es el momento de crear la sección de descuentos aquí mismo. Así que volvamos a cambiar a nuestro editor. Entonces me voy a desplazar No, volvamos al editor aquí mismo. Así que manteniendo pulsada Control y alejando con una rueda del ratón, solo voy a sacar esto y ponerlo en algún lugar ahí para que el espaciado entre el botón y aquí sea casi el mismo que el espaciado entre aquí y aquí Ahora, sólo lo voy a hacer un globo ocular. Creo que ese es un buen lugar. Voy a hacer doble clic en esto. Ahora bien, si quiero cambiar el tamaño de la altura de esta imagen, solo puedo hacer esto porque va a redimensionarla Entonces, si quiero cambiar el tamaño de la altura de esta imagen sin mover los lados, todo lo que tengo que hacer es hacer doble clic en esta Cuando esto aparece, significa que ahora puedo editar la caja que contiene la imagen. Así puedo sostener el lado inferior y jalarlo hacia arriba. Entonces digamos en algún lugar ahí, haga doble clic o simplemente cierre esto. Y ahora solo voy a seleccionar uno de estos zapatos, tal vez esto fuera y arrastre, tal vez esto fuera y arrastre, luego mantén presionada la tecla shift y afuera para redimensionarla proporcionalmente desde todos los lados Entonces sólo voy a reposicionar eso, haga doble clic en él para que podamos reemplazarlo. Entonces creo que usé creo que este es el zapato que elegí, doble clic en eso. Y porque estamos en este estado, podemos arrastrar los lados sin afectar a otros lados. Todo bien. Haga doble clic en el exterior. Selecciónelo. Mantenga presionada la tecla Mayús y cambie su tamaño desde este lado, manteniendo presionada la tecla Mayús. 50% de. Así que solo voy a agarrar estos tres, Alt arrastrarlos y soltarlos aquí. Si bien todavía están seleccionados, voy a primero que nada, ir al color de relleno plus, y vamos a darle este color blanco. Ahora, veamos si uno de ellos tiene un color diferente, el último descuento. Entonces voy a seleccionar que el descuento definitivo. Entonces parece que necesitamos hacer esto más pequeño. Lo quiero más pequeño. Entonces, manteniendo presionada la tecla shift para seleccionar slick, quiero que todos estos pequeños encabezados por encima los encabezados principales sean del mismo Para los encabezamientos, quiero que todos sean del mismo tamaño. Para el texto, texto corporal, quiero que todos sean del mismo tamaño. Así que vamos a cambiar el tamaño de esto y esto a la talla tal vez 18. Sí. Entonces manteniendo presionado el turno, vamos a empujarlos a todos hacia abajo más cerca. Y ahora no quiero que sean negros. Quiero que sean regulares. Ahora, de hecho, vamos a ponerlos en negrita. Ahora, seleccionando esto y este y este superior, cambiemos la alineación a la izquierda. Y mientras todavía están seleccionados, vamos a alinear a la izquierda para alinearlos todos en una línea recta. Y quiero alinearlos a los botones de la sección héroe y al contenido, ya que puedes ver ese resaltado rojo. Entonces déjame simplemente empujarlos hacia arriba. Voy a seleccionar este texto y reescalarlo así. Sí, ese lugar. Entonces voy a seleccionar este botón. Arrastra el soporte derecho para asegurarse de que está en la parte delantera. Seleccionándolo, luego ojo en el teclado para elegir el cuentagotas a Quiero seleccionar pixel verde claro. Ahora, sé que no hemos mantenido el mismo esquema de color aquí arriba, y normalmente nuestra marca mantiene el esquema de color hasta el final. Pero a veces encontrarás en algunos sitios web, están mezclando colores en diferentes partes. El sitio web es muy colorido. Y entonces lo que queremos asegurarnos es que no queremos mezclar este color verde aquí. Si selecciono I y muestro eso, si le doy a este botón este color verde, este verde está chocando con este otro verde Y cuando estás desplazándote como cliente, cuando estás en esta sección, es mejor que la combinación de colores sea consistente Entonces por eso estoy seleccionando esto. Entonces yo y eligiendo un verde que esté cerca. Y luego selecciono esto, luego selecciono el fondo para muestrear el fondo. Ahora ese es un bonito esquema de color para esta sección en particular cuando alguien se desplaza hacia abajo Entonces creo que ese es un buen lugar para terminar con esto. Déjame ver si hemos olvidado algo. Consigue este trato. No voy a cambiar este texto, pero voy a seleccionarlo y darle una altura de 24 líneas. Consigue este trato. Y ahora cambiemos aquí a nuestro sitio web y veamos qué tenemos. Entonces, si me voy desplazando hacia abajo y llego a este spot, tenemos nuestra sección de descuentos Entonces solo una cosa diminuta que quiero hacer, como pueden ver, el espaciado aquí no es lo mismo que el espaciado aquí. En primer lugar, permítame mantener presionado el turno y seleccionar todo. Ahora, seleccionando esto, luego mantén presionada la tecla Mayús y arrastra para seleccionarla y anular la selección del fondo Controla G para agruparlas, luego mantén presionada la tecla Mayús para seleccionar el fondo y alinear el cuerpo del texto el centro en relación con el fondo. 50% de salmones, volvamos aquí. Controle el turno G para desagruparlos. Después el 50% de los zapatos se llama Slomons. Entonces voy a seleccionar ese texto. Vaya aquí al color de relleno y seleccione el color verde. Volviendo aquí, está nuestra última sección de descuentos. 6. Sección de tendencias: Ahora sigamos adelante y creamos esta sección de patadas calientes y tendenciosas Ahora, sólo voy a cambiar de nuevo a nuestra obra de arte, donde está mi editor aquí mismo. Y antes de que vayamos demasiado lejos, quiero acercarme a esto bastante rápido. Y quiero ajustar el ligeramente solo yendo aquí. De hecho, permítanme darles este color. Entonces presionaré I en el teclado. Ahora tienen ese color, pero quiero hacerlos medianos audaces. Así que ve al peso de la fuente, semi negrita, no medio. Y también quiero aumentar el espaciado entre letras al 5%. Creo que se ven mucho mejor así. Pero claro, ahora se han derrumbado a la siguiente línea porque no caben en las casillas actuales. Entonces mantendré presionada la Alt para cambiar el tamaño desde ambos lados. Si no mantiene presionada la tecla Alt, cambiará el tamaño de un lado, el lado que está sosteniendo En redimensiona desde el centro. Entonces quiero sacar eso, seleccionar esto, mantener presionado y tirar eso hacia un lado, hacia afuera, y tirar de eso. Creo que ahora se ven más presentables. Ahora bien, la razón por la que hice esa actualización fue, en primer lugar quería que se viera mejor, pero al mismo tiempo, como pueden ver en nuestra referencia aquí, la sección de tendencias se ve bastante similar a la sección de categorías destacadas. Así que sigamos adelante y volvamos a cambiar aquí, y quiero seleccionar estos scroll ligeramente, luego mantén presionados y arrastrados, luego mantén presionada la tecla Mayús para evitar moverte hacia la izquierda y hacia la derecha. Entonces, muéstralo y déjalo ahí mismo. Entonces suelta el turno y sal. Aleje un poco, y quiero empujarlo hacia abajo porque quiero asegurarme de que el espaciado aquí sea bastante similar al espaciado aquí. Entonces creo que ese es un buen lugar. Y ahora te darás cuenta aquí que no tenemos esa cajita ahí abajo. Bien. Sólo voy a hacer un globo ocular hasta ese punto de ahí mismo De hecho, permítanme simplemente eliminar estos tres. Y voy a seleccionar estos dos y asegurarme de que el interior esté alineado con el centro del exterior haciendo clic en eso y en aquello. Ahora voy a seleccionar este fondo interior, ve aquí. ¿Tenemos un gris oscuro? Dice que estoy desconectado. Bien, así que haz que eso no sea demasiado oscuro, no negro, gris oscuro porque esto es negro Entonces voy a seleccionar este texto e ir aquí, darle ese color blanco. Selecciona el snaker y mantén pulsada la tecla shift y selecciona la interna y alinéala verticalmente al centro así De hecho, vamos a empujarlo hacia arriba solo un poquito. Ahora, creo que eso se ve bien. Entonces seleccionándolo, puedo aguantar y cambiar. Démosle ese espaciado de 22. Aquí, 22, Turno D. Creo que eso es bueno. Entonces haré doble clic en eso y lo reemplazaré con los zapatos de tendencia. ¿Qué es tendencia aquí? Digamos que esta es tendencia. Haga doble clic en eso. Esto también es tendencia. Voy a tener que ajustar esto así, pero ahora parece más grande que los demás. Así que aguantaré y cambiaré, seleccionando esto también. Agárrate y muéstralo para escalarlo proporcionalmente. Entonces hagamos doble clic en esto. De hecho, qué coincidencia. Todos parecen estar en la misma dirección. Entonces, ¿por qué no completamos ese look? Creo que esta es una buena. Antes de elegir eso, tenemos otro. Creo que es un buen candidato, así que voy a hacer doble clic en eso. Y ahora, ahí vamos. Entonces estas son las patadas calientes y tendenciosas. Así que haz doble clic en eso. Solo di hot y trending en lugar de patadas calientes y tendenciosas. Popular aquí arriba. Popular. Estas son las patadas más vendidas en la tienda. Yo sólo voy a dejar eso así porque este no es un sitio web real, pero teclearías una descripción ahí dentro. Y vamos a ver, leer más. No, esto no se debe leer más. Esto debería ser conseguir trato, así que compra. Entonces me olvidé de editar este botón, pero ahora aquí podemos editarlo. Ver más así como así. Entonces creo que ahí vamos a parar eso. Antes de irnos, echemos un vistazo rápido a lo que tenemos ahora. Así que solo empieza a desplazarte. Y ahí está lo que tenemos. Esperemos a que se cargue. Bien, ahora, echemos un vistazo rápido a lo que tenemos aquí, desplazándonos Creo que esto no está equilibrado. Creo que tenemos que empujarla un poco hacia abajo. Este espaciado aquí es más pequeño que este espaciado aquí. Sí, en algún lugar ahí. Al hacer clic afuera de aquí, se actualizará automáticamente. Ahora está bien posicionado, desplazándose hacia abajo, nuestro descuento y ahora nuestro trending hot end trending Entonces creo que este es un buen lugar para terminar con esto. En la siguiente lección, sigamos adelante y creemos nuestra historia así. Nos vemos en breve. 7. Sección sobre nosotros: Ahora vamos a seguir adelante y crear la sección Acerca de nosotros. Así que volviendo a nuestro editor, donde está nuestro editor, aquí mismo. Así que desplazándose hacia abajo. Quiero seleccionar esto. Por cierto, creo que aquí no lo equilibramos correctamente, así que solo lo voy a empujar hacia arriba, ligeramente hacia arriba hasta así desplazándose hacia abajo, solo voy a seleccionar estos tres out drag para duplicarlos. Y claro, voy a cambiar la alineación a la izquierda y alinearlas a la izquierda así. Entonces voy a seleccionar el texto del párrafo y arrastrarlo así, y voy a seleccionar esto, seleccionar estos tres, arrastrar y ponerlos en algún lugar por aquí. Seleccione Alt y arrastre esto. Mantenga pulsada la tecla Alt Shift para expandir eso porque queremos agregar para agregar estas imágenes. De hecho, voy a hacer doble clic en esto para poder editar la propia caja, así como así. Voy a hacer clic en eso para subir de seleccionar este tipo. Le voy a dar 20 radios de esquina. Entonces tenemos a estos dos. Así que Alt arrastra ese doble clic en él para poder editarlo. Ahora, por supuesto, mantén pulsada la tecla Alt, como aprendimos a redimensionarla desde dos direcciones Entonces creo que esa es una buena parte. Queremos que sea casi al cuadrado. Subir desde aquí. Sólo voy a seleccionar a este tipo. Entonces voy a arrastrar esto. Creo que el espaciado aquí era de 22. Ahora son 21. Sólo voy a hacer doble clic en esta subida desde computadora y seleccionar esa imagen. Ahora, volviendo aquí, tenemos sobre nosotros nuestra historia de alma. Entonces Y luego la historia aquí. Voy a seleccionar esto y darle una altura de línea de 24. De hecho, esto es creo 36. Yo le había dado 36. Y déjame agarrar ese texto, pegarlo ahí. Ahora, déjame expandir la caja, así como así. Selecciona el botón y vamos a alinearlo ahí mismo. Entonces digamos leer más. Y de hecho, creo que deberíamos tener para el botón, seleccionar el texto del botón y eso. Vamos a darle un espaciado entre letras del 5%, y hagámoslo mediano. Queremos que el texto sea más pronunciado. Seleccionaré el botón de fondo aquí. Agárrate para redimensionarlo desde ambos lados, hasta ese punto Piensa que estos dos están bien. Ahora, seleccionando estos tres Control G para agruparlos, seleccione estos tres para agruparlos. Control G. Luego selecciona estos dos grupos y alinéalos verticalmente en línea así. Ahora bien, esta distancia es demasiado pequeña, así que empujándolos hacia abajo así. Creo que es un buen lugar para dejarlos. Seleccione Control Shift G para desagrupar, seleccione este Control Shift G para desagrupar Ahora, voy a seleccionar estos tres y eliminar los efectos. Como pueden ver, tienen una sombra de caída porque nosotros duplicamos esto y tenía una sombra caída desde aquí arriba. Entonces queremos eliminar este efecto de una sombra como esa. Así que echemos un vistazo rápido a lo que tenemos en nuestra landing page. Desplazándose hacia abajo, ahí está nuestra vista previa. A mí me gusta lo que tenemos hasta ahora. En la siguiente lección, sigamos adelante y creemos esta sección de registro de newsletter o lista de correo inscríbase. Entonces te veré en breve. 8. Registro en la lista de correo: Bienvenida de nuevo. Entonces ahora es el momento de crear esta sección de registro de lista de correo. Entonces cambiando a nuestro editor. Aquí estamos. Ahora, volvamos rápidamente a nuestra referencia. Como puede ver, tenemos un formulario, nombre, dirección de correo electrónico y registro, pero estos otros siguen siendo similares. Entonces quiero elegir a estos tres. Entonces voy a seleccionar eso. A continuación, arrastre mientras mantiene pulsada la tecla Mayús para seleccionar la alternativa. Entonces va a anular la selección del fondo y seleccionar lo que hay al frente Entonces voy a arrastrar Alt dejar salir y ahora mantén pulsado turno. Así como así. Voy a arrastrar y seleccionar todo eso e ir a llenar más aquí, y voy a darle ese color negro. Aquí dice que nunca vuelvas a perder una gota. Nuevamente, esto es un cordón para obtener beneficios o un cordón para obtener beneficios. Déjame agarrar ese texto muy rápido. Pega eso ahí dentro. Así que solo voy a sacar arrastre mientras mantengo pulsado shift para duplicar y luego Control D para repetir ese movimiento que acabo de hacer. Seleccione estos dos. Entonces aumentemos el ancho. Si bien todavía están seleccionados, ve aquí, y vamos a darles tal vez estos antecedentes. No, eso es, ese fondo claro. Creo que esa es una buena forma. Podemos darle a esto un color negro. Entonces solo seleccionaré esto ve aquí, selecciona el texto, dale ese color blanco. Esto debería ser apuntarse. Esta debe ser la dirección de correo electrónico. Esto puede ser Oh, no, esta puede ser la dirección de correo electrónico, y este puede ser el nombre de pila. Seleccionando los dos, he notado que la alineación es central, así que alinémonos a la izquierda, y también alinémoslos a la izquierda así. Entonces cambiemos también el color del campo a un gris claro para que no sean demasiado pronunciados dentro del campo. Ahora, creo que debería acercarlos así. Creo que es una mejor manera de presentarlos. Arrastraré esto y quiero seleccionar estos tres, agruparlos , luego seleccionar ese grupo y la imagen para que podamos alinearlos así. Ahora, haz doble clic en esta subida desde la computadora. ¿Qué tenemos aquí? Tenemos este tema del fuego, pero, claro, ese era yo solo jugando con ideas. Puedes usar la imagen que quieras. Déjame ver. ¿Qué pasa con este rojo? ¿No? ¿Y ese zapato negro? Usa una imagen que represente tal vez regalos o descuentos o algo interesante que represente esta sección No me gusta el contraste en este zapato, así que reemplacemos eso con vamos a ir con estos dos zapatos. Sí, pongámoslos ahí mismo. Pero ahora quiero seleccionarlos así, y manteniendo pulsada la tecla shift, arrastrarlos hacia abajo en línea recta. Quiero asegurarme de que les damos suficiente espaciado así. Podemos reducir el tamaño de estos zapatos. Entonces creo que ese es un buen lugar para terminar con esto. No tenemos que hacerlo demasiado complicado. Ahora mismo, todo lo que estás haciendo es aprender las complejidades de Así que volviendo a nuestra vista previa, ahora, si nos desplazamos hacia abajo, tenemos un formulario de registro aquí mismo. Sí. Así que volvamos a nuestra referencia. En la siguiente lección, veamos ahora cómo crear esta sección de Instagram. Primero tendremos que crear una tarjeta de Instagram antes de duplicarla durante todo el tiempo. Te veré en breve. 9. Sección de publicaciones de Instagram: Es hora de crear esta sección de Instagram. Como puedes ver, tenemos cuatro tarjetas de Instagram, y todo lo que tenemos que hacer es crear solo una por ahora. Entonces vamos a ver cómo hacer eso. Cambiando a nuestro editor. Voy a desplazarme hacia abajo hasta aquí. Y como pueden ver, solo podemos copiar eso y luego lo arrastraré y lo pondré aquí mismo. Y lo que dice es Instagram pegado ahí. Puedes etiquetarnos en verso de patada y ser destacado. Si llevas nuestras patadas, puedes etiquetarnos si las publicas en Instagram Así que vamos a crear nuestra tarjeta. Sólo voy a seleccionar esto y Shift Control Shift G para desagruparlo. Y voy a seleccionar esto y hacia fuera arrastrar hacia abajo o simplemente arrastrar y ponerlo aquí mismo. Voy a sacar esto tal vez hasta ese punto. Sólo estoy tratando de conseguir algo que tenga esas dimensiones. Entonces tenemos un usuario. Tenemos un nombre de usuario follow. Vamos a seguir adelante y teclear eso rápidamente. Aquí hay un nombre aquí. Déjame salir arrastrando este texto. Y luego nos soporte para llevarlo al frente. Solo voy a usar esto como la publicación de Instagram que alguien usó publicó. Voy a alinearlo a la izquierda así. Entonces también voy a reducir el tamaño a tal vez 12, tal vez 14 altura de línea de 18. No, tal vez digamos 22. Empújalo hacia arriba apenas un poco. ¿Qué más tenemos aquí? Tenemos estos íconos. 12 K me gusta. Así que vamos a sacar esto solo estoy tratando de escribir todo el texto necesario. Voy a seleccionar este botón. Selecciona el borde inferior, mantén presionado para cambiarlo de tamaño así Entonces mantén presionado este lado y redimensionarlo así. Acercar el zoom, como puedes ver el radio de la esquina es demasiado grande. Voy a darle tal vez tres así como así. Entonces quiero cambiarlo a una frontera así en lugar de una sensación. Entonces porque tiene una sensación y ya no hay frontera, puedo hacer Shift X para cambiar. Cualquiera que sea el color del campo se cambiará para que sea el color del trazo, y el valor del trazo se cambiará para que sea el valor del campo. No tenemos trazo, por lo que la sensación se convertirá en ninguno, y el trazo tendrá el color de relleno. Entonces cambia X para revertirlas. El texto es blanco, así que voy a seleccionar eso y darle. Digamos ese color gris. Selecciona esto, ve al color del trazo y dale ese color gris también. Esto es seguir. Mantenga presionada la tecla shift para disminuir el tamaño. Ahora bien, esto es permítanme reducir el tamaño a nueve, alinearlo al medio así. Y hagámoslo medio. Entonces vamos a darle también un espaciado del 6%. Mantenga pulsada la tecla Mayús para seleccionar esto y alinearlas así. Ahora, te darás cuenta aquí tenemos algunos íconos que necesitamos. Entonces busquemos un ícono de usuario, chat de corazón. Así que volviendo aquí, voy a escribir icono plano. Así como así porque queremos descargar iconos desde aquí, Hart. Bien, así que voy a seleccionar este color rojo liso. Déjame seleccionar esto. Entonces voy a asegurarme de que te asegures de que iniciaste sesión. Y entonces ahora digamos 64, ese es el tamaño correcto que queremos para nuestro propósito, volviendo aquí adentro. Debido a que está descargado, puedo arrastrarlo desde aquí, caliente, y soltarlo aquí. Mantenga presionado el turno ahí mismo. Volviendo aquí y seleccionando otro corazón, tal vez este tamaño 64 también, descarga gratuita. Volviendo aquí. Sigue descargando. Bien, dejémoslo ahí dentro Mantenga pulsada la tecla Shift y vuelva a escalarla así. Quiero moverme a la izquierda, así como así. Volviendo a nuestra referencia 12 K me gusta, chatea y envía. Esta es una burbuja de chat agradable. Proceder a la descarga. Ahí vamos. Así que sólo voy a arrastrar este menú punteado aquí arriba. Mantenga presionado el turno para escalarlo proporcionalmente, y dejémoslo ahí También arrastremos esto un poco así. Después Control D para repetir. Haga doble clic en esto, luego reemplácelo con vamos a las descargas. Se supone que ese es el gráfico. Creo que manden eso es gráfico. Enviar. Todo bien. Entonces voy a arrastrar esto hasta el final así. Haga doble clic en él. Subir desde la computadora, y vamos a subir. Bien, no descargamos el marcador. Yo iré con esto. Tamaño 64, descarga gratuita. Ahora, vamos a reemplazarlo con un marcador. Ahora, seleccionándolos a todos, voy a alinearlos. Ya están alineados. Fuera arrastra esto, luego corchete para llevarlo al frente, mantenemos presionado y cambiamos para escalarlo para escalarlo proporcionalmente Entonces vamos a colocarlo ahí mismo. Radio de esquina de cinco. Haz doble clic dentro y arrastra esto tal vez hasta ese punto. De hecho, se supone que debemos hacer esto mucho más pequeño. Seleccione este control. Eso es control C para copiar, control V para pegar. Y ahora vamos a seleccionar el que hemos pegado, manteniendo pulsado Shift end out para que sea más pequeño hasta el punto en que esté alineado con esto Entonces vamos a arrastrarlo hacia arriba así y hacia abajo así. Y vamos a darle un gris un poco más oscuro así. Puede darle a esto un efecto de sombra. Arrastraré esto a la izquierda. Entonces también podemos tener un usuario. Iré con este usuario. Descargar 64, descarga gratuita. Volvamos a entrar aquí. Arrastremos a este usuario. Ahí vamos. Así que tenemos nuestro Ahora, claro, no es una publicación perfecta de Instagram, pero tenemos algo que podamos usar aquí mismo. Entonces seleccionando ese turno de mantener presionado para redimensionarlo proporcionalmente Quiero hacerlo un poco más pequeño, tal vez hasta ese punto. Ahora para el texto, vas a tener que cambiar el tamaño en consecuencia Para lo siguiente, mantenga pulsada la tecla Alt a medida desde ambos lados. Y luego usan un nombre. Ahora seleccionando esto, puedo sacar shift drag y Control D para repetirlo. Y creo que vamos a ir con esos tres. En nuestra referencia, tenía cuatro, y el texto y todo parecía mucho más pequeño. Pero recuerden, como dije, lo que estamos haciendo es tratar entender cómo trabajar con las herramientas disponibles en Figma. No estamos tratando de crear algo perfecto. Estamos tratando de enseñarte a usar estas herramientas. Una vez que sepas cómo usar las herramientas, puedes pasar todo el tiempo que quieras perfeccionando el diseño Entonces creo que este es un buen deporte para terminar con esto. Ya casi terminamos. En la siguiente lección, sigamos adelante y trabajemos en el pie de página. Entonces te veré en breve. No vayas a ningún lado. 10. Sección de pie de página: Casi terminado. Es hora de trabajar en el pie de página. Así que volviendo a nuestra obra de arte, aquí sólo vamos a desplazarnos hacia abajo, y déjame alejarme un poco. Bueno, antes que nada, me he dado cuenta de que duplicamos estos tres, pero no los alineamos al centro en relación con el marco. Entonces seleccionándolos, Control G para agruparlos, y luego alinearlos como un elemento. Controle el turno G para desagruparlos. También puedes dejarlos agrupados si quieres. Puedo agarrar el logo de ahí arriba o simplemente puedo recrearlo. Patada Vs. Vamos a darle este color. Le voy a dar este verde. No, ese verde no es bueno. Voy a darle este otro green aquí arriba, esto. Entonces creo que esto fue todo. Sí, creo que es un buen lugar para comenzar. Controle, seleccione para seleccionar este marco y luego arrástralo para cambiar su tamaño. Haga clic en el exterior. todo el photoctent justo aquí a un lado, así que solo voy a copiarlo y pegarlo Entonces déjame agarrar este texto aquí. Al arrastre. Pongamos eso ahí mismo. Una línea a la izquierda. Podemos carpi, quiero doblarlo de tamaño. También podemos darle una altura de 28 y espaciarlo solo un poco así. Volviendo aquí, vamos a crear esas dos líneas. Entonces seleccionaré la herramienta Pluma. Haga clic en cualquier lugar aquí y luego comience a dibujar. Cuando tenemos ese resaltado rojo, significa que nos estamos moviendo en línea recta. Así que simplemente voy a hacer clic en cualquier lugar allí, luego escapar, escapar de nuevo, hacer clic en Escape de nuevo para escapar de la reprimida Arrastra eso. Sólo voy a ponerlo ahí en algún lugar. Después seleccionaré esto. Arrastra. Después seleccionaré Voy a hacer doble clic en él. Después seleccionaré esto y mantendré presionado el turno para moverme en línea recta para reducir el tamaño. Entonces lo rotaré. Mantendré el turno para chasquear y una vez que esté vertical, lo puedo poner aquí mismo. Creo que sigue siendo demasiado alto. Así que solo puedo volver a aquí las dimensiones y reducir esto luego seleccionándolo, puedo empujarla hacia abajo tal vez hasta ese punto por ahora. Entonces voy a arrastrar esto. De hecho, deshacer, voy a arrastrar todos estos. Y ahora voy a venir aquí. Tengo una columna llamada Tienda. Esta va a ser la talla 20. Esta va a ser la talla 16. Entonces estos son enlaces para esta columna. Voy a expandir eso y tirar este empujar esto abajo tal vez hasta ese punto. Quiero que estos estén más espaciados, así que iré a la altura de la línea y los haré 36 así. Después seleccionaré estos dos. Al arrastrar el cambio, luego Control D dos veces. La segunda columna para mí es productos por categorías. Así que solo seleccionaré estos dos y sacaré arrastre. Ve a seleccionar estos dos y empújalos hacia la izquierda. Va a seleccionar esto y alinearlo al centro. Mantenga pulsada la tecla Mayús para seleccionarla junto con eso y alinearla al centro así. A continuación, sigamos adelante y creamos este botón y esta parte. Así que sólo vamos a arrastrar a estos dos arrastrando así. Voy a ponerlos ahí mismo. Y creo que este botón, nos perdimos este botón porque recuerden, nos peinamos los otros botones Tenían un 5% de espaciado entre letras así, y los hicimos medianos. Entonces esto que estamos contratando puede ser de este color. Entonces vamos a darle ese color. Volviendo a nuestra referencia, también tenemos esa forma. Seleccione esto, Control C para copiar, luego Control V para pegar. Lo has pegado en su lugar. Ahora manteniendo pulsada la tecla Shift y t la estamos redimensionando desde todos los lados. Lo quiero hasta tal vez ese tamaño, y quiero arrastrarlo hasta tal vez ese lugar. Déjame cambiar el color para que lo veas. Dale este color. Entonces ahora vamos a darle un radio de medio borde. La mitad de lo que es el radio del borde exterior. Después seleccionando estos dos, los alinearé al centro así. Empuja esto para que el borde a su alrededor sea casi del mismo tamaño. Entonces tirando de eso, ahora podemos darle a esto un texto como enviar Seleccione esos dos y alinéelos así. Inscríbase o envíelo. Déjame hacerlo negro así. Mantenga presionada, seleccione estos dos. Empuja eso así. ¿Qué más tenemos aquí? Tenemos el Google Play y Appstore. Ahora bien, estas son cosas que tendrás que buscar en Google y descargar. Botones de Google Play. Imágenes. Uh, déjame ver. Escojamos éste. Entonces estos chicos realmente han ocultado este botón, pero finalmente lo encontré. Aquí está. Ahí vamos. Así que volviendo aquí, solo voy a arrastrarlo y soltarlo aquí. Así que sólo voy a reducirla manteniendo presionada la tecla Shift y fuera. Voy a simplemente alinearlos en algún lugar ahí. Volvamos aquí a los iconos planos y descarguemos YouTube. Creo que ya tenía estos iconos descargados, pero para ti, vas a tener que descargarlos. Yo sólo quiero ahorrar tiempo. Entonces si voy a Control Shift K, creo que tengo esos íconos aquí en mi carpeta de descargas. Tan vinculado en todo el camino a X. Yo sólo voy a dibujarlos aquí. Ahí vamos, seleccionamos todos , alinearlos. Ahora, algunos de ellos son mucho más grandes. Así que mantén presionada la Alt para cambiar el tamaño de eso. Sostenga hacia fuera. Agárrate. Ahora somos más o menos del mismo tamaño, espaciado. Seleccione estos tres. O simplemente puedo seleccionar esto. Déjame seleccionar eso. Mantenga presionado y redimensiónela. Volvamos a nuestra referencia. Sí, tenemos que ponerlos ahí. Acerque el zoom y luego arrastre Alt el Control D dos veces. Entonces voy a hacer doble clic en esto Volver aquí. Haga doble clic en YouTube, seleccione esto, haga doble clic en él, suba desde la imagen, Instagram y haga doble clic para que podamos agregar X. Estos son demasiado grandes. Todavía quiero hacerlos mucho más pequeños. Y esto es quiero hacer esto un poco más alto y seleccionar todo y alinearlo verticalmente así. Selecciona estos tres, tira hacia abajo. Quiero alinearlos a este mapa del sitio. Ahora, quiero seleccionar esto y reducir la altura. Creo que ahora ese es un buen tamaño. Queda una cosa más. Antes de terminar esta sección, tenemos algo de texto aquí. Ahora bien, si saco esto, va a estar alineado a la izquierda. Vamos a alinearnos a la derecha. Y aquí decimos, inscríbase para acceso anticipado. Haga doble clic en eso, pegue eso ahí dentro. Hazlo desmayar. No lo hagas demasiado oscuro así. Permítanme simplemente empujar esto un poco hacia abajo, borre estos. Y creo que ahora estamos llegando a alguna parte. Entonces ahora si vamos a nuestro sitio web de referencia aquí, comencemos desde lo más alto y veamos qué tenemos. Así que desplazándonos hacia abajo, nuestras categorías destacadas, tenemos nuestra sección de descuentos, nuestro hot end trending Pueden hacer clic y ver más. Pueden ir a leer nuestra historia. Pueden inscribirse en nuestra lista de correo. Pueden ayudarnos a crecer etiquetándonos y mostrando los zapatos que nos compraron, y lo compartimos en nuestra plataforma Déjame seleccionar estos. Ahí vamos. Entonces creo que este es un buen lugar para terminar con esto. Hemos podido crear una página de aterrizaje desde arriba hacia abajo. Ahora lo siguiente que vamos a hacer es organizar y limpiar nuestro archivo porque si estamos trabajando en equipo o si queremos volver más tarde a trabajar en el proyecto, queremos tener algo organizado. ¿Cómo limpiamos las cosas? Hagámoslo en la siguiente lección. Nos vemos en breve. 11. Limpieza: Ahora es el momento de limpiar nuestro archivo de diseño. Entonces volviendo a nuestra obra de arte, ¿dónde está? Sí, aquí estamos. Empecemos desde lo más alto. Entonces cuando digo organizar, quiero decir, vamos a agrupar varias cosas y nombrarlas para poder encontrarlas muy fácilmente. Por ejemplo, aquí tenemos el logo y los elementos nerviosos. Y ahora quiero seleccionar estos elementos, así que voy a seleccionar kickers y todos los elementos del menú y hacer eso Seleccione todos esos y luego Control G. Ahora, cuando controle G, se agruparán. Recuerda, cada vez que añades algo a tu marco, se coloca debajo de ese marco debajo del marco. Entonces todo lo que hemos agregado a este marco todavía está debajo de él. Así que recuerda, agregamos un marco llamado desktop. Y así, de hecho, voy a hacer doble clic en él y llamarlo tienda de sneakers. Landing page. Como pueden ver, el nombre ha cambiado aquí arriba. Entonces ese es el nombre de esta landing page. Y ahora, dentro de la landing page, tenemos varias cosas que tienen cualquier nombre con el que venían incluso cuando las importamos. Por ejemplo, esta imagen de Google. Así que queremos cambiar el nombre de los artículos aquí. Así que recuerda, hemos seleccionado estos elementos y los hemos agrupado. Entonces ahora son del grupo uno. Vamos a llamarlos encabezado. Y vamos a esconderlas. Seleccionemos esta imagen, imagen de fondo. Aquí está. Haz doble clic en él y llámalo Imagen de héroe y escóndelo. Bien, antes de ocultarlo, seleccionaré el fondo, luego mantendré presionado Mayús y arrastraré y seleccionaré para seleccionar estos. Control G. Los llamaré Bloque de texto de sección Héroe. Después seleccionaré estas dos imágenes Control G. Imágenes de la sección Hero. Voy a ocultar eso, luego esconder las imágenes de la sección de héroes, luego ocultar el fondo de la imagen del héroe. Déjame llamarlo el fondo de la imagen del héroe. Entonces ahora todo ahí arriba está etiquetado. Sólo voy a seleccionar esto y Control G. Ahora está agrupado. Categorías destacadas. Entonces vamos a ocultarlo. Contraerlo. Seleccionemos este último descuento. Control G. descuento definitiva Sección de descuento definitiva, vamos a ocultarlo. Hot and trending Control G. Sección, vamos a ocultarlo. Sobre nosotros Control G. Por último, el pie de página, sección de pie de página de Control G. Colapsar, esconderlo, y colapsarlo. Sigamos y empecemos a desocultar todo desde lo más alto Así que la imagen de fondo héroe bloque de texto héroe encendido, imagen de fondo héroe en seleccionar esto, mantenga presionado Control, seleccione el fondo de la imagen de héroe, y vamos a ponerlos ahí arriba. De hecho, seleccionaré estos dos, Control G y los llamaré la sección de héroes colapsar eso. Por lo que ahora la sección de héroes es visible. Imágenes de la sección Hero. ¿Dónde están las imágenes de la sección de héroes también deberían estar dentro del grupo de la sección de héroes? Así que arrástralo y suéltelo ahí. Entonces ahora tenemos la sección héroe fondo, textblock e imágenes Vamos a mostrarlos. Tomemos también el encabezado y lo dejemos caer dentro de la sección de héroes. Se supone que debe estar en la cima, y vamos a mostrarlo. Vamos a mostrar la sección de fotos, que debería estar en la parte inferior Se supone que la sección de Instagram está justo al lado de ahí. Sobre nosotros se supone que es sí, justo después de ser trending. Descuento definitivo, registro en la lista de correo es lo que se supone que vendrá después de nosotros. Ahora, vamos a mostrar. Oh, el descuento definitivo viene después de destacados. Entonces ahora comencemos a hacer eso destacado. Ahí vamos. Descuento definitivo. Ahí vamos. Tendencia de extremo caliente. Lista de correo , Instagram y la foto. Ahí vamos. Entonces una mirada más a nuestra vista previa. Bien, así que haciendo clic. Y ahora comencemos a desplazarnos para ver qué hemos logrado Bonito. Ahí vamos. Entonces ahora tienes una bonita landing page que puedes agregar a tu portafolio. Nunca se sabe. Estos podrían ser los diseños que vas a mostrar a tu potencial empleador. Entonces vamos a estar haciendo esto de vez en cuando. Voy a estar publicando clases sobre cómo diseñar landing pages y otras partes de nuestro sitio web o página web con Figma. Ahora, al finalizar, tengo algunas reflexiones finales que quiero compartir con ustedes, así que los veré en la siguiente lección. No vayas a ningún lado. 12. Reflexiones finales: Sólo quiero darle las gracias por acompañarme en esta clase. Realmente espero que te haya dado una idea sólida de cómo abordar los proyectos de diseño de UI del mundo real dentro de Pigma, no solo el qué, sino el cómo y por qué detrás de cada sección que construimos Y ahora es tu turno. Para tu proyecto de clase, sigue adelante y diseña tu propia versión de la página de destino por la que caminamos. Podría ser una tienda de sneakers, una marca de ropa, o incluso algo diferente. Simplemente hazlo algo único, hazlo tuyo. Cuando termines, asegúrate de compartir tu trabajo subiéndolo a la pestaña de proyectos y recursos debajo de este reproductor de video Es una excelente manera de mostrar lo que ha creado, obtener algunos comentarios y tal vez incluso inspirar a otros en la clase. Y si te ha resultado útil esta clase, una de las mejores maneras para que apoyes el trabajo que hago es dejando una revisión rápida. Simplemente dirígete a la pestaña de revisión debajo este reproductor de video y deja algunas ideas. Solo toma unos minutos, y ayuda a que muchos alumnos descubran mis clases. Así que adelante y deja tu opinión. Una vez más, quiero decir un gran Gracias por pasar el rato conmigo desde el principio hasta el final, y no puedo esperar a verte en la siguiente clase. Hasta la próxima, mantente creativo. Paz.