Design de UI no Figma: crie uma landing page de uma loja de tênis passo a passo

1. Introdução: Ei, bem-vindo a mais uma aula incrível de Figma comigo, Ken Como sempre, estou feliz de ter você aqui. Agora, nesta aula, vamos criar uma landing page completa de tênis no Figma, e eu vou guiá-lo pelo processo passo a passo, assim como eu faria em um projeto do mundo real Agora, como mencionei, meu nome é Ken, sou web designer e educador, e meu objetivo com esta aula é mostrar a você não apenas como fazer as coisas parecerem boas, mas como pensar como um designer, como estruturar uma página da web, como criar seções e como criar algo que pareça polido e moderno de cima a baixo Começaremos com a seção de heróis e depois percorreremos as categorias, promoções, produtos populares, inscrições mesmo um mini feed do Instagram até criarmos uma página de destino completa limpa e pronta para ser adicionada ao seu portfólio Esse layout da página de destino também será seu projeto de classe. Será uma ótima chance de praticar um fluxo de trabalho de figma no mundo real, mostrar seu estilo e sair com uma peça finalizada que você pode compartilhar ou criar Você pode até mesmo adicionar seu próprio toque e criatividade à página de destino para torná-la única Com isso dito, você está pronto para começar? Porque eu sou. Vamos direto ao assunto. 2. Demonstração do projeto do curso: Então, quero mostrar a vocês uma rápida demonstração do que vamos construir ao longo da aula. Este será o seu projeto de classe. Quando terminarmos esta aula, você vai acabar com algo assim. Então, vou rolar você pode ver que temos uma boa seção de heróis com dois botões de call to action. Temos uma seção de produtos em destaque, categorias em destaque, e o usuário pode clicar e ir para essa categoria. Esqueci de rotular essas categorias. Acabei de duplicá-los do primeiro. Mas não se preocupe. Temos uma seção de descontos definitiva. Você pode conseguir o acordo com essa chamada à ação. Temos uma música popular e popular. Isso deveria ser ver mais, que eles possam ver mais. Eles podem ser redirecionados para a página com mais novidades e tendências Há uma breve introdução à nossa história, e eu posso clicar para ler. Assine o formulário de inscrição na lista de e-mails aqui. Se seus fãs, seus clientes, quiserem ficar por dentro do que está acontecendo em sua loja, eles podem se inscrever aqui. Depois, temos o feed do Instagram. Pessoas usando sapatos comprados em sua loja podem marcar a loja no Instagram ou aparecer no feed do Instagram da loja. E temos um bom rodapé que estamos contratando porque esta loja está contratando representantes de vendas Há outro lembrete para se inscrever. Então, como você pode ver, esta é uma landing page bonita, simples, mas robusta, uma landing page moderna. E quando terminarmos de trabalhar nisso, você terá adquirido as habilidades para reconstruir qualquer página de destino que desejar com o iGMA Porque meu objetivo com essa aula é mostrar a você um fluxo de trabalho utilizável, mostrando as diferentes ferramentas e recursos com os quais você trabalhará na maior parte do tempo Dito isso, acho que é hora de passar para o design real da página de destino. Então, nos vemos na próxima lição. 3. Seção herói: Então, aqui estou eu dentro do meu painel. Você deveria estar em algum lugar assim e ter pelo menos uma equipe criada automaticamente para você aqui depois de criar sua conta. Então, eu tenho uma equipe padrão aqui chamada Ken the Dons Team Então, agora, dentro da equipe de Ken the Don, eu tenho apenas um projeto de equipe padrão. Se eu quiser mais projetos, tenho que pagar, tenho que fazer o upgrade para o plano pago. Mas um projeto é mais do que suficiente por equipe. Agora, dentro do nosso projeto, podemos criar três arquivos de design. Então, vou clicar nesse sinal de adição. E isso abrirá um novo arquivo de design , sem título Vou chamá-la de landing page da loja Sneak. Entre ou simplesmente clique em qualquer lugar externo. E agora aqui estamos. Então, a primeira coisa que eu quero criar é uma moldura ou o que eu gosto de chamar de tela. Então, se eu selecionar essa ferramenta aqui embaixo, e se ela não estiver visível, basta clicar nessa lista suspensa e selecioná-la na lista suspensa. Selecione o quadro. Automaticamente, você verá diferentes modelos com os quais podemos começar aqui. E como estamos projetando para desktop, vou abrir os modelos de desktop e selecionar a predefinição de desktop, que é 14 40 por 1024, e esse é o tamanho do nosso quadro ou tamanho da minha tela Agora, vamos mudar para nossa prévia muito rapidamente. Queremos criar esse cabeçalho. Temos esse logotipo aqui. Depois, temos a barra de pesquisa e nossa barra nervosa. Vamos ver como criar isso. Vamos começar com o logotipo. Então, vou voltar para nossa arte e selecionar o texto também. Clique em qualquer lugar dentro da moldura. Ao fazer isso, a camada de texto será automaticamente adicionada ao quadro, ao quadro da área de trabalho que adicionamos anteriormente, e é isso que você vê aqui. Como você pode ver, cada elemento é uma camada. O texto é uma camada e a moldura é uma camada. O texto está dentro da moldura. Então, vou digitar kick e selecionar fora. Vou apenas arrastá-los enquanto ainda estiver selecionado, vou até o tamanho da fonte aqui e criarei. Vamos aumentá-lo para talvez esse tamanho. Vamos também mudar isso para a espessura da fonte preta, entre pretas. E eu quero selecionar isso e ir para a cor de preenchimento e dar uma cor acinzentada, desse jeito Vamos fazer esse chute branco, vá até Phil, selecione branco Então, vamos adicionar a imagem de fundo para pelo menos poder ver o logotipo. Então, vou pressionar Control Shift K para importar uma imagem. E eu tenho uma pasta de ativos preparada para você. Essa pasta Assets estará disponível abaixo deste player de vídeo. Então, basta baixá-lo se quiser acompanhar, ele terá todas essas imagens. Aqui está o plano de fundo que eu usei. Agora vou selecionar o canto e arrastar até aquele local, soltar, selecionar, clicar novamente e enviar para trás. Lá vamos nós. Vou manter pressionada a tecla Alt e arrastá-la. Para evitar mover para cima e para baixo, pressionarei a tecla Shift para restringi-la apenas a essa linha reta e a colocarei ali mesmo Vou mudar isso para 16. Tamanho 16. Vamos voltar ao normal e eu vou dar cor. Deixe-me ligar para casa por enquanto. Ou o que temos aqui? Ou temos coleções de lojas, recém-chegados. Então, mantenha pressionada a tecla Control e role com a roda do mouse. Compre, deixe-me redimensionar isso. Na verdade, o que eu preciso fazer é que, se for um livro didático de parágrafos como esse, você pode mudar para auto With para convertê-lo automaticamente em um texto de uma única linha E agora eu posso segurar e mudar a tecla para me mover em linha reta. Coleções. O que temos aqui? Recém-chegados, perfil do blog Perfil. O que temos aqui. Perfil, então temos aquela cesta de cartas. Vamos ver como adicionar essa cesta. Mas, por enquanto, deixe-me segurar o controle e diminuir o zoom com a roda do mouse e agora afastá-los. Mantenha pressionada a tecla Shift para selecionar várias e pressione essas duas. Mantenha pressionada a tecla Shift para selecionar isso. Eu acho que eles estão bem uniformemente espaçados. E agora vou clicar duas vezes nessa imagem para poder redimensionar apenas os lados Assim. Eu posso empurrá-lo nessa direção ou posso puxá-lo assim porque quero ter uma área preta para o texto. Clique duas vezes nele e pronto. Então, agora, controle a tecla Shift K para importar outra imagem. E acho que o sapato que usamos nessa seção foi, deixe-me ver, temos aquele par e aquele sapato. Então, nós temos isso. Então, com isso, vou clicar e arrastar, depois vou para Alt e arrasto, deixe-me arrastá-lo aqui. Em seguida, mantenha pressionada a tecla Shift para selecionar os dois e vamos colocá-los lá. Agora, selecione isso e clique duas vezes nele para que possamos fazer o upload do computador para substituí-lo. Nós temos aquele par de sandálias de saia. E agora, como você pode ver , está cortado na lateral. Então, vou arrastar desse jeito e garantir que não o puxemos muito e cortemos a parte superior. Então, eu vou puxar a parte superior também. Acho que é um bom tamanho. Mantenha pressionada a tecla Shift para redimensioná-la, talvez até esse ponto. Lá vamos nós. Então, a seguir, vamos adicionar tênis que falam por si Então, vou selecionar isso, segurar e arrastar para baixo, mantendo pressionada a tecla Shift para me mover em linha reta Isso fala por si. Vamos aumentar esse tamanho, talvez até aquele ponto, arrastar e puxar isso. Vamos reduzir a altura da linha. Assim mesmo. Em seguida, descubra o que há de mais novo Eu tenho esse texto em algum lugar. Deixe-me ver. Deixe-me colar aqui. Então, vou selecionar o texto dois. Em seguida, clique e arraste aqui e cole lá. Agora, isso é muito grande. Eu quero que seja tamanho 16. Então, tamanho 16. Não é preto. Deve ser regular e ter uma altura de linha de 22. Não, 24. Deixe-me expandir isso. Puxe para cima, mude para uma vírgula. Vamos também criar o botão. Esses dois botões, coleção e quedas exclusivas. Então, vou voltar aqui, manter pressionada a tecla Control e ampliar com a roda do mouse. Vou mudar da ferramenta de imagem para a ferramenta de retângulo e vou arrastar e desenhar uma caixa lá E vou selecionar o texto também e clicar em qualquer lugar aqui. O que diz aqui? Coleção. Coleções. Mantenha pressionada a tecla Shift para selecionar o Não, primeiro, vamos estilizar um botão. Então, eu vou selecionar isso, e eu quero dar essa cor aqui. Então eu vou apertar I no teclado. Eu escolho a ferramenta conta-gotas e vou selecionar um pixel que eu goste desse tipo E agora essa é a nossa cor. Eu quero mudar a cor disso para o fundo, então vou clicar em I e agora vou tirar uma amostra de um pixel do fundo, sem mais nem menos. Selecione isso. Eu quero dar a ambos os cantos um raio de dez. Assim mesmo. Agora, selecione isso, mantenha pressionada a tecla Shift, selecione isso, mantenha pressionadas as teclas Alt e Shift e arraste. Em seguida, selecionarei isso, selecionarei aquilo e mudarei para essa cor branca. Isso deveria dizer quedas exclusivas. Lançamentos exclusivos. Agora, na verdade, quero mudar esse alinhamento para alinhar ao centro porque sempre quisemos alinhar a partir do centro, e eu pressiono a tecla Shift e seleciono esse botão de fundo, vou para o alinhamento e o alinho ao Isso já está alinhado ao centro. Se eu pressionar a tecla Shift e selecionar as duas, clique aqui, ela não se moverá. Então, vamos lá. Então eu acho, ok, tudo o que temos que fazer agora é selecionar isso e isso e talvez empurrá-los, talvez até aquele ponto, mas selecione isso. Mantenha pressionada a tecla Shift, selecione esse canto e arraste-o. Lá vamos nós. Selecione isso, mantenha pressionada a tecla Shift. Arraste e selecione esses dois para selecionar a alternativa. Se quiser selecionar isso, você pode selecionar isso e, em seguida, manter pressionada a tecla Shift e selecionar cada elemento, ou você pode selecionar isso e, em seguida, manter pressionada tecla Shift e selecionar essa área. Ele desmarcará o plano de fundo que você selecionou e selecionará o que mais você passará o mouse Então, com isso, eu posso empurrar isso um pouco para cima , e aí Vamos dar uma prévia da nossa arte. Além disso, aí está. Então essa é a nossa seção de heróis, e estou feliz com o que temos. Agora, você notará aqui que há algum desalinhamento na barra nervosa O logotipo parece estar alinhado abaixo barra nervosa principal do que os itens do menu Então, vamos voltar aqui, selecionar o logotipo, selecionar todo esse texto, alinhar tudo verticalmente ao centro, sem mais nem menos Tudo será alinhado verticalmente. Agora, vamos empurrá-los para cima desse jeito. Agora, quando temos isso, se eu expandir um pouco, há esse alinhamento do texto dentro da caixa de texto Se o alinharmos no meio, ele será empurrado para o meio dessa caixa de texto E isso realmente ajuda às vezes. Às vezes, você pode querer que ele esteja nessa posição, e você verá mais tarde. Então, vamos lá. Eu posso mudar isso para uma altura fixa. Onde está? Largura automática, sem mais nem menos. Voltando aqui, é ajustado automaticamente. Clique aqui também. Lá vamos nós. Então é assim que criamos nossa seção de heróis. Na próxima lição, vamos ver como criar a seção de categorias em destaque. Sim, vamos ver como criar isso. Te vejo em breve. Não vá a lugar nenhum. 4. Seção de categorias em destaque: Agora é hora de criar a seção de categorias em destaque. Então, vamos voltar ao nosso editor de figma. Voltando aqui, vou rolar para baixo. Agora, você notará que não temos espaço suficiente. Então, vou manter pressionada a tecla Control e selecionar a moldura. Mantenha o controle pressionado e role para fora para diminuir o zoom. Em seguida, vou selecionar a parte inferior e arrastá-la para criar espaço. Mantenha o controle e aumente o zoom. Lá vamos nós. Então, eu vou esperar e arrastar isso. E eu vou mudar a cor de preenchimento. Como você pode ver, é misto porque há branco e cinza. Assim, posso mudar a cor clicando no sinal de e quero selecionar esse preto desse jeito. Deixe-me ter certeza de que está no meio da moldura. O que temos aqui. Deixe-me copiar esse texto desse outro lado. Copie isso. Vou arrastar essa alteração para o tamanho 16, torne-a regular e alinhada ao centro Vou selecionar isso e fazer o mesmo centro de alinhamento. Mas para isso, vou clicar duas vezes e colar meu texto aqui. Acabei de copiá-lo de outro lugar. Você terá que digitar isso. E agora, com isso selecionado, vou alinhá-lo ao centro da moldura, desse jeito Isso já está alinhado. Temos liso e fresco, então vou selecionar isso e arrastar vazamento e E isso diz categorias em destaque. Categorias em destaque. Lá vamos nós. Então, agora, isso está nos obstruindo. Então, vou selecionar todas essas coisas aqui e clicar no colchete esquerdo para enviá-las para trás ou apenas para o vazamento correto e enviar para Então, agora isso está na frente dessa imagem. Selecione isso e mude a cor. Já temos esse cinza, e vou reduzi-lo para o tamanho talvez 24. Sim, acho que o tamanho 24 está bom. Para o espaçamento entre letras, darei 5%. Empurre-o para baixo, um pouco assim. Talvez até selecione os três e empurre-os para baixo. Até aquele lugar. Voltando aqui, precisamos criar algo assim. Agora, como você pode ver, eu tentei fazer experiências com esse design em oposição a esses outros designs. Esses foram os primeiros designs. Então eu estava testando algumas ideias, mas não as repliquei Mas vamos continuar e criar esse tipo. Então, vou selecionar essa ferramenta de retângulo e arrastar mantendo pressionada a tecla Shift para ter certeza de que é um quadrado e talvez deixá-la ali mesmo Mantenha pressionado o controle e amplie com a roda do mouse, a roda do meio do mouse, mantenha pressionada roda do meio do mouse para fazer uma panorâmica assim. E eu vou selecionar isso, dar a ele um raio de borda de 20 Selecione copiar, colar. Agora temos duas cópias. A outra cópia está em cima disso. Então, vou selecioná-lo e manter pressionada a tecla Shift Out para redimensioná-la proporcionalmente Vá talvez até aquele ponto, e eu darei a ele um cinza um pouco mais escuro Então, vou arrastar isso para um escuro Não, vamos torná-lo mais claro. Não, mais escuro. Sim. Vamos dar a ele um raio de canto que seja metade do raio do canto externo Então, dez para fazer com que pareça mais uniforme assim. E agora eu quero arrastar isso um pouco para cima. Então eu vou arrastar isso. Então eu vou arrastar isso e posicioná-lo em algum lugar lá. Agora vou selecionar isso e manter pressionada a tecla Shift e selecionar isso. Controle G para agrupá-los em uma coisa. E se eu selecionar, posso alinhá-los todos para serem alinhados ao centro em relação um ao outro Então, assim mesmo. Agora, vou segurar e arrastar isso. E o que eles dizem: chutes sustentáveis. Chutes sustentáveis. Vou colocá-lo ali mesmo. Vou apertar o suporte direito para trazê-lo para a frente. Está alinhado ao centro. Mas agora eu quero pressionar a tecla Shift para selecionar isso e alinhar o texto ao centro disso Selecione o Control Shift G para desagrupá-los, de forma que você selecione isso e isso e alinhe tudo alinhe o texto ao centro Agora, vou selecionar isso e reduzir o Não, deixe-me mantê-lo nesse tamanho. Mantenha pressionado o controle e o mouse se arrastará para fora. Agora vou arrastar isso, manter pressionada a tecla Shift para diminuí-la ou reduzi-la, colocá-la aqui, no colchete direito E lá vamos nós. Agora, como você pode ver , não tem sombra projetada, mas na referência, eu adicionei uma sombra projetada. Então eu vou entrar em vigor. Se eu selecionar o efeito, ele adicionará automaticamente uma sombra projetada. Existem outros efeitos, mas o padrão é sombra projetada. Outros estão aqui. Então, acho que as configurações padrão de sombra projetada são adequadas para mim. Então, vou selecionar a imagem, selecionar a caixa que a contém e alinhar a imagem ao centro Exatamente desse jeito. Agora, acho que vou deixar isso um pouco mais escuro Sim, e copie isso. Codifique, copie, selecione isso. Clique aqui, clique duas vezes em Colar. Faça isso branco. Selecione isso e arraste com a tecla Shift. Em seguida, controle D para repetir o que você acabou de fazer. Controle D novamente. Acho que é um bom tamanho. Vou sair do turno D, sair do turno e arrastar mais uma vez, e aí vamos nós. Portanto, temos uma boa seção de categorias em destaque. Agora, tudo o que precisamos fazer é clicar duas vezes em cada imagem e substituí-la por um sapato diferente. Então, digamos isso e você terá que redimensioná-lo. Então, vou segurar para arrastar essa tecla de pressão pressionada para torná-la muito menor. E então eu vou arrastar isso e depois arrastar os lados para garantir que todos os lados dos sapatos estejam visíveis. Sim, está tudo bem. Selecione isso e isso e alinhe-o ao centro Clique duas vezes aqui, selecione isso. Agora vou avançar rapidamente nesta parte e nos vemos assim que tivermos feito isso. Então vá em frente e faça isso. Então, clique duas vezes nele . Isso já é adequado. E aí está. Então, acabei de atualizá-los. Agora, é claro, você precisará renomear essas categorias Deixe-me ver quais são os nomes. Parece que eu simplesmente dupliquei a coisa e esqueci de dar as categorias Mas vamos ver. Temos tênis de alto desempenho. Agora, parece que é muito grande. Então, vamos fazer essa fonte, talvez tamanho 14. Então, tamanho 14. Sim, tênis de alto desempenho, edições limitadas e chutes sustentáveis Deixe-me colocar isso aí mesmo. Oh, não, vamos adicionar isso. Tudo bem, então você pode ter outras categorias aqui. Vou deixar isso aí ou você pode simplesmente remover isso e deixar as quatro categorias que você tinha. Acho que vou selecionar isso e fazer isso pressionando, pressionando a tecla Shift e arrastando o canto Quero deixá-lo um pouco mais largo do que o texto aqui e depois empurrá-lo para cima Em seguida, vamos pré-visualizar as alterações. Vamos primeiro ver o que temos no original. No meu original, acho que gostei mais das cores do que essas cores que temos aqui são muito escuras. Então, acho que vou torná-los um pouco mais leves. Vamos para o campo. E sim, sem mais nem menos, mas agora vamos deixar o texto em preto. Então, volte aqui e escolha preto. Ou você pode simplesmente se livrar disso. Deixe-me ver o que acontecerá se nos livrarmos disso. Não, na verdade, acho que o problema é que os retângulos de fundo são muito escuros. Então, vamos torná-los mais leves. Então, vamos tornar o Bs mais leve também. Ali mesmo. Então eu acho que gosto mais disso. Agora, se voltarmos aqui, ele se atualizará automaticamente, e agora há nossa seção de categorias em destaque. Precisamos adicionar um botão, assim como aqui, para ver mais. Então, tudo o que precisamos fazer é voltar aqui, selecionar isso e isso, depois arrasto o Controle G para agrupá-lo e, em seguida, vamos nos certificar de que o alinhamos ao centro dessa forma Agora, controle o Shift G para desagrupá-lo para que você possa selecionar o plano de fundo, vá até aqui e vamos dar a ele a cor preta Vamos selecionar a fonte e dar a ela uma cor branca. Selecione isso e vamos empurrá-lo para cima, mantendo pressionada a tecla Shift para se mover em linha reta Volte aqui e lá está nossa seção de categorias em destaque. Então eu acho que é um bom lugar para acabar com isso. Na próxima lição, vamos dar uma olhada em como criar essa seção de descontos, que eu já tenho certeza você provavelmente já sabe como fazer, mas nos vemos em breve. 5. Seção de desconto: Agora é hora de criar a seção de descontos aqui. Então, vamos voltar ao nosso editor. Então, vou rolar Não, vamos voltar para o editor aqui. Então, mantendo pressionada a tecla Control e diminuindo o zoom com a roda do mouse, vou arrastá-la e colocá-la em algum lugar ali, de modo que o espaçamento entre o botão e aqui seja quase o mesmo o espaçamento entre aqui e aqui Agora, vou dar uma olhada. Eu acho que é um bom lugar. Vou clicar duas vezes aqui. Agora, se eu quiser redimensionar a altura dessa imagem, posso fazer isso porque ela será redimensionada proporcionalmente Então, se eu quiser redimensionar a altura dessa imagem sem mover os lados, tudo o que preciso fazer é clicar duas vezes nela Quando isso aparece, significa que agora eu posso editar a caixa contendo a imagem. Assim, posso segurar a parte inferior e puxá-la para cima. Então, digamos que em algum lugar lá, clique duas vezes ou simplesmente feche isso. E agora vou selecionar um desses sapatos, talvez isso para fora e arrastar, talvez isso para fora e arrastar, depois segurar a tecla Shift e para fora para redimensioná-lo proporcionalmente de Em seguida, vou reposicionar isso, clicar duas vezes nele para que possamos substituí-lo Então eu acho que usei, acho que este é o sapato que eu escolhi, clique duas vezes nele. E como estamos nesse estado, podemos arrastar os lados sem afetar os outros lados. Tudo bem. Clique duas vezes na parte externa. Selecione-o. Mantenha pressionada a tecla Shift e redimensione-a desse lado, mantendo a tecla Shift pressionada 50% do. Então, vou pegar esses três, arrastá-los com a tecla Alt e soltá-los aqui. Enquanto eles ainda estão selecionados, primeiro vou até a cor de preenchimento plus e vamos dar a ela essa cor branca. Agora, vamos ver se um deles tem uma cor diferente, o desconto definitivo. Então, vou selecionar esse como o melhor desconto. Então, parece que precisamos fazer isso menor. Eu quero que seja menor. Então, mantendo pressionada a tecla Shift para selecionar liso, quero que todos esses títulos minúsculos acima dos títulos principais tenham o Para os títulos, quero que todos tenham o mesmo tamanho. Para o texto, corpo do texto, quero que todos tenham o mesmo tamanho. Então, vamos redimensionar isso e isso para o tamanho talvez 18. Sim. Então, mantendo pressionada a tecla Shift, vamos empurrá-los todos para mais perto. E agora eu não quero que eles sejam negros. Eu quero que eles sejam regulares. Agora, na verdade, vamos torná-los ousados. Agora, selecionando isso e este e este superior, vamos mudar o alinhamento para a esquerda E enquanto eles ainda estão selecionados, vamos para alinhamento à esquerda para alinhá-los todos em uma E eu quero alinhá-los aos botões e ao conteúdo da seção de heróis, como você pode ver esse destaque vermelho Então deixe-me empurrá-los para cima. Vou selecionar esse texto e redimensioná-lo assim. Sim, aquele lugar. Em seguida, vou selecionar esse botão. Ele arrasta o suporte direito para se certificar de que está na frente. Selecione-o e, em seguida, olhe no teclado para usar o conta-gotas Quero selecionar um pixel verde claro. Agora, eu sei que não mantivemos o mesmo esquema de cores aqui e, normalmente, nossa marca mantém o esquema de cores até o fim. Mas às vezes você encontrará em alguns sites que eles estão misturando cores em partes diferentes. O site é muito colorido. Então, o que queremos ter certeza é que não queremos misturar essa cor verde aqui. Se eu selecionar I e provar que, se eu der a esse botão essa cor verde, esse verde está colidindo com esse outro E quando você está navegando como cliente, quando está nesta seção, é melhor que o esquema de cores seja consistente É por isso que estou selecionando isso. Então eu escolhi um verde que esteja por perto. E então selecione isso, então eu seleciono o plano de fundo para obter uma amostra do plano de fundo. Agora, esse é um bom esquema de cores para essa seção específica quando alguém está rolando para baixo Então eu acho que é um bom lugar para acabar com isso. Deixe-me ver se esquecemos de alguma coisa. Obtenha esta oferta. Não vou alterar esse texto, mas vou selecioná-lo e dar a ele uma altura de 24 linhas. Obtenha esta oferta. E agora vamos mudar para o nosso site e ver o que temos. Então, se eu estiver rolando para baixo e chegar a esse ponto, temos nossa seção de descontos Então, apenas uma pequena coisa que eu quero fazer, como você pode ver, o espaçamento aqui não é o mesmo que o espaçamento Em primeiro lugar, deixe-me pressionar tecla Shift e selecionar tudo. Agora, selecione isso, mantenha pressionada a tecla Shift e arraste para selecionar e desmarcar o plano de fundo Controle G para agrupá-los e, em seguida, mantenha pressionada a tecla Shift para selecionar o plano de fundo e alinhar o corpo do texto ao centro em relação ao plano de fundo 50% dos salmões, vamos voltar aqui. Controle a tecla Shift G para desagrupá-los. Então 50% dos sapatos chamados Slomons. Então, vou selecionar esse texto. Vá até a cor de preenchimento e selecione a cor verde. Voltando aqui, há nossa seção de descontos definitivos. 6. Seção de tendências: Agora vamos criar essa seção de chutes populares e populares Agora, vou voltar para nossa obra de arte, onde está meu editor aqui E antes de irmos longe demais, quero ampliar isso rapidamente. E eu quero ajustar um pouco o que está acontecendo aqui. Na verdade, deixe-me dar a eles essa cor. Então, vou pressionar I no teclado. Agora eles têm essa cor, mas eu quero deixá-los em negrito médio. Então, vá para a espessura da fonte, semi negrito, sem média E também quero aumentar o espaçamento entre letras para 5%. Eu acho que eles ficam muito melhores assim. Mas é claro que agora eles caíram para a próxima linha porque não cabem nas caixas atuais Então, pressionarei a tecla Alt para redimensionar dos dois lados. Se você não pressionar a tecla Alt, ela será redimensionada de um lado, o lado que você está segurando At o redimensiona a partir do centro. Então eu quero puxar isso, selecionar isso, segurar e puxar para o lado, para fora, e puxar aquilo. Acho que agora eles parecem mais apresentáveis. Agora, a razão pela qual fiz essa atualização foi que, em primeiro lugar, eu queria que ela tivesse uma aparência melhor, mas, ao mesmo tempo, como você pode ver em nossa referência aqui, a seção de tendências é bem semelhante à seção de categorias em destaque Então, vamos voltar aqui, e eu quero selecionar essas rolagens um pouco, depois segurar e arrastar e, em seguida, manter pressionada a tecla Shift para evitar mover para a esquerda e para a direita. Então, saia e solte aí mesmo. Então solte o turno e saia. Diminua um pouco o zoom e quero empurrá-lo para baixo porque quero ter certeza de que o espaçamento aqui é bem semelhante ao espaçamento Então eu acho que é um bom lugar. E agora você notará aqui que não temos aquela pequena caixa lá embaixo. OK. Vou apenas olhar para aquele ponto ali mesmo Na verdade, deixe-me deletar esses três. E vou selecionar esses dois e garantir que o interno esteja alinhado com o centro do externo clicando nisso e naquilo Agora vou selecionar esse plano de fundo interno, clique aqui. Temos um cinza escuro? Diz que estou offline. Tudo bem, então faça com que não seja muito escuro, nem preto, cinza escuro porque isso é preto Então, vou selecionar esse texto e ir aqui, dar a ele essa cor branca. Selecione o snaker e mantenha pressionada a tecla Shift, selecione a interna e alinhe-a verticalmente ao centro Na verdade, vamos empurrá-lo um pouco para cima. Agora, acho que parece bom. Então, ao selecioná-lo, eu posso segurar e mudar de posição. Vamos dar esse espaçamento de 22. Aqui, 22, Shift D. Eu acho que isso é bom. Então, vou clicar duas vezes nele e substituí-lo pelos sapatos mais populares O que é tendência aqui? Digamos que essa seja uma tendência. Clique duas vezes nele. Isso também é tendência Vou ter que ajustar isso desse jeito, mas agora parece maior que os outros. Então, vou segurar e mudar de posição, selecionando isso também. Espere e mude para escalá-lo proporcionalmente. Então, vamos clicar duas vezes nisso. Na verdade, que coincidência. Todos parecem estar voltados para a mesma direção. Então, por que não completamos esse look? Eu acho que essa é boa. Antes de escolhermos isso, temos outro. Acho que é um bom candidato, então vou clicar duas vezes nele. E agora, vamos lá. Então, esses são os melhores e mais populares. Então, clique duas vezes nele. Basta dizer gostosas e populares em vez de dicas quentes e populares Popular aqui. Popular. Esses são os chutes mais vendidos na loja. Vou deixar isso assim porque este não é um site real, mas você digitaria uma descrição lá. E vamos ver, leia mais. Não, isso não deve ser lido mais. Isso deve ser um acordo, então compre. Então eu esqueci de editar esse botão, mas agora podemos editá-lo aqui Veja mais desse jeito. Então eu acho que vamos parar com isso aí. Antes de prosseguirmos, vamos uma olhada rápida no que temos agora. Então, basta começar a rolar. E aí está o que temos. Vamos esperar que ele carregue. Tudo bem, agora, vamos dar uma olhada rápida no que temos aqui, rolando Eu acho que isso não é equilibrado. Acho que precisamos empurrá-lo um pouco para baixo. Esse espaçamento aqui é menor do que esse espaçamento aqui. Sim, em algum lugar lá. Clicando aqui fora, ele será atualizado automaticamente. Agora está bem posicionado, rolando para baixo, nosso desconto e agora nossa tendência Então eu acho que esse é um bom lugar para acabar com isso. Na próxima lição, vamos criar nossa história de so. Te vejo em breve. 7. Seção Sobre nós: Agora vamos criar a seção Sobre nós. Então, voltando ao nosso editor, onde está nosso editor, aqui mesmo. Então, rolando para baixo. Eu quero selecionar isso. A propósito, acho que não o balanceamos adequadamente aqui, então vou apenas empurrá-lo para cima, um pouco para cima, rolando para baixo, vou selecionar esses três arrastos para fora para E, claro, vou mudar o alinhamento para a esquerda e alinhá-los à esquerda desse jeito Então, vou selecionar o texto do parágrafo e arrastá-lo assim, e vou selecionar isso, selecionar esses três, arrastá-los e colocá-los em algum lugar aqui. Selecione e arraste com a tecla Alt. Mantenha pressionada a tecla Alt Shift para expandir isso, pois queremos adicionar para adicionar essas imagens. Na verdade, vou clicar duas vezes aqui para poder editar a caixa em si, sem mais nem menos. Vou clicar nele para fazer o upload de selecione esse cara. Vou dar a ele um raio de 20 cantos. Então temos esses dois. Então, arraste com a tecla Alt e clique duas vezes nele para poder editá-lo. Agora, é claro, mantenha pressionada a tecla Alt, como se tivéssemos aprendido a redimensioná-la em duas direções Então eu acho que essa é uma boa parte. Queremos torná-lo quase quadrado. Faça o upload a partir daqui. Eu só vou selecionar esse cara. Então eu vou arrastar isso. Acho que o espaçamento aqui era 22. Agora são 21. Vou clicar duas vezes nesse upload do computador e selecionar essa imagem. Agora, voltando aqui, temos sobre nós a história da nossa alma. Então, e então a história aqui. Vou selecionar isso e dar a ele uma altura de linha de 24. Na verdade, acho que é 36. Eu tinha dado 36. E deixe-me pegar esse texto e colar lá. Agora, deixe-me expandir a caixa, sem mais nem menos. Selecione o botão e vamos alinhá-lo ali mesmo. Então, digamos que leia mais. E, na verdade, acho que deveríamos selecionar o texto do botão e tudo mais. Vamos dar um espaçamento entre letras de 5% e vamos torná-lo médio Queremos que o texto seja mais pronunciado. Vou selecionar o plano de fundo do botão aqui. Espere para redimensioná-lo dos dois lados, até aquele ponto Acho que esses dois estão bem. Agora, selecionando esses três Control G para agrupá-los, selecione esses três para agrupá-los. Controle G. Em seguida, selecione esses dois grupos e alinhe-os verticalmente em uma linha assim Agora, essa distância é muito pequena, então empurre-os para baixo desse jeito Acho que é um bom lugar para deixá-los. Selecione Control Shift G para desagrupar, selecione este Control Shift G para desagrupar Agora, vou selecionar esses três e remover os efeitos. Como você pode ver, eles têm uma sombra projetada porque duplicamos isso e ela tinha uma sombra projetada daqui de cima Então, queremos remover esse efeito de uma sombra projetada como essa. Então, vamos dar uma olhada rápida no que temos em nossa landing page. Rolando para baixo, está nossa prévia. Gosto do que temos até agora. Na próxima lição, vamos criar esta seção de inscrição no boletim informativo ou na lista de e-mails Então, eu vou te ver em breve. 8. Inscrição em lista de correspondência: Bem vindo de volta. Então, agora é hora de criar esta seção de inscrição na lista de e-mails Então, mudando para nosso editor. Aqui estamos. Agora, vamos voltar rapidamente à nossa referência. Como você pode ver, temos um formulário, nome, endereço de e-mail e inscrição, mas esses outros permanecem semelhantes. Então, eu quero escolher esses três. Então, vou selecionar isso. Em seguida, arraste enquanto mantém pressionada a tecla Shift para selecionar a alternativa. Então, ele desmarcará o plano de fundo e selecionará o que está na frente Em seguida, vou arrastar a tecla Alt para soltar e agora manter pressionada a tecla Shift. Exatamente desse jeito. Vou arrastar e selecionar tudo isso e ir para preencher mais aqui, e vou dar a cor preta. Aqui diz que nunca mais perca uma gota. Novamente, isso é um cadarço para obter vantagens ou um cadarço para obter vantagens. Deixe-me pegar essa mensagem muito rapidamente. Cole isso aí. Então, vou arrastar enquanto mantenho pressionada a tecla Shift para duplicar e depois Control D para repetir o movimento que acabei Selecione esses dois. Então, vamos aumentar a largura. Enquanto eles ainda estão selecionados, clique aqui e vamos dar a eles talvez esse plano de fundo. Não, isso é, aquele fundo claro. Eu acho que é uma boa forma. Podemos dar a isso uma cor preta. Então, vou selecionar isso, vá aqui, selecione o texto, dê a ele a cor branca. Isso deve ser uma inscrição. Esse deve ser o endereço de e-mail. Isso pode ser Oh, não, isso pode ser endereço de e-mail, e isso pode ser o primeiro nome. Ao selecionar os dois, notei que o alinhamento está no centro, então vamos alinhar à esquerda e também alinhá-los à esquerda Então, vamos também mudar a cor do campo para cinza claro para que eles não fiquem muito pronunciados dentro do campo. Agora, eu acho que eu deveria empurrá-los para mais perto desse jeito. Acho que essa é a melhor maneira de apresentá-los. Vou arrastar isso e quero selecionar esses três, agrupá-los e, em seguida, selecionar esse grupo e a imagem para que possamos alinhá-los assim Agora, clique duas vezes nesse upload do computador. O que temos aqui? Temos esse problema de incêndio, mas, claro, era eu apenas brincando com ideias. Você pode usar a imagem que quiser. Deixe-me ver. E esse vermelho? Não? E aquele sapato preto? Use uma imagem que represente talvez brindes ou descontos ou algo interessante que represente esta seção Eu não gosto do contraste neste sapato, então vamos substituí-lo por “ vamos usar esses dois sapatos”. Sim, vamos colocá-los ali mesmo. Mas agora eu quero selecioná-los assim e, mantendo pressionada a tecla Shift, arrastá-los para baixo em uma linha reta Quero ter certeza de que damos a eles um espaçamento suficiente como esse Podemos reduzir o tamanho desses sapatos. Então eu acho que é um bom lugar para acabar com isso. Não precisamos complicar muito as coisas. No momento, tudo o que você está fazendo é aprender as complexidades do Então, voltando à nossa prévia, agora, se rolarmos para baixo, temos um formulário de inscrição aqui. Sim. Então, vamos voltar à nossa referência. Na próxima lição, vamos ver agora como criar essa seção do Instagram. Primeiro, teremos que criar um cartão do Instagram antes de duplicá-lo por completo Te vejo em breve. 9. Seção de posts do Instagram: É hora de criar esta seção do Instagram. Como você pode ver, temos quatro cartões do Instagram e tudo o que precisamos fazer é criar apenas um por enquanto. Então, vamos ver como fazer isso. Mudando para nosso editor. Vou rolar para baixo até aqui. E como você pode ver, podemos simplesmente copiar isso e depois arrasto e coloco aqui. E o que diz é o Instagram colado lá. Você pode nos marcar no kick verse e aparecer. Se você estiver usando nossos tênis, você pode nos marcar se postar no Instagram Então, vamos criar nosso cartão. Vou apenas selecionar isso e Shift Control Shift G para desagrupá-lo E eu vou selecionar isso e arrastar para baixo ou simplesmente arrastar e colocar aqui Eu vou puxar isso talvez até aquele ponto. Só estou tentando conseguir algo que tenha essas dimensões. Então, temos um usuário. Seguimos um nome de usuário. Vamos digitar isso rapidamente. Aqui está um nome aqui. Deixe-me arrastar esse texto. E então colocamos um suporte para trazê-lo para a frente. Vou usar isso como a postagem do Instagram que alguém postou. Vou alinhá-lo à esquerda desse jeito. Então eu também vou reduzir o tamanho para talvez 12, talvez 14 linhas de altura de 18. Não, talvez digamos 22. Empurre-o ligeiramente para cima. O que mais temos aqui? Temos esses ícones. 12 mil curtidas. Então, vamos arrastar isso. Estou apenas tentando digitar todo o texto necessário. Vou selecionar esse botão. Selecione a borda inferior e mantenha pressionada para redimensioná-la assim Em seguida, mantenha pressionado esse lado e redimensione-o assim. Aumentando o zoom, como você pode ver, o raio do canto é muito grande. Vou dar talvez três desse jeito. Então eu quero mudá-la para uma borda como essa em vez de uma sensação. Então, como já tem uma sensação e já não tem bordas, posso usar o Shift X para alternar. Qualquer que seja a cor do campo será alterada para a cor do traçado e o valor do traçado será alterado para o valor do campo Não temos traçado, então a sensação se tornará nula e o traçado terá a cor de preenchimento. Então, mude X para revertê-los. O texto é branco, então vou selecioná-lo e fornecê-lo. Digamos que essa cor cinza. Selecione isso, vá para a cor do traço e dê a ela essa cor cinza também. Isso é seguir. Mantenha pressionada a tecla Shift para diminuir o tamanho. Agora, deixe-me reduzir o tamanho para nove, alinhá-lo ao meio desse jeito E vamos torná-lo médio. Então, vamos também dar um espaçamento de 6%. Mantenha pressionada a tecla Shift para selecionar isso e alinhá-los assim. Agora, você notará aqui que precisamos de alguns ícones. Então, vamos procurar um ícone de usuário, o heart chat. Então, voltando aqui, vou digitar um ícone plano. Só assim porque queremos baixar ícones daqui, Hart. Tudo bem, então eu vou selecionar esse vermelho liso. Deixe-me selecionar isso. Então, vou garantir que você tenha certeza de que está conectado. E agora, digamos que 64, esse é o tamanho certo que queremos para nosso propósito, voltando aqui. Como ele foi baixado, posso arrastá-lo daqui, com o botão quente, e soltá-lo aqui. Mantenha pressionada a tecla Shift ali mesmo. Voltando aqui e selecionando outro coração, talvez desse tamanho 64 também, baixe gratuitamente. Vou voltar aqui. Ainda está baixando. Tudo bem, vamos colocá-lo aí Mantenha pressionada a tecla Shift e redimensione-a assim. Eu quero ir para a esquerda, sem mais nem menos. Voltando à nossa referência 12 mil curtidas, converse e envie. Este é um bom balão de bate-papo. Prossiga com o download. Lá vamos nós. Então, vou arrastar esse menu pontilhado até aqui. Mantenha pressionada a tecla shift para reduzi-la proporcionalmente, e vamos deixá-la Vamos também arrastar isso um pouco desse jeito. Em seguida, controle D para repetir. Clique duas vezes nele e substitua-o por vamos aos downloads. Esse deveria ser o gráfico. Acho que mandar esse gráfico. Enviar. Tudo bem. Então, vou arrastar isso até o fim desse jeito. Clique duas vezes nele. Faça o upload do computador e vamos fazer o upload. Tudo bem, não baixamos o marcador. Eu vou com isso. Tamanho 64, download gratuito. Agora, vamos substituí-lo por um marcador. Agora, selecionando todos eles, vou alinhá-los. Eles já estão alinhados Arraste isso para fora, depois colocamos um colchete para trazê-lo para a frente, mantenha pressionado e desloque para escalá-lo proporcionalmente Então vamos colocá-lo ali mesmo. Raio de canto de cinco. Clique duas vezes dentro e arraste isso talvez até aquele local. Na verdade, devemos tornar isso muito menor. Selecione esse controle. Isso é controle C para copiar, controle V para colar. E agora vamos selecionar o que colamos, mantendo pressionada a tecla Shift end out para torná-la menor até o ponto em que esteja alinhada com Então, vamos arrastá-lo para cima e para baixo desse jeito e para baixo desse jeito E vamos dar um cinza um pouco mais escuro como esse. Pode dar a isso um efeito de sombra projetada. Vou arrastar isso para a esquerda. Então, também podemos ter um usuário. Eu vou com esse usuário. Baixe 64, download gratuito. Vamos voltar aqui. Vamos arrastar esse usuário. Lá vamos nós. Então, temos nosso Now, é claro, não é uma postagem perfeita no Instagram, mas temos algo que podemos usar aqui. Portanto, selecione essa tecla de pressão para redimensioná-la proporcionalmente Eu quero torná-lo um pouco menor, talvez até aquele ponto. Agora, para o texto, você precisará redimensionar adequadamente Para o seguinte, mantenha pressionada a tecla Alt para dimensionar dos dois lados. E então eles usam um nome. Agora, selecionando isso, posso pressionar Shift, arraste e Control D para repetir isso. E acho que vamos escolher esses três. Em nossa referência, eu tinha quatro, e o texto e tudo pareciam muito menores. Mas lembre-se, como eu disse, o que estamos fazendo é tentar entender como trabalhar com as ferramentas disponíveis no Figma Não estamos tentando criar algo perfeito. Estamos tentando ensinar você a usar essas ferramentas. Depois de saber como usar as ferramentas, você pode passar o tempo que quiser aperfeiçoando o design Então eu acho que esse é um bom esporte para acabar com isso. Estamos quase terminando. Na próxima lição, vamos continuar trabalhando no rodapé Então, nos vemos em breve. Não vá a lugar nenhum. 10. Seção de rodapé: Quase pronto. É hora de trabalhar no rodapé Então, voltando ao nosso trabalho artístico, aqui vamos rolar para baixo e deixe-me ampliar um pouco Bem, em primeiro lugar, notei que duplicamos esses três, mas não os alinhamos ao centro em relação ao quadro Então, selecionando-os, controle G para agrupá-los e, em seguida, alinhe-os como um único item Controle a tecla Shift G para desagrupá-los. Você também pode deixá-los agrupados, se quiser. Eu posso pegar o logotipo lá de cima ou posso simplesmente recriá-lo Kick vs. Vamos dar essa cor. Vou lhe dar esse verde. Não, esse verde não é bom. Vou dar a ele esse outro verde aqui em cima, esse. Então eu acho que foi isso. Sim, acho que é um bom lugar para começar. Controle, selecione para selecionar esse quadro e, em seguida, arraste para redimensioná-lo Clique do lado de fora. Eu tenho todo o fotocente aqui ao lado, então vou copiar e colar Então, deixe-me pegar esse texto aqui. Na travesti. Vamos colocar isso aí mesmo. Uma linha à esquerda. Nós podemos, carpi, eu quero dobrar de tamanho. Também podemos atribuir uma altura de 28 e espaçá-la um pouco dessa forma. Voltando aqui, vamos criar essas duas linhas. Então, vou selecionar a ferramenta Caneta. Clique em qualquer lugar aqui e comece a desenhar. Quando temos esse destaque vermelho, significa que estamos nos movendo em linha reta. Então, vou clicar em qualquer lugar, depois escapar, escapar novamente, clicar em Escape novamente para escapar da abertura. Isso arrasta isso. Eu só vou colocá-lo em algum lugar lá. Então eu vou selecionar isso. Isso se arrasta. Em seguida, selecionarei Vou clicar duas vezes nele. Em seguida, selecionarei isso e pressionarei a tecla Shift para me mover em linha reta e reduzir o tamanho. Então eu vou girá-lo. Eu pressiono a tecla Shift para encaixar e, quando estiver na vertical, posso colocá-la aqui Acho que ainda é muito alto. Então, eu posso simplesmente voltar aqui para as dimensões e reduzi-las depois selecioná-las, eu posso empurrá-las para baixo, talvez até aquele ponto por enquanto. Então, vou arrastar isso. Na verdade, desfaça, vou arrastar tudo isso. E agora eu vou vir aqui. Eu tenho uma coluna chamada Shop. Isso vai ser tamanho 20. Isso vai ser tamanho 16. Então, esses são os links para esta coluna. Vou expandir isso e puxar esse empurrão para baixo, talvez até aquele ponto. Eu quero que eles sejam mais espaçados, então vou até a altura da linha e os tornarei 36 assim Em seguida, selecionarei esses dois. Com a tecla Shift, arraste e depois Control D duas vezes. A segunda coluna para mim é produtos por categorias. Então, vou selecionar esses dois e arrastar para fora. Selecione esses dois e empurre-os para a esquerda. Vou selecionar isso e alinhá-lo ao centro. Mantenha pressionada a tecla Shift para selecioná-la junto com e alinhá-la ao centro dessa forma Em seguida, vamos criar esse botão e essa parte. Então, vamos arrastar esses dois para fora, arrastando desse jeito. Vou colocá-los ali mesmo. E eu acho que esse botão, nós perdemos esse botão porque, lembre-se, nós estilizamos os outros botões Eles tinham 5% de espaçamento entre letras, e nós os tornamos médios. Então, isso que estamos contratando pode ser dessa cor. Então, vamos dar essa cor. Voltando à nossa referência, também temos esse formulário. Selecione isso, Controle C para copiar e, em seguida, Controle V para colar. Você o colou no lugar. Agora, mantendo pressionadas as teclas Shift e t, estamos redimensionando-a de todos os lados Eu quero que ele tenha talvez esse tamanho e quero arrastá-lo até talvez aquele lugar. Deixe-me mudar a cor para que você possa ver. Dê essa cor. Então, agora vamos dar a ele um raio de meia borda Metade do que é o raio da borda externa. Em seguida, selecionando esses dois, vou alinhá-los ao centro dessa forma Empurre isso para que a borda ao redor tenha quase o mesmo tamanho. Então, fazendo isso, agora podemos dar a isso um texto como enviar Selecione esses dois e alinhe-os assim. Inscreva-se ou envie. Deixe-me torná-lo preto assim. Mantenha pressionado e selecione esses dois. Empurre isso desse jeito. O que mais temos aqui? Temos o Google Play e a Appstore. Agora, essas são coisas que você precisará pesquisar no Google e baixar. Botões do Google Play. Imagens. Uh, deixe-me ver. Vamos escolher esse. Então, esses caras realmente esconderam esse botão, mas eu finalmente o encontrei. Aqui está. Lá vamos nós. Então, voltando aqui, vou arrastá-lo e soltá-lo aqui. Então, vou diminuir a escala mantendo pressionada a tecla Shift e pressionando a tecla Shift. Vou simplesmente alinhá-los em algum lugar lá. Vamos voltar aqui para ver ícones planos e baixar o YouTube. Acho que já baixei esses ícones, mas para você, você vai ter que baixá-los. Eu só quero economizar tempo. Então, se eu for para o Control Shift K, acho que tenho esses ícones aqui na minha pasta de downloads. Então, vinculados até o X. Vou apenas desenhá-los aqui Vamos lá, selecione todos eles, alinhe-os. Agora, alguns deles são muito maiores. Então, mantenha pressionada a tecla Alt para redimensionar isso. Espere aí. Espere um pouco. Agora temos aproximadamente o mesmo tamanho, espaçamento. Selecione esses três. Ou eu posso simplesmente selecionar isso. Deixe-me selecionar isso. Mantenha pressionado e redimensione-o. Vamos voltar à nossa referência. Sim, precisamos colocá-los lá. Amplie e, em seguida, arraste a tecla Alt Control D duas vezes. Em seguida, clicarei duas vezes em Volte aqui. Clique duas vezes no YouTube, selecione isso, clique duas vezes nele, faça o upload da imagem, Instagram e clique duas vezes para que possamos adicionar X. Eles são muito grandes. Eu ainda quero torná-los muito menores. E é isso que eu quero fazer com que seja um pouco mais alto, selecionar tudo e alinhá-lo verticalmente dessa mais alto, selecionar tudo e alinhá-lo verticalmente Selecione esses três e puxe-os para baixo. Quero alinhá-los a este mapa do site. Agora, quero selecionar isso e reduzir a altura. Acho que agora é um bom tamanho. Falta mais uma coisa. Antes de terminarmos esta seção, temos um texto aqui. Agora, se eu puxar isso , ele será alinhado à esquerda Vamos alinhar à direita. E aqui dizemos: inscreva-se para obter acesso antecipado. Clique duas vezes nisso e cole aí. Faça com que desmaie. Não deixe isso muito escuro assim. Deixe-me empurrar isso um pouco para baixo, exclua esses. E acho que agora estamos chegando a algum lugar. Então, agora, se acessarmos nosso site de referência aqui, vamos começar do topo e ver o que temos. Então, rolando para baixo, nossas categorias em destaque, temos nossa seção de descontos, nossa tendência mais popular Eles podem clicar e ver mais. Eles podem ir ler nossa história. Eles podem se inscrever em nossa lista de e-mails. Eles podem nos ajudar a crescer nos marcando e mostrando os sapatos que compraram de nós, e compartilhamos isso em Deixe-me selecionar esses. Lá vamos nós. Então eu acho que esse é um bom lugar para acabar com isso. Conseguimos criar uma landing page de cima para baixo. Agora, a próxima coisa que faremos é organizar e limpar nosso arquivo, porque se estivermos trabalhando em equipe ou se quisermos voltar mais tarde para trabalhar no projeto, queremos ter algo organizado. Como limpamos as coisas? Vamos fazer isso na próxima lição. Te vejo em breve. 11. Limpando: Agora é hora de limpar nosso arquivo de design. Então, voltando à nossa obra de arte, onde está? Sim, aqui estamos. Vamos começar do topo. Então, quando digo organização, quero dizer, vamos agrupar várias coisas e nomeá-las para poder encontrá-las com muita facilidade. Por exemplo, aqui temos o logotipo e os itens nervosos. E agora eu quero selecionar esses itens, então vou selecionar os kickers e todos os itens do menu e fazer isso Selecione todos eles e, em seguida, Controle G. Agora, quando você controla G, eles serão agrupados Lembre-se de que sempre que você adiciona algo à sua moldura, ela é colocada embaixo da moldura Então, tudo o que adicionamos a essa moldura ainda está embaixo dela. Então, lembre-se de que adicionamos um quadro chamado desktop. Então, na verdade, vou clicar duas vezes nela e chamá-la de loja de tênis. Página de destino. Como você pode ver, o nome mudou aqui. Então esse é o nome dessa landing page. E agora, dentro da página de destino, temos várias coisas que têm os nomes com os quais vieram, mesmo quando as importamos. Por exemplo, essa imagem do Google. Então, queremos renomear os itens aqui. Portanto, lembre-se de que selecionamos esses itens e os agrupamos. Então, agora eles são do grupo um. Vamos chamá-los de cabeçalho. E vamos escondê-los. Vamos selecionar essa imagem, imagem de fundo. Aqui está. Clique duas vezes nela, chame-a de imagem do herói e oculte-a. Ok, antes de ocultá-lo, selecionarei o plano de fundo , pressionarei a tecla Shift, arrastarei e selecionarei para selecioná-los. Controle G. Vou chamá-los de bloco de texto da seção Hero. Em seguida, selecionarei essas duas imagens da seção Control G. Hero. Vou esconder isso, depois esconder as imagens da seção do herói depois esconder o fundo da imagem do herói. Deixe-me chamá-lo de fundo da imagem do herói. Então, agora tudo lá em cima está rotulado. Vou apenas selecionar isso e controlar G. Agora está agrupado Categorias em destaque. Então vamos esconder isso. Coloque-o em colapso. Vamos selecionar esse desconto definitivo. Controle G. de descontos definitiva Seção de descontos definitiva, vamos escondê-la. Seção Control G, popular e popular, vamos escondê-la Sobre nós Control G. Finalmente, o rodapé, seção de rodapé Control G. Colapse, esconda e derrube. Vamos continuar e começar a revelar tudo desde o topo Então, o bloco de texto da imagem de fundo do herói ativado, imagem de fundo do herói ativada, selecione isso, mantenha pressionada a tecla Control, selecione o plano de fundo da imagem do herói e vamos colocá-la lá em cima. Na verdade, vou selecionar esses dois, Control G, e chamá-los de seção de heróis. Recolha isso. Então, agora a seção do herói está visível. Imagens da seção Hero. Onde estão as imagens da seção de heróis também devem estar dentro do grupo da seção de heróis. Então arraste e solte lá. Agora temos o plano de fundo da seção do herói, bloco de texto e Vamos desocultá-los. Vamos também pegar o cabeçalho e colocá-lo dentro da seção do herói. Deveria estar no topo, e vamos exibi-lo Vamos mostrar a seção de fotos, que deve estar na parte inferior A seção do Instagram deveria estar logo ali ao lado. Sobre nós deveria ser sim, logo após a tendência. Desconto definitivo, a inscrição na lista de e-mails é o que deveria vir depois de nós Agora, vamos nos mostrar. Ah, o desconto definitivo vem depois de apresentado. Então, agora vamos começar a fazer isso em destaque. Lá vamos nós. Desconto definitivo. Lá vamos nós. Tendências populares. Lista de e-mails , Instagram e a foto Lá vamos nós. Então, mais uma olhada em nossa prévia. Tudo bem, então clique. E agora vamos começar a rolar para ver o que conquistamos Agradável. Lá vamos nós. Agora você tem uma boa página de destino que pode ser adicionada ao seu portfólio. Você nunca sabe. Esses podem ser os designs que você mostrará ao seu potencial empregador. Então, vamos fazer isso de tempos em tempos. Vou publicar aulas sobre como criar páginas de destino e outras partes do nosso site ou página da web com o Figma Agora, ao finalizarmos, tenho algumas reflexões finais que quero compartilhar com vocês, então nos vemos na próxima lição. Não vá a lugar nenhum. 12. Considerações finais: Eu só quero dizer um grande obrigado por se juntar a mim nesta aula. Eu realmente espero que tenha dado a você uma noção sólida de como abordar projetos de design de interface do mundo real dentro do Pigma, não apenas o quê, mas o como e o porquê por trás de cada seção que construímos E agora é a sua vez. Para seu projeto de classe, vá em frente e crie sua própria versão da página de destino que examinamos. Pode ser uma loja de tênis, uma marca de roupas ou até algo diferente Basta torná-lo algo único, torná-lo seu. Quando terminar, compartilhe seu trabalho enviando-o para a guia de projetos e recursos abaixo deste player de vídeo É uma ótima maneira de mostrar o que você criou, receber feedback e talvez até inspirar outras pessoas na classe. E se você achou essa aula útil, uma das melhores maneiras de apoiar o trabalho que eu faço é deixando uma análise rápida. Basta acessar a guia de avaliação abaixo deste reprodutor de vídeo e deixar algumas ideias. Leva apenas alguns minutos e ajuda muitos alunos a descobrir minhas aulas. Então vá em frente e deixe sua avaliação. Mais uma vez, quero agradecer por estar comigo do começo ao fim, e mal posso esperar para ver você na próxima aula. Até a próxima vez, seja criativo. Paz.