Apresentando a Figma: um mini-curso para iniciantes (design de UI UX 2023)

1. Apresentando a Figma: um tutorial para iniciantes (design de UI UX 2023): Bem-vindo ao meu guia inicial do Figma para iniciantes. Essa pontuação para iniciantes o guiará criação de seu primeiro web design com Figma, criando uma página inicial simples, mas realista, para Jim Eu faço web design há dez anos e, no momento acho que o Figma é a melhor ferramenta para web design. Então, estou animado para mostrar a vocês o que é possível. E ao concluir este curso, você poderá criar seus próprios sites com Figma usando os recursos mais essenciais, como alinhar automaticamente as coisas com o layout automático ou trabalhar com ícones vetoriais de outros sites, editar imagens e trabalhar com cores e textos globais. Primeiro, criaremos a estrutura básica com formas. Em seguida, trabalharemos com imagens e ícones de mídias sociais. Em seguida, continuaremos criando todas as camadas de texto. Por fim, combinaremos ícones e texto para criar partes mais complexas com layout automático Esse é o curso certo para você. Se você não tiver tempo para assistir a um curso de dez horas com todos os recursos. E você só quer começar com suas próprias ideias dentro 1 hora. E a única coisa que você realmente precisa para começar é ter uma conta Figma, mas isso é gratuito porque eu vou te fornecer todos os ícones, as cores e as imagens. Se você gosta de aprender fazendo, recriando algo, então este curso é para você e espero ver você por dentro. 2. Criando uma estrutura básica em uma grade de 12 colunas: O passo é estruturar o layout. Então, veja esse design. Tem três seções. Este primeiro, depois a seção de texto e depois o rodapé. E é melhor primeiro criar essas três seções para que você não se concentre nos detalhes muito cedo, porque é isso que os designers gostam de fazer, mas isso retarda seu progresso, então vamos fazer isso. Então, em seu novo arquivo, primeiro precisamos criar um quadro de arte. Portanto, antes de começarmos a adicionar texto e cores, primeiro precisamos de uma moldura. Frame é como uma praia. Então você faz isso criando uma moldura aqui. Então, se você clicar na moldura, à direita, aqui você pode ver muitas opções. O que eu sempre começo é o desktop. Então clique na área de trabalho, 14, 40 pixels de largura. E, como eu disse, vamos primeiro criar nossas três seções principais. Tudo bem, então o que você vai fazer é ir até aqui, pegar um retângulo e criar uma forma como essa. Lá. Você pode arrastar as bordas e verificar se elas estão alinhadas com a parte superior. Então temos um espaço vazio aqui. E então temos um rodapé na parte inferior para que possamos criar outra forma a partir daqui, mas é mais fácil fazer uma cópia dessa. Então, segure Alt ou Option e, em seguida, clique e arraste, e então ele fará uma duplicata. Agora você quer alinhá-lo exatamente no meio. Então, aqui vamos usar nossa opção Align, que é muito melhor do que apenas tentar fazer com que ela se encaixe. Então, basta clicar em Middle Align e depois aqui na parte inferior, porque é isso que queremos. E agora só precisamos arrastar essa barra para baixo e ela ainda está perfeitamente alinhada, mas nosso design é um pouco curto. Então, se você grudar, suas placas de arte estavam emolduradas aqui, que você possa fazer a prancheta inteira um pouco mais longa. A propósito, você pode diminuir o zoom pressionando o comando ou o controle. É Alt ou Control no Windows, não tenho certeza. Em seguida, basta arrastá-lo para baixo ou você pode simplesmente alterar o número aqui. Vou mudar para 1700, assim. Ok, agora podemos colocar a comida ou novamente no fundo com esta ferramenta e deixar um pouco mais de ar para nossa parte superior, também precisamos deixá-la um pouco mais alta. Faremos essa parte sobreposta mais tarde, porque isso é um pouco mais difícil. Mas, por enquanto, vamos criar uma forma para nossa imagem. Então agora eu vou pegar um novo retângulo como esse. Você também pode acessar isso clicando no R n e criar um retângulo como este. Tudo bem, mas agora onde podemos realmente alinhá-lo? Isso é um problema. Então, agora precisamos mergulhar nas redes. Então, como você provavelmente notou, todos os sites são baseados em uma grade e alguns sites usam essa grade, mas a maioria dos sites mantém o conteúdo em uma largura de pixel específica, caso contrário as caixas de texto ficam muito largas e não confortáveis de ler e precisamos de um script para alinhar nossa imagem. Então, vamos fazer isso. Vou clicar no meu quadro de arte aqui. E aqui você pode ver o layout criado, você pode clicar no sinal de adição. Aqui, ele cria uma grade padrão, mas é uma grade horizontal e vertical. Então clique aqui, clique em Colunas porque queremos apenas 12 colunas. 12 é o padrão da indústria porque você pode criar facilmente duas caixas, três e 4.6, o que é muito bom. Então, vamos usar 12 colunas. Ele não faz nada, mas você precisa clicar fora dele para ver as mudanças, não é no centro? Porque agora ela se estende. Às vezes você quer isso, mas para esse design, eu não quero isso. Então clique no centro, mas então você precisa dizer à Figma a largura de cada coluna. Um tamanho de uso comum para isso é 75. Por quê? Bem, porque daqui até aqui são 11, 20 pixels, que são usados em muitas ferramentas de construção, como o Elementor. Então, como você pode ver, uau, uau, eu o alinhei quase perfeitamente. Um pixel, o que é uma coincidência. Então isso é meio engraçado. Então, vou alinhar isso à grade. E também vou torná-lo um pouco mais largo assim, porque quero que ele se estenda por seis colunas assim. E se você fizer isso, verá que são exatamente 150 pixels nesta seção. E nesta seção, você pode realmente ativá-lo segurando Opção ou comandos e, em seguida, você pode ver os pixels. Então, se você passar o mouse, o que é bom, tudo bem, agora vamos adicionar algumas cores. Vou até o preenchimento aqui e vou mudar a cor para preto puro porque quero usar preto puro neste site. E então você pode usar essa forma e também colocá-la em preto. Mas há um truque aqui que você deve conhecer, que são os colares de ativos, porque, por exemplo preto é usado em muitos lugares neste design. Então, você quer salvar essa cor para poder reutilizá-la mais tarde. Então agora esse é preto. Em seguida, você clica nesses quatro pontos. É chamado de Estilo. E então você pode adicionar essa cor aos estilos de cores, estilos de cores aqui são ativos de cores dourados no Adobe XD, é tudo a mesma coisa. São cores globais. É assim que eu realmente acho que eles deveriam chamá-lo. Então você clica no sinal de mais e , em seguida, dá um nome, por exemplo, preto. Tudo bem, e você clica em Criar estilo, e agora este está salvo. Então, se você não clicou em outra forma, em vez de apenas mudar a cor a partir daqui, você pode clicar nos quatro pontos novamente e selecionar o preto. Você pode ver um pouco mais fácil para este. Não precisamos mudar a cor porque, em nosso design, o fundo é, na verdade, cinza suave. Então, se você quiser usar as mesmas cores que eu, você pode arrastar o arquivo. Então, vou compartilhar esses arquivos na descrição abaixo para que você possa baixá-los. E então você pode arrastar minha cor se quiser, assim, aumentar um pouco. Então, aqui estão minhas cores verdade, apenas uma captura de tela da minha Figma. E então você pode pegar o plano de fundo. Então pegue seus quadros de arte. Agora está definido como branco, que é f, f, f, f, f. Então você clica aqui e agora você pode clicar nessa ferramenta. Você também pode acessar isso , a propósito, clicando em, eu clico neste e depois você vai para o cinza suave e boom, lá você clica nele. E eu também recomendo adicionar essa cor a você mesmo. Então, clique nos quatro pontos novamente e chame-o de estilo de criação cinza suave. Então, onde estão todas essas cores e formas globais. Assim, você pode acessá-los clicando fora de seus quadros de arte, mas não em seu design, mas fora. Então você pode ver isso aqui, estilos locais, e aqui estão suas cores. Você pode alterá-los depois. Então, digamos que você queira mudar seu preto para talvez não 100% preto, mas um pouco mais macio do que, como você pode ver, ele muda em todo o seu design, o que obviamente é incrível. Vamos apagá-lo um pouco mais leve assim. Então, a última coisa que precisamos fazer é criar essa forma diagonal. Isso também é muito fácil de fazer. Você pode simplesmente clicar nessa forma e clicar duas vezes nela novamente. E agora você pode acessar os pontos individuais. Então você pode pegar este e colocá-lo assim. Sim, isso é algo como nosso design. Tudo bem, depois clique fora, clique duas vezes nele e agora terminamos. Então, a estrutura básica está aqui. Agora vamos passar para imagens e ícones. 3. Como trabalhar com imagens e ícones de vetor: Então, aqui está a imagem que precisamos. Então você pode arrastar a imagem assim e depois mascará-la assim. Mas o que eu gosto de fazer é clicar na imagem aqui. E então, em vez de usar uma cor, use uma imagem como plano de fundo. Então, agora isso está conectado às cores globais. Vou desconectar esse clique aqui. E então você pode selecionar, em vez de um sólido, você pode selecionar uma imagem. E agora você pode arrastar sua imagem aqui e depois ela se mascara. Você ainda tem uma edição muito simples aqui. Se você quiser mudar um pouco a imagem, vamos aumentar um pouco a opacidade. Isso parece muito legal. E agora sua imagem está aqui, mas não está na posição correta. Então, se você segurar Option ou Alt e clicar duas vezes lá, você pode reposicioná-lo assim. Certifique-se de segurar a tecla Shift para que ela se ajuste proporcionalmente e, em seguida , coloque-a na posição desejada. Veja nosso exemplo. É aqui que eu quero que ele esteja. Mas agora temos uma lacuna aqui, então clique fora dela. Então, o que é lindo sobre o Figma é que você pode ter várias camadas dentro de um preenchimento. Agora temos uma imagem como uma camada em um preenchimento, mas podemos adicionar outra camada em cima dela. Então, se você clicar no sinal de adição, você pode adicionar uma camada em cima dela. Então agora é um sólido com 20% de opacidade. Então, se eu aumentar o anúncio, você não vai vê-lo. Mas se formos para o linear, apenas um gradiente, então podemos dizer que queremos ir do preto para o branco. Então esse esquerdo está em preto 100 por cento, e este direito está em zero por cento. Parece que não está 100% porque essa camada também tem uma opacidade, vou mudar isso para 100s. E agora você pode ver que estamos quase lá. Então, vou abrir meu gradiente novamente. Vou pegar esse ponto e posicioná-lo aqui. Então, isso é muito legal, como você pode ver, duas camadas em uma forma. Não precisávamos agrupar nada, e está tudo aqui à direita. Tudo bem, para esta imagem, eu vou fazer o mesmo. Então, eu vou clicar aqui, depois ir para a imagem de sólidos, depois arrastar minha imagem para cá e lá está ela. Podemos reposicioná-lo novamente, mas estou bem com isso. Então, agora temos duas imagens. Vamos arrastar alguns ícones. Eu vou para minha pasta. Eu tenho três ícones SVG aqui, que são ícones efetores, e os arrasto para o Figma assim. Eles não são todos do mesmo tamanho e queremos que sejam menores de qualquer maneira. Então, vamos fazer um deles, vamos arrastá-lo até aqui. E vamos deixar esse muito menor para esse design, eu quero que eles tenham 30 por 30. Então você pode simplesmente arrastá-lo até aqui e ver os números. Ou você pode ir até aqui e depois alterar a largura e a altura. Então, se você colocar esse em 40, vai esticar. Então, se você não quiser isso e se certificar este está vinculado, se você alterá-lo, é meio que mudar a largura e a altura. Então, por enquanto, vou colocá-lo em 30. A maioria vai fazer isso com esses dois, pode selecionar os dois segurando Shift, selecionar este e colocá-los em 30. E agora você pode ver que temos que tratar os ícones, arraste-os até aqui. E agora vamos usar o layout automático pela primeira vez. que esse é o recurso mais incrível Acho que esse é o recurso mais incrível do Figma. Se você selecionar todos eles e clicar em Shift a, isso criará uma grade. Isso não é um grupo. É como um grupo com amor e mais recursos. Então, em uma ferramenta como o Adobe XD, você agruparia tudo. Mas aqui, o layout automático é muito melhor, porque agora, por exemplo, você pode fazer coisas assim. Mas, como eu disse na introdução, é vertical ou horizontal. Também queremos que esses ícones sejam brancos. Então, se você for até aqui, poderá ver com que tipo de cores estamos trabalhando para esses ícones. Então eu posso colocá-los em branco. E eu também quero adicionar branco à minha cor. Então, crie um estilo de brancos universitários. E lá vamos nós. Tudo bem, então vamos adicionar nossos ícones às grades. Mas nosso melhor se foi. Eu fiz isso segurando a tecla Shift G lá. Você pode esconder e mostrar sua grade ou pode ir até aqui e usar esse olho aqui. Portanto, certifique-se de adicionar seus ícones aqui. E vamos trabalhar muito mais com layout automático na próxima etapa, que é trabalhar com camadas de texto. 4. Como trabalhar globalmente com camadas e fontes de texto: Ok, então vamos adicionar algumas camadas de texto. Vamos começar primeiro com os grandes. Então, esse aqui, esse e esse. Então eu vou até aqui. Vou selecionar o T para a ferramenta Texto. Vou clicar aqui e vamos digitar luta como um campeão. E aqui você pode ver o mais novo recurso do Figma, que é a correção automática. Muito legal. Então, se você está em seu Mac com uma camada grossa de textos e agora corrigida automaticamente, muito legal. A fonte que eu quero usar aqui é Sarah e depois condensada. Você pode clicar aqui, todas as fontes do Google já estão carregadas automaticamente. E então eu quero usar a versão em negrito. Quero que seja 123D em termos de tamanho e quero que o texto esteja em maiúsculas. Isso está um pouco escondido aqui. Se você clicar em Configurações de tipo, aqui poderá colocá-lo em letras maiúsculas. Tudo bem, agora vou diminuir a largura da camada de texto porque queria quebrar. Como você pode ver, meu design parece que não faz isso aqui, o que eu realmente não gosto. Então, por enquanto, vou clicar depois do a e depois clicar em Shift Enter para obter o que eu quero. Mas, como você pode ver, a altura da linha é muito alta e você pode mudar isso aqui. Altura da linha, vou colocá-la em 90 por cento de qualquer camada de texto de auditoria que você queira usar nossa porcentagem maior acima de cem, mas para títulos grandes, é menor. Também depende muito dos telefones, mas foi isso que eu encontrei. Tudo bem, agora vamos ligar a grade novamente para que eu possa alinhá-la de qualquer maneira. Eu realmente não vejo o vermelho nesse fundo preto, então vamos também mudar a cor da nossa grade. Então, vou clicar no meu quadro de arte. Eu vou para a grade novamente e vou mudar a cor aqui. É algo que podemos realmente ver, talvez algo como esse azul, um pouco intenso aqui, mas precisamos ver isso. Tudo bem, isso é um pouco melhor agora que podemos pelo menos ver o que estamos fazendo. Ok? Então, vou desligar a grade novamente com os Shifts C Como você pode ver no meu design, eles têm a palavra campeã em ratos. Então, vamos criar essa palavra retina. Vou clicar duas vezes nele e depois clicar no botão Mais, posso mudar o preenchimento para uma cor vermelha como essa, 100% de opacidade. Acho que a cor era mais ou menos assim. Tudo bem, agora esse texto também é lido. Vamos agora fazer uma versão menor desse texto. Então, vou fazer uma duplicata segurando Option ou Alt assim. E agora vou mudar o tamanho aqui para 50 e a altura da linha para 110 por cento. Porque se for menor, você precisa de um pouco mais de espaço. Tudo bem, no meu design, esse texto é preto, então vou selecionar este. Vou criar um preenchimento e vamos colocá-lo em preto. E é claro que vamos usar nossas cores globais. E esse texto tem o mesmo tamanho desse texto. Então, agora também podemos salvar essa cor em nossos telefones globais. Então, da mesma forma, clique nos quatro pontos e depois clique em mais. E eu chamo isso de algo que você quer, por exemplo, vou chamá-lo de título dois porque esse grande é o título um. Certifique-se de clicar em Criar estilo. E agora você pode ver que isso mudou. Agora, se fizermos uma cópia desse texto, deixá-lo branco e clicarmos fora do nosso quadro de arte, poderemos ver nossa fonte global aqui. E se a mudarmos aqui , digamos que vamos mudar a altura da linha. Agora isso muda os dois. Tudo bem, perfeito. Então, clique na grade novamente. Claro que vou alinhá-lo. Altere textos, diminua com e, em nosso design, a próxima palavra é ratos. Então, vamos tentar selecionar os ratos. Mas, como você pode ver, não salvamos o rato. Então, precisamos voltar a este. Então, esse rato, precisamos salvá-lo. Então, vamos ao estilo de preenchimento, clicar no sinal de adição e depois chamar esse rato criado de estilo. Então, agora esse texto tem vermelho e branco. Eu também não me conectei ao branco , como você pode ver assim. Agora, se você for para essa camada e selecionar a próxima, poderá clicar em branco e depois clicar em ratos. E agora toda essa camada de texto tem duas cores globais, como você pode ver, perfeitas. Temos mais duas camadas de textos simples, que são essa e o menu. Então, vamos criar isso. Ao clicar no T novamente, crie uma caixa de texto como esta. Eu quero basear um pouco de Lorem Ipsum em. Ainda não instalei nenhum plug-in para fazer isso. Então, vou usar minha extensão do Chrome. Mas existem maneiras em Figma de fazer isso. farei um vídeo separado propósito, farei um vídeo separado sobre plug-ins úteis, então cole o texto do Lorem Ipsum. E agora precisamos separar as cores globais porque queremos outro estilo para nosso corpo e queremos usar a fonte. A resposta será muito menor, como 16, que é um bom tamanho para fontes corporais A altura da linha precisa ser 170 porque fica melhor para o corpo do texto. A cor que eu quero usar é cinza, mas é o cinza mais escuro para o corpo do texto. Você quase sempre quer uma fonte um pouco mais clara, caso contrário, o contraste é muito forte. Então, o que eu vou fazer é chamar nossa escolha minha cor que eu preparei assim. E é claro que também vou adicionar essa cor à paleta, cinza, ok, não queremos todas as maiúsculas, o que queria ser normal assim. E também não queremos que tudo seja parafuso. Deveria ser normal. Agora, isso parece um ótimo texto corporal. Também vejo que esqueci de mudar os textos. Ligue a grade novamente para se certificar de alinhá-la na grade. Então esse à esquerda e depois esse nas bordas. Vou adicionar uma entrada aqui para torná-la um pouco mais legível e, em seguida, nunca esqueci de adicionar as fontes aos seus globais. Então, aqui, ou eu posso fazer isso. E chamamos isso de textos corporais criados pelo estilo. Esse aqui. Eu também não conectei isso, mas é claro que vamos usar o título também, porque este também está no título dois. Tudo bem, agora vamos ao menu porque essa é a última etapa antes de começarmos com as combinações de Posso enviar textos e usaremos o layout automático para isso. Então, vamos copiar este com Alt ou Option. Vamos torná-lo branco. Vamos separar o título dois porque queremos criar um novo estilo. Este precisa ter 16 anos. Tudo bem, esse é um estilo que queremos, então vou adicioná-lo às estelas. Novamente. Eu sempre trabalhava um pouco no começo, mas você vai me agradecer mais tarde por isso. Ok? Vou chamar esse menu, ok, agora vou mudar isso para casa, mas essa caixa de texto é um pouco larga demais. Então, se você clicar duas vezes aqui , ele se tornará um único item. Ok, então eu vou criar alguns outros, agora posso selecionar todos eles. Mas se eu tentar isso, minha imagem fica meio comovida. Portanto, nessa situação em que você está trabalhando em um plano de fundo, sugiro pegar sua camada de fundo, clicar com o botão direito do mouse e bloquear ou desbloquear. Ou você pode fazer Command Shift L. E agora você pode selecionar facilmente suas camadas desta forma. Clique em Shift a novamente para obter o layout automático e aí está seu menu. O que também é ótimo em todo nosso layout é a forma como você pode clicar e depois alterar suas posições. E gruda. Como você pode ver, é muito, muito bom. Queremos 30 pixels no meio. Tudo bem, vou posicioná-lo e precisamos de algum espaço para o botão. Então, por enquanto, vou deixar isso aqui. E então o último pequeno detalhe que eu esqueci de acrescentar é essa pequena linha aqui. Acabei de usar a ferramenta retangular para ser honesto. Então, clique no retângulo, crie um pequeno retângulo e selecione os dois vermelhos assim. E eu tornei meu título um pouco menor. Na verdade, isso é tudo que eu fiz. Ok. E isso é tudo que precisamos por enquanto. Ah, e eu também esqueci outra coisa aqui embaixo, temos termos e condições e privacidade. Essas são apenas duas camadas de texto simples com a fonte do corpo. Então você pode simplesmente clicar em T e digitar a política de privacidade. Certifique-se de escolher a fonte do seu corpo assim, expresse-a aqui, faça uma duplicata e altere a amarela. Certifique-se de alinhá-los na grade. Vamos fazer o layout automático deles mais tarde, mas, por enquanto, isso é tudo que precisamos. Ok, está começando a parecer algo. Então, vamos para a próxima etapa, na qual vamos dar um passo adiante com o layout automático. 5. Usando o layout automático para criar layouts que ajustem automaticamente: Ok, agora vamos terminar nosso menu com o logotipo à esquerda e o botão à direita. E vamos arrastar esse Eigen que vamos usar. Eu vou arrastá-lo, digamos que para fora daqui, primeiro vou deixá-lo branco porque senão podemos vê-lo e depois arrastá-lo para cá, torná-lo um pouco maior. Depois vou copiar meu título, mudar os textos. Eu vou fazer 30 para esse ícone. Eu quero que seja vermelho. Então, agora é branco. Eu vou fazer com que sejam ratos. E, novamente, selecione os dois, faça um layout automático deles. Agora queremos criar nossos botões. Então, na maioria das outras ferramentas, você primeiro cria um plano de fundo, depois coloca um texto em cima dele e depois o agrupa. Mas no Figma, isso é um pouco diferente com os botões. Então, eu quero usar o mesmo tecido aqui, mas quando eu duplicar esse com D comum, ele vai ficar dentro dessa moldura, que não é o que eu quero. Assim, você pode simplesmente clicar e arrastar para fora dela. E agora está livre do layout automático, altere-o para se inscrever. Agora, transforme esse também em um layout automático com o Shift a e, em seguida, ele adicionará essa caixa. Você ainda não a vê, mas há uma caixa. Vamos tornar a caixa visível preenchendo-a. Então eu vou para Fill, vou dar a ele um fundo vermelho. E agora você pode ver a caixa. Ela pode ver que esse quadro contém apenas ataques. É como um grupo, mas um pouco diferente. Mas o mais bonito disso é que você pode aumentar o acolchoamento horizontal assim e também uma flexão vertical, acho que tênis, tudo bem , precisamos de outro botão aqui. Vamos primeiro posicioná-lo. Então, vou ligar minha grade novamente e vamos posicioná-la e quero ter certeza de que ela está alinhada com o logotipo. Além disso, quero que esta seja uma linha para que você possa tentar fazer isso sozinho ou simplesmente selecionar todas elas e pressionar Layout automático novamente. E agora está automaticamente alinhado no meio. Mas não queremos um menu aqui. Queremos que esse espaço seja menor. Então, aqui você cria outro layout automático porque por padrão, ele espaçará todos os itens uniformemente. Se você selecionar este e este distribuído oralmente novamente com o Shift a. E então você pode diminuir esse tamanho dois, por exemplo, caridade. E agora você pode diminuir esse tamanho ou simplesmente arrastar a lateral até aqui e torná-la mais larga. Mas isso não funciona. Por quê? Bem, porque há outra ferramenta que você deve conhecer e que está um pouco escondida. Está aqui embaixo. Se você for para o layout avançado, por padrão, é apenas empilhamento ou pacotes. Mas se você colocá-lo no espaço entre isso, ele criará automaticamente esse espaço dentro da caixa. Então, dentro desse contêiner, o There realmente funciona da mesma forma que o contêiner. Então agora temos esse que é o contêiner horizontal. Temos este que é horizontal e também tem alguma lacuna intermediária. E então temos todo esse contêiner que vê a parte direita como uma parte e depois a parte esquerda como uma parte e cria o máximo de espaço possível no meio. Agora, se diminuirmos isso, como você pode ver, são habilidades perfeitamente. Ok, agora vamos adicionar outro botão aqui. Mas, ei, nós já aprendemos que podemos reutilizar coisas. Então, isso é o mesmo para o botão. Então, vou clicar no botão novamente, clicar duas vezes nele. E agora vamos usar esse recurso chamado componentes. Então, se você clicar nesse ícone, ele cria um componente e nos componentes há um elemento reutilizável. Portanto, isso funciona de forma semelhante às cores e fontes globais, mas não é salvo no mesmo local. Se você clicar fora do seu quadro de arte, ele não será salvo aqui. Eles têm isso aqui sobre os ativos. Então aqui você pode ver a área de trabalho, temos esse botão. Então, agora é melhor direcionar o botão daqui para o nosso design desta forma. E aqui você pode ver se você voltar às camadas, que isso é uma moldura. Agora ele tem essa forma que mostra que esse é um componente, mas não são os componentes principais. Você sempre pode encontrar o componente principal clicando botão direito do mouse e clicando em Ir para componentes principais. E se você alterar esse componente porque esse é o principal , o outro também mudará. Então, vamos experimentar. Se eu vou aumentar o tamanho, como você pode ver, as outras habilidades também. Então, vamos fazer isso. Vamos colocá-lo em 30, deixar o botão um pouco maior e isso funciona perfeitamente. Então, vamos agora fazer o layout automático desta seção. Então, o que vemos aqui? Temos essa parte, essa parte e essa parte, que estão alinhadas verticalmente. Mas se selecionarmos todos eles e pressionarmos Comentar a , eles serão empilhados verticalmente. Então você precisa dar um passo atrás com z comum, d é duas partes, precisa ser horizontal. Então, vou fazer um layout automático desse primeiro e depois Figma já vê que é horizontal. E agora Figma vê isso como um elemento. Agora podemos pegar todos eles e pressionar Shift a novamente. E agora podemos mudar os valores aqui, e então ele faz o que queremos. Tudo bem, vamos alinhar isso no meio. Eu quero que a imagem tenha o mesmo tamanho, então ela será redimensionada. Ok, isso parece muito bom. Vamos fazer mais um exercício com layout automático porque isso é muito importante. Ok, então, em nosso design final no rodapé, temos esse ícone aqui e depois o e-mail, e depois os termos e condições e privacidade aqui, vamos usar o mesmo truque. Primeiro, precisamos de um ícone. E um ícone não faz parte dessa pasta porque eu queria te mostrar uma coisa. Então, se você for, eu posso encontrar lá.com. Há um site lindo. Você pode dar uma olhada em seus pacotes. Eles têm ícones lindos por aqui. Mas se você pesquisar aqui, por exemplo, por e-mail, poderá encontrar todos os tipos de ícones. Nem todos são gratuitos, mas muitos deles são gratuitos. Então esse, por exemplo, aquele parece bom. Então, por padrão, está em PNG, mas você pode ir para SVG, que é vetor. E então, se você clicar em Copiar aqui, você volta para o seu Figma e o baseou. Ele já está lá e você não precisa salvá-lo no seu computador primeiro, é lindo. Então, vamos mudar isso para branco aleatório e colocá-lo no rodapé aqui. Preciso de uma camada de texto para minhas informações de e-mail no Box champion.com. Ok, então vamos agora adicionar o layout automático a toda essa seção. Primeiro, vamos selecionar todos eles, mas agora também é selecionar o plano de fundo. Então, vou bloquear esse plano de fundo novamente. Selecione todos eles, mude a, isso não funciona. Então, precisamos criar uma caixa aqui e uma caixa aqui. Então, essa em layout automático, essa em layout automático e, em seguida, essas duas caixas em outro layout automático. E, como você pode ver, também é perfeitamente Alliance. Mostre isso de novo. Este já estava em um layout automático. Se você quiser que esses dois fiquem alinhados no meio, você também seleciona os dois e os layouts automáticos, perfeito, certo? Esses dois não precisam estar em um layout automático. Você pode fazer isso, mas eu não acho que seja necessário. Então, agora terminamos com a maioria das coisas básicas. Agora vamos passar pelo mais difícil Spark, que é esse aqui. Essa é a mais difícil. 6. Criando uma linha de ícones flutuante com layout automático: Então, precisamos acessar o site novamente e procurar por condicionamento físico. Eu posso, por exemplo, eu vou pegar alguns ícones legais. Você pode filtrar à esquerda gratuitamente. A propósito, aqui temos uma bela cópia gratuita. Ok, agora eu tenho três ícones. Vamos primeiro, vou fazê-los do mesmo tamanho. Vou selecionar todos eles. Certifique-se de vincular este e então eu farei com que eles sejam 45. Tudo bem, isso parece decente. Mas, como você pode ver ao baixar ícones, às vezes eles não têm a mesma aparência porque esse parece muito maior. Então, às vezes você só precisa mudar isso um pouco. Use seus olhos para criar algo que pareça um pouco parecido. Ok, então também precisamos tratar textos, que é outro, tem tamanho 24. Então, vamos fazer isso. Vou criar uma camada de texto. Vamos começar com este porque acho que é parecido. Desligue-o 24, isso parece bom nisso. Novamente, vamos adicionar algum texto aleatório aqui. Vou fazer esses textos com ratos. Agora você provavelmente está pensando: “Ei, precisamos de um retângulo aqui”, mas podemos usar o layout automático da mesma forma que usamos no botão, o que é muito legal. Então, primeiro, precisamos colocar tudo em um layout automático. Mas se vamos fazer isso agora, será em uma fileira. Então, essa é uma linha vertical, essa é uma linha vertical e essa é uma linha vertical. Então, três layouts, então todos esses três também precisam estar em um layout automático, porque eu vou adicionar um layout automático aqui. Tudo bem, agora podemos adicionar o mesmo tipo de plano de fundo que fizemos com o botão. Então, eu vou clicar aqui e depois clicar em brancos. Você pode ver que ele adiciona um plano de fundo. E agora, se aumentarmos o preenchimento, você também poderá criar uma caixa como essa. Nossa grade novamente pressionando Shift G e eu quero que ela fique alinhada ao meio. Então, primeiro eu vou fazer isso, depois vamos aumentá-lo um pouco mantendo os turnos, para que ele vá direto para cima. E agora, se eu aumentar o preenchimento, ele começa a se tornar habilidoso pela esquerda, mas eu não quero isso. Então, há outro truque aqui , que são as restrições. Então, se você colocar uma restrição que agora está à esquerda, no centro, e agora você começa a aumentar o preenchimento. Agora isso é o que acontece. Agora ele não se move para a direita, o que é muito bom. Queremos que seja tão branco por aqui. Se também alterarmos o espaço entre ou a lacuna do elemento, os sites também se tornarão maiores porque esse é o preenchimento, então ele sempre mantém 200 pixels. Primeiro, decida quanto espaço você quer entre os ícones. Então, por exemplo, 120, e depois diminua o tamanho para ajustá-lo. Amplie um pouco para ter certeza de que está perfeitamente nas grades. Tudo bem, agora, Shift G novamente, e há mais uma coisa que precisamos fazer com essa parte que é uma sombra, porque eu não sei se você percebeu, mas há uma sombra suave e porque eu não sei se você percebeu, mas há uma sombra suave muito bonita embaixo da barra. Então, eu vou clicar aqui e vamos para um novo recurso chamado efeitos. Clicar na sombra projetada é a primeira característica. Existem alguns outros, mas por enquanto vamos usar apenas sombra projetada. Clique aqui para alterá-lo. Precisamos aumentar o desfoque. Então clique aqui e aumente o desfoque, deixe-o muito bonito e macio. E para a cor, eu quero usar ratos talvez um pouco mais escuros. Como você pode ver, isso está começando a ficar muito bonito. Também vou abaixar um pouco, aumentar o desfoque novamente. Oh, isso é muito legal. Vou diminuir a opacidade porque é um pouco intensa demais. Mas agora, como você pode ver, ele começa a flutuar. E há um contraste muito bom entre o fundo branco e esse fundo cinza com uma sombra vermelha no meio. Olha isso. Absolutamente lindo. Então, vamos agora comparar esse design com nosso design final. E podemos ver que ainda existem algumas diferenças. Essa imagem é um pouco mais alta que os textos, o que é bom, cria algum equilíbrio. Então, vamos fazer isso também com nosso design. Mas se formos até aqui e aumentarmos pressionando Alt, a propósito, você pode fazer os dois lados. Na verdade, não temos espaço suficiente para isso, então queremos ir para a comida ou para baixo, mas essa camada está bloqueada e essas são duas camadas separadas. Então, eu quero te mostrar mais uma coisa usar as restrições novamente, mas de uma maneira diferente. Portanto, certifique-se de encontrar uma camada quatro na comida ou porque você não consegue clicar nela e pode ver que esta está trancada, então vamos desbloqueá-la. Agora podemos adicionar um rodapé novamente, selecione o rodapé se você pressionar Shift para criar um layout automático. Novamente, eu não quero isso porque isso muda o preenchimento. Então, neste caso, eu usaria um grupo. Então, basta clicar com o botão direito do mouse e depois agrupar ou Shift G, e agora clicar no grupo. E aqui sobre restrições, clique nessa aqui porque essa mudança é essa na parte inferior. E isso significa que sempre que você trocar sua prancheta, esta ficará na parte inferior. Agora, se clicarmos em nosso quadro de arte, você verá que nosso rodapé fica na parte inferior, que é bom porque isso acontece muitas vezes. Você está tornando sua página mais longa e adicionando elementos. Então, se você sabe que seu rodapé e algumas camadas precisam estar na parte inferior, basta agrupar as restrições na parte inferior. E isso é muito bom. Vou fazer com que seja um pouco mais longo. E então eu vou pegar tudo isso, vou fazer o layout automático novamente para ter certeza de que este está alinhado no meio. E lá vamos nós. E depois há mais uma diferença. E esse é o pano de fundo. Por que esse parece melhor é por causa do plano de fundo. Assim, você pode alterar a cor de fundo de toda a Figma, se quiser. Então, se você clicar em qualquer lugar fora do plano de fundo aqui, você também pode mudar isso. E foi isso que eu fiz, e é por isso que aquele parece um pouco melhor. E também o ICR do ícone é um pouco mais grosso, que diferentemente de um pouco melhor. Então, como você pode ver, é muito parecido com o nosso design. Então, esta é minha primeira aula básica para Figma. Eu quero fazer muito mais aulas, mas espero que você tenha gostado dessa primeira. Você pode conferir meu perfil para ver mais aulas pois também explicam como criar sites. E por enquanto, quero agradecer por assistir.