Como criar um site UI/UX no Figma 2022

1. Apresentação: Olá e bem-vindos às suas celas. O melhor lugar para aprender design e protótipo de UI UX. Neste curso, vamos criar um site do mundo real, que cria protótipos em Figma com mais recentes recursos e estética de design. Meu nome é, ela é estranha e eu sou designer de UX. Meu co-instrutor é o show Hagar e ele é designer de interface do usuário. E temos mais de dez anos de experiência na indústria de design. Por meio deste curso, orientaremos você sobre como criar um site do zero no Figma, o curso é dividido em quatro seções. Interseção, Figma, seção de visão geral, UI, seção UX e seção de protótipo. Na seção de introdução, veremos um pequeno resumo sobre este curso e como você pode perder os arquivos de exercícios na seção de visão geral do Figma, veremos o que é o Figma e como usar seus recursos. E na seção UI e UX, começaremos a criar e estruturar nosso site de entrega de comida. E no final, vamos unir todas as molduras. Então, parece um site do mundo real. E, por último, veremos como compartilhar nosso site com outros membros da equipe ou partes interessadas. Temos muito a lhe mostrar sem mais delongas. Vamos começar. 2. Como usar os arquivos de exercícios: Neste vídeo, mostraremos como você pode começar com os arquivos de exercícios. Os arquivos de exercícios deste curso estão incluídos nesta palestra. Define que fizemos o upload contém o arquivo de ativos Sigma. Ele contém todos os ativos usados no curso. Faça o download deste arquivo para que possamos continuar nossa jornada criando um site do mundo real em Figma. Este arquivo de exercícios não contém o arquivo Figma para o pai. Basta nos acompanhar neste curso. Assim, vocês podem entender como criar seu próprio projeto Figma. Isso é tudo para este vídeo. Vejo vocês no próximo módulo. 3. O que é o Figma?: Sigma é um aplicativo de design de UI UX baseado em navegador e principalmente uma ferramenta de prototipagem baseada na web com recursos offline adicionais habilitados por aplicativos de desktop para macOS e Windows. Atualmente, é a principal ferramenta de design de interface do setor. Aqui, a questão é: existem muitas outras ferramentas, como Adobe XD, sketch, marble e muitas outras, além de por que usamos o Figma? A resposta é que outros softwares precisavam de licença e precisamos comprá-los. Já o sigma está disponível gratuitamente. E você pode simplesmente acessar o site Sigma.com, Sigma.com, se inscrever e começar a usar o Figma em qualquer lugar, a qualquer hora. Porque é um aplicativo baseado na web. Embora seja uma versão dextro também está disponível. Mas isso depende. Você quer usá-lo online ou offline. Figma é muito fácil de aprender. E se você tentar, poderá aprender Figma em apenas dois dias. E dentro de sete a dez dias, você pode dominar Figma. A melhor coisa sobre sigma é supor que você esteja viajando para outro país e não tenha seu laptop com você. Você pode acessar facilmente seus arquivos Figma fazendo login no portal web da Figma por meio de outro laptop e acessar todas as suas lutas facilmente. Agora eu acho que vocês têm algum conhecimento sobre sigma. Vejo vocês no próximo vídeo, onde veremos como criar uma conta Figma online. 4. Inscreva-se para o Figma: Para se inscrever no Figma, basta acessar figma.com e clicar em Inscrever-se aqui. Basta digitar seu e-mail e senha e clicar em Criar conta. Você também pode se inscrever com sua conta do Google. Depois de clicar em Inscrever-se, está perguntando meu nome e meu trabalho, insira alguns dados. E se você quiser participar da lista de reuniões da Figma, você pode marcar esta caixa de seleção. Agora eu estou vivendo isso. Edite isso e depois clique em Criar conta. Agora, nossa conta Figma foi criada. É hora de adicionar uma equipe à minha Figma. Vou escrever para você exalta equipe. Lembre-se de que uma equipe tem muitos membros para que você possa colaborar facilmente com eles. Discutiremos isso mais tarde. Agora é só clicar em Avançar. Você também pode fazer isso mais tarde. No momento, existem dois planos para Figma. Escolha o plano mais adequado para você. Mas se você é iniciante, sugiro que escolha o plano inicial. E agora nossa conta Figma está configurada com sucesso. Isso é tudo para este vídeo. Vejo vocês no próximo vídeo. 5. Como configurar fontes no figma: Neste vídeo, vamos habilitar fontes locais em nosso Figma. Caso contrário, se você for trabalhar com fontes existentes, não terá uma grande seleção. Além disso, se você importar coisas como arquivos de esboço, o texto pode não funcionar e não parecer correto. No Figma, quando você está no site, você já está logado. Vá para o canto superior esquerdo, onde estão as várias maneiras, e vá para as configurações. Aqui embaixo, você pode ver que temos algumas fontes locais que atualmente não estão habilitadas por padrão. Clique em Baixar instalador para ativar as fontes locais. Isso fará o download dependendo do seu sistema operacional. Ele vai baixar um pequeno arquivo. No que você vai fazer é basicamente abrir isso e instalá-lo. Eu posso ver que eu tenho o pacote aqui. Então, vamos instalar isso. E você verá agora que as fontes locais estão habilitadas. Agora tenho muitas fontes disponíveis no meu Figma. Caso contrário, você trabalhará com menos fontes. Agora você pode voltar ao recente e ver toda a violência. A próxima etapa é entender o espaço de trabalho da Figma. Então, vejo vocês no próximo vídeo. 6. Como entender a área de trabalho: Bem vindo de volta. Neste vídeo, vamos entender o espaço de trabalho ou Figma. Esta é a nossa página inicial. Por padrão. Figma nos dá três projetos. Você pode mantê-lo ou excluí-lo. É totalmente baseado na sua escolha. seguir, aqui no canto superior direito, temos duas opções. Esta opção de importação é usada para importar diferentes projetos Figma diretamente para o Figma Você também pode importar seus arquivos de esboço clicando neste ícone de importação. Temos um ícone positivo. Basta clicar nesse ícone para criar um novo arquivo. Aqui no canto superior esquerdo, temos uma barra de ferramentas. Ele contém ferramentas diferentes, como retângulo, elipse, ferramenta de caneta. Você pode desenhar formas diferentes usando essas ferramentas. Abaixo dela está a guia de camadas. Aqui você pode ver todas as suas camadas. A próxima guia é o carimbo do ativo. Aqui você pode armazenar todos os ativos que está usando durante todo o projeto e, posteriormente, compartilhá-los com os membros da sua equipe. No centro, temos nossa tela onde podemos criar e trabalhar com nossas pranchas de arte. Lembre-se de que as pranchas de arte agora são chamadas de molduras em Figma. Nas próximas aulas em que digo moldura, isso significa que estou falando sobre pranchas de arte. Depois disso, no lado direito, temos nosso painel Propriedades. Aqui. Você pode alterar as propriedades de diferentes elementos. Atualmente, não está fazendo nada. Mas quando eu desenhar um retângulo aqui na tela, você verá que todas as propriedades desse retângulo agora estão visíveis. Em seguida, no canto superior direito, temos um botão Compartilhar para compartilhar esse projeto com outros membros da equipe ou com clientes. Também temos um botão play para visualizar nosso design e um botão de zoom para ampliar ou diminuir o zoom da prancheta. E isso nos leva ao final desse vídeo. Vejo vocês no próximo vídeo. Vamos ver como configurar nosso primeiro arquivo no Figma. 7. Como configurar o primeiro arquivo no figma: Bem vindo de volta. Neste vídeo, vamos configurar nosso primeiro arquivo no Figma para configurar um arquivo. Primeiro, crie um novo arquivo. E aqui na parte superior central, renomeou o primeiro projeto para seu projeto de equipe. Depois disso, renomeie esse arquivo sem título para o site da BFF Town. Ao clicar nele. Os projetos Sigma são criados em molduras. Então, para criar um quadro, basta pressionar a tecla F do teclado ou clicar aqui no canto superior esquerdo e escolher quadro. Depois disso. Aqui no lado direito, temos muitas opções de molduras. Também podemos criar aplicativos diferentes para telefones, tablets, postagens na web e em mídias sociais. Mas para este curso, vamos trabalhar com a tela da web. Então, precisamos escolher Web 1920 por 1080 frame. Então, basta clicar nele. E agora nosso quadro foi criado e é assim que você pode configurar um arquivo no Figma. Vejo vocês no próximo vídeo, onde veremos como começar a criar nosso site. 8. UI da homepage: Bem vindo de volta. Neste vídeo, vamos começar a criar a primeira página do nosso site, que é a página inicial. Então, primeiro de tudo, crie um quadro de 1920 por 1080 pressionando a tecla F do teclado. Agora vamos configurar nossa grade de sites. A grade do site é uma estrutura visual usada para organizar componentes do design de uma página da web, como topografia, imagens , vídeos e outros elementos. Tradicionalmente, uma estrutura de grade é usada para dividir uniformemente o espaço do projeto em uma série de colunas verticais. Então, para criar uma grade, basta selecionar a moldura e clicar na opção de grade. A partir daqui, altere sua orientação para colunas. E a contagem, à direita, 12ª colunas com uma margem de 375 da esquerda e da direita. E a sarjeta de 30 pixels. calha é basicamente o espaço interno entre as colunas. Depois disso, vamos adicionar réguas. Então, basta pressionar Shift R no teclado e adicionar duas réguas, uma no lado esquerdo e outra no direito. Esses governantes nos ajudarão na estruturação do nosso site. Depois disso, adicione um retângulo de cerca de 120 pixels. Agora vou adicionar o logotipo e a barra de navegação. Então, basta copiar o logotipo do Exercise Files e colá-lo aqui. Mude para cerca de 150 e coloque-o aqui corretamente. Agora pressione a tecla T e escreva para casa sobre Menu e contato na barra de navegação. A fonte que estamos usando neste projeto está aberta para colocar a camada de texto no centro com um espaçamento interno de 40 pixels. Agora, adicione um subjacente de dois pixels nessa guia Início e altere a cor da linha de texto para essa cor vermelha. Depois disso, adicione camadas aos textos e renomeie os dois primeiros Atos ordinais e o segundo 20800 triplo, triplo para agora adicionar um retângulo de cerca de 40 por 40. Mude o raio de água 28 e sua cor para nossa equipe, cor amarela. E coloque-o aqui. Faça uma cópia e mova-a para a direita com um espaçamento interno de dez pixels. Agora vamos adicionar ícones aqui. Então, basta copiar o ícone da cesta e ícone do usuário dos Arquivos de exercícios e colocá-los aqui. E aqui, altere o espaçamento entre esse primeiro retângulo e esses textos para 30 pixels e alinhe toda essa barra de navegação corretamente. Agora vamos para cá. Vamos adicionar o banner do nosso site. Então, para isso, desenhe um retângulo de cerca de 1920 por 830. Mude a cor para preto e adicione um desfoque radial dessa cor sobre esse retângulo. Esse desfoque radial criará um bom efeito de holofote. Agora vou adicionar imagens sobre esse retângulo. Portanto, copie as imagens dos Arquivos de Exercícios e coloque-as aqui, provavelmente. Depois disso, pressione a tecla T e escreva os melhores hambúrgueres da cidade, que é o texto do título. Coloque-o corretamente. Agora vamos adicionar um botão de apelo à ação aqui. Para isso, desenhe um retângulo em torno de 20 por 58. Mude o raio do canto para dez. Coloque-o embaixo do texto. Agora, pegue a ferramenta de texto e escreva, leia mais e alinhe-a com esse botão corretamente. Agora vamos para cá. Desenhe um retângulo de cerca de 1920 por 540. Mude sua cor para essa cor vermelha. Depois disso, adicione uma imagem sobre esse retângulo. Então pegue a imagem do arquivo de exercícios e posicione-a sobre esse retângulo. E então altere sua opacidade para cerca de 10%. Agora pegue o texto do título acima, mova-o para baixo e altere a fonte para 50 pixels e renomeie-a novamente. Pegue uma cópia desse texto, mova-a para baixo e mude esse texto para texto fictício de parágrafo. Com a margem superior de dez pixels. Depois disso, no lado direito, desenhe um retângulo de cerca de 365 por 375 e posicione-o aqui. Mude sua cor para a cor do nosso tema. Agora, apenas uma imagem importante do arquivo de exercícios e coloque-a aqui corretamente. Vamos nos mudar para cá. Basta desenhar um retângulo de cerca de 1920 por 1287. Muda de cor para essa cor clara. Depois disso, pegue o texto acima mova-o para baixo com uma margem superior de 100 pixels. Renomeie para itens populares e mude sua cor para essa cor vermelha. Depois disso, desenhe um retângulo de cerca de 270 a 70. Altere o raio da borda para dez. Em seguida, pressione a tecla T e o nome correto do produto. Faça uma cópia e mova-a para baixo com uma margem superior de cinco pixels e renomeie-a para preço. Agora, basta copiar o item atual da barra superior. Mova-o para baixo na frente deste texto e diminua-o para cerca de 40 por 40. Alinhe-os corretamente. Agora, faça sete cópias e organize-as de acordo. Depois disso, importe as imagens dos arquivos de exercícios e coloque-as sobre esses retângulos adequadamente. Agora, basta pegar o texto do título acima. Mova-o para baixo com uma margem superior de 150 e renomeie-o para as melhores ofertas. Depois disso, importe a melhor imagem dos arquivos de exercícios e coloque-a aqui com a margem superior de 100 pixels. Agora, novamente, pegue o texto do item, mova-o para baixo e renomeie-o para avaliações de clientes. Depois disso, copie a imagem da textura dos arquivos do exercício e coloque-a atrás do texto das avaliações dos clientes. Aqui, basta desenhar um círculo de cerca de 155 por 155. Depois disso, adicione uma imagem do usuário. Você pode usar essa extensão para importar imagens de um usuário. Agora, satisfaça esta imagem do usuário com uma margem superior de 50 pixels. Agora, basta colocar esse texto de avaliação fictício e fazer essa imagem do usuário e também essas classificações por estrelas. Copie as estrelas dos arquivos de exercícios. Agora vamos até nossa seção de rodapé. Então, desenhe um retângulo de cerca de 1920 por 360. Mude sua cor para a cor do nosso tema. Em seguida, copie os links de navegação da barra de navegação e coloque-os aqui. Agora, basta importar ícones de mídia social dos arquivos de exercícios e colocá-los aqui. Alinhe-os corretamente. E, por fim, digite esse texto de direitos autorais. Seus telefones deveriam ter 13 anos, normais. E com isso, nossa primeira tela é concluída. 9. Página “Sobre nós”: Bem vindo de volta. Neste vídeo, vamos criar a página Sobre nós. Então, primeiro, copie o quadro anterior e mova-o para a direita com um espaço interno de 200 pixels. E renomeie-o para Sobre nós. Depois disso, exclua esta imagem do hambúrguer e esse botão, reduza esse controle deslizante para cerca de 1920 por 250. Depois disso, renomeie esse texto para sobre nós. Sua fonte deve ser 50. Alinhe o centro. Faça uma cópia desse texto e mova-o para baixo. Mude sua fonte para 18 e escreva breadcrumbs para este site. Depois disso, mova essa segunda seção para cima. Mude o texto do título da nossa história. E os textos do parágrafo para algum texto fictício. Altere a altura desse retângulo para 730. Depois disso, substitua essa imagem essa imagem dos arquivos de exercícios. Vamos nos mudar para cá. Desenhe um retângulo por volta de 1920 por 668. Depois disso, adicione o texto do título e renomeie-o para nossos serviços. Coloque-o com uma margem superior de 100. Agora, basta desenhar três retângulos arredondados de 360 por 280. Mude suas áreas corporais para dez. E copie o ícone dos arquivos de exercícios e posicione-os sobre esses retângulos. Depois disso, pegue uma camada de texto e posicione-a sobre o primeiro retângulo. Mude a fonte para 24 e renomeie-a para comida de qualidade. Faça duas cópias desse texto e mova-as para o segundo terceiro retângulo. Mude o segundo texto para receitas originais. E o terceiro, entrega muito rápida. Agora vamos descer até aqui e desenhar um retângulo de cerca de 1920 por 729. Adicione um título para conhecer nossa equipe. Agora é só pegar a ferramenta retangular. Desenhe um retângulo de cerca de 270 por 270 com as áreas de borda. Com um raio de borda de dez pixels. Pressione a tecla T e usuário e a designação corretos, por favor. Essas camadas de texto com a margem superior de 30 pixels. Agora faça três cópias desses textos, camadas e retângulos e mova-os para a direita com um espaçamento igual. Agora, importe imagens de chefs e renomeie suas designações e seus nomes. Então, a partir daqui, estou acelerando o processo. Por fim, mova esse pé ou para cima, e nossa tela agora está completa. Vejo vocês no próximo vídeo. 10. Página de menu: Bem vindo de volta. Neste vídeo, vamos criar uma tela de menu. Antes de tudo, copie a tela anterior e mova-a para a direita com espaçamento interno de 200 pixels. E renomeie-o para a tela do menu. E mude a farinha de rosca também. Agora é só deletar tudo isso e desenhar um retângulo de cerca de 1920 por 360 e mudar sua cor para essa cor cinza. E depois disso, adicione um círculo de cerca de cinquenta, um cinquenta. Pressione a tecla T e escreva ofertas. Agora, faça sete cópias delas e organize-as adequadamente. Depois disso, adicione imagens dos itens do menu sobre esses círculos. Portanto, copie as imagens dos arquivos de exercícios e agrade-as aqui corretamente. Depois disso, vamos até aqui e adicionar uma imagem melhor. Copie a imagem do banner da tela inicial e coloque-a aqui corretamente. Depois disso, vamos descer e adicionar um menu de itens popular. Então, copie isso da tela inicial e posicione-o aqui com uma margem superior de 100 pixels. Depois disso, vamos reutilizar esse popular menu de itens e renomear seus nomes e imagens. É um processo demorado. Então, estou acelerando o vídeo. Agora. Eu adicionei o menu inteiro. Agora nossa tela está completa. Adicionamos o menu completo aqui. Isso é tudo para este vídeo. Vejo vocês no próximo vídeo. 11. Menu Página 1: Bem vindo de volta. Neste vídeo, vamos criar uma tela de menu. Então, primeiro, copie o quadro anterior e mova-o para a direita com um espaçamento interno de 200. E renomeie-o para a tela 1 do menu. Agora, basta desenhar um retângulo por volta de 1920 por 873 e copiar a imagem da pizza da tela anterior e redimensioná-la para 530 por 530 com uma margem superior de 100 pixels. Depois disso, adicione um título, avaliação do usuário, estrelas, preço e descrição sobre o produto. Agora copie as estrelas dos arquivos de exercícios e coloque-as aqui. Agora vamos adicionar tamanho e quantidade. Então pressione a tecla T e os lados direito, S, M, L. Então pressione a tecla T e o tamanho certo. Pequeno, médio e grande. Desenhe um círculo de cerca de 60 por 60 e posicione-o atrás do pequeno. Copie o círculo e posicione-o também atrás de texto médio e grande. Mude a cor desse círculo de grande para amarelo. Agora vamos adicionar quantidade para isso. Desenhe dois retângulos. Dois devem ser 47 por 511 devem ser 84 por 51. A cor da extremidade esquerda e do retângulo direito deve ser cinza e o retângulo central deve ser branco. Agora, basta adicionar os ícones e a quantidade do contador aqui. Depois disso, pegue o botão da página inicial e coloque-o aqui. Altere o tamanho do texto para 23 e a cor para branco. Agora vamos para cá. Desenhe um retângulo de cerca de 290 por 70. Altere o raio do canto superior direito e superior esquerdo para oito e mude sua cor para vermelho. Agora pressione a tecla T e clique com os detalhes do produto à direita aqui. Alinhe-os corretamente. Pegue uma cópia desse botão e mova-a para a direita e substitua o texto por resenhas. Sua cor deve ser preta. E exclua esse retângulo para que essas guias fiquem igualmente equilibradas. Depois disso, desenhe uma linha com uma altura de quatro pixels sob esse botão vermelho e mude sua cor para vermelho também. Depois disso, desenhe um retângulo de cerca de 1920 por 1466. Mude sua cor para um cinza claro. Agora adicione um texto fictício com uma margem superior de 50 pixels sobre ele. Por fim, copie a seção de itens populares da página inicial e coloque-a aqui com uma margem superior de 50 pixels. E renomeou o título também. Você também pode gostar. E agora nossa tela está completa. Vejo vocês no próximo vídeo. 12. Menu Página 2: Bem vindo de volta. Neste vídeo, também criaremos uma tela de menu. Então, primeiro, copie o quadro anterior e mova-o para a direita. Agora, basta varrer esse retângulo vermelho aqui e alterar a cor do texto do comentário para branco. E este produto detalhou a cor preta. Depois disso, vamos descer e excluir esse texto de detalhes. E agora, aqui vamos adicionar avaliações de usuários. Portanto, copie as estrelas de avaliação dos arquivos de exercícios e cole-as aqui com uma margem superior de 50 pixels. Depois disso, pressione a tecla T e o nome e a data corretos do cliente. Altere o texto do nome do cliente para negrito. E, novamente, pressione a tecla T e escreva o texto fictício revisado pelo usuário. Agora, desenhe uma linha cinza sob esta análise com a margem superior de 20 pixels. E, por fim, faça uma cópia desta resenha e mova-a para baixo. E agora a tela está completa. Nos vemos no próximo vídeo. 13. Adicionar à tela do carrinho: Bem vindo de volta. Neste vídeo, vamos criar a tela Adicionar ao carrinho. Primeiro, copie o quadro anterior e mova-o para a direita. Em seguida, desenhe um retângulo preto sobre a tela e altere sua opacidade para setenta e cinco por cento. Observe desenhar um retângulo em torno de 682 por 553. Depois disso, desenhe outro retângulo sobre ele e altere o raio do canto do primeiro retângulo para 20. No segundo retângulo, canto superior direito e no canto superior esquerdo até 20. Depois disso, adicione um ícone de fechamento sobre esse segundo retângulo. E agora adicione um ícone de marca de seleção. Copie o ícone da marca de verificação do arquivo de exercícios, pressione a tecla T e escreva esse texto aqui. O tamanho da fonte deve ser 23 em negrito e sua cor deve ser branca. Agora, basta adicionar os detalhes do produto. Copie os detalhes da tela anterior e cole-os aqui. E, por fim, adicione dois botões. Copie os botões da tela anterior e altere o texto do primeiro botão para continuar comprando. O botão Avançar para finalizar a compra e sua cor para vermelho. E agora nossa tela está completa. Vejo vocês no próximo vídeo. 14. Detalhes do produto Tela: Bem vindo de volta. Neste vídeo, vamos criar a tela de detalhes do produto. Então, primeiro, copie a tela do menu e mova-a para a direita. Exclua esta seção do corpo. Depois disso, renomeie os textos do menu para carrinho de compras. E é pão ralado para casa. Login. Aqui na barra de navegação. Adicione um círculo de quantidade sobre o ícone do carrinho. Agora vamos nos mover para baixo e desenhar um retângulo de cerca de 565 por 60 com o raio da borda de 50. Mude sua cor para cinza claro. E agora pressione a tecla T e, para a direita, você tem três itens em seu cartão de compras. E depois disso, vamos descer e adicionar detalhes do produto. É a quantidade com o controle deslizante. É um prêmio e um ícone de exclusão. Adicione um subjacente de cor cinza com a margem superior de 20 pixels. Alinhe todos eles corretamente. Agora é só selecionar todos eles e duplicá-los duas vezes com um espaçamento interno de 20 pixels. Altere os detalhes do segundo terceiro produto. Agora pressione a tecla T e escreva o subtotal e o envio. Depois disso, em seus valores. E agora basta desenhar uma linha abaixo dela com a margem superior de 20 pixels. Agora, aqui, adicione um custo total. E, por fim, adicione os botões de continuar comprando e prossiga com a finalização da compra. Copie esses botões da tela anterior e cole-os aqui com a margem superior de 50 pixels. Agora é só mover essa foto para cima. Isso é tudo para este vídeo. Vejo vocês no próximo vídeo. 15. Tela de login: Bem vindo de volta. Neste vídeo, vamos criar uma página de tela de login. Então, primeiro de tudo, copie o quadro anterior e mova-o para a direita e altere o título e a barra de navegação para fazer login. E depois disso, exclua a seção do corpo. Agora, mova esse login para baixo com a margem superior de 90 pixels. Mude a cor para vermelho e renomeie-a para fazer login na sua conta. Depois disso, pressione a tecla T e escreva o endereço de e-mail. Agora, basta desenhar um retângulo de cerca de cinco a 69 por 55 com o raio da borda de oito pixels. Copie esse endereço de e-mail e mova-o para esse retângulo. Renomeie-o para texto de espaço reservado e altere sua cor também. Agora selecione esse campo de e-mail e faça uma cópia dele. Mova-o para baixo com a margem superior de 25 pixels. Renomeie esse endereço de e-mail para senha e esse espaço reservado para estrelas. E, novamente, faça uma cópia desse texto de senha mova-o para baixo e renomeie-o para esquecer sua senha. Depois disso, desenhe três retângulos. O primeiro deve ser 569 por 55. Em segundo lugar, o terceiro deve ser 269 por 55. Altere o raio da borda desses três retângulos para oito. Mudou a cor do primeiro retângulo para vermelho, para azul para essa cor. Agora pressione a tecla T e escreva login no primeiro botão. Faça login com o Facebook no segundo botão. E faça login no Google com o terceiro botão. Agora adicione ícones do Facebook e do Google. Portanto, copie os ícones dos arquivos de exercícios e coloque-os aqui corretamente. Por fim, pressione a tecla T e escreva register. Agora texto, sua cor deve ser vermelha. E agora nossa tela está completa. Vejo vocês no próximo vídeo. 16. Tela para cadastro: Bem vindo de volta. Neste vídeo, vamos criar uma página de tela de inscrição. Então, primeiro de tudo, copie o menu anterior e mova-o para a direita e altere o título em breadcrumbs para se inscrever aqui, faça login em sua conta para registrar a conta. Depois disso, pegue esses logins com os botões do Facebook e do Google , mova-os cima e mude a cor para cinza claro. Adicione os títulos FirstName e LastName nesses campos. E também são espaços reservados. Depois disso, temos um campo de e-mail. Em seguida, altere esse campo de senha em dois campos. A primeira deve ser a senha e os segundos devem ser digitar a senha novamente. E agora desenhe dois retângulos de cerca de 21 por 21 com o raio da borda de dois pixels. Agora pressione a tecla T e escreva, receba ofertas e texto de termos e condições na frente dessas caixas. Por fim, renomeou o botão de login para se registrar agora. E com isso, nossa tela está completa. Vejo vocês no próximo vídeo. 17. Tela de checkout: Bem vindo de volta. Neste vídeo, vamos criar uma página na tela de checkout. Então, primeiro, copie o quadro anterior e mova-o para a direita e altere título e a farinha de rosca para finalizar a compra. Depois disso, faça duas cópias desse texto de restrição de conta e altere a primeira para o endereço de cobrança e a segunda para o resumo do pedido. O terceiro ao método de pagamento. Agora, em endereço de cobrança, vou adicionar alguns campos. Você pode copiar os campos das telas anteriores e colocá-los aqui. Agora vou mudar os nomes dos campos. Então, a partir daqui, estou acelerando o processo. Depois disso. Em resumo de áudio, adicione a imagem do produto, o nome do produto, a quantidade e o preço. Adicione também o subtotal, o frete e o custo total. Agora vamos descer. Nesse método de pagamento, adicione botões de rádio, barra de crédito, detalhes do cartão de débito, termos e condições, marca de seleção e botão Fazer pedido com cor vermelha. Agora, alinhe todos eles corretamente e nossa tela estará concluída. Vejo vocês no próximo vídeo. 18. Ordem Confirme a tela: Bem vindo de volta. Neste vídeo, vamos criar uma página de tela com confirmação automática. Então, primeiro, copie o quadro anterior, mova-o para a direita e renomeie-o para confirmar o pedido. Troque cada pão ralado também. Depois disso, exclua todos eles, exceto o texto do endereço de cobrança, e renomeie-o para que seu pedido seja feito. Depois disso, adicione um ícone de marca de seleção. Alinhe os dois no centro e mude a cor para verde. Depois disso, pressione a tecla T e adicione um nome de usuário e uma mensagem de confirmação do pedido. Agora, basta desenhar dois retângulos de 440 por 170 com o raio da borda de dez. Alinhe-os no centro horizontalmente. Altere as cores do retângulo para amarelo. E agora, no primeiro retângulo, adicione o ID do pedido, a data do pedido. O segundo endereço de entrega, adicione detalhes do endereço de entrega. E agora a tela está completa. Vejo vocês no próximo vídeo. 19. Entre em contato conosco tela: Bem vindo de volta. Neste vídeo, vamos criar uma página de contato. Então, primeiro, copie o quadro anterior, mova-o para a direita e renomeie-o para entrar em contato conosco. Mude a cor da barra de navegação do contato para vermelho. Agora vou adicionar um formulário de contato aqui. Então, para isso, copie os campos das telas de checkout, cole-os aqui e renomeie-os também. E no lado direito, adicione número de telefone, e-mail, endereço. Copie o telefone, o e-mail e o endereço. Eu posso olhar nos arquivos de exercícios e colocá-los aqui corretamente. Por fim, adicione um botão Enviar aqui. Copie a carga da tela do verificador e coloque-a sob esta caixa de texto de mensagem e renomeie esses textos de pedido para enviar. Agora, essa tela está concluída. Vejo vocês na próxima seção. Vamos vincular todas as telas. 20. Protótipo: Bem vindo de volta. Este é o último vídeo deste curso. Neste vídeo, vamos dar uma olhada em como podemos unir os quadros. Então, parece um site do mundo real e depois compartilhe-o com outros membros da equipe e partes interessadas. Aqui no canto superior direito, você vê que está dividido em três rodas. Visualização de design, visualização de protótipo e visualização de inspeção. Essa visualização de protótipo é usada para criar conexões entre quadros e definir as conexões entre eles por meio da interação. Então, basta clicar nessa visualização do protótipo. zoom e clique no primeiro quadro. Depois disso, conecte essa barra de navegação às páginas relativas. E a animação deve ser inteligente. Animar. Depois disso, conecte esse botão Leia mais a cerca de uma tela e deixe a animação para animar de forma inteligente. Agora, aqui, em itens populares conectados a apenas um produto com a tela de detalhes, com animação inteligente. Em seguida, conecte a navegação do rodapé a todas as telas, conforme conectamos à navegação na barra superior. Depois disso, vamos para a próxima tela, que é sobre nossa tela. Já conectamos É a navegação. Portanto, não precisamos fazer mais nada. Basta sair da tela e passar para a próxima tela, que é a tela do menu. Aqui, conecte essas categorias a cada categoria na página. Este item de pizza para a página de detalhes. E a animação deve ser animada de forma inteligente. Agora vamos para a próxima tela, que é a primeira tela do menu. Aqui, conecte esse botão Adicionar ao carrinho à tela Adicionar ao carrinho. E depois disso, conecte essa guia Avaliações à próxima tela com a animação do smart animate. Da mesma forma, faça a mesma direção na próxima tela, que é a tela do menu até aqui, conecte esse botão Adicionar ao carrinho à tela de adicionar ao carrinho. E este produto detalhou o menu de largura de texto na tela 1. Depois disso, vamos para a próxima rainha, que é a tela Adicionar ao carrinho. Aqui, conecte o ícone de roupas à tela anterior. Em seguida, conecte a largura do botão de continuar comprando , a tela do menu. Este botão Checkout com a tela de detalhes do cartão de compras dos produtos. Agora vamos para a próxima tela, que é a tela de detalhes do carrinho de compras do produto. Aqui, conecte esses botões como fizemos na tela anterior. Mas desta vez conecte isso, finalize a compra em nossa tela de login. Agora, em nossa tela de login, conecte esse botão de login à tela de checkout. E isso registrou textos para registrar a tela. Da mesma forma, em nossa tela de registro, conecte esse botão de registro também à tela de checkout. Depois disso, em nossa tela de checkout, conecte esse botão Fazer pedido à tela Fazer pedido. E, por fim, conecte esse contato como botão Enviar na tela com a página inicial. Finalmente, todos os nossos quadros estão vinculados. Para verificar esse link, basta pressionar Control a. E aqui você vê a rede de interações. É hora de administrar nosso site. Então, basta clicar neste botão de pré-visualização. E agora você vê que todas as nossas telas estão interligadas. E parece um site do mundo real. Agora, para compartilhar com os outros membros da equipe, basta clicar neste botão Compartilhar. Aqui. Você pode mostrá-lo para revisão de design ou para um desenvolvedor e também para muitas outras opções. Vou escolher qualquer pessoa com o link que possa editar. Por fim, clique no link Copiar e compartilhe esse link com os membros da sua equipe ou partes interessadas. Você também pode compartilhar esse arquivo inserindo seus e-mails. E isso nos leva ao final deste curso. Esperamos que você goste deste curso. E se você tiver alguma dúvida sobre este curso, não hesite em nos contatar. Vejo vocês em outro curso de Figma.