Crie uma interface de usuário interativa para telefone no Figma

1. Introdução: Pense em um aplicativo móvel favorito. É fácil de usar? O que o torna fácil de usar? O que o torna seu aplicativo favorito? Como foi feito? Você já parou para pensar em como a empresa por trás disso o projetou? Antes que qualquer linha de código fosse escrita para esse aplicativo móvel, alguém se sentou e projetou cada parte dele, cada tela, cada botão, cada imagem. Alguém projetou isso. E nesta aula, vou mostrar exatamente como fazer isso, e faremos isso passo a passo. Mostrarei como criar seu próprio aplicativo de compras de vários fornecedores bonito e interativo no A Figma é uma das melhores, se não a melhor plataformas de design UIUX do mercado atualmente Esta aula foi feita para ser fácil para iniciantes. Mesmo que você seja novato em design de interface de usuário, essa aula foi criada para acomodar todos, inclusive iniciantes. Ao final desta aula, você terá uma interface de usuário de aplicativo móvel totalmente projetada que inclui uma barra inicial elegante, uma navegação suave na guia inferior, telas de autenticação limpas, uma bela tela inicial, uma única tela de vendedor, uma tela de bate-papo e outras partes interessantes de um poderoso aplicativo diário Trabalharemos no design de cada tela passo a passo, começando com os fundamentos da interface como a barra inicial e a barra de guias Em seguida, criaremos recursos do mundo real, incluindo a página ou tela de vendedores em destaque, categorias de produtos, uma única tela de vendedor, uma tela de bate-papo em tempo real e muito mais Você também aprenderá como refinar e atualizar seus designs usando hierarquia visual, espaçamento e opções de cores Depois que o layout estiver pronto, limparemos tudo e adicionaremos interatividade para dar vida ao projeto Essa aula é perfeita para usuários iniciantes ou intermediários do Figma que desejam aprimorar suas habilidades trabalhando em um projeto do mundo real que podem ser adicionados ao É prático, prático e repleto de dicas e truques que você pode começar a aplicar ao seu fluxo de trabalho imediatamente. Então, se você está pronto para aprimorar suas habilidades no Figma trabalhando em uma interface de usuário de aplicativo móvel que pareça profissional, esta aula está pronta para você Na próxima lição, vamos dar uma olhada na demonstração do aplicativo que você vai criar. Então, nos vemos em breve. 2. Demonstração de projeto: Então, aqui estamos dentro do Figma, e esta é uma janela de apresentação do Figma Então, eu quero te mostrar uma demonstração do projeto que você vai construir nesta classe. Então, quando alguém carrega o aplicativo móvel pela primeira vez, é isso que eles verão no telefone. E agora, uma vez feito o carregamento, eles serão levados para a tela de autenticação, onde poderão se inscrever ou fazer login Agora, essa é a tela de inscrição e, se eles já tiverem uma conta, podem entrar em vez de se inscrever. Então, se eu clicar em Entrar, eles fornecerão seu nome de usuário, e-mail e senha e, em seguida, entrarão . Caso eles, por algum motivo, se encontrem nessa tela e não tenham uma conta, eles podem voltar para a tela de inscrição. Agora, com isso dito, podemos supor que eles concluíram a autenticação e agora é hora de entrar no aplicativo móvel Então, se eu clicar nesse logotipo, seremos levados para a tela inicial aqui e, como você pode ver, temos uma boa barra de pesquisa. Temos os detalhes do usuário de login. Temos alguns ícones legais, notificações aqui. Temos a barra de status. Vamos ver como criar isso. Temos uma seção de vendedores em destaque. Temos uma seção de categorias de produtos populares. Cada um deles é clicável e temos outras seções de categorias de produtos Agora, se quiserem ver todos os vendedores em destaque e não apenas esses três, podem clicar em Exibir tudo e serão direcionados para a tela de vendedores em destaque e poderão rolar para cima para ver o restante dos Agora, digamos que estamos interessados em descobrir mais sobre os golpes policiais Queremos visitar a loja. Podemos simplesmente clicar nisso. Somos levados até a loja e podemos ler mais sobre Police Kicks, os detalhes sobre, podemos clicar aqui para ver seus produtos ou podemos clicar neste botão de bate-papo para conversar com eles Então, se eu disser chat, podemos ir para a área de bate-papo onde estávamos conversando com a loja Police Kicks Sempre podemos voltar e voltar. Agora, isso deve abrir o aplicativo do telefone se eles quiserem ligar. Então, voltando, se estivermos aqui, podemos sempre clicar no ícone inicial para voltar à tela inicial e começar ali mesmo. Então, quando terminarmos, você terá uma interface de usuário móvel interativa como essa. E isso é algo que você pode compartilhar com sua equipe ou clientes em potencial para mostrar a eles o que você conseguiu criar para eles. Também é uma vantagem adicional para você caso queira criar um aplicativo móvel real. Você pode compartilhar seu design com as pessoas que desenvolverão o aplicativo móvel. Isso significa que se eles estão compartilhando uma cotação para criar este aplicativo com você, eles não devem incluir o design UIUX porque você mesmo fez isso Eles podem fazer orçamentos para a codificação e a programação, mas você mesmo fez a parte do design Então, essa é uma vantagem adicional. Você não pode incorrer no custo de pagar alguém para criar sua UIUX Então, acho que essa é uma boa introdução ao design de interface de usuário móvel FIGMA Então, se você está pronto e animado para começar com isso, estou muito animado para mostrar como fazer isso. Então, sem perder mais tempo, vamos começar Nos vemos na próxima aula. 3. Barra de status: Agora, aqui estamos dentro do nosso simulador e queremos começar construindo nossa barra de status Isso é chamado de barra de status. E eu posso rapidamente voltar aqui para o meu editor. Foi aqui que criei o aplicativo de referência de amostra ao qual vamos nos referir. Mas eu posso ir aqui e voltar aos arquivos. Isso me levará direto para a equipe atual que está realizando meus projetos para essa equipe específica. Mas eu também posso vir aqui, e a equipe se chama Kyoko Então eu posso vir aqui e dizer crie um novo. E eu já havia criado uma nova equipe chamada New Skillshare Então, vou clicar em New Skillshare Class. Ou deixe-me criar uma equipe totalmente nova. Então, a equipe da loja móvel e eu criaremos a TIM. E caso seja a primeira vez que você usa o Figma, vamos dar uma olhada nisso Caso seja a primeira vez que você usa o Figma e você não entenda o que é uma equipe, o que é um arquivo, o que é uma página, talvez queira conferir minha aula anterior do Figma, onde abordei isso em detalhes Mas, no momento, vamos pular por enquanto porque estamos criando uma equipe e vou escolher o plano inicial, o plano gratuito E agora estamos dentro da equipe da loja móvel. Dentro da equipe da loja móvel, temos um projeto. Não podemos criar mais de um projeto. Mas dentro de um projeto, podemos criar vários arquivos de projeto. Para que eu possa renomear isso, vamos dar um nome diferente. Aplicativo móvel. Digamos que Mobile App, Enter, e agora ele se chama Mobile AppUI Se eu clicar duas vezes nele, não temos nenhum arquivo. Então, vou criar um novo arquivo de design, então vou dizer design. E agora aqui estamos dentro do nosso editor Figma. Temos um arquivo de design que ainda não tem nome. Podemos dar a ela um nome de interface móvel e pronto. Então, vou criar uma moldura. Quando você clicar nele , teremos modelos diferentes que podemos começar a usar. Eu só vou usar o iPhone 16 Pro max. Lá vamos nós. E eu quero dar a ele uma cor de fundo. Então, enquanto ainda estiver selecionado, vou selecionar isso e quero dar a ele uma cor escura, talvez até aquele ponto. Queremos dar a ele um tema sombrio, sem mais nem menos. A próxima coisa, se você olhar para isso, temos tempo. Temos alguns ícones aqui. Então, vou selecionar a ferramenta de texto e digitar 12 horas. Eu vou colocar isso lá. E agora você notará que, se eu mudar para cá, temos vários ícones. Agora, eu já tinha baixado várias imagens que vamos usar. Deixe-me expandir isso. Todos esses são ícones que eu baixei do Flat Icon. E eu vou compartilhar essa pasta logo abaixo deste player de vídeo. Você pode baixar todos esses ícones para acompanhar. Então, agora estamos trabalhando no Sara Spar, então temos os ícones iniciais do Eu vou abrir isso. OK. E eu vou arrastá-los e soltá-los lá, desse jeito, tão simples quanto isso. Então, agora, deixe-me colocar isso aí. A bateria vem para algum lugar lá e o Wi-Fi vem para lá. Para arrastar, estou pressionando a roda do mouse. Para aumentar e diminuir o zoom, estou pressionando Control e rolando a roda do mouse Então, eu quero selecionar essa tecla pressão para selecionar várias. Enquanto pressiono a tecla Shift, vou reduzir o tamanho até esse ponto. E vamos arrastar isso até esse ponto. Vou colocar essa VPN aqui porque presumo que o usuário tenha uma VPN ativa em seu telefone no momento Acho que esses dois são maiores do que queremos que sejam, então vou redimensioná-los assim Selecione todos eles. Controle G para agrupá-los. Agora, quando os agrupamos, eles receberam o nome de grupo um. Vou chamá-los de start aspaEnter agora que cada um deles tem o nome que tinha quando o importamos, exceto a hora, então podemos simplesmente chamar isso hora ou simplesmente deixar assim Então, agora temos a barra de status. Estamos prontos para passar para a próxima parte, que é a barra de navegação inferior. Então, na próxima lição, vamos ver como criar essa barra de guias. É chamada de barra de guias ou barra de guias inferior. 4. Barra de abas: Agora é hora de criar a barra de guias ou a barra de navegação inferior. Então, voltando ao nosso arquivo. Agora, antes de prosseguirmos, lembre-se, tivemos isso. Deixe-me diminuir o zoom. Essa é a tela de boas-vindas. Então é nisso que estamos trabalhando atualmente, e vamos trabalhar no resto. Então, voltando à nossa arte, vou chamar isso de tela de boas-vindas E dentro da tela de boas-vindas, temos a barra de início, que criamos aqui. Eu posso escondê-lo e mostrá-lo. Então, vou manter pressionada a tecla Control e ampliar com a roda do mouse e deixar que eu crie essa forma. Deixe-me desenhar em qualquer lugar lá. Dimensione-o adequadamente. Deixe-me segurar o controle e diminuir o zoom com a roda do mouse para ver o tamanho relativo. Lá vamos nós. E agora, selecionando isso, vou dar uma cor relativamente mais brilhante em comparação com o fundo Deixe-me insistir nisso. Sim, em algum lugar lá. Estou apenas fazendo isso em estilo livre, mas você precisa usar as cores da sua marca Portanto, tenha isso em mente. Agora temos esse retângulo e, como você pode ver, ele é chamado de retângulo Eu posso chamá-la de aba, mas em segundo plano. E agora vou voltar para nossa pasta. E na pasta aqui, a pasta Assets, temos ícones da barra de guias. Vou selecionar todos eles e colocá-los aqui. Quando eu os solto, eles não estão dentro da nossa tela de boas-vindas, então eu posso arrastá-los e soltá-los dentro da tela de boas-vindas. Também posso fazer o mesmo com o plano de fundo da guia. Isso. Agora, temos a barra de entrada. Deixe-me esconder isso. Agora, eles não são visíveis porque depois de colocá-los dentro da moldura da tela de boas-vindas, e eles estão fora desse quadro, não podemos vê-los. Então, se eu selecionar todos eles selecionando isso, mantendo pressionada a tecla Shift e isso, posso arrastar e torná-los visíveis na tela inicial, a moldura da tela de boas-vindas. Agora, também quero reduzi-los em tamanho, mantendo pressionada a tecla Shift para garantir que os redimensionemos proporcionalmente. Na verdade, vou selecionar todos eles e depois Control G para agrupá-los e chamá-los de barra de guias. Então, agora, dentro da barra de abas, temos os ícones. Vou selecionar isso até os ícones Control G. Tab. Dentro da barra de guias, temos o plano de fundo da barra de guias. Deixe-me colocá-lo abaixo. Plano de fundo da barra de guias e os ícones da barra de guias como um grupo. Se eu expandir o grupo, teremos todos eles. Agora vou selecionar o ícone inicial e colocá-lo no centro assim. Selecione a carteira e coloque-a aqui. Ícone de configurações. O menu de hambúrguer. E, finalmente, o ícone do messenger ou chat. Como você pode ver, o Figma tem alguns marcadores legais para mostrar quando você está se movendo em linha reta Se eu selecionar o ícone inicial e arrastar, como você pode ver, isso está me ajudando a ver que estou me movendo em linha reta. Agora, se você tentar selecionar isso, você selecionará o grupo inteiro. Se você quiser selecionar qualquer um desses itens individuais, mantenha pressionada a tecla Control e selecione. Depois, você pode arrastá-lo. Mantenha pressionada a tecla Control, selecione, arraste mantenha pressionada a tecla Control. Mantenha pressionado o controle. Eu posso movê-lo com minhas teclas de seta. E acho que estamos muito bem posicionados. Agora, deixe-me selecionar o grupo de ícones da barra de guias e pressioná-lo para cima com minha tecla para cima no teclado. Eu quero isso em algum lugar lá em cima. Mantenha pressionado o controle e diminua o zoom. E agora temos uma boa barra de abas. Deixe-me abrir a barra de estrelas, e pronto. Então, para finalizar, acho que podemos adicionar o logotipo e esse ícone de carregamento. Então, voltando para nossa pasta, pasta Assets, outros ícones, acho que é onde estávamos. Acho que não tenho esse ícone de carregamento, então posso baixá-lo aqui, mas vou incluí-lo para você. Você o encontrará na pasta. Voltando aqui, vou selecionar essa exportação como PNG. Tudo bem. Carregamento de exportação. Agora, aqui vamos procurá-lo. Lá vamos nós. Corte isso. Vou colocá-lo nos outros ícones e colar lá. Agora, voltando aqui, posso arrastar e soltar isso lá e colocá-lo na tela de boas-vindas, como você pode ver, carregando. Voltando aqui, posso pegar o logotipo e colocá-lo aqui também. E lá vamos nós. Terminamos com a tela de boas-vindas. Acho que estamos progredindo aqui. Na próxima lição, vamos criar a tela de inscrição. A tela de inscrição. Te vejo em breve. 5. Tela de inscrição: A, bem-vindo de volta. Então, agora é hora de criar a tela de inscrição. Vamos dar uma olhada rápida em nossa tela de inscrição aqui. Isso é o que temos. Então, vamos voltar ao nosso espaço de equipe. Agora, com isso, deixe-me resumir tudo o que temos dentro desse grupo. Essa é a tela de boas-vindas. Agora, para criar uma nova tela, posso começar tudo de novo do zero aqui e criar todas as cores e tudo mais, ou posso selecionar isso. Ou, deixe-me selecionar assim menu de camadas e, em seguida, manter pressionada a tecla Alt e arrastar mantendo pressionada a tecla Shift para mover em uma linha reta. Então saia e depois mude. Assim mesmo. Então, agora temos duas telas. Esse é o segundo. Deixe-me arrastar e colocar logo abaixo. Eu quero que eles se movam para baixo enquanto nos movemos para a esquerda, para a direita. Então, vou chamar isso de tela de inscrição. Se eu expandi-lo, ele tem tudo o que esse outro tem, mas eu quero me livrar da barra de guias porque a tela de inscrição não tem isso. Vou deixar o logotipo, mas excluir o carregamento. Empurre isso para cima. Controle e Musewel para rolar o zoom. E agora vamos criar nosso formulário de inscrição, criar uma conta para começar, copiar isso. Você vai ter que digitar. Então, vou selecionar o texto e colar isso lá. Vou pegar isso e soltá-lo lá no centro. Vou selecionar isso e torná-lo menor mantendo pressionada a tecla Shift. Então eu vou arrastá-lo para o centro assim. Em seguida, é claro, vamos usar uma ferramenta retangular para criar os campos do formulário Deixe-me desenhar até aquele ponto. Agora eu posso escolher isso e arrastá-lo para ter certeza de que está no centro. Em seguida, selecione-o, ampliando. Podemos editar o raio do canto, ir aqui até a aparência e depois o raio do canto Vamos dar dez. Sim, dez é bom. Vou escolher o tipo de ferramenta de texto aqui. Use um nome. Vamos empurrá-lo, posicioná-lo corretamente. Em seguida, selecionarei uma cor clara para o texto enquanto ele ainda estiver selecionado. Use um nome, assim mesmo. Agora selecione isso e isso e agrupe-os. Lembre-se de que estamos trabalhando aqui porque desenhamos dentro dessa tela, o texto e o campo foram colocados automaticamente dentro da tela. E agora nós os agrupamos. Vou chamar isso de Campo Quente. Deixe-me chamá-lo de nome de usuário. Tudo bem. Então, vou selecionar o grupo, manter pressionada a tecla Alt e arrastar, mantendo pressionada a tecla Shift para me mover em linha reta. E agora vamos dar esse espaçamento. Largue isso aí. Em seguida, controle D para repetir o mesmo movimento que você fez na última vez. Com o Control D, você está refazendo o que acabou de fazer. Então, agora envie um e-mail com a senha do nome da empresa, mantenha pressionada a tecla Control para digitar isso diretamente. Controle de e-mail. Nome da empresa. Controle, senha, mantenha o controle. Digite novamente a senha. Lá vamos nós. Eu gosto disso. Voltando aqui, temos o botão de inscrição e já temos uma conta aberta, vamos selecioná-la e alternar, depois espaçá-la um pouco mais do que o resto, porque esse é o botão. E certo, teremos que renomear tudo isso, mas sem problemas Vou clicar duas vezes aqui e dizer inscreva-se. E eu vou colocá-lo no centro desse jeito. Na verdade, vou alinhar o texto ao centro dessa forma Mantenha pressionado o controle para selecionar o plano de fundo diretamente e vamos dar uma cor a ele. Vou selecionar a ferramenta conta-gotas e fazer uma amostra em algum lugar Digamos isso. Mantenha pressionado o controle para selecionar isso diretamente. Vou selecionar isso e dar aquela cor de fundo. Acho que essa é a cor de fundo, sem mais nem menos. Também vou dizer Controle B para torná-lo ousado. Agora, selecionarei esse texto, segurarei e mudarei para me mover em linha reta. E aqui vou copiar isso. Claro, lembre-se que eu disse que você vai ter que digitar essa pasta lá dentro. Agora, na verdade, eu quero fazer disso um texto separado. Então, vou arrastar sem duplicá-lo, manter pressionada a tecla Shift para mover em uma linha reta e colar isso lá porque quero que fique separado e você verá o porquê mais tarde Então, segurando isso e isso, vou agrupá-los e chamá-los de contagem. Tudo bem, então selecionando esse grupo, vamos renomeá-lo para e-mail Em um campo, selecione essa empresa. Um campo, Enter, selecione esta senha um, campo Nós e, finalmente, campo de formulário Senha dois Agora, também selecionarei todos eles. Em seguida, controle G para agrupá-los, e eu chamarei esse grupo de campos Fm. Vou derrubar o grupo, fechar a conta Han. Então esse é o botão de inscrição. Entrar. Tenha uma conta, crie uma conta, logotipo da Sharp. Agora, podemos sempre reorganizá-los de acordo com a forma como estão dispostos na tela criação de uma conta vem abaixo do logotipo, depois temos o botão de inscrição e, em seguida, os campos do formulário Diminuindo o zoom, mantendo pressionada a tecla Control. Lá vamos nós. Agora eu posso selecionar todos eles e empurrá-los para cima com a tecla de seta para cima no teclado. E eu acho que aí, eles estão muito bem centralizados Então é isso para a tela de inscrição. Na próxima lição, na verdade, vamos seguir em frente e fazer a tela de assinatura porque é uma replicação disso Então, vou selecionar isso. Mantendo pressionado o controle, seleciono a tela e, em seguida, não consigo arrastar e, em seguida, manter pressionada a tecla Shift para me mover em linha reta. E quando a segunda medida que mostra que o espaçamento é igual aparecer, vou soltar, para que possamos ter um espaçamento uniforme entre todas elas E, claro, agora esse é o controle de manter pressionado para selecionar o quadro. Esta é a tela de login, Enter. Se eu derrubar isso e expandir. Na verdade, vou arrastá-lo para baixo. Então é o terceiro. Vou expandir isso. Agora, vamos ver, precisamos obter apenas o nome de usuário e a senha. Remova o clique duplo, remova isso. Mantendo pressionada a tecla Shift para se mover em pequenos incrementos e em linha reta Clique duas vezes para remover isso. Então, podemos deixar esses três, e eu selecionarei esses dois mantendo pressionada a tecla Shift. Mantenha pressionada a tecla Shift para selecioná-los, empurre-os para cima e pronto Então, agora, basicamente, é assim que se criam as telas de inscrição e assinatura Na próxima lição, vamos ver como criar a página inicial, essa página inicial Te vejo em breve. 6. Tela inicial: Vamos ver como criar a página inicial. Voltando ao nosso espaço de trabalho. Antes de prosseguirmos, acho que devo selecionar todos eles e empurrá-los um pouco para baixo depois desse ponto Estou apenas olhando para isso. O objetivo aqui é entender como usar as ferramentas. Você precisará dedicar algum tempo para entender os princípios de design se quiser criar um aplicativo real. Então, agora, vou manter pressionada a tecla Control para clicar duas vezes nisso, é claro, para alterar isso e entrar na sua conta. Deixe-me colocá-lo e alinhá-lo ao centro e, em seguida, deixe-me empurrá-lo desse jeito Eles também devem mudar mantendo o controle pressionado. Já tenho uma conta, ainda não tenho uma conta. Não tenho uma conta cadastrada. Vou arrastar isso para mais perto desse jeito. Agora, vamos criar a tela inicial. Então, eu vou derrubar isso. Mantenha pressionada a tecla Control, depois segure e arraste e simplesmente alinhe-a abaixo E você pode clicar duas vezes nele ou clicar duas vezes nele para renomeá-lo para Tela inicial E vou arrastá-lo e colocá-lo abaixo da tela de assinatura. Expanda-o assim. Na verdade, é muito engraçado, mas não deveríamos ter colocado isso aqui na tela de boas-vindas, aliás, não sei por que coloquei isso lá. Acho que é porque, inicialmente, eu queria mostrar a vocês como fazer essa barra de abas. Mas então acabamos colocando-o lá. Devemos removê-lo de lá, então Controle X. E eu vou selecionar isso mantendo pressionada a tecla Control Então, agora cole aí mesmo. Ele vai colá-lo no lugar, exatamente onde estava na outra tela. Agora eu quero me livrar de tudo isso porque não precisamos deles. Então, é assim que a tela de boas-vindas deve ser, na verdade. Então, entrando aqui, vamos dar uma olhada rápida no que temos aqui. Então, temos essa área de navegação. Então, vamos criar a barra de pesquisa. Então, vou selecionar essa ferramenta de retângulo e desenhar nossa barra de pesquisa, talvez desse tamanho Vamos dar um raio de dez cantos, sem mais nem menos. Temos esses três ícones, então vamos importá-los. Vou mudar para nossa pasta. Então, na verdade, deixe-me escolher tudo isso nos outros ícones dentro da pasta de outros ícones. Deixe-me arrastá-los para nosso espaço de trabalho aqui. Então, vou colocá-los aqui ao lado. Como não os colocamos dentro de uma tela, eles não estão em nenhuma tela aqui nas camadas. Agora podemos simplesmente ir em frente e organizá-los de forma relativa. Deixe-me colocar isso aí. Nós temos o usuário. Temos as notificações. Por enquanto, vamos usá-los, mantenha pressionada a tecla shift para redimensioná-los em pequenos incrementos Coloque-os lá. Mantenha pressionado o controle para ampliar com a roda do mouse. Vou manter pressionada a tecla shift para continuar redimensionando-os. Puxe isso até o fim. Tudo bem, deixe-me colocar isso de lado porque não precisamos disso por enquanto. E lembre-se, a razão pela qual podemos vê-la aqui é porque ela ainda não faz parte dessa moldura. Lembre-se, nós simplesmente os deixamos aqui. Então, agora ampliando. Eu vou expandir isso. E aqui, podemos simplesmente controlar e selecionar essa cópia, ampliar. Vou colar isso aí. Pesquise produtos. Vou selecionar isso e agrupá-los, Control G, e renomeá-los para a barra de pesquisa Eu posso chamar isso. Vou selecionar esses três e talvez agrupá-los de Controle G, e vou chamá-los de nervo de contexto porque você navega com eles de acordo com o contexto. Clique duas vezes aqui e empurre-o talvez para a esquerda. Acho que agora está bem equilibrado. Eu também posso pegar esse texto. Mantenha pressionado, arraste e coloque aqui porque , como você pode ver aqui, temos o nome da pessoa que está logada Então, mantenha pressionada a tecla Control e clique duas vezes nela. Bem-vindo Kim, selecione isso e exclua-o. Ah, agora, vamos substituir isso por isso porque Kim é uma usuária. Exatamente desse jeito. Em seguida, vamos criar os vendedores em destaque. Então, vou selecionar essa ferramenta retangular e desenhar em algum lugar lá dentro Vamos dar a ele um raio de borda de 20, assim mesmo. Agora podemos desenhar outro ou podemos selecionar isso e arrastar. Vou dar a ele uma cor diferente por enquanto, e então vamos redimensioná-lo talvez até aquele ponto Podemos torná-lo um quadrado dando talvez 121 por 121. E agora é um quadrado. E para o raio da fronteira, vamos fazer com que seja dez Vamos colocá-lo em algum lugar lá. Todos esses chutes. E, na verdade, isso deveria ser uma imagem, mas não tem problema. Segurando a folha, podemos redimensioná-la. Vamos escolher o texto. Os chutes policiais centralizam o texto, e vamos colocá-lo logo abaixo E agora vou mudar para nossa pasta de ativos aqui e vou ver as miniaturas Digamos que chutes. Vou deixar isso aí. Lá vamos nós. E agora, mantendo pressionada a tecla Shift, vou redimensioná-la Eu prefiz as imagens para serem quadradas, então elas têm 512 por 512 pixels Posso colocá-lo ali mesmo, pressionar tecla Shift para redimensioná-lo proporcionalmente, e então podemos dar a ele um raio de borda Antes de fazermos isso, deixe-me colocar isso de lado e excluir isso. Isso foi só um guia. Agora podemos pegar isso e dar a ele um raio de borda de 20 Não, dez. E aí está, a polícia chuta. Podemos empurrar isso para cima desse jeito. Agora, mantendo pressionada a tecla Shift, posso selecionar essas duas, segurar e pressionar a tecla Shift para me mover em uma linha reta até talvez aquele ponto, e depois Controlar D para repetir isso. Em seguida, mantendo pressionada a tecla Shift, posso selecionar todos eles. Mantenha pressionada a tecla Shift para redimensionar proporcionalmente. E agora temos três objetos perfeitamente ajustados. Agora vou expandir isso para garantir que esteja alinhado corretamente com a imagem Selecione isso e redimensione-o adequadamente. E agora vamos dar a esses dois nomes diferentes, motores Eagle Cole isso. E na moda masculina. Copie isso. Colar. Acho que eu tinha dado esse tamanho 14. Oh, isso é tamanho dez. Tudo bem Então, selecionando isso, darei o tamanho dez. Selecione os nomes e empurre-os para baixo. Tudo bem Então, agora eu quero dar a mesma cor dessa barra de guias. Então, mantenha o controle pressionado para diminuir o zoom. Enquanto isso estiver selecionado, selecionarei a cor e, em seguida, o pico dois colorido. Então eu vou selecionar isso. Então deixe-me dar a isso a cor branca. Exatamente desse jeito. Depois, posso clicar duas vezes nele e fazer o upload do computador. Vamos para Ativos, miniaturas. Isso deveria ser o Eagle Motors. Em seguida, clique duas vezes nesse upload do computador. Esses são os sapatos que os adolescentes usam. Podemos clicar duas vezes no nome Control B para deixá-lo em negrito. Também podemos dar uma cor diferente. Essa cor foi selecionada para o logotipo. Voltando aqui, também podemos criar os vendedores em destaque e o botão Visualizar Então, agora eu quero selecionar tudo isso e chamá-lo de Control G. Vendedores em destaque, Enter E eu vou empurrá-lo para baixo com a tecla de seta. Então eu vou selecionar isso, mantenha pressionada a tecla Alt. E eu vou dizer vendedores em destaque. Acho que vou arrastar esse botão aqui. Mantenha pressionado o controle para selecionar o plano de fundo em si. E vamos dar a ele um raio de borda de 50 para torná-lo arredondado Visualização. Faça com que seja menor. Eu posso colocá-lo ali mesmo. Mantenha pressionada a tecla Shift para reduzir o tamanho. Mantenha pressionado o controle para selecionar o texto diretamente e reduzir o tamanho para talvez nove. Controle para selecionar o plano de fundo em si. Mantenha pressionada a tecla Shift para reduzir o tamanho e selecione o texto. Acho que agora estamos bem. Vamos empurrá-lo para dentro. Vamos empurrar o texto para dentro. Eu acho que esse é um bom lugar para acabar com isso. Não queremos que essa aula seja muito longa. Na próxima lição, vamos ver como criar a seção de categorias populares e talvez essa outra seção. Então, eu vou te ver em breve. 7. Como refinar cartões de vendedores em destaque: Apenas perceba que há algo que esquecemos na lição anterior Se voltarmos ao nosso design de referência aqui, como você pode ver, temos uma miniatura dentro de um cartão Isso é chamado de cartão, a parte branca, e esse cartão contém a miniatura e o Mas aqui em nossa implementação aqui, não tínhamos um cartão para cada loja. Vamos criar um cartão. O que queremos fazer é manter pressionada a tecla Control para selecionar o plano de fundo e depois duplicá-lo Então deixe-me dar uma cor de fundo branca, desse jeito. Feche isso. Para o raio da borda, vamos dar dez E agora deixe-me arrastá-lo e colocá-lo exatamente onde a imagem encontra os cantos da imagem. E eu quero arrastar isso e também quero dar a ele o mesmo tamanho da imagem em resumo. Então, agora, se eu expandir isso, temos um cartão. Agora eu posso selecionar o texto, a cor do texto, escolher o colírio ou dois. E então vamos lá. Controle para selecionar isso diretamente e, em seguida, redimensione-o apenas para garantir que tenhamos o mesmo espaçamento que aqui em cima Podemos simplesmente selecionar isso, isso e isso e posicioná-lo assim. A imagem deve ser muito menor. Então, deixe-me selecionar a imagem diretamente. Mantenha pressionada a tecla Shift e out para redimensioná-la de todos os cantos, desloque-a e retire-a enquanto seleciona e arrasta E eu quero dar a ele um raio de borda de cinco. Exatamente desse jeito. Agora podemos selecionar a imagem aqui e aqui, selecionar todas elas e excluí-las. Mantenha pressionado o controle para selecionar a imagem diretamente. Mantenha pressionada a tecla Shift para selecionar isso e agora você tem todas elas selecionadas. Mantenha pressionado e mude de marcha. Vamos movê-lo até aquele local, talvez. Então Controle D. Agora, eu vou segurar. Na verdade, antes de fazermos isso, embora tenhamos esses três selecionados, vamos apenas agrupá-los e chamá-los de cartão de vendedor em destaque. Portanto, agora temos vendedores em destaque e, dentro dos vendedores em destaque, temos um cartão Esse retângulo pode ser o plano de fundo do vendedor em destaque. Esse é o pano de fundo. Então temos o cartão. Podemos simplesmente Controlar D para duplicá-lo e, em seguida, arrastar Lembre-se, controlamos a ação para duplicá-la E agora, como você pode ver, os dois estão bem espaçados , uniformemente espaçados. Sem selecionar, posso manter pressionada a tecla Shift para selecionar essas outras, para que eu possa posicioná-las no centro dessa forma quando você vê os destaques vermelhos. Agora, mantendo pressionado o controle, posso selecionar esse plano de fundo e redimensioná-lo porque, na parte superior, ele parece um pouco estranho na parte inferior Eu acho que eles estão bem posicionados agora. Control Shift selecione vários. Isso estava lá. Controle, clique duas vezes aqui, copie isso, controle, controle, selecione a imagem diretamente. Clique duas vezes nele. Clique fora, em Controle para selecionar isso diretamente. Clique duas vezes nele, faça o upload do computador. Então acho que nos divertimos muito aqui. Feche isso. Acho que agora fizemos a melhoria que queríamos fazer. Temos um cartão que podemos reutilizar em todos os lugares, se quisermos. Então, agora, na próxima lição, vamos ver como criar a seção de categorias de vendedores populares, esta seção Te vejo em breve. 8. Categorias de produtos populares: Agora é hora de criar a seção popular de categorias de produtos. Vamos voltar para nossa tela inicial. Isso é o que temos. Obviamente, como você já deve ter adivinhado, podemos simplesmente escolher esses dois, segurar e arrastar enquanto pressionamos a tecla Shift para nos movermos em linha reta Lá vamos nós. Eu só quero clicar duas vezes aqui e copiar. Você terá que digitar isso. Controle, clique duas vezes em colar. Então, agora, vamos criar a arte do vestuário. Então, vou escolher a ferramenta retangular. E desenhe apenas uma pequena carta como essa. E, na verdade, deixe-me sim, é um quadrado de 89 por 89. Podemos continuar com isso por enquanto. Vamos dar a ele um raio de 20. Eu deveria ter baixado ícones para esses diferentes. Eu os baixei? Acho que sim. Vamos entrar aqui e ver as categorias de produtos. Sim, eu já os baixei. Então, roupas. Vá Não, estamos no lugar errado. Então, deixe-me deixar as roupas lá. Mantenha pressionada a tecla shift para redimensioná-la. Vou colocá-lo ali mesmo, e eu deveria tê-los feito pretos. Mas não tem problema. Eu vou te mostrar como fazer isso em uma aula futura. Então, deixe-me colocar isso aí. Mantenha pressionado e mude de marcha. Isso é roupa. Enquanto ainda estiver selecionado, vou alinhá-lo ao centro e depois colocá-lo no centro desse cartão dessa forma Com isso selecionado, na verdade, eu vou, em primeiro lugar, selecionar esses dois, agrupá-los. E renomeie-os para que eu os chame de uma categoria de produto repugnante E eu quero que sejamos organizados, então vou tirar um momento aqui para resumir tudo o que ainda não estamos usando. Como estamos trabalhando na tela inicial, isso ocorre automaticamente na tela inicial. Agora, se eu arrastar isso, posso espaçá-lo desse jeito. Talvez digamos, quantos temos aqui? Nós temos quatro. Controle D mais uma vez. Na verdade, antes de fazer isso, agora, essa é a categoria de produtos de vestuário. Eu também quero incluir não, isso não é um grupo. Então, deixe-me apenas Controlar Shift G para desagrupar isso. Isso é apenas texto, mas como o copiamos daqui, duplicamos isso e duplicamos deste e de um Acho que o duplicamos desse grupo. Então, enquanto isso está selecionado, posso simplesmente dizer Control Shift G, e agora não é mais um grupo, é apenas um texto popular de categoria de produto. Então, vou selecionar essa roupa e esse grupo aqui e agrupá-los e chamá-los de produto. Cartão. Deixe-me chamá-lo de cartão. Cartão de produto de vestuário. E agora, se eu selecionar, estou selecionando tudo. Eu posso arrastar enquanto mantenho pressionada a tecla Shift. Em seguida, controle D para repetir o que acabei de fazer duas vezes. E, em seguida, selecionando todos eles, posso manter pressionada a tecla Shift para redimensioná-los. Eu quero que eles sejam Deixe-me colocá-los no centro. Assim mesmo. Mantenha pressionado o controle para selecionar o nome. Podemos atribuir o tamanho dez, manter pressionado o controle aqui, tamanho dez, pressionar Control e Shift para selecionar vários. Depois Eletrônica, sapatos de decoração para casa. Mantenha o controle, selecione isso diretamente. Eletrônica. Controle a decoração da casa. Controle, clique duas vezes nos sapatos. Agora vou selecionar os três, quatro deles, duplicá-los sem sair e mudar E eu acho que é um bom lugar. Precisamos de apenas duas fileiras, sacolas de utensílios de cozinha de fitness. Então, agora, é claro, mantendo pressionada a tecla Control, você pode selecionar isso. Em seguida, clique duas vezes nele para substituí-lo. Eletrônica. Vou para a categoria de produtos Ativos, Eletrônicos. Clique em Exterior. Clique com controle e, em seguida, clique duas vezes. Como eu disse, vou te mostrar onde você vai conseguir essas imagens. Não se preocupe. Na verdade, vamos fazer isso agora. Eu vou apenas para o ícone plano. Ícone plano. O que é isso? Três ícones. Tudo bem, vamos remover esse texto livre. E digamos roupas. Então esse é o que eu selecionei, eu acho. Enquanto isso estiver selecionado, você pode escolher baixar isso ou isso, mas eu prefiro isso, e então você pode editar ícone e dar a ele a cor que quiser. Depois de carregada, você pode selecionar essa roda de cores e optar por torná-la de qualquer cor. Mas agora eu escolhi torná-lo branco, mas eu deveria fazê-lo. Deixe-me dar essa cor de fundo. Então, selecionando isso, eu quero dar essa cor. Então, clique duas vezes nessa cópia porque essa é a cor do plano de fundo. Eu quero que ele tenha a mesma cor da cor de fundo. Então cole isso aí, Enter. E agora vou baixá-lo, quero em 64. Agora, vamos fazer com que seja 256. Baixe grátis Fashion. Então, voltando aqui, eu posso entrar aqui e simplesmente arrastar e soltar isso aqui. E agora, mantendo pressionada a tecla Shift, posso redimensioná-la e seguida, clicar com a tecla Control para removê-la Clique aqui e coloque-o lá. No shift para redimensioná-lo de todos os lados. Isso não está dentro desse cartão. Onde está esse cartão? Enquanto isso estiver selecionado, selecionarei o grupo original e, em seguida, o Controle G, apenas para ter certeza de que os tenho no mesmo grupo. Então vou chamar isso de cartão de roupas. Cartão da categoria de roupas. Agora, vou selecionar esses outros e excluí-los. Selecione esse turno. Em seguida, forma D. Vou repetir o mesmo para eletrônicos. Agora que já criamos esses três, vou selecioná-los assim, arrastá-los e colocá-los ali mesmo. E agora, se eu clicar aqui e clicar duas vezes nele, posso fazer o upload do computador e ir para Downloads, e aqui está o que acabamos de baixar e agora está carregado lá. Então, vou acelerar essa parte apenas substituindo o que temos nessas duplicatas Decoração. Vamos apenas marcar essa edição Controle, escolha a cor de fundo aqui, copie. Clique duas vezes em Colar. Download, 256, download gratuito. Vou voltar para cá. Vou apenas controlar, selecionar isso, clicar duas vezes nele e fazer o upload do computador. Eu. Então, aqui estamos. Acabei de substituir tudo. Deixe-me selecioná-los e empurrá-los para baixo, sem mais nem menos Diminuindo o zoom, mantendo pressionada a tecla Control. Nosso aplicativo está funcionando muito bem. Então, uma coisa que eu quero fazer é selecionar essa e essa mudança apenas para criar a seção final aqui, porque podemos combinar essas duas, empurrar essas duas para cima. E a seção final aqui é sobre outras categorias de produtos. Então, vou clicar duas vezes nele e colar lá. E agora você notará que esses são apenas botões que podem ser rolados nessa direção e que podem ser arrastados e Então, vamos selecionar isso e colocá-lo aqui. Mantendo pressionada a tecla Shift, vou tornar isso maior. E como esse é um grupo, vou selecionar isso diretamente. Sim, podemos deixar essa vista. Na verdade, deixe-me remover isso. Selecione isso, controle, selecione, selecione o texto diretamente. O que são esses acessórios? Controle para selecionar o plano de fundo diretamente. Então vamos fazer com que talvez seja um cinza claro. Mantenha pressionado e troque brinquedos, veículos. Mantenha pressionado o controle para selecionar o texto diretamente. Brinquedos. Mantenha pressionado o controle para selecionar isso. Controle para selecionar o texto diretamente. Controle veículos. Eu acho que é um bom lugar para terminar que pode aproximá-los, segurá-los desse jeito. Você pode empurrar isso para baixo. Mantenha pressionada a tecla Shift para selecionar tudo isso e empurre-o para baixo Então, acho que estamos chegando a algum lugar. O aplicativo agora está começando a tomar forma e eu estou gostando muito dele Agora, também podemos selecioná-los e, mantendo pressionada a tecla Shift, podemos redimensioná-los proporcionalmente para que fiquem alinhados com aquele botão A propósito, empurre-os para a esquerda. E acho que agora temos uma boa página inicial. Lembre-se de que o objetivo aqui não é criar a interface de usuário perfeita para o aplicativo. O objetivo é mostrar um fluxo de trabalho que você pode usar se esta for sua primeira vez usando o Figma e estiver interessado em aprender design de UI UX Eu só quero te mostrar um bom fluxo de trabalho. Mas quando você está trabalhando em um projeto real, precisa se lembrar dos princípios de design. Então esse é um objetivo aqui. Então, na próxima lição, vamos ver como criar essa seção antes de passar para essas outras duas, que são relativamente fáceis. Então, eu vou te ver em breve. 9. Tela de vendedores em destaque: Agora é hora de criar a tela de vendedores em destaque. Então, deixe-me voltar à nossa referência. Então, esses são os vendedores em destaque. Então, quando alguém clica em “Os vendedores em destaque visualizam tudo”, eles são direcionados para essa tela aqui, onde podem rolar e ver todos os vendedores em destaque Então, como criamos isso? Voltando à nossa arte, diminuindo o zoom, vou para Controlar, selecionar esta moldura e, agora, arrastar mantendo pressionada a tecla Shift para mover em linha reta, e pronto Agora, o bom do Figma é que podemos simplesmente reutilizar a maioria dessas peças Então, vou me livrar de tudo o mais que não estamos usando mantendo pressionada a tecla Shift. Ou simplesmente selecione dentro da moldura e arraste. Acho que vou me arrastar até lá. Agora, uma coisa que eu queria que fizéssemos antes de prosseguir é selecionar isso, manter pressionada a tecla Shift. Sim, digamos que tamanho 15. Então, vou selecionar isso também. Tamanho 15, sem mais nem menos. Eu só queria redimensioná-los para torná-los um pouco maiores do que o texto do cartão Agora, voltando a isso, como você pode ver, se eu ampliar, temos uma imagem, depois temos um texto e, em temos uma imagem, depois temos um seguida, uma descrição. Vamos ver como implementar isso. Vou selecionar isso, copiá-lo, controlar, selecionar esse quadro e colá-lo lá. Clique duas vezes nisso e clique duas vezes nisso, livre-se disso. Agora temos esses dois. Quero selecionar e colocá-los em algum lugar lá. E, de fato, como você já pode adivinhar, não temos um nome aqui, então controle, selecione o nome e remova-o. Na verdade, vamos controlar e selecionar o plano de fundo. Em seguida, controle, selecione a imagem e vamos aumentar seu tamanho enquanto pressiona a tecla Shift para aumentar o tamanho proporcionalmente Assim mesmo. Mas deixe-me ampliar isso. E vou selecionar a ferramenta de texto e digitar As kicks. Certo, então vou selecionar esse texto fictício. Vou selecionar o texto para, mais uma vez, arrastar para colar um parágrafo, sem mais nem menos. Agora temos essa classificação por estrelas. Então, vou selecionar esse menu suspenso, selecionar a estrela e desenhar uma estrela mantendo pressionada a tecla Shift, talvez até aquele ponto 16 por 16. Isso é 18 por 18. Vamos dar um espaçamento de dois. Em seguida, Shift Control D. Então, temos cinco estrelas. Podemos selecionar isso e arrastá-lo até lá para duplicá-lo Temos um espaço de classificação de cinco estrelas, três mil avaliações, três mil avaliações. Pode apertar isso com as setas do teclado. Agora eu quero selecionar esses cinco, agrupá-los e chamá-los de classificações por estrelas ou estrelas. Essas são as cinco estrelas. Então o grupo ainda está selecionado, posso selecioná-lo e depois Control G para chamá-lo de classificação. Agora, dentro da classificação, temos as estrelas, as cinco estrelas e a classificação. Deixe-me copiar isso, colar apenas para aumentar a quantidade de texto, selecionar esse grupo e organizá-lo corretamente. Deixe-me aumentar esse tamanho um pouco para talvez 16. Acho que gosto da aparência agora. Ou talvez possamos empurrar isso para cima, segurar isso para que o espaçamento aqui seja o mesmo que o espaçamento Tudo bem. Agora, selecionando isso diretamente, posso manter pressionadas as teclas Control e Shift e dar essa cor. Portanto, esta é uma classificação de quatro estrelas. Clique do lado de fora. E agora temos um único vendedor em destaque chamado Polis Kicks. Tudo bem. Então, agora eu posso selecionar isso em sua totalidade e controlar G para agrupá-lo Em seguida, chame-o de cartão de vendedor em destaque. Coloque-o em colapso. Agora eu posso arrastar sem sair e deslocar. Vamos dar esse espaçamento de 17 ou qualquer espaçamento que você quiser Em seguida, deslize a tecla Control D para duplicá-la várias vezes. Agora, você notará que, se quiser duplicá-lo ainda mais, deixe-me desfazer isso, desfazer o Controle D e, em seguida, o Controle D. Ele vem na frente da barra de guias E isso porque a barra de abas na hierarquia aqui está abaixo desse cartão Como você pode ver, o cartão está aqui e a barra de guias está aqui. Assim, podemos selecionar os cartões. E, de fato, deixe-me agrupar todos eles. Cartões de vendedor em destaque. Cartas no plural. Em seguida, arraste-o logo abaixo da barra de guias. E agora parece estar atrás da barra de guias porque o usuário espera poder rolar. Então vamos lá. Agora, podemos selecionar essa barra de guias e vamos ver se podemos adicionar alguma sombra projetada na borda. Sim, sombra projetada. Aqui estamos. Então, para o X, eu quero dizer talvez menos cinco se eu ampliar, menos 20, menos cinco. Digamos que menos cinco. Sim, como você pode ver, há aquela sombra projetada. Digamos também menos cinco. E quanto a menos dez? Eu diminuo o zoom. Agora, como você pode ver, há uma sombra projetada logo atrás. Tudo bem, brinque com isso. Não quero me debruçar muito sobre esse ponto. Agora, o próximo passo, é claro, é alterar os detalhes de cada um dos vendedores Então Controle, selecione isso, clique duas vezes nele. Então isso poderia ser a Eagle Motors. Vamos voltar às aulas, ativos e miniaturas do Figma. Clique do lado de fora. Clique de controle, clique duas vezes novamente. Essa pode ser a loja de brinquedos. Feche isso. Controle. Clique duas vezes. Motores Eagle. Agora, vamos voltar à nossa referência e ver se temos tudo correto. Agora, como você pode ver, temos ícones diferentes em telas diferentes dependendo do contexto, mas não vamos perder tempo tentando atualizar os ícones porque você já sabe como colocar esses ícones lá. Então, cabe a você fazer esse trabalho. Esquecemos mais alguma coisa? Acho que não esquecemos nada. Na próxima lição, vamos agora criar essa página de detalhes para um dos vendedores, porque se alguém tocar nela ou selecionar isso em seu telefone, será levado à polícia Agora eles podem ler mais sobre a loja policial ou ligar para eles. Isso abrirá o telefone. Isso abrirá esta tela e eles poderão conversar com policiais. Eles também podem clicar nos produtos para ver os produtos policiais e ter uma visão geral rápida da empresa. Então, vamos ver como criar isso na próxima lição. Te vejo em breve. 10. Tela do único fornecedor: Bem vindo de volta. Estamos progredindo e estou feliz com isso. Quando alguém clica no cartão Police Kicks, deveria acessar a página de detalhes da loja Police Kicks. Tudo bem Então, voltando ao nosso espaço de trabalho aqui, vou para Control Select Inside, depois saio e arrasto para duplicar E, na verdade, esqueci que deveríamos renomeá-los. Então essa é a tela inicial. Esse é o clique duplo que mostra a tela do vendedor. E essa deveria ser a tela de um único vendedor. Então, agora vou deletar todos aqueles que voltam aqui. Eu posso ver que precisamos de uma imagem. Podemos simplesmente Controlar, selecionar isso e depois copiar, Controlar C, Controlar selecionar isso, controlar V, e eu vou manter pressionada a tecla Shift para aumentá-la de todos os ângulos, desse jeito. Então, vamos criar esse cartão. Meu assento continua deslizando para baixo. Tudo bem, então vamos para esse menu suspenso. E depois retângulo também. Vamos desenhar nosso retângulo ali mesmo. Eu acho que é um bom lugar. Enquanto estiver selecionado, vamos dar talvez 20. Selecione a imagem também. Vamos dar 20. Sim, acho que dei dez para cada um. Então, dez, dez. Deixe-me alinhar isso com isso Empurre-o para cima com as teclas com a tecla de seta. E acho que agora estamos chegando a algum lugar. Então, selecionando isso, vamos para o seletor de cores Então vamos dar a mesma cor lá. Selecione fora. Em seguida, vamos dar um nome a ele. Então, vou selecionar os motores Eagle. Selecione o controle porque está em um grupo, selecione o controle e arraste para fora para colocar o nome lá. Quero selecionar essa tecla Alt e arrastar. Vamos colocar isso aí. Também precisamos dessa classificação, clique duas vezes nela e, em seguida, clique duas vezes nela. Alt e arraste isso. E vamos colocar isso aí mesmo. Estamos apenas reutilizando o que já gastamos tempo criando. Essa é a vantagem de usar o Figmre. Você pode reutilizar componentes. Tudo bem, então vamos ao que interessa. Então, selecionando isso e arrastando Alt, em seguida, clique duas vezes neste Alt e arraste-o. Vou expandi-lo até talvez aquele local. Arraste e solte isso em algum lugar aqui. Mantenha pressionada a tecla Shift para aumentar o tamanho. Controle, selecione o plano de fundo. Eu quero controlar, selecionar o plano de fundo para que eu possa alterá-los para o raio de dez bordas, controlar, selecionar os textos Eu espero. Eu quero fazer isso 15. Controle, selecione-o. Vamos colocar isso aí mesmo. Então eu vou arrastar. Deixe-me dar a eles esse espaçamento de 14. E enquanto isso estiver selecionado, pressionarei a tecla Shift e, em seguida, redimensionarei as duas enquanto mantenho a tecla Shift pressionada Empurre-os para a esquerda, levemente para cima. Mantenha pressionado o controle. Eu quero dar a ele essa cor de fundo. Então eu acho que essa era a cor. Então, para o texto, vamos dar uma cor branca. Vou clicar duas vezes nessa cópia. Colar, colar. Vamos acabar com isso aí. E temos nosso cartão. Clique duas vezes aqui. Vamos empurrar isso para o outro lado. Agora, vamos aumentar o tamanho do nome da empresa, talvez até 24. Vamos empurrar isso para baixo. Deslocando para fora. Acho que agora estamos começando a ter algo significativo. Controle e selecione isso. Isso é bate-papo. Sim, acho que agora temos algo incrível. Eu não sei o que sobrou. Você sempre pode atualizar os ícones e os detalhes necessários. , isso está aqui agora , vamos fazer mais sentido. Isso é Police Kicks. Você está vendo Police Kicks. E, na verdade, precisamos ter isso, temos uma flecha. Outros ícones. Sim, nós tínhamos essa flecha. Acho que realmente precisamos disso em lugares como esses. Então, vamos insistir nisso e naquilo porque queremos dar ao usuário uma maneira de navegar para trás e voltar para o lugar de onde veio Acho que é o mesmo caso aqui, porque se você selecionar vendedores em destaque, veja tudo o que você recebeu aqui e sempre poderá voltar Selecionando essas três cópias. I Control, selecione aqui. Primeiro de tudo, selecione Control e, em seguida, Control V para colar no local. E agora eles deveriam ser vendedores em destaque. Controle B para deixá-lo em negrito, e vamos dar essa cor. Talvez possamos chamar essa loja de Polskiks. Podemos usar esse negrito para que o usuário saiba que está visitando a loja de policiais Se responderem, serão levados de onde vieram. Vendedores em destaque, se você responder, você será levado de volta à página inicial Vamos ver o que tínhamos aqui. Portanto, não precisamos do perfil do usuário aqui porque você está apenas visualizando os vendedores em destaque Mesmo aqui, você não precisa disso. Sim, mas, no geral, acho que agora temos uma boa tela de vendedor único com todos os detalhes. E sim, vamos fazer isso um pouco maior. E controle, selecione o texto dentro dos produtos. Empurre-o ligeiramente para baixo. Agora, se eu estiver vendo isso no meu telefone, posso selecionar isso. Vamos fazer com que seja 11. Empurre-o para cima. Se eu selecionar isso, serei levado a uma lista de todos os produtos que a Eagle Motors está vendendo Lá vamos nós. Então, na próxima lição, vamos encerrar as telas com a tela de bate-papo, porque também temos essa tela de bate-papo, que é algo que posso lhe dar como tarefa. Mas vamos ver como criá-lo na próxima lição. Te vejo em breve. 11. Tela de bate-papo: E bem-vindo de volta. Então, agora estamos prestes a terminar de fazer as telas. Só temos essa sessão de bate-papo para terminar. Então, vamos ao nosso trabalho artístico ou ao nosso design, e aqui estamos Agora, vou controlar, selecione isso como de costume. Em seguida, arrasto e vamos garantir que esteja uniformemente espaçado e mantenha pressionada a tecla Shift para se mover em linha reta Vou deixar para lá. Então esta é a tela de bate-papo. Entrar. Deixe-me me livrar da imagem. E alguns desses, o que temos aqui, a propósito? Acabamos de conversar. Então eu quero ficar com essa caixa e os textos, empurrá-los para cima, sem mais nem menos Selecione o texto e empurre-o para cima. Vamos supor que seja uma consulta. Nós fizemos essa pergunta. Deixe-me aumentar o tamanho aqui. zoom. Selecione o texto lá em cima, empurre-o para lá. Agora, talvez seja até esse ponto, porque você deseja permitir que o usuário saiba qual é o balão de fala e qual é o balão de fala do vendedor, desse jeito Então, vou selecionar esses dois, arrastar para baixo, talvez esse espaçamento, mas empurre isso para este lado Podemos variar o tamanho. Então, vou arrastar isso e copiar e colar. Talvez tenha sido uma resposta longa. Deixe-me arrastar isso para baixo, para que eu possa selecionar aqui Então, vamos dar essa cor para manter a consistência da marca. Então, para a cor do texto, vamos dar a cor de fundo. Então, agora eu posso simplesmente selecionar todos eles, depois arrasto e dou a eles o espaçamento de 21 Nós demos os originais. Isso pode ser mais curto. Como arrastar. Assim mesmo. E agora temos nossa tela de bate-papo. Então, acho que isso é suficiente para a tela de bate-papo. Na próxima lição, vamos fazer limpeza porque perdemos o controle de todos os nossos agrupamentos e organização em geral do nosso projeto Então, vamos ver como organizar tudo para que tenhamos um documento limpo e legível Te vejo em breve. 12. Limpando: Agora é hora de fazer uma limpeza em nosso design, porque agora tudo está desorganizado Não é muito desorganizado, mas perdemos a noção de onde estamos e qual grupo pertence a onde Então, vamos começar com a tela inicial. Essa é a tela inicial. Primeiro de tudo, vamos nos livrar desses dois, deletar isso. Agora vamos começar com a tela de boas-vindas. Dentro da tela de boas-vindas, temos o logotipo. Temos o ícone de carregamento e a barra de status. Está tudo bem. Dentro da tela de inscrição, e na verdade, eu quero esconder essa tela. Dentro da tela de sinalização, vamos esconder o resto. Dentro disso aqui, temos o logotipo. Está tudo bem. Temos esse texto de introdução Depois, temos os preenchimentos telefônicos, o botão e eles têm um grupo de texto da conta Depois, temos a barra Sarus, que podemos colocar acima do logotipo da loja Estar em uma boa hierarquia. Então está tudo bem. Em seguida, vamos esconder isso e mostrar isso. A tela de assinatura tem o logotipo da loja. Nós temos esse texto. Temos os campos do formulário. Dentro dos campos do formulário, temos a senha. E-mail e nome de usuário. Deixe-me recolher o nome de usuário e colocá-lo acima desses outros. O e-mail deveria estar no meio, e tudo bem. Então temos esse texto. Temos o botão de inscrição e, em seguida, a barra Srtus. Você pode colocá-lo ali mesmo. Em seguida, vamos para a tela de bate-papo, que deveríamos ter colocado no final aqui. Então esse antes dele. Então isso. Então, desmorone, alto. Então, vamos primeiro para a tela inicial. Dentro da tela inicial, temos o let me collapse. Deixe-me selecionar recolher tudo primeiro. Tudo bem, temos a categoria de roupas até aqui Essas são as diferentes categorias de produtos. Então, com todas elas selecionadas, controle as categorias de produtos G. Essas são as outras categorias de produtos. Então, até lá, não, precisamos disso, desse turno de espera, e isso. Em seguida, Controle G, outras categorias. Então temos esse botão. Botão Exibir. Isso também é um botão VWA. Exibir o botão de um vendedor em destaque. E esse é o botão de visualização do produto Gore. E, na verdade, eu quero que agrupemos tudo aqui, desde isso até aquilo, e esse grupo Control G. Vamos chamá-lo de categorias de produtos populares. Então, vamos também agrupar esse e esse grupo e aquele Controle G. Esses são os vendedores em destaque E esconda e exiba isso. Também podemos ocultar as categorias de vendedores populares e exibir essas outras categorias, texto e o próprio grupo, controlam G, outras Na verdade, podemos chamar essas seções. Seção, seção de categorias populares e seção de vendedores em destaque E, claro, a seção de vendedores em destaque vem em primeiro lugar. Em seguida, as categorias populares, depois outras categorias. E temos o perfil do usuário, que deveria estar aqui. Na verdade, antes de fazermos isso, vamos selecioná-lo junto com o nome e esses dois e agrupá-los e chamá-los de context, nerve Vgation ou nerve collapse it, e vamos colocá-los acima dos vendedores em destaque Em seguida, temos a barra de pesquisa, que vem abaixo dela. Em seguida, temos a barra de abas. Que vem na parte inferior, então temos a barra de status, que deve vir na parte superior. Tudo bem Portanto, a tela inicial agora está bem organizada. Como você pode ver, temos a barra de status, depois temos o nervo de contexto, a barra de pesquisa, vendedores em destaque, vendedores populares, outras categorias e a barra de guias Lá vamos nós. Então, vamos esconder isso. Agora, vamos ver os vendedores em destaque. E aqui, vamos selecionar isso como Control G. Context nerve. Coloque-o em colapso. Então temos isso. E então, vamos desmoronar isso. Depois, temos a barra inicial, que deve vir no topo Isso deve estar abaixo da barra de guias por causa desta seção aqui. Lembrar. Mas agora, dentro da barra de guias, não, dentro dos cartões de vendedor em destaque, também precisamos nos organizar. Vamos derrubar tudo primeiro. Sim, temos cinco Temos todos esses cartões de vendedor em destaque. Você também pode chamá-los de cartão de vendedor em destaque. Você pode ser muito específico, muito detalhado sobre o que é cada um desses componentes. Porque se você abrir um, também descobrirá que tem outros grupos. Portanto, seja o mais detalhado possível e o mais organizado possível. Então, pelo menos, para entender como organizar seus grupos. Colapse isso, esconda isso. Vamos entrar aqui. Isso é muito rápido e direto. Colapse tudo isso. Vamos começar colocando a longarina inicial no topo Vamos criar esse contexto nav Control G. Essa é a unha do polegar Esse é o cartão. Vamos apenas chamá-los de detalhes do vendedor. Controle G. Detalhes do vendedor. Esta é a miniatura do vendedor. Em seguida, a barra de guias na parte inferior. Então, temos a barra inicial. Nervo contextual, detalhes do vendedor. A miniatura do vendedor deve estar acima dela. Tudo bem, destrua isso agora, finalmente. Vamos fazer isso. Uma mensagem de texto. Então, agora, eu agrupei todos os grupos de texto do chat. E, claro, você pode reorganizá-los. E então temos a barra de abas, depois temos a barra inicial, que podemos colocar aqui E lá vamos nós. Então, vamos revelar tudo E lá vamos nós. Vamos ver como adicionar interatividade na próxima lição Te vejo em breve. 13. Como adicionar interatividade: É hora de adicionar interatividade e links às diferentes partes para permitir a navegação e a apresentação Então, para fazer isso, primeiro de tudo, você precisa se certificar de que está dentro do modo de design. Se você estiver no modo de desenho, não terá essa opção chamada protótipo, que é o que precisamos E isso porque se nós, por exemplo, selecionarmos essa tela ou moldura e mudarmos para o protótipo, você notará que temos esses ícones positivos aparecendo E se estivermos no modo drone e o Controle selecionar essa opção, não os teremos. E esses são os ganchos que você deve usar para se conectar a outras partes do aplicativo Portanto, verifique se você está no modo de design. E agora, se eu selecionar isso, selecionar Control e mudar para o protótipo, posso arrastá-lo e colocá-lo ali mesmo Apontou para isso. Assim que você vê o destaque, significa que os dois estão vinculados. Se alguém clicar aqui, será direcionado para essa tela Então, para me comprometer, basta clicar do lado de fora, mas também posso escolher o comportamento. Você pode escolher o destino, ação, navegar até ou todas essas outras coisas. Se eu selecionar isso, agora, se eu for para, tenho duas opções aqui, posso visualizar ou apresentar. Se fizermos uma prévia, ele abrirá um simulador aqui e, se eu escolher presente, abrirá uma nova guia Agora, de volta aqui, estamos aqui dentro. Se eu selecionar isso, isso nos levará à tela de inscrição. Agora, deixe-me fechar isso. E também podemos fechar isso. Se eu selecioná-lo, como você pode ver, ele nos levará à tela de inscrição. Agora, entrando aqui, eu quero ampliar. E lembre-se, era um grupo. Eu queria que tivéssemos isso apenas selecionando isso por controle. O motivo pelo qual não criamos um texto contínuo até o final foi porque eu queria que fizéssemos desse um único link, não o texto inteiro, para que, quando alguém clicasse nele, fosse um link por si só, e eu estivesse pressionando o controle para selecioná-lo diretamente E se eu selecionar isso, posso arrastá-lo e levá-lo para a página de assinatura. Se você já tem uma conta, pode fazer login. Então, você será direcionado para a página de assinatura se clicar aqui. Então, vamos ver isso em ação. Pré-visualize isso. Se clicarmos para acessar a página de inscrição, se já tivermos uma conta, poderemos entrar e seremos direcionados para a página de inscrição Agora, vamos fazer o mesmo aqui. Posso manter pressionada a tecla Control e selecioná-la, depois arrastá-la até lá e clicar para fora. Agora eu posso dizer Ok. Agora, se eu clicar mais uma vez, selecione isso. Seremos direcionados para a página de login. Se não tivermos uma conta, seremos direcionados para a página de inscrição Exatamente desse jeito. Diminua o zoom. Deixe-me fechar o pré-visualizador. Deixe-me ajustar meu assento. zoom. Aumentando o zoom Agora, aqui podemos dizer que se alguém clicar nesse botão, ele deve ser direcionado para os vendedores em destaque, nesta tela Então, vou conectá-lo a isso. Se você tivesse uma tela de categorias populares, que deveria ter e clicar em Exibir tudo, você deveria ser direcionado para a tela de categorias populares, mas não a temos. Então, não vamos nos preocupar com isso. Tudo bem Portanto, também temos essa página inicial. Tudo bem, então também temos o alcatrão. Estamos apenas fazendo conexões aleatórias aqui. Não estamos tentando seguir uma ordem específica. Então, se estivermos na tela do vendedor em destaque, podemos selecionar isso. Então, selecione Control, e eu selecionarei isso e nos levarei de volta para casa, porque se selecionarmos o ícone inicial, deveremos ser levados para a tela inicial. O mesmo caso se aplica a isso. Selecione controle, selecione Controle. Então vamos para a página inicial. O mesmo caso se aplica a isso, selecione Control e, em seguida, vá para a página inicial. Tudo bem Se clicarmos no botão de bate-papo, deveríamos conversar com esta loja. Então eu vou segurar o Controle e nos levar até lá. Clique do lado de fora. O que mais? Se clicarmos no botão B aqui, quero manter pressionada a tecla Control para selecionar o ícone, então podemos voltar aqui porque chegamos ao gráfico a partir desta parte. Se estivermos dentro da loja, provavelmente viemos da lista de lojas. Assim, podemos selecionar esse ícone de volta e vinculá-lo de volta a ele, selecionar fora. Se estivermos na lista de vendedores em destaque, provavelmente viemos da página inicial Então, selecionando Controle, selecione isso e coloque-o de volta lá. O que mais? Agora, se estivermos vendo isso como um grupo, vou selecionar Controlar e selecionar o plano de fundo em si. Seremos direcionados para a página de detalhes do Police Kicks. Por ser um cartão, você o seleciona e é direcionado para a página de detalhes. Esquecemos alguma coisa? Vamos ver se precisamos de mais alguma coisa. Esta é a loja Police Kicks. Então, também podemos vincular esta loja aqui, mantendo pressionada a tecla Control. Vou vinculá-lo a essa loja. Também farei o mesmo com a miniatura, para que, onde quer que você toque, você seja levado à loja Também vou fazer do nome um link para a loja. E isso é, na verdade, a mesma coisa deveríamos ter feito para isso porque queremos ter certeza de que eles estão apontando para a loja certa. Então, se alguém clicar no nome da loja, será levado até a loja E agora acho que você entende como criar interatividade, como vincular cada link ao destino certo Sim, acho que está tudo certo. Então, vamos mudar para a apresentação. Quero que vejamos isso como uma apresentação. Vamos fechar isso. Agora, se eu clicar nisso, seremos direcionados para essa página. E, na verdade, quero que o logotipo nos leve à página inicial. Mas, por enquanto, estamos na página de inscrição. Se ainda não tivermos uma conta, seremos direcionados para a página de inscrição Tudo bem, agora eu queria que pudéssemos navegar até a página inicial clicando neste logotipo E isso também. Então, agora vamos clicar em Jogar novamente. Lá vamos nós. Se eu clicar aqui, seremos direcionados para a página inicial Agora, se eu quiser ver todos os vendedores em destaque, basta clicar nele Nós vemos todos os vendedores. Eu também posso voltar. Então, agora vamos voltar para todos os vendedores. Também posso acessar a tela inicial novamente na tela da página de vendedores em destaque Aqui, se eu selecionar o plano de fundo, o cartão ou o nome, somos levados para a loja de detalhes da loja. E se estivermos muito curiosos e quisermos fazer mais perguntas à loja, devemos ser policiais aqui Podemos iniciar um bate-papo com eles e começar a nos comunicar, descobrir quanto custam seus produtos Então eu acho que esse é um bom lugar para acabar com isso. Esta foi apenas uma rápida introdução ao Figma e ao design da interface do usuário do aplicativo móvel É claro que tenho muitas outras dicas e truques na manga, e vou compartilhá-las em aulas futuras Mas, por enquanto, vamos parar por aí. Mas antes de você ir, eu tenho mais algumas coisas que eu quero compartilhar com você, então eu vou te ver na próxima lição. Não vá a lugar nenhum. 14. Considerações finais: E isso é um embrulho. Quero dizer parabéns por ficar comigo do começo ao fim Você finalmente terminou e agora tem um aplicativo móvel, uma interface de usuário que pode ser exibida para seus amigos, clientes ou potenciais empregadores Agora, eu gostaria de ver o que você foi capaz de criar. No Skillshare, gostamos de enviar nossos projetos e receber feedback de colegas e professores Então, clique na guia Projetos e Recursos logo abaixo deste player de vídeo e clique no botão Enviar para fazer upload capturas de tela da interface do usuário do seu aplicativo móvel E mais uma coisa, se você achou esta aula útil, eu realmente agradeceria se você pudesse dedicar apenas 1 minuto do seu tempo para deixar um comentário. Deixe-me saber como eu me saí. Deixe-me saber como foi a aula. Você gostou? Você recomendaria para iniciantes ou intermediários? Eu realmente agradeceria qualquer feedback, pois isso realmente ajuda a tornar essa aula mais visível na plataforma e permite que mais alunos sejam expostos a ela. Então, basta ir até a guia de avaliações e clicar em Labor Review, e eu vou realmente apreciar isso. Além disso, não se esqueça de conferir meu perfil onde tenho várias outras aulas sobre web design. Modelagem em três D com o Blender e outros softwares diferentes Confira minhas aulas e veja se alguma coisa é do seu interesse. Estamos vivendo em uma era digital que as habilidades digitais são muito importantes, e é nisso que me especializo Não se esqueça de me seguir também para ser notificado toda vez que eu tiver uma nova aula. Então, até a próxima vez , seja criativo. Paz.