Design de UI/UX da Figma para iniciantes: crie um painel de fintech

1. Introdução: Criar produtos digitais intuitivos e é essencial na era digital atual. sucesso de um software ou aplicativo depende muito da interface do usuário e da simplicidade da jornada do usuário Muitos produtos digitais que falharam no passado falharam porque pularam a etapa crucial de projetar um protótipo, o de projetar um protótipo, que os levou a tomar decisões erradas de posicionamento de elementos, resultando em uma experiência ruim para o usuário do cliente Em vez de mergulhar diretamente na codificação, é importante contratar um designer para criar um layout detalhado para cada página Isso permite que você veja a aparência do produto final antes de criá-lo, permitindo que você pense melhorias antes de tocar em uma linha de código E se você puder projetá-lo sozinho , isso é ainda melhor porque você não precisará gastar muito dinheiro com um designer de UI UX. E esta aula tem como objetivo mostrar a você como fazer exatamente isso. Mostrarei como usar o FIMA para criar belas interfaces de usuário para seus aplicativos de software e produtos de sites, garantindo que cada elemento seja colocado adequadamente para uma experiência de usuário aprimorada E ao final desta aula, você terá construído seu próprio painel para uma empresa financeira fictícia e terá as habilidades para criar suas próprias interfaces de usuário com o Figma daqui E caso você esteja se perguntando quem eu sou, meu nome é Ken e, nos últimos cinco anos, tenho ajudado as pessoas a aprender como criar sites profissionais com o Elementor Posso conferir meu perfil para ver meu trabalho recente. Ao longo do curso, mostrarei o editor Figma, ensinarei como usar as ferramentas Figma mais usadas e mostrarei como organizar seus projetos de design E, como mencionei, você aprenderá trabalhando em um projeto do mundo real, o que resultará em um belo painel para um aplicativo web fictício Não estamos fazendo teoria aqui. Então, como você pode ver agora, essa aula será prática, projetada para levar você de um novato a um usuário confiante do Figma rapidamente Mas você também pode estar se perguntando: essa aula é para mim? Então, para quem é essa aula? Bem, esta aula é para aspirantes a designers de UIUX que desejam se familiarizar com a ferramenta de design de UIUX mais popular do design de UIUX Então, se você sempre quis aprender a usar o Figma, que é a principal ferramenta de design de UIUX, esta aula Essa aula também é destinada a empreendedores que desejam criar seus próprios produtos digitais Então, se você é um empreendedor ou desenvolvedor web, mas quer adquirir algumas habilidades de design para poder criar seu próprio software antes de escrever seu código. Essa aula é um bom começo para você. Então, estou muito animado para começar, e se você está tão animado quanto eu, vamos explorar o mundo da Figma juntos Mas antes de começarmos, vamos dar uma olhada rápida no projeto de aula em que trabalharemos durante toda a aula. Aqui vamos nós. 2. Visão geral do projeto: Como eu sempre digo, a melhor maneira de aprender uma nova habilidade, especialmente uma habilidade técnica, é trabalhando em um projeto. Nesta lição, quero mostrar o que vamos construir. Então, estou dentro do meu editor, e esse é o painel que vamos criar. Como você pode ver, em primeiro lugar , está muito bem organizado. Nós o temos como painel. Mas agora, se começarmos a expandir todas as partes do painel, você notará que o painel é composto por três partes principais. Barra de pesquisa, que é essa seção que tem todos esses ícones e a própria barra de pesquisa. Temos a barra lateral, que é composta pelo logotipo e por todos esses botões da barra lateral e esse conteúdo, e eu posso arrastá-la. Selecionando isso, também posso arrastá-lo. E temos o conteúdo principal, que é composto, é claro, pelo conteúdo principal que você deseja dar uma olhada, e eu posso arrastar tudo ao redor. Se eu expandir o conteúdo principal, ele também estará bem organizado nas diferentes partes. Então, deixe-me clicar aqui. Se eu passar o mouse sobre qualquer elemento, você o verá destacado na própria obra de arte Então, dê uma olhada nisso. Por exemplo, se eu selecionar esse cartão de ganhos totais e chamá-lo de ganhos totais porque, é claro, é o cartão que mostra os ganhos totais. Este é o lucro líquido, pagamentos pendentes, despesas. Isso está agrupado Eu posso carregá-lo e reorganizar toda a seção. O fato é que também é um grupo de outros conteúdos. Estamos aninhando itens ou elementos cada vez mais profundamente. Começamos a partir do painel. Aninhados dentro do painel estão esses três elementos, esses três grupos, e aninhados no conteúdo principal estão os cartões que contêm diferentes tipos de E dentro de cada cartão estão outros elementos que compõem o cartão. Por exemplo, temos esse grupo que tem o aumento ou diminuição percentual. No passado, talvez no lucro total ou no lucro líquido. Houve uma queda de 3,4, um aumento dos ganhos totais, 3,8, e esse é um grupo que também tem o 3,8, a seta e o retângulo que o Então, aninhando elementos dentro de elementos dentro de elementos. Mostrarei como organizar seu trabalho e como criar cada parte desse painel para que , e como criar cada parte desse painel para cada parte desse quando terminarmos, você tenha um painel como esse para mostrar ou mostrar aos seus amigos ou colegas Ao mesmo tempo, lembre-se que vamos começar do zero. Não vamos usar os modelos de ninguém. Vamos começar do fundo. Em seguida, adicione botões. Adicione o logotipo. Vamos criar cada cartão do zero, adicionando cada elemento. Isso permitirá que você entenda como usar todas essas ferramentas diferentes que você usará na maioria das vezes ao trabalhar no Figma Esse é o objetivo de fornecer um guia sobre as ferramentas mais usadas por meio de exemplos. Essa é a melhor maneira de aprender a usar essas ferramentas. A propósito, fornecerei esse modelo de design para que você possa explorar e ver exatamente como criei cada peça enquanto você trabalha em suas próprias peças. Então, basta conferir abaixo este reprodutor de vídeo na guia de projetos e recursos, e você encontrará o modelo lá junto com qualquer outro recurso que eu achar útil para você. Caso queira ver como eu fiz o meu, não se esqueça de baixá-lo. Então, se você está tão empolgado quanto eu, se quiser aprender como criar esse painel e adquirir as habilidades necessárias para criar qualquer outro tipo de design de UI UX, esse projeto será um bom começo para você. Então, sem perder mais tempo, vamos nos encontrar na próxima aula e criar uma conta Figma. Te vejo em breve. 3. Crie uma conta Figma: Bem vindo de volta. Agora que tivemos uma visão geral rápida do que vamos criar, é hora de criar uma conta no Figma Eu só quero sair daqui. Eu vou até esse menu suspenso. Em seguida, clique em voltar aos arquivos. Agora, voltarei à minha página inicial para essa conta específica Se eu clicar nesse menu suspenso, como você pode ver, estou atualmente logado como este perfil, mas também estou logado como esse outro perfil Deixe-me sair assim. Saia de todas as contas. E é isso que você terá ao visitar a FIDMA. Então, vou clicar em Começar gratuitamente. Vamos usar a conta gratuita. E não se preocupe. Vou falar um pouco sobre o plano gratuito na próxima lição. Então, vamos continuar e criar uma conta por enquanto. Agora, vou continuar com uma conta do Google e vou usar essa conta que nunca usei antes. Vou clicar em Continuar. R, aqui estamos. Como essa é a primeira vez que criamos uma conta, vamos usar esse assistente de configuração de integração, que é muito fácil É assim que você aparecerá no arquivo Figma. Então, vou usar o nome padrão, mas posso clicar aqui e alterá-lo. Vamos apenas dizer Can the D e continuar. Você também pode optar por pular algumas etapas. Continuar. Que tipo de trabalho você faz? Digamos que eu esteja no desenvolvimento de software, porque presumo que você queira projetar interfaces para o seu software. Escolha o que quiser. Você também pode escolher outro. Desenvolvimento de software, continue. Qualquer uma dessas opções descreve seu trabalho na fundadora de uma agência, digamos que eu seja freelancer ou digamos que sou fundador. Continuar. Com quem você costuma colaborar Colegas de equipe, clientes, ninguém, só eu. Continuar. Quer convidar alguns colaboradores. Não. Você pode pular essa etapa, mas se quiser colaborar com pessoas nesse projeto específico, você pode enviar e-mails para elas. Você pode inserir seus e-mails aqui. Ignore isso. O que o traz à Figma hoje Configurando para minha equipe, iniciando um novo trabalho ou projeto. Sim. E aqui você pode selecionar vários deles. Então, só estou verificando as coisas. Continuar. Você já usou Figma para produtos antes Não, é minha primeira vez. Continuar. Qual plano você gostaria? Eu gostaria desse plano. Então, vou falar mais sobre os arquivos e projetos aos quais você tem acesso com esse plano gratuito na próxima lição. Então, vamos continuar e clicar em Continuar. O que você gostaria de fazer primeiro? Então, vamos falar sobre design com o Figma porque não queremos usar o Fig Jam. Esse é um curso completo por si só. Concluir. E aqui estamos. Então, no momento em que terminarmos o assistente de configuração, faremos um tour rápido que nos mostra as diferentes partes do editor. Não vamos passar por isso, mas reserve um momento e percorra toda a turnê para ver as várias partes do editor. Mas você vai se acostumar a usá-los à medida que construímos as diferentes partes do nosso arquivo. Parece que, como eu saí, não tenho o arquivo aberto O que vou fazer é entrar na minha outra conta adicioná-la aqui para que eu também possa ver o que vamos criar. Basicamente, é assim que se cria uma conta no FIMMA. Na próxima lição, falaremos sobre arquivos e projetos no plano gratuito. Te vejo em breve. 4. Visão geral do Figma Editor: I. E bem-vindo de volta. Então, agora que você criou uma conta Figma, é hora de dar uma olhada rápida no editor E se você também acessou o editor e foi solicitado a ler aquela bolha que estava aqui, você deve ter visto aquela bolha azul Você passou por algumas etapas e viu as diferentes partes do editor. E a etapa final era continuar praticando aqui ou abrir um novo arquivo Então, cliquei, criei um novo arquivo e agora estou em um editor em branco São a mesma coisa. Mas agora, é claro, isso tem algum conteúdo. Então, aqui está um editor em branco. Agora, é claro, a primeira coisa que quero destacar é que você pode alterar o nome desse arquivo específico, esse arquivo design, e ele está atualmente em rascunhos. Então, o que eu quero fazer é dar um nome a ele, talvez design de aplicativo web de finanças de IA, porque estamos projetando um aplicativo web, design de interface de usuário de aplicativo web ou algo desse tipo. Se eu voltar aos arquivos, seremos imediatamente redirecionados para a pasta de rascunhos da equipe de Ken Koko Como você pode ver, temos uma equipe gerada automaticamente. Quando terminamos o Assistente de Configuração, Figma criou automaticamente essa equipe para nós, temos rascunhos e todos os Agora, dentro de todos os projetos, temos apenas esse projeto de equipe. Vamos falar sobre o que é um projeto, o que é uma equipe, o que é uma página, o que é um arquivo de design. Portanto, não se sinta sobrecarregado com tudo isso. O ponto a ser retirado disso aqui é que esses três arquivos estão dentro dos rascunhos. Estes são os arquivos de prática que estávamos examinando, por exemplo, este básico do Figma, o básico do Figma Agora, podemos mover esse arquivo daqui clicando com o botão direito do mouse, mover arquivo. E sob a equipe de Ken Koko, essa equipe, temos rascunhos Como você pode ver, atualmente estamos no rascunho, é por isso que temos a opção, mas podemos movê-la para a mudança do Tim Project. Então, agora a pasta de rascunhos tem apenas esses dois arquivos. Agora, se eu for para o Tim Project, agora temos o arquivo de design do aplicativo web AI Finance. Agora, deixe-me clicar duas vezes nele. A primeira coisa a fazer quando você quer começar a trabalhar em um projeto é usar uma moldura. Então, vou clicar nisso. Essa é a ferramenta de moldura. Se você clicar no menu suspenso, ele tem algumas outras ferramentas que eu raramente uso, mas você pode descobrir mais sobre para que elas são usadas Mas uma moldura é o que eu gosto de chamar de tela. Por exemplo, quando você seleciona um quadro aqui, vemos modelos de quadros que podemos usar. Então, se você está criando um aplicativo para celular, mas agora esse é um aplicativo web, digamos, para desktop. Vamos usar o desktop, por exemplo. Agora, essa é uma tela que podemos começar a preencher com nosso design Se eu excluí-lo, e tivermos o quadro ativo. Também podemos desenhá-lo manualmente. E se quisermos editar o tamanho, podemos entrar aqui e inserir nossas dimensões manualmente. Portanto, a largura, a altura, a largura aqui pode ser 1920. Controle e roda de rolagem para diminuir o zoom. Roda do meio do mouse Pressione a roda do meio do mouse para arrastar e a altura pode ser 1080. Isso é full HD. Então é assim que se cria uma tela ou uma moldura. Então, é claro, existem outras ferramentas aqui. Essa é a ferramenta de seleção e temos outras ferramentas aqui. Então, é claro, você provavelmente já sabe o que essas ferramentas fazem. Se você quiser adicionar algum texto, você pode usá-lo. É claro que sei que estou ignorando essas ferramentas, e o motivo é porque, ao longo da aula, veremos como trabalhar com a ferramenta mais usada Então não se preocupe com isso. Só estou te mostrando o lugar. Então, a próxima coisa que você notará é que quando adicionamos uma moldura, ela foi criada automaticamente como uma camada. Sempre que adicionarmos alguma coisa, se eu selecionar a ferramenta retângulo e adicionar um retângulo, ela será adicionada aqui dentro, mas é sua própria camada Se eu adicionar alguns textos e começar a digitar, essa é outra camada. Se eu adicionar uma linha, essa é outra camada. Tudo existe como uma camada, mas podemos agrupá-las. Se eu selecionar a linha, ela já está selecionada, e esse retângulo e os textos, você notará que eles também estão destacados aqui Se eu pressionar o controle G, posso agrupá-los e agora eles são o grupo um. Eu posso chamá-los de elementos. Se eu expandir os elementos, agora você pode ver os três elementos que temos aqui. Aqui dentro, também posso escolher esses dois e agrupá-los, Controle G e grupo interno. Agora, esse grupo interno está aninhado dentro de elementos, que estão aninhados dentro da moldura Se eu expandi-lo, agora podemos ver esses dois. Se eu selecionar o grupo em si, posso carregar esses dois. Se eu selecionar isso, estou carregando o grupo de elementos e, se eu selecionar o quadro, estou carregando todo o grupo de quadros. Então, espero que você entenda como trabalhar com grupos agora, a hierarquia dos grupos Agora, se eu selecionar isso, controle a tecla G, que agrupa os grupos que você selecionou. E, claro, primeiro, desagrupamos o grupo externo Agora, se eu controlar a mudança G novamente, desagrupamos o grupo interno Você pode me deixar desfazer isso. Você também pode selecionar Agora isso é um grupo. Se eu clicar com o botão direito do mouse, posso agrupar, sem mais nem menos. Agora, uma vez selecionado esse retângulo, mostraremos aqui algumas propriedades que podemos alterar Por exemplo, a cor de preenchimento, selecione isso, podemos alterá-la para vermelho. Também podemos adicionar um traçado, como podemos ver. Então, selecionar mais aqui adiciona um traço preto. E se eu aumentar o zoom, observar que temos aquele traço preto e selecioná-lo novamente, podemos ir até o traçado e adicionar sua largura. Selecionando aqui e usando a seta do aplicativo no teclado. Também podemos alterá-la para uma linha tracejada acessando este menu e mudando de sólido para d, e agora é uma linha tracejada Enquanto estiver selecionado, podemos remover o campo clicando nesse sinal de menos Enquanto estiver selecionado, também podemos brincar com o raio da borda Esses são os cantos. Também podemos ir diretamente aqui e puxar esses pontos. Ou podemos entrar aqui, clicar lá e inserir um valor específico. Talvez 20, e agora tem um raio de fronteira de 20. Se eu disser 50, sem mais nem menos. Se eu selecionar esse ícone de cantos independentes aqui, podemos alterar o canto superior inferior esquerdo, superior direito, canto inferior direito. Vamos tentar isso. Canto superior direito 50. Agora, digamos zero no canto superior direito e no canto inferior direito, no canto inferior esquerdo. Lá vamos nós. Se eu selecionar, podemos voltar e adicionar uma cor de preenchimento novamente e remover o traçado. Quando selecionamos o texto, exibimos propriedades relacionadas ao texto Podemos alterar a espessura da fonte, ainda mais em negrito. Também podemos alterar o tamanho entrando aqui e digitando talvez 32 Podemos mudar de inter para uma fonte diferente. Vamos digitar talvez Montserrat Enter. Podemos alterar o alinhamento do texto. Agora, se tivermos um parágrafo. Por exemplo, deixe-me copiar um parágrafo de um desses copie isso. Cole isso aí. Agora você notará que colei um longo parágrafo aqui, mas está em uma linha, e isso é por causa dessa configuração aqui Ela pode ser de largura automática, mas se você clicar nela novamente, ela pode ser de largura automática ou você pode alterá-la para tamanho fixo. Agora, deixe-me selecionar esse canto aqui e colocá-lo ali. Agora, se eu expandir isso, você notará que isso mudou de ou largura para tamanho fixo porque precisa estar dentro das dimensões específicas dessa caixa de texto que o contém. Agora, se a trocarmos novamente, ela muda para aquela única linha. Tudo bem. Essa é basicamente uma visão geral rápida do editor. Vamos aprender mais sobre as diferentes partes do editor à medida que continuarmos. Lembre-se de que meu objetivo com esta aula é mostrar como usar as diferentes ferramentas que você usará na maioria das vezes ao trabalhar no Figma E com isso dito, vamos passar para a próxima aula, onde falaremos sobre equipes, projetos, arquivos de design e páginas. O que eles querem dizer? O que está dentro do quê. Vamos descobrir. 5. Equipes, projetos, arquivos e páginas: O que eu quero fazer é acessar esse menu suspenso e voltar aos arquivos. Então esse é o projeto em que eu estava. Agora, antes de irmos longe demais, primeiro quero acessar esse menu suspenso e, como você pode ver, posso adicionar uma conta. Então, deixe-me adicionar uma conta porque quero abrir nosso design de referência, aquele que eu havia projetado anteriormente, então deixe-me fazer login. E é isso. Deixe-me ver. Deixe-me clicar duas vezes nisso. Sim, aqui estamos. Agora, se eu voltar aos arquivos, nesta guia, estou logado como Ken Bs Deixe-me arrastá-lo para ser o primeiro aqui. Nesta guia, estou logado como D. Você pode estar logado como contas diferentes em guias diferentes Dessa forma, se eu voltar para a conta de Ken Bersa, agora posso clicar duas vezes aqui E abro, e eu posso simplesmente desencaixá-la dessa janela e deixá-la como sua própria janela para que possamos alternar entre as duas com a tecla alt, sem mais nem menos Agora, voltando aqui, quando terminamos de configurar nossa conta Figma, quando passamos pelo assistente de configuração, Figma criou automaticamente uma equipe para Agora, você deveria ter uma equipe aqui dizendo algo sobre chá. Feito isso, eu só quero me livrar disso porque isso é barulho E agora que estamos dentro dessa equipe, a equipe Ken Pumas. Deixe-me clicar nisso. Sim. Portanto, basta clicar no menu suspenso e clicar em sua equipe Agora você está dentro da sua equipe. Aqui, temos um projeto. Se quisermos um projeto extra, precisaremos fazer o upgrade para o plano profissional. Se eu clicar aqui para adicionar um projeto ou aqui, receberei esta solicitação para fazer o upgrade para profissional. Mas um projeto é mais do que suficiente para nosso trabalho, nossos projetos pessoais. Obviamente, talvez você queira alterar esse nome do projeto. Então, vou até esse menu suspenso, renomeio-o e chamarei de Controle A. Exclua isso, finanças de IA, e eu o renomearei Esse é o nome dessa equipe em particular. Deixe-me adicionar a palavra equipe. Equipe lá. Lá vamos nós. Se clicarmos nesse menu suspenso aqui, você também poderá criar outra equipe Talvez você tenha uma equipe de fitness, uma equipe de aplicativos de fitness. Então, você tem outra equipe trabalhando em um aplicativo de condicionamento físico e pode optar por colaborar com as pessoas ou esquiar por enquanto Escolha o motor de partida. E agora sua equipe interna do aplicativo Fitness. Clique nesse menu suspenso voltar para o AI Finance ou criar outra equipe Então, eu quero voltar para o AI Finance. Lá vamos nós. E cada equipe terá um projeto. Portanto, a equipe da AI Finance tem um projeto. Mas todo projeto pode ter três arquivos de design. Então, como você pode ver, temos esse arquivo original. Eu posso adicionar outro, outro. Mas se eu for para o quarto, serei solicitado a fazer o upgrade. Então, deixe-me clicar duas vezes aqui. E chame isso de talvez aplicativo web de finanças de IA. Então, vamos voltar aos arquivos. Então, estamos dentro do projeto de equipe, podemos renomear o projeto Esse projeto de equipe aqui é: se eu clicar no menu suspenso e selecionar a equipe financeira de IA, esse projeto de equipe aqui contém os três arquivos de design que estamos prestes a criar? Se eu estiver certo, posso renomeá-lo para financiar arquivos de design Desculpe por isso. Arquivos de design do AI Finance. Então vamos lá. Agora, lembre-se de que criamos um arquivo chamado AI Finance Web App. Talvez esse seja o arquivo que usamos para criar a versão do aplicativo web. Agora, se eu adicionar outro, lembre-se de que estamos dentro do projeto AI Design Files. Esse pode ser chamado de aplicativo móvel AI Finance. Voltando aos arquivos. Agora, assim que saímos de um arquivo de design, assim que saímos do editor, somos redirecionados de volta para um projeto E lembre-se de que só temos um projeto para cada equipe. Então, agora estamos dentro do projeto de arquivos do AI Finance Design. Deixe-me chamar esse projeto. Projeto de design financeiro de IA. Mas também podemos entrar na equipe que está realizando esse projeto e todos os outros projetos , se estivermos no plano pago. Se eu entrar na equipe de finanças de IA, todos os projetos que temos aqui serão listados abaixo da equipe. Mas lembre-se de que, em cada equipe, se estivermos usando o plano gratuito, só podemos ter um projeto. Agora, quando estamos dentro de um projeto, esse projeto que atualmente está dentro da equipe financeira de IA, para ver tudo o que está dentro do projeto, basta clicar nele. Agora estamos dentro do projeto que está dentro da equipe. Agora, dentro deste projeto, lembre-se de que temos dois arquivos de design. Podemos adicionar mais um arquivo de design. Agora, esse é o terceiro. Digamos que talvez também tenhamos uma versão do nosso aplicativo, site I Finance. Isso é para fins informativos, e queremos contar às pessoas sobre nosso aplicativo Agora temos três arquivos aqui, site AI Finance, o aplicativo móvel AI Finance, o aplicativo AI Finance Web. Se tentarmos adicionar um arquivo de design, receberemos esta mensagem aqui para atualizar, pois só podemos ter três arquivos de design dentro um projeto que está dentro de uma equipe. Agora, acho que criei algo aqui para nos ajudar com a hierarquia Deixe-me abrir o Adobe Illustrator muito rapidamente. E aqui estamos. Temos uma equipe. Por exemplo, temos essa equipe financeira de IA, e a equipe só pode ter um projeto se estivermos usando o plano gratuito. Uma equipe pode ter um projeto. Se quisermos um projeto extra, precisamos estar no plano profissional remunerado. Uma equipe pode ter um projeto. Uma equipe, a equipe financeira de IA, tem um projeto, que é o projeto de design de IA. Deixe-me entrar na própria equipe. Tem apenas um único projeto chamado AI Finance Design Project. Se quisermos adicionar projetos extras, teremos que usar o plano pago. Uma equipe tem um projeto. Mas você pode criar várias equipes. Temos uma equipe de aplicativos de fitness que tem a mesma hierarquia. Se mudarmos para isso, isso tem um projeto que não renomeamos e o projeto ainda não tem arquivos de design Também podemos criar uma terceira equipe. Talvez tenhamos uma equipe de aplicativos do Marketplace. Crie isso. Vamos pular por enquanto. Como você pode ver, temos três equipes até agora e você pode continuar criando equipes. Deixe-me voltar para as finanças de IA. O AI Finance Team tem um projeto, um projeto gratuito chamado AI Finance Design Project, e cada projeto pode ter três arquivos de design. Este projeto de design de IA tem três arquivos de design. Se quisermos um extra, também teremos que pagar três arquivos Figma Design e FIJ Agora, quando estamos dentro de um arquivo de design, também temos acesso a três páginas, mas eu nunca uso mais de uma página, aliás. Se eu, por exemplo, abrir o aplicativo móvel, clique duas vezes nele, no arquivo de design do aplicativo móvel. Estamos na primeira página agora. Se quisermos páginas extras, podemos vir aqui. Estamos na primeira página. Eu posso adicionar uma página extra, página dois, enter, página três, enter, se eu tentar adicionar uma página extra, não consigo obtê-la. Então, eu normalmente uso apenas uma página. Deixe-me deletar isso, e agora fico com esta única página. Deixe-me desmoronar isso. Aqui, é aqui que eu posso agora começar a adicionar camadas de itens nesta primeira página. Para mim, normalmente é mais do que suficiente para o meu projeto, e você verá isso. Mas agora, eu queria que analisássemos rapidamente a hierarquia e como projetos, arquivos e páginas estão relacionados Não vamos tocar no Fig Jam porque esse é um curso completo por si só. Talvez eu faça isso mais tarde. No momento, estamos nos concentrando apenas em projetar esse painel usando o editor Figma Não estamos focando no Fig Jam. Agora, dito isso, acho que essa lição se tornou muito mais longa do que eu esperava. Mas eu realmente queria levar isso para casa. Eu queria que você tivesse essa clareza porque essa é uma das partes mais confusas do Figma para iniciantes Eles realmente não entendem o que é um arquivo, o que é um projeto, o que é uma equipe. Agora que você entende tudo isso, acho que está pronto para começar a criar nosso painel. Na próxima lição, vamos ver como criar a barra lateral. Te vejo em breve. 6. Adicione um fundo e logotipo: Então, agora estamos prontos para começar com o design real do painel e dizemos que vamos começar com a barra lateral. Então, como você pode ver, a primeira coisa que precisamos fazer é importar o logotipo. Então, voltando ao nosso espaço de trabalho, onde está? Aqui estamos. Então, agora, estamos trabalhando na versão web do nosso aplicativo. Então, vou clicar duas vezes nele e agora aqui estamos. A primeira coisa que queremos fazer é criar a tela real. Para fazer isso, selecionarei essa ferramenta e, depois de selecioná-la, ela revelará vários modelos aqui com os quais podemos começar rapidamente. Como este é um desktop, eu quero selecionar, deixe-me fechar o telefone e expandir o desktop. Então eu vou escolher o Macbook Pro de 16 polegadas. Ou apenas, vamos escolher isso. Lá vamos nós. Obviamente, como você pode ver, se eu selecionar essa ferramenta mais uma vez, se você quiser criar para telefones, poderá escolher o telefone que quiser aqui. Com isso, a próxima coisa que queremos fazer é voltar à nossa referência. Eu quero adicionar essa linha tênue aqui. Primeiro de tudo, vamos adicionar o plano de fundo. Voltando atrás, vou aqui e seleciono a ferramenta retangular Se você não conseguir ver a ferramenta retangular, clique no menu suspenso e selecione-a na lista Depois, vou arrastar e cobrir a tela inteira com ele. Ou moldura. Com isso, quero selecionar um muito escuro. Antes de tudo, vamos mudar para azul. Digamos que seja azul, e depois talvez aquele azul escuro assim. Estou apenas fazendo isso em estilo livre, mas para você, você precisa trabalhar com códigos de cores específicos Aqui está o código de cores. Se você quiser usar as cores que estou selecionando. Vamos torná-lo mais escuro até esse ponto. Esse é o código de cores. Agora, deixe-me selecionar esse menu suspenso e escolher a linha. Selecione para restringi-lo apenas para cima e para baixo e não se mover da esquerda para a direita Você pode manter pressionada a tecla Shift. Isso significa que você só estará se movendo para cima e para baixo uma linha vertical com taxa de arco. E lá vamos nós. Quero selecionar a linha em si e selecionar a cor do traçado. Eu quero ir até isso e arrastá-lo talvez até aquele ponto. Só para ter certeza de que está escuro. Acho que é um bom lugar. Agora, para importar o logotipo, clicarei na imagem do local do arquivo no menu suspenso Como você pode ver, temos um atalho Control Shift K. Eu posso simplesmente clicar em qualquer lugar aqui, depois Control Shift K. Ele abrirá o Explorer e eu posso ir diretamente para onde tenho esses elementos Eu tenho esse polo call assets. Temos o logotipo aqui se você quiser usá-lo e clicar em qualquer lugar e arrastá-lo Colocará o logotipo aqui. Então, pressiono a tecla Shift e seleciono um dos cantos e arrasto para redimensioná-lo Se você não pressionar a tecla Shift, a moldura se moverá em todos os lados, mas se você segurar a tecla Shift, ela se moverá apenas proporcionalmente Lembre-se, controle a tecla K, clique duas vezes, selecione qualquer lugar e arraste para importar. Então vamos lá. Acho que vamos parar essa aula aqui mesmo. Aprendemos como criar o plano de fundo, adicionar essa linha, alterar as cores e importar uma imagem. Essa também é a mesma maneira de importar qualquer outro tipo de imagem que você queira importar. Então, vamos parar aí por enquanto. Na próxima lição, vamos ver como criar um botão. Então, nos vemos em breve. 7. Crie os buttons da barra lateral: Bem-vindo de volta. Agora que criamos um plano de fundo e adicionamos o logotipo, é hora de criar os botões. Deixe-me ampliar pressionando controle e rolando com a roda do mouse Em seguida, mantenha pressionada a roda do mouse sozinha. Eu posso arrastar e colocar isso no meio para que possamos ver. Agora, você notará aqui, temos alguns textos e um ícone. E, claro, temos o plano de fundo do botão. Voltando para cá. Mantendo pressionado o controle e rolando com a roda do mouse Solte o controle, mantenha pressionada a roda do mouse e arraste. Quero vir aqui e selecionar essa ferramenta retangular e arrastar e soltar e arrastar e soltar naquele local Agora, você notará que ele tem cantos afiados. Para obter cantos arredondados, podemos clicar aqui. E dê talvez dez entradas, e acho que é um bom botão de canto arredondado. Agora, é claro, em nosso design de referência aqui, isso é mais claro que o fundo. Selecionando isso, iremos aqui para o campo. Selecione o plano de fundo. Acho que essa é a cor de fundo que selecionamos. Não, essa é a cor de fundo porque agora podemos vê-la, mas agora eu quero torná-la mais clara. Talvez até esse ponto. Estamos apenas tentando brincar com as cores. Mas lembre-se de que, se for uma marca real na qual você está trabalhando, você precisa usar as cores da marca. Seja criativo com eles. Acho que gosto disso. A próxima coisa que eu quero fazer é selecionar o texto e clicar em qualquer lugar, não necessariamente dentro do botão. Também posso clicar aqui e digitar a visão geral. Clique fora ou em qualquer lugar aqui. Em seguida, selecione isso. Vamos fazer com que ele tenha o tamanho 16 e o texto 16, desse jeito. Você pode alterar a fonte se quiser. No momento, é ter. Podemos selecionar talvez Monat Enter. Podemos alterar o peso para que eu possa selecionar negrito. Lá vamos nós. Agora, a próxima coisa que queremos adicionar é o ícone. Então, voltando atrás, você notará que eu já abri uma guia aqui para ícones vetoriais, chamada de ícone plano ou ícone plano, dependendo de como você deseja pronunciá-la. Então, vou digitar o que temos aqui. Analytics, por exemplo, insira. Tudo bem. Então, aqui estamos. Eu tenho essa análise aqui e já estou logado Se você não estiver logado, não poderá editar os ícones antes de baixá-los. Se eu selecionar o ícone em si, ele abrirá a opção de editar o ícone. Vou clicar no ícone de edição. Enquanto isso estiver selecionado, clicarei na cor e a alterarei para a cor branca. Em seguida, baixe-o. Vou selecionar o tamanho 64 pixels. Download gratuito. Agora que o baixamos. Deixe-me voltar para cá. Nós o baixamos. Eu posso arrastá-lo e soltá-lo aqui. Mantenha pressionada a tecla Shift, selecione um canto aqui e redimensione-o Coloque-o lá. Você também pode vir aqui e clicar neste ícone aqui para mostrar na pasta. Ele abrirá onde está localizado em seus downloads. E então você pode arrastá-lo e soltá-lo lá. Exclua isso. Você também pode controlar a mudança K, lembre-se. Em seguida, vá para downloads. Clique duas vezes nele e arraste mantendo pressionada a tecla Shift para redimensioná-la proporcionalmente Todas essas são maneiras diferentes de fazer isso. Lá vamos nós. Deixe-me posicionar isso. Agora, uma forma de posicionar itens em seu trabalho artístico é selecionar talvez o texto, o ícone e, finalmente, o botão Agora, quando alinharmos os itens , eles serão alinhados em referência ao botão Se eu vier aqui para alinhar os centros verticais e clicar, como você viu, eles se moveram em relação ao próprio fundo do botão Não foi movido, mas todo o resto foi movido porque é o último item que eu selecionei. Então, mais uma vez, se eu colocar isso lá e quiser que fique verticalmente no centro, posso selecioná-lo, depois o próprio botão, o item ao qual quero que o outro item seja alinhado Em seguida, clique nos centros de alinhamento vertical e agora está no centro do último item que selecionamos Então, com isso, vou selecionar esses três. Controle G, agrupe-os e renomeie-os para o botão um. Agora, se eu pressionar a tecla Alt, como você pode ver, o cursor do mouse parece estar duplicado, e isso é uma indicação de que estamos prestes a duplicar esse E arrastar e segurar a tecla Shift para restringi-la forma que ela não se mova para a esquerda e para a direita Segure a tecla Shift, solte-a ali mesmo e, em seguida, controle D para continuar duplicando-a Controle D, e agora temos vários botões. Agora vou repetir o processo para esses outros botões, o mesmo processo de edição desse texto, selecionarei esse texto, alterarei essas duas ordens. Em seguida, vou para flat icon ou flatcon e talvez pesquise pedidos Deixe-me pesquisar pedidos. Basta procurar bons ícones criativos. Deixe-me ver as vendas. Tudo bem. Então, deixe-me selecionar isso. Ícone de edição. Enquanto isso estiver selecionado, White baixe o PNG 64 gratuitamente. Ele foi baixado. Volte aqui. zoom. Vá aqui, arraste e solte isso. Mantenha pressionada a tecla Shift, pegue um canto. Selecione isso e remova-o. Agora, quando você tem um grupo e deseja selecionar um item dentro desse grupo, mantenha pressionado o controle, você pode selecionar um único item em qualquer grupo. Se você abrir mão do controle, não poderá selecionar itens dentro do grupo, a menos que clique duas vezes. Agora eu quero reposicionar isso, mantenha pressionada a tecla shift. E vou deixar isso aí mesmo. Então, vou repetir o mesmo processo para o resto dos botões e nos vemos quando terminar. Agora, caso você descubra que um item não está dentro de um grupo no qual você queria estar. Por exemplo, esse ícone agora não está dentro desse grupo, está fora. Se eu selecionar esse grupo, é o botão três e o ícone está aqui em cima. Aqui está o grupo e aqui está a carteira. Eu posso simplesmente arrastar a carteira para o grupo três, sem mais nem menos, soltá-la lá. Agora, se eu selecionar o grupo, cada um deles é um único grupo. Então, mensagens, vamos às mensagens. Deixe-me arrastar isso para o fundo desse jeito. Mude isso para configurações. Selecione a ferramenta de seleção. Então aqui vou eu. Selecione isso. Edite o ícone. Mude a cor para branco, baixe, PNG, 64, download gratuito. Volte aqui. Arraste e segure a tecla shift. Claro, está do lado de fora, esse é o botão número seis, então está automaticamente dentro, então não há problema. Mantenha pressionado o controle para selecionar esse ícone, remova-o, mantenha pressionado o controle para selecioná-lo. Vamos colocá-lo lá. Talvez mantenha pressionada a tecla Shift e selecione essa opção. Está alinhado corretamente. Vou apenas arrastar isso. Espero que você tenha seguido o processo que fizemos com o primeiro botão e agora tenha alguns botões. Acho que esse é o fim desta lição. Na próxima lição, vamos ver como criar a barra de pesquisa. Te vejo em breve. 8. Crie a barra de pesquisa: Bem vindo de volta. Agora é hora de criar a barra de pesquisa. Vamos empregar os mesmos princípios que empregamos aqui Voltando ao nosso editor. Aqui estamos. A primeira coisa que precisamos fazer é selecionar essa ferramenta retangular Vou apenas arrastar e talvez soltar quando chegar a esse ponto. Agora, é claro, preciso dar cantos arredondados. Vou selecionar isso e dar 50 para ter certeza de que está completamente arredondado. Como você pode ver, temos esse ícone de pesquisa. Deixe-me ampliar, pesquisar. Então, vou para o ícone plano. Em seguida, pesquise por Search Enter. E aqui vamos nós. Temos muitos ícones de lentes aqui. Vamos. Deixe-me ir com esse. Vou clicar no ícone Eddie. Mude isso para Não, deixe-me torná-lo acinzentado Em seguida, 64 downloads gratuitos. Vou voltar para cá. Na verdade, deixe-me fechar todos esses outros assim. Agora, voltando aqui, vou até os downloads e arrasto isso aqui. Agora, como você pode ver, as duas cores são quase semelhantes, então você pode ver a lente. Vou selecionar a barra de sarge e torná-la talvez mais escura, um pouco mais escura, desse jeito Agora você pode ver a lente e eu pressionarei a tecla Shift para redimensioná-la Eu poderia até colocá-lo nessa outra extremidade porque a curva está do lado esquerdo do lado direito, desse jeito. Salvar. E eu esqueci de acender minha luz aqui. Então, espero que você possa me ver claramente agora. O que mais temos aqui? Temos esses botões, notificações, modo escuro e usuário. Então, voltando para cá. Notificações. Deixe-me selecionar essa cor de mudança. Baixe PNG 64 Pixels, download gratuito. Precisamos entrar no modo escuro. Podemos selecionar talvez isso ou talvez isso, ícone de edição. Vamos mudar para branco, baixar, PNG, baixar gratuitamente e, finalmente, er. Vou selecionar esse ou talvez esse ícone e mudarei para branco. Faça o download gratuito do PNG 64. Agora, vamos voltar aqui, notificação. E faça isso. Notificação, solte aí, brilho, contraste e usuário. Selecione os três pressionando a tecla Shift para redimensioná-los. Agora vou arrastá-los e colocá-los. Na verdade, agora que selecionei os três, posso alinhá-los verticalmente em relação um ao outro Acho que agora estamos começando a ter um bom design. Acho que, por enquanto, vamos deixá-lo lá. Vamos ver o que temos a seguir. Na próxima lição, vamos ver como criar esses cartões. Vamos começar com um texto aqui e depois criar um cartão. Te vejo em breve. 9. Cartão de ganhos totais: Agora é hora de começar a criar as partes principais do painel, e esses são os cartões. Mas antes de fazermos isso, vamos primeiro adicionar esse texto. Vou manter pressionada a tecla Control para selecionar esse texto e clicar três vezes em copiar. Então eu vou voltar para o meu editor aqui mesmo. Selecione o texto para. Clique em qualquer lugar e , em seguida, controle V para colar. Tudo bem Então, vou posicioná-lo ali mesmo. E eu vou clicar três vezes aqui, copiar esse Hall aqui e arrastar três cliques para colar. Deixe-me usar os botões de seta do meu teclado. Agora, para você, você estará digitando. Deixe-me selecionar T e digitar saúde financeira. Status, escape ou clique em qualquer lugar externo. Agora você pode ir para o texto. Você pode alterá-lo para Monsat ou qualquer outro telefone que desejar Depois, você pode aumentar o tamanho do telefone. Talvez digamos 36, e talvez digamos que o peso seja preto. Estou apenas mostrando como fazer isso se você não estiver copiando e colando de algum lugar Vamos também dar uma visão geral de sua situação financeira neste mês. Clicando em qualquer lugar externo. Agora que temos isso, posso mudar isso talvez para o tamanho 12. Digamos 14, e vamos mudar isso de volta ao normal. Basicamente, é assim que se faz isso. Mas agora deixe-me deletar isso porque eu já tenho meu texto. Agora queremos criar esse cartão. Antes de fazermos isso, vamos adicionar esse botão. Vou apenas selecionar isso, segurar e arrastar isso. Até esse fim. Em seguida, pressionarei o controle para selecionar esse plano de fundo em si. Agora que está selecionado, posso pressionar I para abrir a ferramenta conta-gotas e passar o mouse sobre essa laranja, e isso aplicará essa cor laranja ao item atualmente Então clique nele. Agora nosso botão tem essa cor. Isso significa criar novos produtos. Crie novos produtos. Clique em qualquer lugar aqui. Mantenha pressionada a tecla Control para selecionar o botão, remova-a, mantenha a tecla Control pressionada para selecioná-la. E não se preocupe com a organização. Eu sei que tudo aqui é desorganizado, mas isso é uma lição por si só Vamos organizar tudo porque precisaremos agrupar tudo adequadamente. A próxima coisa que queremos fazer é criar esse cartão aqui. Vou pressionar para duplicar isso e deixar eu colocá-lo aqui Na verdade, vou desagrupá-lo por enquanto, clicar com o botão direito do mouse no grupo e agora ele não está mais agrupado Eu quero redimensionar esse 2255. Na verdade, deixe-me fazer isso manualmente A largura é 259, a altura é 252. Vamos fazer isso 260. Por 26260. Agora está quadrado Quero selecioná-lo e tocar em I para abrir o conta-gotas e, em seguida, selecioná-lo Em seguida, clique na parte externa. Isso lhe dará a mesma cor dos botões. Vamos criar a quantidade copiada disso. Você também pode simplesmente arrastar isso, selecionar isso e talvez vamos deixá-lo de lado. Digamos que 43.210 lá fora, clique. Coloque isso aí. Clique duas vezes aqui. Talvez eu possa chamar esse cifrão, clicar do lado de fora, arrastá-lo e soltá-lo em algum lugar aqui. Ou precisamos torná-lo um pouco mais largo. Não precisamos necessariamente tê-lo como um retângulo. Ganhos totais. Vou simplesmente arrastar não, selecione isso. Ganhos totais. Exatamente desse jeito. Agora temos esses três: células de loja, anúncios do YouTube, anúncios do Google. Podemos selecionar essa ferramenta. Podemos selecionar esse retângulo, criar alguns retângulos minúsculos mantendo pressionada a tecla Shift, quero entrar com o controle e a roda do mouse Então, vamos dar a eles um canto arredondado de talvez três, sem mais nem menos. Toque e arraste isso. Vendas em lojas. Anúncios do YouTube Anúncios do Google. Então, clique em qualquer lugar externo. Selecione isso e aquilo. Antes de fazermos isso, vamos tornar isso normal. Vamos fazer com que talvez seja Size. Selecione Adicionar e, em seguida, controle D para repetir o mesmo movimento. Anúncios do Google Ads no YouTube. Essa é a renda que obtivemos com tudo isso. Agora vamos trocar as cores. Pode dar a isso um cinza claro. Vamos mudar para azul e depois dar aquele azul claro. Vamos dar a isso talvez um pouco de cor vermelha. Ou devo dizer cor laranja? Sim, na verdade, vamos pedir que eu abra o conta-gotas dois enquanto estiver selecionado, I, e depois toque nele E também temos um belo verde. Então, abrindo isso, acho que é um belo verde. Agora, no design de referência aqui, se eu segurar o controle e selecionar isso, como você pode ver, este é o ícone do gráfico Pi. Então, voltando aqui, posso ir para o ícone plano. Gráfico Pi, gráfico Pi, enter. Agora eu acho que é isso, mas eu quero algo mais simples. Deixe-me selecionar isso. Ícone de edição e agora temos três cores. Eu posso mudar isso para qual cor era essa. Deixe-me voltar para aqui, selecionando isso, copiando aquilo. Controle C para copiar esse código de cores, volte aqui e cole lá. Oh, nós deveríamos entrar aqui. Então selecione essa laranja. Entendido, mude para cá. Essa é a cor azul. Clique duas vezes aqui, cole lá, e agora está laranja. Finalmente, temos esse verde, clique duas vezes nele, Controle C, selecione isso. Entre aqui, clique duas vezes nele, entre. Agora temos isso. Baixar, PNG. Vamos baixar 512. Faça o download gratuito e pronto. Agora, entrando aqui, podemos arrastar e soltar isso aqui. Mantenha pressionada a tecla Shift e redimensione-a. E agora cada porção do Pi é representada por esses valores aqui. Deixe-me pressionar a tecla Shift e selecionar todas elas, mantenha pressionada a tecla Shift para redimensioná-las. Arraste e coloque-os lá. Selecione o texto em si e vamos dar a ele talvez o tamanho dez ou 11. Lá vamos nós. Agora, vamos também manter pressionado o controle e aumentar o zoom, segurando isso e Shift, depois aquilo. Vamos alinhar isso com o pequeno quadrado. Segure isso e depois mude de marcha. Alinhe-o, selecione isso, mantenha pressionada a tecla Shift. Alinhe isso. Agora, selecione esses três e arraste para a direita. Mantendo pressionada a tecla Shift para se mover em linha reta. Agora vamos mudar do alinhamento à esquerda no texto para o alinhamento de escrita Deixe-me selecionar isso, depois isso, depois isso, e alinhá-los à direita em referência a isso, depois arrastá-los até talvez aquele ponto Porque queremos vir e adicionar esses números, $12,05 3.000 Sinal de dólar 3.522, cifrão 10.320 e cifrão Também podemos selecionar o texto, a figura em si e controlar B para torná-la em negrito. Controle B ou vá diretamente aqui e torne-o preto. Mas isso é ousado, mais ousado. Trocando aqui. Eles estão um pouco fracos, então vou selecionar os três, sentir e arrastá-los até esse ponto Isso também é fraco. Talvez eu o arraste até esse ponto. Agora, você notará que precisamos fazer alguns arranjos aqui para torná-lo um pouco mais atraente e organizado Mas, em geral, adoro o que temos até agora. Guarde isso. Agora, vamos empurrar isso para dentro junto com tudo isso. E, finalmente, precisamos adicionar esse indicador de desempenho. Então, é claro, podemos simplesmente arrastar isso. Espere, arraste isso. Então, vamos redimensioná-lo. 3,8 a mais que 3,8 este mês. Agora, isso está atrás daquela caixa. Então eu posso simplesmente arrastá-lo e colocá-lo em cima. Talvez em algum lugar lá. Ainda não está no topo, então continuarei arrastando-o até o topo Vamos colocá-lo ali mesmo. U em 3,5%. Clique do lado de fora. Vou torná-lo verde. Então, vou pressionar enquanto esse olho está selecionado para abrir o conta-gotas, desse jeito, e depois controlar B, para deixá-lo em negrito E, claro, agora precisamos encontrar essa flecha. Então eu vou entrar aqui, fechar isso e depois flechar. Eu gosto disso, selecione isso, edite o ícone. Mude para aquele verde. Voltando aqui, eu selecionarei. Não. Vamos voltar à nossa arte porque queremos ter esse verde preciso Controle C para copiar isso. Volte aqui, clique duas vezes nesta pasta. Baixe PNG 64, download gratuito. Lá vamos nós. Volte aqui, vou arrastar e soltar isso aqui. Mantenha pressionada a tecla Shift. Em seguida, gire-o mantendo pressionada a tecla Shift para fazer 45 incrementos de ângulo E faça isso, mantenha pressionada a tecla Shift e comece a girar. Vamos colocar isso lá. E aí está. Agora, na verdade, vou selecionar tudo aqui. Vamos ver. Sim, tudo está selecionado, Controle G. Então eu seleciono, enquanto ainda está selecionado, o grupo, pressiono a tecla Shift e seleciono a carta que deveria conter eles, então agora alinho tudo no centro dela o grupo, pressiono a tecla Shift e seleciono a carta que deveria conter eles, então agora alinho tudo no centro Lá vamos nós. Então, temos nosso primeiro cartão. 10. Assignment: o resto das cartas: Na lição anterior, criamos esse cartão, e eu vou deixar vocês com a tarefa criar esses três cartões, um, dois , três, e como você pode ver, este é uma barra exatamente como esta, e é verde Se eu pressionar o controle para selecionar isso, ele terá essa cor azul claro, mas ainda terá cantos arredondados e tudo mais. Agora, eu só queria fornecer mais esclarecimentos sobre isso, como eu criei isso . Se eu ampliar, como você pode ver, isso aqui é um retângulo com cantos arredondados, mas no nível três É por isso que eles não estão se reunindo no centro desse jeito. Então, voltando ao nível três. O mesmo caso se aplica a isso. Mas agora isso não tem uma cor de campo, tem uma cor de traçado. E eu basicamente coloquei isso dentro disso para criar esse efeito de níveis. Espero que eu esteja fazendo sentido. E para este último, o que eu fiz foi o mesmo que fiz aqui. Fui até o ícone de inundação e procurei o que é isso, aliás, Fecast Vamos entrar aqui e ver se podemos obter uma previsão. O que recebemos? Tudo bem. Agora, o que estamos recebendo é a previsão do tempo. Então eu acho que previsão de vendas. Sim. Você vê documentos como esses para representar pagamentos pendentes. Mas, como você pode ver, esta seção aqui é bem parecida com essa, e isso é algo que você pode fazer com muita facilidade. Eu só queria ajudá-lo com esse esclarecimento para que você não fique preso Vamos ver o que você conseguirá inventar. Além disso, sinta-se à vontade para criar algo próprio. Você não precisa criar essas barras ou essas aqui. Vamos ver se você consegue ser criativo e criar algo diferente para os cartões. Na próxima lição, vamos ver como adicionar essas tabelas e gráficos de barras Então, nos vemos em breve. 11. Como adicionar gráficos e gráficos: Agora é hora de trabalhar neste cartão aqui e provavelmente neste. Voltando ao nosso trabalho artístico. Quero selecionar esse grupo e essa carta que os contém e, na verdade, agrupar tudo junto. Controle G. Agora é uma única carta que eu posso arrastar, ou há esse número aqui que eu também pressiono a tecla nave para selecionar as duas, Controle G. A. Não consigo colocá-la lá porque está em um grupo separado. Deixe-me, em primeiro lugar, desagrupá-lo. O que há aqui? Deixe-me desagrupá-lo. Agora temos 3,5. Deixe-me arrastá-lo para dentro do grupo três. Agora está dentro desse grupo. Tudo bem Agora deixe-me segurar e arrastar talvez até um espaço de 25. E faça o mesmo controle D. Agora, o espaçamento é sempre igual Mas é claro que vou expandir isso. Mas antes de fazermos isso, mantenha pressionadas as teclas shift e shift e arraste o espaçamento de 25 novamente, solte-o ali mesmo Agora, exclua isso e desagrupe isso porque eu quero agrupá-lo novamente e desagrupá-lo novamente Quero separá-los em agradecimentos individuais. Elements, deixe-me deletar tudo isso. Vamos voltar para isso. Ainda tem isso, então vou guardar isso. Mas o que eu queria fazer é redimensionar isso para ter certeza de que está chegando a esse ponto Mas eu quero expandi-lo um pouco para garantir que esse ritmo aqui seja o mesmo que esse Isso significa que vamos mover o botão. Selecione o botão e mantenha pressionada a tecla Shift, selecione isso e, em seguida, alinhe o botão à direita em referência a isso mesmo caso se aplica a eles, mantenha pressionado o controle g para agrupá-los. Em seguida, mantenha pressionada a tecla Shift e alinhe-as ao botão desse jeito Agora, voltando para isso, isso está no lado direito. Portanto, mantenha pressionado o controle para ampliar com a roda do mouse. Em primeiro lugar, deixe-me agrupar isso. Selecione isso, aquilo e depois o que os está segurando e alinhe-os assim Em seguida, controle G para agrupá-los. Agora, esse é um grupo. Além disso, enquanto isso estiver selecionado, selecionarei aquele e aquele controle G para agrupá-los. Agora eu posso carregá-los como um grupo, sem mais nem menos. Eu quero selecionar isso e isso, segure em. Agora eles estão por trás disso. Então, vou arrastá-los até o topo. Em seguida, mantenha pressionada a tecla shift. Não. Vamos apenas redimensionar Em primeiro lugar, o que diz? Vendas na semana passada. Vendas na semana passada, e isso deve ser branco. Foi assim que você se apresentou na semana passada. Tudo bem, sem mais nem menos. Vamos secar e colocar isso lá. Agora, podemos fazer esse tamanho usando a roda do mouse. Quer dizer, eu posso usar as teclas de seta no teclado. Eu acho que 28 está bem. Abaixe talvez até 13. Agora, digamos 12, e então empurre para cima, empurre isso para baixo. Acho que é uma boa posição. Na verdade, vamos reduzir isso, só para alinhá-lo a isso Mantenha o controle pressionado para selecionar a figura em si. Selecione os ganhos totais e aumente. Selecione esse grupo, empurre-o para mais perto do número. Lá vamos nós. Guarde isso. Agora, para adicionar essas tabelas e gráficos de Pi, clique com o botão direito do mouse em qualquer lugar aqui Passe o mouse sobre os plug-ins, gerencie os plug-ins. Isso fará com que os plug-ins apareçam. Lá, podemos pesquisar qualquer plug-in que quisermos. Vamos digitar gráfico. E acho que é disso que precisamos: gráficos. Por Sam Mason. Vou clicar. Deixe-me dizer Corra. Sim, e é isso. alterar o número de pontos de dados. Vou deixar às dez. Podemos decidir se queremos que seja uma dispersão ou área ou barra Pi D em um gráfico, vou voltar para a linha Podemos mudar o intervalo, talvez seja 10.000. Isso muda para 10.000. Podemos alterar o intervalo do conjunto de dados. Digamos que dois. Na verdade, falando em barra, deixe-me mudar isso para barra, e eu posso ir em frente e dizer adicionar gráfico. Agora, ele será colocado em sua arte e, se eu ampliar, você notará que o texto está preto e essas linhas apontam para o texto Primeiro de tudo, e eu não acho que esteja agrupado. Se eu usar a roda do mouse, manter pressionada a roda do mouse para arrastá-la não será agrupada Eu vou segurar. Em primeiro lugar, deixe-me ampliar com o controle e a roda do mouse. Em seguida, selecionarei o texto, esse outro texto. Na verdade, eu não preciso da rede. Deixe-me selecionar a grade e excluí-la. Eu não preciso disso. Agora os textos, os outros textos e o bar. Agora, se eu arrastá-los, a única coisa que resta são as barras da grade. Controle G para agrupá-los. Tudo bem Agora deixe-me arrastar isso e colocar aqui. Mantenha pressionada a tecla Shift para diminuí-la. Agora você notará que, como o reduzimos, o texto foi reduzido Vou manter pressionado o controle para selecionar textos individuais, para selecionar vários textos juntos. Vou manter o controle pressionado e mudar de marcha. E eu vou puxar isso para expandir o suporte de texto. Em seguida, mantenha pressionado o controle e a tecla Shift para selecionar o texto novamente. Na verdade, deixe-me selecionar tudo assim. Em seguida, mude a cor para branco. Vou selecionar na verdade, deixe-me selecionar isso. Mantenha pressionado o controle. É uma tarefa um pouco tediosa, mas temos que fazer isso, manter pressionado o controle e mudar para selecionar as diferentes Deixe-me começar pelo topo, controle, e esse outro no final, mantenha pressionada a tecla Shift e o controle. Em seguida, vamos selecionar os do meio. E esse principal. Mude isso para branco. Vamos repetir o mesmo para isso. Mantenha pressionada a tecla Control. Mudança de controle. Vou selecioná-los. E eu vou mudar isso para branco. Agora, para essa cor, a cor azul, vou selecioná-la manter pressionada a tecla de controle. Pressione a tecla ocular no teclado para abrir o conta-gotas e selecione essa cor apenas para uniformidade Acho que gosto do que temos até agora. Vamos dar uma olhada no que mais temos. Vamos pegar esse tipo de gráfico. Vou clicar com o botão direito do mouse nos plug-ins. Agora temos gráficos porque é um dos usados recentemente. Vamos dar cinco. Vamos dar três pontos. Esconda a grade, e lá vamos nós. Adicione o gráfico e esse é o gráfico que temos. Agora vou repetir o mesmo processo. Certifique-se de selecionar todos os elementos no gráfico. Acho que não deixei nada para trás. Primeiro de tudo, deixe-me selecionar isso. Se eu selecionei antes de agrupar tudo, agora tenho a opção de alterar a cor diferente Eu posso mudar a cor de preenchimento para branco, tudo que tem uma cor de campo é branco. Em seguida, traça a cor para branco, tudo o que tem um traçado. O mesmo caso se aplica a esse grupo. Cor de preenchimento branca, cor do traçado branca. Agora, eu quero selecionar isso. É amarelo, mas eu quero que seja dessa cor laranja. Para este segundo, quero que seja dessa cor azulada Lá vamos nós. Agora eu posso selecionar isso. Controle G para agrupá-lo. Então eu posso reduzir isso. Eu preciso empurrar isso. Deixe-me desfazer isso. Há um recorte que está acontecendo. Acho que vou expandi-lo até esse ponto. Eu não sei o que é isso. Deixe-me desfazer isso. Em seguida, arraste-o novamente. Deixe-me colocar isso lá e depois redimensioná-lo enquanto ainda estamos lá Não sei por que isso está acontecendo. Mas está tudo bem. Agora, mantenha pressionada a tecla Control. O que é isso? Eu não sei o que é isso. Acho que é o clipe fora do gráfico. Mas, honestamente, eu não sei o que é, mas isso não vai nos impedir de fazer nosso trabalho Segurando. Deixe-me deletar isso. Exclua isso. Mantendo pressionado o controle e a tecla Shift para selecioná-los. Agora eu posso expandir isso. Lá vamos nós. Controle S para salvar isso. E agora temos um bom painel. Agora, é claro, acabei de duplicá-los. Obviamente, o seu deve ser único. Cada um deles deve ser diferente. Eu teria feito o mesmo com essa parte porque tudo se resume a vir aqui, certo? E isso deve ser área e repetir o mesmo. Mas eu não vou fazer isso porque isso é algo que você pode fazer sozinho. Meu objetivo aqui é fornecer um bom guia para você seguir e criar sua própria versão criativa ou o painel. O que eu vou fazer é selecionar isso e isso e esses textos, e isso. Então, finalmente, esse controle G para agrupar tudo junto. Em seguida, mantenha pressionado para duplicá-lo. E então, com um espaçamento de 25, vou deixar isso aí E parece que realmente não agrupamos isso porque está em um grupo diferente, mas não há problema Vamos fazer uma limpeza quando estivermos organizando tudo Então, arrasto a tecla Alt pressionada para colocá-la lá, e tudo o que preciso fazer é alterá-la para dizer vendas no mês passado, mas não vou fazer isso. Na próxima lição, vamos fazer alguns retoques finais enquanto eu explico como você vai fazer isso Então, isso é tudo por enquanto, e nos vemos na próxima lição. 12. Assignment: como finalizar os cartões: Então, agora é hora de outra tarefa, que será muito fácil e rápida Agora, se você olhar esta seção aqui, ela tem esses itens vendidos mais recentemente em seu inventário, e você notará, é claro, esses são ícones que eu baixei do ícone plano. E isso é algo que você já sabe, visite o Flacon para baixá-los A outra coisa que você notará é que esse título e esse subtítulo são bem parecidos com o que já temos aqui Isso é algo que você pode criar rapidamente. Finalmente, temos esses quadrados de linhas quebradas aqui. Criar um quadrado de linha quebrada é muito fácil. Tudo o que você precisa fazer, na verdade, deixe-me mostrar rapidamente como fazer isso. Voltando ao nosso trabalho. Vou manter pressionado o controle, selecioná-lo, depois fora e arrastá-lo para duplicá-lo com aquele duplicado, na verdade, arrastá-lo para fora e arrastá-lo para duplicá-lo com aquele duplicado, na verdade, está Deixe-me agrupá-lo. Grupo. Mais uma vez, grupo, e agora isso é um single, e agora é um cartão individual. Enquanto estiver selecionado, vou para Stroke. E adicione e agora tem um traço. Então eu vou subtrair o campo para me livrar do campo. Agora, se aumentarmos o zoom, você notará que é apenas o traço. Enquanto ainda estiver selecionado, posso dar ao traçado essa cor azulada clara, sem mais nem menos Também posso aumentar a largura. Digamos que eu possa dar quatro. Eu posso escolher ter o traço interno, externo ou central. Agora está lá dentro. Também podemos colocá-lo do lado de fora. Agora está do lado de fora e podemos colocá-lo no centro. Agora, se eu for para este menu aqui, podemos ir para este menu suspenso e mudar isso para d e isso se torna um traço tracejado É assim que se cria isso. Você vai brincar com essas configurações e ver o que podemos criar. Depois de descrever tudo o que você deve fazer para criar isso, acho que será uma tarefa fácil para você e deve ser muito interessante ver o que você vai criar Isso é muito fácil de criar, basicamente duplicando ou criando a partir daqui e, em seguida, adicionando alguns textos, vá para o ícone plano e selecione um botão fechado Como você pode ver, isso foi removido. Se você for para o ícone plano, você pode dizer talvez fechar porque é um ícone fechado, e aqui estamos. tenha pressa e preencha esta carta, esta e esta carta de upgrade agora, Não tenha pressa e preencha esta carta, esta e esta carta de upgrade agora, e nos vemos na próxima lição, onde falaremos sobre como organizar tudo aqui. Porque se você olhar o que temos no meu site de referência, no meu design de referência, essa é a referência, na verdade. Se eu desmoronar isso, está muito bem organizado, então nos vemos na próxima lição. 13. Como organizar componentes: Bem vindo de volta. Agora é hora de organizar nosso design ou nosso arquivo. E olhando nosso arquivo de design de referência aqui, como eu o organizei. Como você pode ver, temos a barra de pesquisa que está na parte superior. Temos a barra lateral e, em seguida, temos o conteúdo principal. Se eu expandir o conteúdo principal, ele também será subcategorizado em seções diferentes Ao passar o mouse sobre partes diferentes, você percebe que tudo está muito bem organizado, e eu posso simplesmente vir e carregar isso e colocá-lo de lado ou aquilo e colocá-lo de lado Então, vamos fazer isso em nosso projeto. Vou voltar para cá. Agora, deixe-me me livrar disso. Agora, é claro, vamos começar com a barra de pesquisa. É composto pelo ícone de pesquisa e, em seguida, pela própria barra de pesquisa. Vou selecionar os dois e, em seguida, Controlar G para agrupá-los. Agora eu posso carregar os dois e fazer. Isso já está agrupado Lembre-se de que selecionamos os três. Agora, enquanto esse grupo está selecionado, posso selecionar esse outro mantendo pressionada a tecla Shift. Na verdade, eles não estão alinhados. Como selecionei este último, podemos alinhar esses três com isso. Exatamente desse jeito. Agora, se eu apertar o Controle G, formamos um novo grupo chamado grupo 16 e eu posso carregar tudo. Esse grupo 16 pode ser chamado de barra de pesquisa enter. Diminuindo o zoom, mantendo pressionado o controle e rolando a roda do mouse Agora, também temos esses botões. Lembre-se de que agrupamos todos os botões, para que eu possa carregá-los apenas para confirmar que cada um deles está agrupado Tudo bem Vou selecionar esse botão, manter pressionada a tecla Shift para selecionar todos eles junto com o logotipo e esta linha, depois vou controlar G para agrupá-los. Agora, se agora eu não conseguir agrupar todos eles. Se você perceber esse comportamento em que selecionou tudo, pressiona o controle G e alguns itens não são incluídos no grupo. Você pode desagrupá-los, então eu vou desagrupá-los Agora eles são indivíduos. Agora, deixe-me procurar o grupo. É o grupo 16. Deixe-me chamá-la de barra lateral. Agora posso acessar o logotipo do projeto. Deixe-me chamá-lo de logotipo e arrastá-lo para o grupo de barras laterais. Selecione essa linha também, linha da barra lateral. Entre e arraste-o também para o grupo de barras laterais. Coloque-o aí. Agora, se eu derrubar o grupo de barras laterais, posso carregar a barra lateral inteira desse jeito. Agora, lembre-se de que criamos isso como um grupo, então não há problema. Isso também era um grupo. Isso não é inteiramente um grupo porque esse texto não estava se juntando ao grupo quando testamos o Control G. Então, deixe-me ver. Isso é chamado de grupo de vendas da semana passada. Enquanto estiver selecionado, basta clicar duas vezes no cartão da semana de vendas. Agora, este é o título do cartão de vendas do Grupo 13 na semana passada. E agora eu posso incluí-lo no cartão de vendas da semana passada. Agora, se eu arrasto e o movo, ele está se movendo junto com um grupo porque faz parte do grupo e crio o hábito rotular cada coisa com seu nome apropriado. Se for esse valor aqui, isso não precisa de um rótulo. Mas agora, para este cartão, podemos chamá-lo de cartão de ganhos totais. Cartão. Oh, oito. Nós rotulamos a coisa errada. Por exemplo, esse grupo aqui, vamos chamá-lo de cartão de ganhos totais porque é o cartão de ganhos totais. Como você pode ver aqui em nossa referência, se eu selecionar isso, é chamado de ganhos totais. Se eu selecionar isso, é lucro líquido. Selecione essas despesas, sem mais nem menos, e tem todo o resto dentro delas. Voltando aos nossos cartões. É claro que não vou perder tempo rotulando essas outras peças, mas você entendeu. Agora, é claro, isso aqui também não é inteiramente um grupo, a menos que mudemos isso. Digamos que sejam ganhos do mês passado. Mês. Clicando fora e selecionando isso. Este grupo foi no mês passado, deixe-me resumir isso. Deixe-me selecionar isso. Este é o Grupo 14. Deixe-me clicar duas vezes nele e chamá-lo de cartão do mês de vendas. Agora, título do mês de vendas. E coloque-o lá. Cartão de ganhos totais, que é esta barra lateral do botão sete, barra de pesquisa. Tudo bem Agora, queremos criar o grupo de conteúdo principal. Agora vamos repetir o que acabamos de fazer C G. Conteúdo principal. Se eu esconder isso, isso é co. Na verdade, esse texto também deve estar no conteúdo principal. Então, vamos arrastá-lo e colocá-lo lá e esse botão também. Vamos chamá-lo botão de criação. Lembrem-se, pessoal, isso é apenas um guia. Reserve um tempo para organizar cada elemento da maneira que faça sentido para você e para os membros da sua equipe, se você tiver uma equipe. Então, o que é esse retângulo? Não sei qual retângulo é esse, se eu bater, e esse é o plano de fundo Por terra. Então, vou colocá-lo no conteúdo principal também. E agora está acima de tudo, então vou arrastá-lo e colocá-lo abaixo do cartão de ganhos totais. Agora, como você pode ver, a barra lateral não está visível e a barra de pesquisa porque o plano de fundo está dentro do conteúdo principal e o conteúdo principal está acima da barra de pesquisa. Na verdade, não o colocamos lá dentro. Vamos arrastar a barra lateral acima do conteúdo principal e a barra de pesquisa acima do conteúdo principal. Agora, dentro do conteúdo principal, arraste o plano de fundo. Logo abaixo do total de ganhos. Agora, vamos clicar duas vezes no Macbook Pro, que era a moldura, e chamá-la de painel Agora podemos reduzir o painel, e é aí que começaremos se estivermos descrevendo esse projeto para alguém. O painel é composto pela barra lateral e pelo conteúdo principal. E a barra lateral é composta por todos esses botões, e eu posso recolher os botões. Linha da barra lateral, o logotipo. Você pode reorganizar as coisas. Você pode colocar o botão um acima do botão seis. Você já entendeu, tenho certeza de que pode continuar reorganizando e organizando Antes de compartilhar esse projeto com alguém, você precisa organizá-lo dessa forma. Até agora, acho que cobrimos quase tudo o que você usará na maior parte do tempo quando estiver trabalhando na Figma Obviamente, esta é apenas a primeira parte de uma série de aulas. Publicarei regularmente sobre Figma, Publicarei regularmente sobre desde o básico até os Antes de você sair, tenho algumas considerações finais que gostaria de compartilhar com você, então nos vemos na lição final. Não vá muito longe. 14. Considerações finais: Eu só quero dedicar um momento para dizer um grande obrigado por ficar comigo até o final desta aula Espero que você tenha achado isso informativo e agradável e que agora esteja se sentindo mais confiante em suas habilidades de figma Agora, você tem um painel totalmente projetado que pode ser compartilhado com seus amigos ou colegas de trabalho, e estou muito orgulhoso de você por isso. Na verdade, eu encorajo você a dar tapinha nas costas e reservar um momento para comemorar porque muitas pessoas podem começar um curso, mas poucas conseguem terminá-lo E você tem. Então, parabéns por essa conquista Se você gostou dessa aula e a achou valiosa, gostaria de lhe pedir um simples favor. Reserve um momento, na verdade, menos de um minuto para escrever uma resenha e contar aos outros o que você achou da aula. Seu feedback é extremamente valioso porque me ajuda a saber se estou fazendo um bom trabalho e ajuda outros alunos a descobrir essa aula. Quando os alunos se deparam com sua avaliação da aula, fica mais fácil para eles decidirem se é uma boa aula para frequentar. Então, como mencionei, levará menos de um minuto, mas fará uma grande diferença. Basta clicar na estrela de avaliação abaixo deste reprodutor de vídeo e me dizer o que você achou da aula. E não se esqueça de conferir meu perfil para ver mais aulas sobre UI, UX e web design. Tenho uma variedade de cursos elaborados para ajudá-lo a continuar desenvolvendo suas habilidades e avançando em sua carreira Porque lembre-se, estamos vivendo em um mundo digital. E ter essas habilidades é crucial. Então confira meu perfil para mais aulas. E quando terminar de trabalhar em seu projeto de painel, não se esqueça de compartilhá-lo aqui com a comunidade. Adoramos compartilhar nossos projetos para obter feedback de colegas e professores. Deixe-me mostrar um exemplo de uma aula recente. Aqui está uma aula que publiquei há pouco tempo. E na guia Projetos e recursos, aqui estão alguns exemplos de projetos que os alunos enviaram para obter feedback. Então, tudo o que você precisa fazer é acessar a guia Projetos e recursos e clicar em Enviar projeto. E aí mesmo, você pode fazer o upload uma captura de tela do seu preenchimento Não se esqueça de dar a ele um título e talvez uma descrição do projeto. Então, estou realmente ansioso para ver seu projeto final. Mais uma vez, quero dizer, obrigado por se juntar a mim nesta aula, e espero ver você na próxima. Feliz peça de design.