Como criar e animar uma barra lateral dobrável no Figma

1. Boas-vindas ao curso: Nesta aula, mostrarei como criar e animar uma barra lateral dobrável Esta é uma aula muito prática e vai te ensinar como projetar algo que você provavelmente encontrará em sua carreira de design, e eu mostrarei as melhores ferramentas e técnicas que você pode usar para fazer isso de forma rápida e eficiente. Nesta aula, você conhecerá alguns dos recursos mais poderosos do Figma Mostrarei como usar o layout automático para manter tudo perfeitamente alinhado, como economizar tempo com variáveis e estilos de camadas e como otimizar seu fluxo de trabalho com componentes e Além disso, vamos nos aprofundar em algumas técnicas avançadas de prototipagem para que você possa animar suavemente a barra lateral entre seus estados reduzido Ei, pessoal, caso não nos conheçamos, meu nome é Adi. Sou web designer e desenvolvedor freelance com mais de dez anos de experiência Agora, iniciaremos esse projeto de design com um conjunto de wireframes e alguns ativos da marca E mostrarei como usar corretamente os diferentes logotipos fornecidos, como escolher as cores certas na paleta que nos foi fornecida, como escolher o conjunto de ícones e a tipografia corretos e como reunir tudo em um Agora, como essa é uma aula muito prática, você pode acompanhar baixando os wireframes e os ativos da marca e trabalhando comigo Este é um projeto fantástico para praticar suas habilidades e até mesmo mostrar em seu portfólio Então, pronto para mergulhar? Vamos começar. 2. O projeto do curso: O projeto da classe é simples. Você precisa criar e animar uma barra lateral dobrável Agora, na descrição da classe, você encontrará um link para esse arquivo Figma Dentro, você encontrará três wireframes, cada um com uma estrutura diferente e cada um feito especificamente para uma marca diferente Você também encontrará os ativos das três marcas. Obviamente, são fictícios e contêm os conjuntos de logotipos, as cores da marca e algumas informações tipográficas Portanto, sua tarefa é escolher qualquer uma dessas três marcas e criar a barra lateral correspondente Na aula, vou desenhar aquele para a loja Mingle, mas você pode escolher o que quiser Você pode até escolher os três e criar três barras laterais, dependendo totalmente de você Quando terminar, exporte seu design como uma imagem e publique-o como o projeto da classe. Estou ansioso para ver o que você vai descobrir. E lembre-se de que, à medida que avançamos, fique à vontade para fazer qualquer pergunta. Estou aqui para ajudar. Agora, vamos começar com a aula. 3. Como escolher ícones: O primeiro passo que precisamos dar é escolher ícones para nosso projeto, e isso é muito importante porque os ícones complementarão os links na barra lateral. Isso permitirá que os usuários examinem o layout com mais facilidade e também determinem rapidamente do que trata cada link. Agora, ao escolher ícones, é importante considerar um princípio de design chamado consistência Isso basicamente significa que todos os ícones devem ter o mesmo estilo. Sejam contornos , duplos ou sólidos, precisam ter o mesmo estilo Então, por exemplo, se vamos escolher alguns ícones de contorno para alguns dos links, não devemos escolher, digamos, ícones sólidos para os outros links Todos os ícones devem ter o mesmo estilo. E a maneira mais fácil de garantir que isso aconteça é escolher ícones do mesmo conjunto. Agora, há alguns conjuntos que eu recomendo que você compre, e todos eles são gratuitos. Eu vou examiná-los rapidamente. O primeiro são ícones sem título de Jordan Hughes, e você encontrará um link para isso na descrição da classe Depois, temos o Font Awesome, que tem mais de 2000 ícones gratuitos. Você pode encontrar isso em fontawesome.com. Então, os ícones de bootstrap também são uma ótima opção. Você pode encontrá-los em icons dotgtbootstrap.com. E, finalmente, temos os ícones de materiais do Google. Basta acessar fonts.google.com e acessar ícones. E aqui você encontrará vários deles. Sim, você pode pesquisar vários ícones. Você pode até mesmo alterar o peso do ícone aqui, o que é muito interessante. E tudo isso é de uso gratuito. Agora, para o design que vou criar nesta aula, usarei os ícones sem título porque acho que eles combinam muito bem com o projeto ou com a marca para a qual estamos criando E falando nisso, deixe-me mostrar o que vou criar. Então eu recebi o arquivo, o arquivo de recursos do aluno que mostrei nas aulas anteriores. E aqui você pode ver que temos todos os três ativos da marca. E hoje, vou projetar para a loja Mingo, que é uma plataforma de comércio eletrônico focada em compras sociais Claro, essa é uma marca fictícia, mas temos praticamente tudo o que precisamos aqui Obtemos os vários logotipos e as combinações de cores que podem ser usadas. E também temos as cores com variações para mais claras ou mais escuras E também temos algumas informações tipográficas. Esses são apenas os tipos de letra usados no design do logotipo. Isso não significa necessariamente que os usaremos em nosso design de interface de usuário, mas eles estão aqui como uma diretriz, basicamente Agora, para facilitar para mim e para você, criei muitas variáveis para todas as cores que vou usar. Então, como você pode ver, aqui temos variáveis para todas as variações das cores usadas nos ativos da marca. Para todas as três marcas. Além disso, eu também criei estilos de cores que você pode ver aqui na barra lateral, e trabalhar com estilos de cores é muito simples Por exemplo, se eu desenhar um retângulo aqui e quiser adicionar ou alterar a cor de fundo para uma dessas cores predefinidas, tudo o que preciso fazer é preencher aqui, aplicar estilos e variáveis e clicar nisso Eu escolho a cor que eu quero da lista, e agora ela usa, por exemplo, blue lagoon 500 Só me poupará muito tempo ao escolher cores, porque não preciso preocupar com códigos hexadecimais ou, você sabe, gerar tons ou tonalidades dessas cores imediatamente Está tudo salvo e pronto para eu usar. Agora, vamos escolher os ícones que precisamos para nosso projeto de design. Então, vou projetar para o Shop Mingle, como eu disse. Então, vou até a página do Wireframe e pego o Wireframe two, que é o que precisamos E eu vou até esta página aqui e vamos colar o wireframe Aqui. Vou criar um quadro, Control ou Command R para renomear, e vou renomear esses dois ícones Este é apenas um lugar que vou usar para armazenar todos os meus ícones. Então, vamos ver o que temos. Temos uma barra de pesquisa, então precisamos de um ícone de pesquisa. Então, voltando para Untitled, vou procurar, sei lá, pesquisar Small ou pesquisar MD, um desses Clique para copiar e eu vou colar isso e vou renomear isso para pesquisar A seguir, temos três links que pertencem à categoria de produtos. Então, ícone para todos os produtos. Vamos procurar a grade. E isso vai me dar esse ícone. Vamos copiar isso, colar e renomear para grade. E a maneira como você escolhe esses ícones é meio subjetiva, eu acho Isso realmente depende de como você interpreta um determinado link. Eu, pessoalmente, quando penso em todos os produtos, penso em, você sabe, uma coleção, certo, um grupo de alguma coisa. Então eu escolhi o ícone da grade porque ele também representa um grupo de algo, certo? É apenas uma coleção de itens individuais. Então, na minha opinião, isso funciona muito bem para uma página que mostra vários produtos. A seguir, temos a lista de categorias. Agora, aqui poderíamos escolher algo como uma lista, mas eu vou realmente pesquisar um banco de dados, e isso vai me dar esse resultado. E banco de dados, acho que isso funciona novamente, muito bem para o link de categorias porque simboliza uma lista de itens, uma coleção de Então, vai funcionar muito bem. Vamos renomear isso também. A seguir, os recém-chegados. Então, quando penso em recém-chegados, digo: Ok, novo, preciso ser notificado porque é Vamos procurar, tipo, uma campainha de notificação ou algo assim, certo? Então procure por Bell, e eu vou pegar o sino 03. Colado aqui. Vamos seguir em frente. Pedidos. Temos histórico de pedidos. Então, quando penso em história, penso em passado, cronômetro, relógio, algo assim Então, vamos procurar o relógio. E vamos com esse relógio retroceder e retroceder porque estamos falando sobre o pretérito História. Acho que isso funcionaria muito bem. Renomeie isso para relógio. Em seguida, acompanhe o pedido. Então, o rastreamento me dá o quê? Uma localização precisa, certo? E quando penso em localização, penso em alfinete de mapa, certo, ou você sabe, um daqueles pinos que você coloca em um mapa para marcar um local específico Então, vamos procurar o pino. E vamos usar este Marker Pin 06. Copiar, colar, renomear. Vamos seguir em frente. Devoluções e reembolsos Portanto, devolução é quando você envia algo de volta, reembolso é quando você envia dinheiro de volta. Então, vamos pensar em algo com flechas, certo? Então, vamos procurar a seta e, para a seta, basta rolar para baixo. Vamos ver como carregar mais ícones. Acho que isso funciona muito bem. Interruptor horizontal. Vamos pegar esse. Vamos renomear para switch Ok, a seguir, converse com o suporte. Então, quando pensamos em conversar, pensamos em quê? Mensagem. Tudo bem Então, vamos usar um desses balões de fala com algo dentro, talvez esse quadrado de texto com uma mensagem Então, vamos copiar isso. Baseado em renomear para mensagem Em seguida, perguntas frequentes. As perguntas frequentes são perguntas frequentes. Então, procuramos uma pergunta. Então, vamos usar o ponto de interrogação. Esse, círculo de ajuda. Acho que funcionaria muito bem. Renomeie para ajudar. Em seguida, vem a Central de Ajuda. Esse, acho que vi esse Life Boy. Isso funcionaria muito bem. Vamos renomear isso para ajudar. E o que mais? Temos configurações. Configurações, bem fáceis. Pesquisamos as configurações aqui e obtemos esse ícone de engrenagem Geralmente é assim que fazemos as coisas, ou, você sabe, podemos pegar um pouco disso ou algo disso. Há muitos ícones que podemos escolher aqui, mas o ícone de engrenagem é, tipo, instantaneamente reconhecível por qualquer pessoa que esteja procurando a página de configurações Então, vamos renomear essas duas configurações. Vamos ver, temos todos os links aqui. Também precisamos de um ícone para fechar e expandir, certo? Então, quando pensamos, você sabe, fechar ou expandir, expandir, a barra lateral, você sabe, fica maior em tamanho, desmorona, a barra lateral fica menor em tamanho Então, estamos lidando com a direção, à direita, para a esquerda ou para a direita. Vamos procurar a seta e ver o que encontramos aqui. Então, vamos rolar para baixo. Então, algo assim. Você vê esse ícone de download. Isso poderia funcionar muito bem, exceto que eu precisaria girá-lo Vamos procurar o alinhamento. Talvez encontremos algo lá. Sim, lá vamos nós. Então, uma linha à esquerda e uma linha à direita. Eu preciso desses dois. Uma linha à esquerda e uma linha à direita. Ok, então usaremos uma linha à esquerda para quando quisermos entrar colapso porque a direção é assim, e uma linha à direita, usaremos para expandir porque ela se expande para o lado direito. Tudo bem Então, esses são todos os ícones de que precisamos. Vamos arrumar isso um pouco. Então, com o quadro de ícones selecionado, vamos até aqui e adicionaremos o layout automático Tudo bem. E deixe-me realmente mover isso para que você possa ver melhor. E vou usar o rap como direção e definir, digamos, 64 pixels entre esses itens e um e definir, digamos, preenchimento de 64 pixels em todos os lados Portanto, todos os ícones são bem exibidos em uma grade, assim. Tudo bem. Agora, uma última coisa que quero fazer aqui, quero facilitar minha vida a longo prazo. Então, vou transformar cada um desses ícones em um componente. Dessa forma, posso usar os componentes infigma do recurso de troca instantânea se quiser mudar um ícone de um para o outro, e mostrarei isso na próxima lição Mas, por enquanto, vamos selecionar todos esses ícones e eu quero renomear todos eles. Então, vou clicar com o botão direito do mouse para renomear e selecionar renomear dois ícones, barra e, em seguida, o Ok, então isso só vai renomeá-los para Icon Search, IconLahGrid, icon slash database, e Agora, com esses nomes renomeados, posso transformá-los todos em componentes Então, para fazer isso, vou aqui na barra lateral, três pontos, e vou selecionar Criar vários componentes Assim. Então, isso transformará cada um desses ícones em seu próprio componente. E a razão pela qual eu os chamei de barra de ícone no nome do ícone é porque a barra de ícones permite que a Figma agrupe Então, por exemplo, agora quero adicionar um desses componentes à minha tela e vou para o painel Ativos aqui Você pode ver que meus ícones agora estão agrupados sob o ícone, certo? Você pode ver todos eles aqui. Mas quando você tem vários componentes, é muito mais fácil categorizá-los dessa forma Então, em ativos locais, todos os meus ícones que acabei de criar, todos os meus componentes agora estão agrupados na subpasta de ícones, que pode ser muito, muito útil Tudo bem, agora temos os ícones. Criamos os componentes, então é hora de criar os itens do menu. Isso está chegando a seguir. 4. Como criar os itens de menu: Agora, como temos vários itens de menu que têm aproximadamente a mesma estrutura, é uma boa ideia usar componentes. Dessa forma, podemos reutilizar os itens do menu. E se em algum momento decidirmos mudar alguma coisa, fazemos isso apenas uma vez no componente mestre. Então, deixe-me mostrar como podemos fazer isso. Vamos dar uma olhada na estrutura do menu aqui. Então, teremos o texto, é claro. Na verdade, vamos trazer uma cópia disso aqui e alterar a largura para automática. Agora, além do texto, também precisamos de um ícone, certo? Então, vamos pegar um dos ícones. Digamos que o primeiro, e eu vou colá-lo aqui. E se você não sabe como os componentes funcionam no Figma, é muito, muito simples Portanto, cada componente tem duas partes. Digamos que você tenha o componente principal e depois a instância, ok? O componente principal é a única fonte da verdade, por assim dizer. A instância é basicamente uma cópia. Portanto, a ideia é que, seja qual for a alteração que você fizer no componente principal, essa alteração será propagada e aplicada a todas as outras cópias dele Então, por exemplo, aqui, temos o componente principal chamado icon slash Grid E observe o ícone que ele está usando. É como um ícone de diamante cheio. Isso aqui, sim, é uma cópia desse componente. E no painel de camadas, você pode ver que ele tem um ícone diferente. É um diamante vazio. Então, agora, se eu selecionar o componente principal e, por exemplo, mudar sua cor, você verá que a cópia ou todas as outras cópias dele receberam essa alteração. Tem uma cor diferente. Então, se eu mudar isso de volta para o que era, as instâncias também mudarão. É basicamente assim que os componentes funcionam no FiGMA. Obviamente, existem usos mais complexos, como você verá neste curso, mas em seu nível básico, isso que tudo se resume Agora, vamos criar esse item de menu. Então, temos um ícone e temos o texto. Vamos definir o texto para Inter. Esse é o tipo de letra que usaremos para o design da interface do usuário neste projeto Insira uma fonte gratuita disponível no Google. Ele tem muitos pesos diferentes e foi feito especificamente para esse tipo de aplicação Então, usaremos 16 pixels entre regulares e também 150% da altura da linha Agora, com esses dois selecionados, pressionarei Shift A para criar um quadro de layout automático e definirei o espaço entre eles em 12 pixels. Então, espaço entre texto e ícone para 12 pixels. Também vou colocar ou adicionar um preenchimento de 12 pixels à esquerda e à direita do conteúdo e também oito pixels na parte superior e inferior Isso vai me permitir adicionar um pouco de espaço para respirar ao redor do conteúdo desse link do menu. Vamos renomear esse quadro para link do menu. Com ele selecionado, vamos transformá-lo em um componente. Então, vou para a barra lateral, crio um componente ou uso o atalho de teclado Control AK no Windows ou a Opção de Comando K no Mac Ótimo. Agora, eu quero ser capaz de, é claro, duplicar esse componente, criar várias instâncias dele E também para cada um, quero mudar o texto e o ícone. Para isso, vamos adicionar alguma substituição. Então, com o texto selecionado dentro do componente principal, vou até a barra lateral aqui onde diz, criar propriedade de texto Clique nisso. Vamos dar um nome a ele. Pode ser o que você quiser. Vou deixar no texto, criar uma propriedade. Em seguida, selecionarei o ícone e, na barra lateral, escolherei a propriedade de troca de Create Instance Vou ligar para essa propriedade. Deixe-me realmente mostrar para você. Vou chamá-lo de ícone. Não se preocupe com o valor ou com os valores preferidos aqui. Basta clicar em Criar propriedade. Tudo bem Agora, podemos pegar esse link do menu, copiá-lo e colá-lo em outro quadro. E é isso que usaremos para criar nosso design de barra lateral. Agora, essa é uma instância do componente que acabamos de criar. Então, vamos aproximar o wireframe um pouco mais aqui para que possamos ver o que estamos fazendo E vamos começar a criar os itens do menu. Então, o primeiro vincula todos os produtos. Bom. Vamos duplicar isso A próxima será por categorias. Então, com a instância selecionada, posso ir até aqui. Eu posso mudar o texto para categorias. E eu posso até mesmo mudar o ícone, e o Figma agora usará os componentes do ícone, ou vai me mostrar os componentes do ícone que eu criei na lição anterior Podemos ver todos eles aqui. Podemos até pesquisar um ícone específico. Então, posso simplesmente escolher isso e o Figma o substituirá automaticamente na minha instância. Quão legal é isso? Então, estou usando uma cópia do componente principal, uma instância, mas posso personalizá-la com meu próprio conteúdo ou com conteúdo diferente para cada um Vamos seguir em frente. Este, recém-chegados, e eu vou escolher a campainha Vamos duplicar essas duas vezes mais e preencher o resto dos itens do menu H Agora criamos os outros itens do menu, todos personalizados com seu próprio texto e ícone. Agora, uma mudança que eu gostaria de fazer é reduzir um pouco os ícones Por padrão, eles têm 24 pixels. Então, vamos transformá-los em 20 pixels. Agora, como usei componentes, se eu fizer esses 20 pixels, essa alteração será aplicada a cada instância de componente, muito legal. E, a propósito, eu uso a ferramenta de escala para reduzir o tamanho do ícone. Basta pressionar K no teclado e obter essa interface aqui, na qual você pode alterar a largura ou a altura ou alterar o tamanho usando um fator. Agora, há mais duas variações desses itens de menu que precisamos criar. O primeiro é o ativo. Então, o que acontece quando selecionamos ou clicamos em um item de menu específico e ele é selecionado, certo? Então, quando isso acontecer, vamos fazer o seguinte. Selecionaremos o componente principal e podemos ir até aqui e escolher Adicionar variante. Agora, isso fará uma cópia desse componente, mas não é uma instância. Na verdade, é uma variação, uma variante desse componente. E agora a Figma envolve essas variantes nessa linha pontilhada. Agora, vamos selecionar o componente principal e, onde diz propriedade um, vamos clicar duas vezes e renomear o tipo Em seguida, selecionaremos o primeiro e o deixaremos como padrão. E no segundo, clicaremos duas vezes e renomearemos para ativo Então, para os ativos, quero usar uma cor dos ativos da nossa marca. Então, vamos para a página de ativos da marca e eu quero usar essa cor primária. Então é Blue Lagoon 500. Então, vamos selecionar isso e, em preenchimento, aqui embaixo. Vou pesquisar a lagoa azul e vou selecionar 500 Então, isso adicionará essa cor como preenchimento. Mas eu também quero mudar o ícone e a cor do texto. Agora, eu poderia usar branco para isso, e tudo bem, mas eu quero usar uma variação dessa cor primária. Então eu vou voltar e posso ver que Blue Lagoon 50 é a cor mais clara do grupo Então, vamos usar esse. Então, novamente, na figma, com o ícone e o texto selecionados, vou para Seleção de cores Clique aqui e escolha blue lagoon 50. Agora, selecione a variante e vamos adicionar um raio de borda de oito pixels Então, como isso me ajuda exatamente? Bem, aqui está a parte legal. Digamos que eu queira fazer com que a instância de todos os produtos seja a variante ativa. Tudo o que preciso fazer para isso é ir até aqui onde diz tipo e, em vez do padrão, seleciono ativo e pronto. Eu posso fazer isso com qualquer um dos outros links. E, finalmente, a outra variação que preciso criar é aquela com o emblema Então, observe que alguns desses links têm números anexados a eles. E eu quero adicionar esse número como uma espécie de crachá. Então, vamos fazer isso. Selecionaremos a primeira variante. Vamos clicar no ícone de adição. Isso vai fazer uma cópia disso. E vou renomear isso para o padrão com emblema. Então, vamos pegar esse número. E vamos colar aqui. Vamos tornar esse contêiner um pouco maior. Vou usar o Inter desta vez em negrito, 12 pixels, a mesma altura de linha de 150% E vou adicionar isso ao seu próprio quadro de layout automático porque quero adicionar um plano de fundo a ele. Então, vou pressionar Shift A, e isso vai me permitir adicionar preenchimento a ela Mas antes de tudo, vamos adicionar uma cor de preenchimento. E vou voltar aos ativos da marca e vejo que temos esse vermelho coral como cor secundária. Então, vamos escolher o vermelho coral 100 como plano de fundo e, em seguida, o 600 ou o 700 como cor do texto. Então, aqui em preenchimento, vou pesquisar por vermelho coral, selecione 100. E para o texto, vamos usar vermelho coral, 600 ou 700. Acho que 700 funciona muito, muito melhor. E com o selecionado, vamos também adicionar um pouco de preenchimento a ele Então, vou fazer oito pixels à esquerda e à direita, dois pixels na parte superior e inferior. Vamos alterar a largura aqui para abraçar o conteúdo. E o conteúdo do abraço basicamente significa que a moldura se redimensionará para corresponder ao conteúdo Não fica maior ou menor do que o que contém. E se você quiser aprender mais sobre layout automático, tenho um curso muito detalhado disponível que trata apenas de layout automático. Tem muitos exemplos, e eu me aprofundo muito nesse tópico. Basta conferir os links ou conferir meu perfil para encontrar esse curso. Agora, criamos esse lote. Na verdade, vamos dar a ele um raio de borda , selecionar o texto interno e configurá-lo para largura automática Portanto, a caixa de texto corresponde à largura do texto em si. Além disso, o que eu quero fazer aqui é adicionar uma largura mínima a isso, porque se eu mudar o texto, você pode ver que temos uma forma de pílula Mas se eu tiver apenas um único dígito, é quase como um círculo Então, eu quero que isso sempre pareça um formato de pílula. Então, para isso, vou para o layout automático. Vou clicar aqui e adicionar uma largura mínima de, digamos, 32 pixels. Então, isso é muito, muito melhor. Agora, podemos voltar às nossas instâncias. Posso selecionar os itens do menu que precisam dos emblemas Por exemplo, recém-chegados, vou mudar seu tipo para padrão com O chat suportaria, a mesma história, padrão com emblema. Mas preciso de uma forma de controlar o texto desse distintivo, o número Vamos voltar aqui e eu vou selecionar o texto no componente principal, o texto do selo, e aqui embaixo, vou selecionar aplicar propriedade de texto, criar propriedade, e vamos chamar esse número de crachá Ok. Agora, se selecionarmos essas instâncias novamente, teremos um campo de número de crachá que podemos preencher, Então, quatro é bom para recém-chegados, mas este deve usar dois E deixe-me realmente mostrar para você. Legal. Finalmente, uma última coisa aqui, você notará que, se selecionarmos uma dessas instâncias e a aumentarmos, o número do selo permanecerá logo após o texto, e eu não quero isso Quero que o número do crachá seja exibido no lado direito, como temos no wireframe Então, a maneira de fazer isso é adicionar uma lacuna automática entre o emblema e o texto Então, vamos voltar para essa variante e vamos fazer uma pequena mudança aqui. Selecionaremos o texto principal e o ícone. Faremos o Shift A para adicioná-los ao seu próprio quadro de layout automático. Então, vou selecionar o quadro principal e vou alterar o valor da lacuna aqui de 12 para automático. Agora, isso me permitirá redimensionar essa instância para qualquer tamanho, e o Figma definirá automaticamente a lacuna entre esses itens e o emblema para o valor E isso funciona aqui também, como você pode ver. E com isso, os itens do menu estão prontos. Então, vamos voltar nossa atenção para o resto da barra lateral. Então, a seguir, projetaremos o resto dos elementos. 5. Como criar as duas barras laterais: Há mais alguns elementos que precisamos criar na versão expandida da barra lateral e, claro, também precisamos criar a versão reduzida Então, vamos começar com o primeiro. Em termos de elementos, vamos dar uma olhada no wireframe Ainda precisamos adicionar o logotipo. Então, vamos voltar aos ativos da marca, e vou pegar o logotipo normal da loja Mingle e colá-lo aqui Então, vou pressionar K e redimensionar isso para 56 pixels de altura Bom. Agora, vamos pegar isso e renomeá-lo para um logotipo Em seguida, temos uma barra de pesquisa, certo? Então, vamos pegar tudo isso, movê-lo um pouco para baixo e redimensionar esse quadro também Então, para a barra de pesquisa, vamos pegar o texto da pesquisa e colocá-lo aqui. E precisamos de um ícone de busca, certo? Então, vamos aos ativos e eu vou pegar o ícone de pesquisa e arrastá-lo para dentro. Vamos redimensionar isso para 20 pixels, que corresponda ao resto dos ícones na minha barra lateral e, em seguida, selecionar os dois Desloque A para adicioná-los a um quadro de layout automático. E eu vou adicionar uma cor de preenchimento, e vamos usar o carvão Se dermos uma olhada nas cores da nossa marca aqui. Na paleta de cores, temos uma cor de carvão. Isso é para cinza, basicamente. Então, vamos usar isso para texto e para os elementos mais neutros da interface do usuário, como o plano de fundo de um elemento de formulário, certo? Então, vamos usar carvão vegetal, você sabe, 50 ou 100 depende do que parece melhor para nós Então, vamos selecionar isso e escolher preencher. Vamos procurar carvão e vamos ver Charcoal 50. Sim, isso parece muito bom. Então, vamos manter isso. Mas também vou mudar a cor dos outros elementos. Então, o ícone será Charcoal 500. Também usaremos isso para o resto do texto. E o texto da pesquisa, porque geralmente é um espaço reservado, da forma como o colocamos, vamos usar uma versão mais clara do carvão, que é 300, apenas uma cor mais suave Agora, vou usar ou estamos usando o layout automático para esse elemento. Então, vamos definir oito pixels como a lacuna. Essa é a distância entre o ícone e o texto. E vamos usar 12 pixels para preencher tudo ao redor. Ótimo. E agora, finalmente, vamos adicionar um raio de borda de oito pixels Então, estamos combinando o raio da borda dos outros elementos arredondados Ótimo. Agora podemos pegar isso e redimensioná-lo para o tamanho que quisermos Então essa é a barra de pesquisa. Em seguida, cada grupo de itens de menu tem esse texto como uma espécie de cabeçalho de grupo. Então, vamos pegar isso. Vamos colá-lo aqui. Vamos tornar a largura automática. E vamos alterar as propriedades tipográficas aqui para inserir Deixe-me realmente ampliar aqui para que você possa ver. Vou usar 12 pixels como tamanho da fonte, 150% da altura da linha e vou colocá-la em maiúsculas Além disso, vou tornar o espaçamento entre letras um pouco maior Então, você sabe, aumentar o espaçamento entre letras é algo que eu recomendo que você faça quando você tem texto pequeno, negrito maiúsculo, e aumentar o espaço entre as letras apenas torna o texto um pouco mais fácil Então, vamos mover isso até aqui. E também, eu esqueci a cor, certo? Então, a cor do texto. Vamos usar um carvão 300, ou seja, um texto muito, muito leve, e vamos aumentar a opacidade OK. Agora, vamos realmente agrupar alguns desses links. Então, vou selecionar esses três, deslocar A, e isso os adicionará ao seu próprio quadro de layout automático. E eu posso mudar a lacuna aqui para zero, e eu quero ter certeza de que eles estão alinhados à esquerda E eu quero colocar todos os elementos dentro e ter sua largura ou redimensionamento horizontal configurados para encher o recipiente Então, agora, sempre que eu redimensiono o elemento pai, os itens dentro dele também são redimensionados E há uma última coisa que precisamos fazer, que é adicionar uma pequena lacuna entre o cabeçalho do grupo e o resto dos elementos. E se eu apenas alterasse a lacuna, a partir das propriedades do layout automático, isso mudaria a lacuna entre cada item. A maneira de fazer isso é, em primeiro lugar, redefinir isso para automático com e com a opção Shift A selecionada para adicioná-la a uma moldura de layout automático. E como agora está em uma moldura de layout automático, posso adicionar preenchimento a ela Então, vou entrar no inspetor aqui e vou mudar seu preenchimento inferior para 16 pixels Então, isso adicionará um pouco de distância a um pequeno preenchimento, basicamente apenas a esse pequeno texto, criando a distância que precisamos Esse é um pequeno truque bacana. Em seguida, vamos fazer o mesmo com os outros. Então pegue isso e cole aqui. E isso deveria dizer ordens. E vamos selecionar o Shift A. Verifique se a direção está definida como vertical. A lacuna é definida como zero e os itens internos são configurados para encher o recipiente. E, finalmente, o terceiro grupo é para apoio. Mesma história, selecione tudo, Shift A, Gap definido como zero, selecione todas as instâncias do item de menu, defina o redimensionamento para encher o recipiente Agora, duas coisas aqui que eu esqueci de fazer. Primeiro, selecione o texto de pesquisa e defina seu tamanho para 16 pixels em vez de 12. E então vamos mudar a cor do ícone e do texto nesses itens do menu porque eu esqueci de fazer isso Atualmente, ele usa preto. Então, vamos selecionar essas duas variantes e, aqui embaixo, em cores de seleção, qualquer item que use preto deve usar Charcoal 500 Assim. Então, isso é muito, muito melhor. Não sou muito fã de usar apenas cores de texto em preto puro em qualquer layout. É um contraste demais, um contraste muito grande. E, finalmente, para essa área, temos as informações do usuário, certo? Temos uma foto do nome de usuário e endereço de e-mail. Então, vamos colar isso. E vamos começar com o avatar. Vamos fazer isso de 48 por 48. Vamos adicionar um raio de borda de oito pixels para contornar E vamos mudar a imagem interna. Agora, a forma como isso funciona no Figma é que você tem uma forma e adiciona um preenchimento, e o preenchimento pode ser colorido e também pode ser uma imagem, entre outras coisas Então você pode fazer isso manualmente ou usar um plugin. Eu tenho um plugin que eu uso regularmente e se chama Unsplash Basicamente, você sabe, baixa imagens do Unsplash e as aplica diretamente como um preenchimento à sua Então, vamos procurar um retrato, e eu vou escolher este. Aqui mesmo. E é isso. Isso é tudo que você precisa fazer. Em seguida, vamos pegar esses dois elementos e alterar seu tamanho para 16 pixels. E vamos mudar a largura duas vezes automaticamente. Vamos fazer o Shift A, adicioná-los ao seu próprio quadro de layout automático. Definiremos a lacuna como zero e também alteraremos a altura da linha para 150%, assim Selecionaremos o nome Command B para usar a espessura da fonte em negrito. E vamos mudar o texto aqui para o nome. Vamos usar o Charcoal 500 como endereço de e-mail. Eu quero que isso seja um pouco mais moderado. Vou usar o Charcoal 300 assim. Por fim, selecione o avatar e o texto. Shift A novamente. Verifique se o alinhamento aqui está definido para o meio e definiremos a lacuna entre eles em 12 pixels Assim. E, finalmente, vamos tornar esse item do menu de colapso um pouco mais moderado , porque é mais uma coisa funcional relacionada à barra lateral, não necessariamente parte do grupo principal de itens do Então, vamos mudar sua cor. Vamos do Charcoal 500, que você pode ver aqui. Vamos para 300 e também para o ícone. Então, vamos ver o que temos. Perdemos alguma coisa do wireframe? Não, temos tudo o que precisamos. Então, agora é simplesmente uma questão de criar um layout adequado, adicionando algum alinhamento e espaçamento adequados para todos esses elementos Então, selecione tudo. Desloque A para adicioná-los ao seu próprio quadro de layout automático. Agora, com o selecionado, vou definir a lacuna entre os itens em 48 pixels e vou usar um preenchimento de 24 pixels na parte superior e inferior Além disso, adicionarei um raio de borda de oito pixels e adicionarei uma sombra a todo o contêiner Então, para a sombra, na verdade vou usar outro plugin Figma chamado smooth shadow E a sombra suave basicamente adiciona uma sombra em camadas ao objeto que você deseja Então, vou clicar em Aplicar sombra. E porque não temos uma cor de preenchimento que aplique a sombra a cada item dentro da moldura , tudo bem. Podemos simplesmente adicionar um preenchimento de branco e agora a sombra está visível. Veja o quão suave é essa sombra. Tudo bem, agora vamos selecionar o quadro principal aqui e definir seu redimensionamento horizontal para abraçar o conteúdo Então, você sabe, ele corresponde à largura e à altura de seus elementos de conteúdo. Vamos pegar os grupos de links do menu aqui e definiremos seu redimensionamento para encher o recipiente Então, você sabe, sempre que eu estiver redimensionando isso, eles serão redimensionados junto com E vamos fazer a pesquisa e configurá-la para encher o recipiente. E, finalmente, quero um pouco menos de espaço entre o logotipo e a barra de pesquisa. Então, vamos agrupá-los, selecionar os dois, deslocar A para adicioná-los ao seu próprio quadro e definiremos a lacuna entre eles em 24. Então essa é a versão expandida da barra lateral. Agora, vamos criar a versão reduzida. Então, vamos duplicar esse Comando D ou Controle D, e a versão reduzida é basicamente muito pequena É muito estreito, ok? Então, para tornar isso possível, precisamos projetar nossos elementos forma que eles se encaixem em um espaço muito estreito. Para os itens do menu, isso significa se livrar do texto. Apenas mantemos o ícone, o logotipo, talvez precisemos diminuí-lo ou usar uma versão diferente do logotipo. A barra de pesquisa, nós a substituímos por um botão e a lista pode continuar. Então, vamos começar a trabalhar. Vamos começar do início. E, na verdade, substituiremos o logotipo. Se voltarmos aos ativos da marca da loja Mingle, temos duas versões do logotipo, a versão padrão e uma menor, apenas a versão do símbolo, certo? Então, vamos pegar esse. Isso é perfeito para esse caso de uso. Então, vamos selecionar o quadro aqui, colá-lo e eu vou pressionar K para redimensionar, e vou definir a largura para 48 pixels Agora, excluímos o logotipo antigo. Movemos isso para cima apenas pressionando a tecla para cima e para baixo ou a tecla de seta para cima, neste caso, e a renomeamos para logotipo Barra de pesquisa, podemos simplesmente excluir o texto da pesquisa e selecionar a entrada aqui e, em vez de preencher, configurá-la para abraçar o conteúdo Ou melhor ainda, para garantir que temos a mesma largura nesses elementos, podemos redimensioná-la para 48 pixels e garantir que os elementos estejam alinhados no meio Em seguida, vamos selecionar os quadros que contêm os cabeçalhos dos grupos e vamos apenas ocultá-los. E então, o que dizer dos itens do menu? Precisamos de uma versão disso em que seja apenas o ícone. Então, vamos voltar ao nosso componente principal do link do menu. Selecionaremos a versão padrão. Clicaremos no sinal de adição e o renomearemos para o padrão Colapso E tudo o que precisamos fazer aqui é selecionar um texto, ocultá-lo e selecionar o elemento principal. Vamos definir uma largura de 48 pixels e alinhar tudo no meio Então, agora podemos entrar aqui e selecionar padrão em colapso, padrão em colapso E novamente, aqui. E o selecionado? Vamos adicionar outra variante. Então, vou selecionar isso, adicionar variante. Eu vou dizer selecionado, desmoronado. E a mesma história. Selecionamos o texto aqui, o escondemos. Selecionamos o elemento principal. Definimos sua largura para 48 e alinhamos tudo no meio Então, agora podemos voltar e selecionar este selecionado recolhido, ou eu deveria ter dito ativo colhido apenas para acompanhar a convenção de nomes Então, o ativo entrou em colapso. Ótimo. Finalmente, precisamos de mais uma variação, que é a versão reduzida do item de menu com um emblema Então, vamos realmente duplicar esse. Vamos chamá-lo de destruído com um distintivo. E vamos desenhar um círculo de oito por oito. E como isso está em um quadro de layout automático, Figma o posiciona automaticamente, mas não queremos isso Então, vou direto para aqui e vou escolher o botão Ignorar, desculpe, aqui em cima, errado. Ignore o layout automático. OK. E isso basicamente vai me permitir posicionar esse elemento em qualquer lugar que eu quiser dentro de um quadro de layout automático. Então, vamos movê-lo para lá e depois um, dois, três, quatro, um, dois, três, quatro. E vamos adicionar uma cor adequada. Se voltarmos ao esquema de cores aqui, quero usar o secundário, o vermelho coral. Então, vou pesquisar o vermelho coral e vou usar o 500, que é a cor base. Então, agora vamos de isso para isso, basicamente, e de isso para isso. Agora, uma coisa que eu quero mudar aqui é selecionar tudo e definir a largura para abraçar o conteúdo Portanto, eles são exibidos em seu tamanho normal. Eu vou fazer isso para todos eles. Conteúdo do abraço Lá vamos nós. OK. E eles devem ter 48 pixels de largura, e eles são 44 agora. Então, por que isso está acontecendo? Então 48, 48, 48. Oh, ok, então isso é porque a largura deles pode ser diferente. Então, eu preciso definir manualmente a largura aqui para 48 pixels. Isso é bom. Não é grande coisa. 48 e 48 aqui também. Tudo bem. Então, estamos chegando lá. Vamos selecionar todos esses itens e revertê-los para o conteúdo do abraço Não se preocupe com essa linha rosa aqui. É apenas um artefato que eu continuo vendo desde a nova atualização do Figma OK. E também vamos mudar essa versão. Então, vou alterá-lo do padrão para o padrão reduzido e também vou mudar o ícone para uma linha à direita E, finalmente, eu gostaria de esconder todo esse quadro. Então, tudo o que resta aqui é o avatar. Então essa é a nossa versão reduzida da barra lateral. Isso é o expandido, esse é o colapso. Isso não foi muito difícil. Isso. Você pode ver o quão rápido isso acontece quando você tem as coisas devidamente configuradas de antemão com, você sabe, estilos e cores de camadas, componentes e variantes e todas essas coisas É simplesmente uma questão de mudar algumas coisas, esconder algumas coisas. E você pode facilmente passar, nesse caso, de uma versão expandida da barra lateral para uma versão reduzida Então, agora que temos esses dois, vamos ver como podemos animar a mudança entre os dois estados, e isso está chegando 6. Como animar a barra lateral: Agora, a forma como vamos animar a mudança entre o colapso e o expandido e vice-versa é usando E se você nunca usou prototipagem no Figma, não se preocupe É super, super simples. prototipagem é uma forma de tornar certos elementos interativos E você faz isso usando gatilhos e ações. Um gatilho é algo que um usuário faz, clicando em algo, rolando até algo, pressionando uma tecla Uma ação é algo que acontece em resposta a um gatilho. Então, vamos começar criando ou transformando nossas duas barras laterais em um componente. Então, para fazer isso, selecionaremos os dois. Na verdade, vamos arrastá-los para fora dessa moldura. E vamos renomear isso para expandido e vamos renomear isso para reduzido Agora, selecione os dois. E vamos até aqui na barra lateral e criar um conjunto de componentes Está bem? Então, quando fizermos isso, Figma criará um componente com esses dois elementos como variantes Está bem? Vamos renomear o componente para barra lateral e, com ele selecionado, vamos renomear essa propriedade clicando duas vezes no estado Claro, você pode renomeá-lo para o que quiser. Então, agora temos uma barra lateral com dois estados. Expandido e desmoronado. Então, se eu voltar a esse quadro aqui, posso ir para meus ativos. Posso acessar os ativos locais e arrastar a barra lateral aqui. E isso é, claro, um exemplo. É uma cópia do meu componente original. Mas com o selecionado, posso facilmente ir até aqui e selecionar o estado que eu quero. Então, isso é o expandido, mas eu posso facilmente mudar para o reduzido e vice-versa. Agora, vamos criar a animação que torna essa mudança mais perfeita Então, voltaremos ao componente principal e pressionaremos Shift E. Isso alternará entre o modo de protótipo e o modo de design Você também pode fazer essa alteração clicando nesses dois botões aqui na barra lateral Agora, uma vez dentro do modo protótipo, precisamos selecionar o gatilho, certo? Então, o que vai acontecer para acionar essa animação? Bem, digamos que, quando clicamos no link de colapso, eu quero que essa barra lateral mude para a versão reduzida, ok Então, com o cursor do mouse. Vou passar o mouse sobre o sinal de mais aqui, clicar e arrastar até o quadro Agora, isso vai criar uma interação, certo? Então, o gatilho está no clique quando eu clico nesse botão. A ação é que eu mudo para o estado de colapso e, em seguida, posso escolher a animação Então, para que seja uma animação muito suave, vamos escolher a animação inteligente. E o Smart Animate basicamente observará como um elemento está no estado A e, em seguida, como esse mesmo elemento está no estado B. Então, ele vê as diferenças e cria uma animação para a mudança na propriedade, certo? Por exemplo, se o elemento, se o mesmo elemento for longo, for, digamos, mais largo no estado A e mais curto no estado B, a animação inteligente anima a propriedade de largura, certo Isso vai encolher o elemento. Ele vai animar a mudança nessa largura. Então, vamos escolher a animação inteligente. Para a curva, vamos usar suave e manteremos a duração de 800 milissegundos Agora, vamos fazer o contrário. Então, quando eu estiver no estado de colapso e quiser voltar ao estado expandido, certo, vou criar outra interação, que também será com um clique, e mudamos para expandido e as mesmas propriedades, animação inteligente, 800 milissegundos suaves OK. Então, agora, vamos realmente tornar isso um pouco menor, selecionar a instância aqui e centralizá-la. E voltando ao modo protótipo, vamos adicionar um ponto de partida de fluxo, e você pode realmente ver isso aqui Isso só marcará esse quadro como fluxo um. Então, quando eu pressiono Shift e espaço, isso reproduz o flow one. Então aí está minha barra lateral. E agora, quando eu entro em colapso, as coisas mudam, certo? Ela vai da versão expandida para a versão reduzida E vice-versa, se eu acertar isso, ele vai de desmoronado para expandido E eu posso brincar com isso o quanto eu quiser. Mas é uma animação muito suave. O logotipo também muda. Observe aqui. O logotipo muda de parte para outra porque eles têm o mesmo nome, certo? E o Smart Animate analisa os nomes das camadas. Então, como eu nomeei o logotipo de ambas as camadas, ele anima a mudança entre elas. Quão fácil é isso? E, claro, você pode, você sabe, brincar com as diferentes propriedades de animação aqui. Você pode clicar duas vezes em qualquer um desses macarrões e, você sabe, você pode alterar, por exemplo, a curva entre, você sabe, suave a rápida, digamos Vai ser uma flexibilização um pouco diferente. Vamos mudar isso para rápido. Então, agora mude o espaço e a animação ficará um pouco diferente. E é isso, na verdade. É assim que você pode criar e animar uma barra lateral dobrável Agora, certifique-se de que, para que isso funcione, as duas versões da barra lateral precisam ser variantes dentro de um conjunto de componentes, que permite que todo o sistema de prototipagem Então, com isso dito, junte-se a mim na próxima lição para a conclusão e algumas reflexões finais. 7. Conclusão e considerações finais: Ei, parabéns por concluir esta aula, e muito obrigado por assistir. Espero que você tenha achado útil, valioso e que tenha aprendido algo novo. Gostei muito de criar este e mal posso esperar para ver você no próximo. Então, o que você deve fazer a seguir? Bem, eu agradeceria se você parasse um momento e deixasse um comentário para esta aula. Isso realmente me ajuda a criar turmas melhores no futuro, e seu feedback é muito importante. Além disso, fique à vontade para conferir meu perfil para ver minhas outras aulas de FiGMA Um deles é 100% dedicado ao layout automático do Figma e tem muitos exemplos e tarefas do mundo real Portanto, certifique-se de dar uma olhada nisso. Também administro um canal no YouTube onde compartilho conteúdo sobre web design com foco no Figma Você também pode entrar em contato comigo através das redes sociais habituais. Você encontrará links na minha página de perfil. E com isso dito, é hora de eu assinar. Muito obrigado novamente por assistir e espero vê-lo na minha próxima aula. Tchau por enquanto.