Figma para pessoas ocupadas: dominando o layout automático

1. Boas-vindas ao curso: Figma é incrível, mas vamos ser reais Alguns de seus recursos, como layout automático, às vezes podem parecer muito complicados, certo? O fato é que, uma vez que você pega o jeito, é uma virada de jogo total para sua experiência com Figma E essa aula tem como objetivo tornar o layout automático divertido e fácil, não importa de onde você esteja começando. Todo mundo. Meu nome é Adi e sou web designer e desenvolvedor com mais de dez anos de experiência. E eu fiz muitos cursos e tutoriais sobre os tópicos de Figma, UI, UX Design, desenvolvimento web E, geralmente, meus cursos são muito detalhados. Mas esse é diferente. Este foi projetado especificamente para pessoas ocupadas que não têm muito tempo a perder, mas ainda querem aprender algo valioso. Este curso é conciso, mas repleto de informações essenciais Agora, na minha opinião, layout automático é o recurso mais poderoso do Figma Se você está criando sites, aplicativos ou qualquer outro conteúdo digital. Isso pode acelerar seriamente seu fluxo de trabalho e tornar seus projetos mais flexíveis e responsivos Então, vamos detalhá-lo. Teremos seis lições principais, cada uma focada em um aspecto fundamental do layout automático. Começaremos aprendendo como adicionar layout automático ao seu design e como organizar e organizar objetos com eficiência. Em seguida, passaremos para quadros aninhados, que são essenciais para criar layouts complexos Na terceira lição principal, exploraremos algo chamado fluxo de layout, que determina a direção e a posição dos elementos Veremos como o espaçamento funciona no layout automático e como usar espaços e preenchimentos Em seguida, falaremos sobre o alinhamento e as várias formas de garantir que os elementos estejam perfeitamente posicionados Por fim, vamos nos aprofundar nas opções de redimensionamento disponíveis que nos permitem criar layouts dinâmicos Agora, eu projetei essa aula para ser muito prática. Então, cada uma dessas seis lições principais tem uma parte teórica, que eu chamo de básica, e depois uma parte prática, que eu chamo de aplicação prática E para cada aplicação prática, recriarei um layout a partir de um site real Começo com uma captura de tela desse layout e algumas especificações de design que preparei de antemão Em seguida, mostro passo a passo como recriá-lo usando o layout automático Além disso, cada lição principal tem uma tarefa. Para você E há seis tarefas que você pode fazer O objetivo é ajudá-lo a praticar o que aprendeu em cada lição. Ao fazê-las, você entenderá a teoria muito melhor. Além disso, você terá a experiência prática necessária. E as tarefas são como as aplicações práticas, com uma grande diferença Também forneci instruções escritas que ajudarão você a recriar o layout que selecionei Então, se isso parece interessante, nos vemos na aula. 2. Projeto de assinatura e curso: Ei, bem-vindo à aula, deixe-me falar sobre as tarefas e o projeto da turma Há seis tarefas que você pode fazer. Você pode encontrá-los no arquivo Figma vinculado aos detalhes da classe na guia Projetos e Recursos Agora, você pode fazer todas as tarefas depois de terminar de assistir à aula ou uma de cada vez Depende realmente de você. Minha sugestão é fazer cada tarefa depois de uma aula relacionada Por exemplo, assista à aula sobre espaçamento e depois faça a tarefa sobre espaçamento. Agora, o projeto da turma é assim. Depois de concluir todas as aulas e tarefas, sua tarefa é selecionar um layout que você goste e recriá-lo no Figma usando, é claro, o claro, Muito parecido com as tarefas, mas desta vez você escolhe o layout e não há especificações de design preparadas por mim Você terá que descobrir isso sozinho. Para te ajudar com isso. Eu criei um arquivo Figma que você pode encontrar vinculado Ele é enviado para a comunidade aqui na Figma e é chamado de projeto de classe Skillshare Tudo o que você precisa fazer é abrir isso enquanto estiver conectado à sua conta Figma e clicar neste botão aqui que diz Abrir no aqui que diz Abrir no E isso criará uma duplicata para você na sua conta Figma Agora, dentro desse arquivo, você encontrará a seguinte estrutura. Basicamente, temos uma seção aqui com dois quadros, design de referência e recreação. O que você precisa fazer é capturar uma captura de tela do layout que você deseja recriar colá-la neste primeiro design de referência de quadro Então você terá, você sabe, algo para referenciar. Além disso, você pode entrar aqui na parte inferior e colocar um link para o site do qual você tirou a captura de Isso é totalmente opcional. É claro. E então, no segundo quadro, onde diz uma recreação, é aqui que você basicamente recriará esse layout Depois de fazer isso, vá em frente e selecione esta seção, chamada projeto de classe Skillshare, e vá para o canto inferior direito Eu já preparei uma regra de exportação para você. Você o exporta como um X PNG e depois o publica como o projeto da classe no Skillshare Agora, compartilhar seu progresso tem suas vantagens. Primeiro, você pode ver no que seus colegas estão trabalhando, os layouts que eles escolheram e como eles os recriaram Em segundo lugar, você não está apenas aprendendo teoria. Você está ativamente envolvido com um projeto. Eu adoraria que você compartilhasse seu projeto de classe conosco. E lembre-se, se em algum momento você se sentir confuso sobre um determinado tópico ou tiver algum tipo de dúvida, poste-a na área de discussão e farei o possível para ajudá-lo. Com isso dito, vamos começar com a aula. 3. Atualização do Figma 2025: o que mudou: Ei, pessoal, essa é a Adi do futuro. Este vídeo bônus está aqui para ajudá-lo a navegar por algumas das mudanças pelas quais Figma passou desde que gravei esta aula pela primeira alguns anos, o Figma parecia um pouco diferente e, desde então, recebeu várias atualizações sua funcionalidade e mais notavelmente Portanto, se sua tela não se parecer muito com a minha nessas aulas, não se preocupe. Vamos analisar rapidamente o que mudou para que você possa acompanhar sem nenhuma confusão. E só para ficar claro, essa classe ainda é totalmente relevante hoje em dia. Os conceitos básicos não mudaram, apenas a forma como a Figma apresenta algumas de suas ferramentas Começaremos com a mudança mais perceptível, que é a nova interface do usuário ou o redesenho da interface do usuário Isso é chamado de UI three no momento desta gravação. E uma das coisas que você pode notar imediatamente é que a barra de ferramentas agora foi movida da parte superior, onde costumava estar, para a parte inferior, aqui. Então, basicamente, temos as mesmas ferramentas que tínhamos antes, exceto talvez pela seção. Acho que isso foi adicionado nos últimos anos. Ainda temos as ferramentas principais de linha, polígono e retângulo com as quais estamos acostumados Temos a ferramenta Caneta, ferramenta de texto. Temos algumas ferramentas novas aqui, como a anotação e a Eles foram adicionados recentemente. Temos algumas ferramentas de IA que estão disponíveis por meio desse menu de ação aqui. Recentemente, a Figma também introduziu o Figma draw e também o modo Dev , voltado para desenvolvedores, mas isso não é realmente importante para este vídeo Outra mudança é o fato de que agora podemos reduzir essas duas barras laterais clicando aqui neste botão de minimizar a interface Basicamente, isso lhe dará mais espaço para brincar. E você pode clicar nesse botão novamente para mostrar a barra lateral esquerda e direita. Agora também temos a opção de recolher camadas clicando neste botão aqui. Então, se você tem camadas abertas, essa é uma maneira muito rápida de reduzir tudo E a maioria das mudanças realmente aconteceu na barra lateral direita do inspetor Então, deixe-me revisar rapidamente alguns deles com você. E você verá que a barra lateral direita agora parece um pouco diferente da dos meus vídeos. Os controles de alinhamento estão posicionados de forma um pouco diferente agora temos algumas opções relacionadas a variáveis, que é outro recurso introduzido nos últimos anos As operações booleanas foram movidas neste menu aqui, e acho que provavelmente a maior mudança foi feita no Auto Layout Então, o painel Auto Layout agora se parece com isso. Era muito mais simples nos anos anteriores, mas agora seu layout mudou Ele tem alguns recursos extras, como, por exemplo, esse modo de grade que foi introduzido recentemente. Agora temos a capacidade de definir a largura e a altura de um elemento específico para conteúdo fixo ou amplo, que basicamente redimensionará esse elemento para caber em seus elementos secundários recipiente de enchimento basicamente expandirá isso para preencher todo o espaço disponível. Também temos a opção de adicionar larguras ou alturas mínimas e máximas, e agora as variáveis estão incluídas aqui. Na maioria das vezes, alguns desses elementos são movidos como esse seletor de alinhamento aqui, o espaço ou a lacuna entre os itens agora está posicionado E para cada valor numérico que você vê aqui, você também tem a opção de aplicar variáveis agora Falando em variáveis, acho que não as usei em nenhuma das minhas aulas anteriores porque são relativamente novas, mas elas podem ser acessadas se você clicar fora ou clicar em qualquer lugar da tela e acessar a seção de variáveis aqui. E as variáveis são basicamente uma forma de armazenar valores reutilizáveis, como números, cores e até texto E de todas essas, acho que a principal mudança à qual você precisa prestar mais atenção é a mudança no layout automático, porque acho que é a mais desatualizada. Agora, é muito mais poderoso do que, digamos, o Auto Layout de 2020 ou 2022, mas funciona exatamente da mesma maneira, então você não precisa se preocupar com isso. Portanto, não se preocupe se sua tela parecer diferente da minha. As ferramentas ainda estão lá e você poderá concluir o projeto da turma de qualquer maneira. Agora, vamos voltar para a aula. 4. Como adicionar layout automático aos seus designs: O layout automático é uma propriedade que só pode ser aplicada aos quadros. Portanto, não funciona em grupos, não funciona em seções, apenas em quadros. E você pode usá-lo para coisas muito simples, como um botão, que mudará tamanho de acordo com o texto interno, ou para criar layouts complexos, como este, que é feito de vários quadros de layout automático, cada um com propriedades diferentes E exploraremos os vários casos de uso do layout automático nas próximas aulas e realmente aprenderemos sobre sua complexidade. Mas, por enquanto, quero mostrar como adicioná-lo aos seus designs. Então, no Figma, temos uma moldura simples e para adicionar layout automático Tudo o que você precisa fazer é ir até o inspetor, clicar no texto do layout automático aqui ou no botão. E é isso. Para removê-lo, basta clicar no botão de menos dessa forma. Como alternativa, você pode clicar com o botão direito do mouse em um quadro e ir até aqui, onde diz adicionar layout automático ou usar o atalho de teclado Shift A dessa forma E para removê-lo, você faria a mesma coisa, clicaria com o botão direito do mouse e removeria o layout automático, ou usaria o antigo shift A no Windows ou a opção shift A em um MAC. Agora, depois de adicionar o layout automático a um quadro, você terá acesso a algumas opções diferentes. É aqui que você controla a direção do layout. É aqui que você controla o alinhamento. É aqui que você define a lacuna entre os itens. E essas duas caixas são para preenchimento horizontal e vertical, e não se preocupe, discutiremos tudo isso muito mais detalhes nas próximas aulas Agora, uma das coisas mais legais sobre o layout automático é a maneira como você organiza ou reordena os elementos dentro da Então, por exemplo, se eu quiser mover essa primeira caixa para a direita, tudo que eu tenho que fazer é usar a tecla de seta para a direita ou para a esquerda, se eu quiser movê-la para a esquerda. Se eu tivesse um layout automático vertical. Eu usaria as teclas de seta para cima e para baixo para movê-lo ou mudar sua posição. Como alternativa, posso clicar e arrastar com mouse e movê-lo para qualquer lugar que eu quiser. E o Figma moverá esse elemento e manterá o mesmo alinhamento e o mesmo espaçamento entre os itens que eu coloquei na moldura principal, o que Agora, você também pode adicionar layout automático a elementos individuais ou grupos de elementos. E eu sei que eu disse layout automático só pode ser aplicado a molduras. No entanto, o Figma envolve automaticamente esses elementos em um quadro se eles ainda não estiverem contidos em um Então, aqui está o que eu quero dizer com isso. Temos uma segunda demonstração aqui. Se eu selecionar esses dois elementos, eles são apenas, você sabe, camadas autônomas aqui no painel de camadas, e eu posso fazer a tecla Shift A, que criará uma moldura. Veja, agora eles estão embrulhados dentro de uma moldura aqui, e essa moldura também tem um layout automático aplicado a ela. Quão legal é isso? Isso aqui é um grupo, como você pode ver no painel de camadas, é chamado de grupo 87. Agora, se eu fizer o Shift A, e deixe-me mostrar o conteúdo aqui, duas caixas. Se eu mudar A com esse grupo selecionado, esse grupo agora é um quadro com, claro, layout automático. Agora, você pode estar se perguntando: como adiciono um elemento a um quadro existente com layout automático? Bem, é tão simples quanto clicar e arrastar. Então, se eu quiser adicionar isso a esse quadro, aqui, tudo o que preciso fazer é clicar em arrastar e pronto. Eu quero tirá-lo. Clique e arraste para fora da moldura. E o Figma redimensionará automaticamente essa moldura para corresponder apenas à altura interna de seus filhos, mais sobre isso mais tarde Como alternativa, eu posso, você sabe, pegar esse comando X ou Control X, selecionar o quadro e simplesmente colá-lo dentro do Command ou Control V. Agora, vamos dar uma olhada em uma aplicação prática. E para esta lição, estamos recriando um layout do loom.com, e é essa lista aqui com Basicamente, temos um ícone de verificação e um pedaço de texto. Então, na Figma, eu recriei os elementos do texto. Eu trouxe o ícone. Então, vamos começar movendo isso aqui, comande ou controle D para duplicá-lo. Mais três vezes. E então, à esquerda, além da captura de tela, eu também adicionei algumas especificações de design, como o espaço entre cada item da lista e também o espaço entre o ícone e o texto Então, vamos fazer isso. E eu só quero começar dizendo que esse tipo de layout será incrivelmente fácil de criar com o layout automático se estivéssemos usando todos os recursos, como a funcionalidade GAP, a funcionalidade de alinhamento, ainda não chegamos lá Então, vamos usar apenas a quantidade mínima de mágica de layout automático e faremos o resto manualmente, como o alinhamento e o espaçamento Está bem? Então, vamos começar com o alinhamento. Primeiro, selecionaremos cada ícone e texto e, em seguida, os alinharemos, desculpe-me Tipo, assim e assim, apenas alinhe-os no centro. Em seguida, vou selecionar o texto, manter pressionada a tecla ult ou option e mouse sobre o ícone para obter a distância entre eles. E então eu posso usar as teclas de seta para a direita ou para a esquerda para deslocar ou mover o texto para a esquerda ou para a direita, um pixel por vez Aos 29 anos agora. Preciso ter 16 anos, então vou fazer um, dois, três e depois deslocar para a esquerda para movê-lo dez pixels por vez, e agora estou com 16. Vamos fazer o mesmo aqui. Estou com 46 anos, então vou fazer o turno para a esquerda, para a esquerda, para a esquerda, e agora estou com 16, 30, então vamos fazer um, dois, três, quatro, Shift, esquerda, e agora estou com 16. O mesmo aqui. Mude para a esquerda e agora estou com 16 anos. Ótimo. Agora, vou selecionar cada ícone e mudança de texto A. Shift A, shift A shift A. Agora tenho quatro quadros de layout automático. Selecione todos eles, alinhe-os à esquerda e agora é simplesmente uma questão de definir a lacuna de 24 pixels entre eles. Então, faremos o mesmo de antes, manteremos pressionada a opção ou ult, mouse sobre o elemento acima e usaremos as teclas de seta para ir no lugar, assim E é assim que você adiciona layout automático aos seus designs. Em seguida, você tem uma tarefa. 5. Assignment: como adicionar layout automático aos seus designs: Agora que você está mais familiarizado com o layout automático e aprendeu o básico, é hora de praticar E a tarefa desta lição é bem simples. Você recriará um layout do stripe.com. Portanto, se descermos até o final do rodapé do site, você recriará essa lista de empresas com três links Agora, há três links no site ao vivo. Quando recebi a captura de tela há pouco tempo, havia quatro links, mas isso realmente não importa Então esse é o layout que você vai recriar. Você tem um título e, em seguida, quatro links. E há uma lacuna de quatro pixels entre todos eles. Fui em frente e preparei todos os elementos do texto para você. Além disso, incluí algumas instruções no lado esquerdo, que você pode usar ou optar por ignorar. A escolha realmente depende de você. Eles estão simplesmente lá como uma mão amiga. E apenas como um lembrete rápido, você encontrará o link para o arquivo da tarefa nos detalhes da aula E é isso. Continue e conclua esta tarefa, e nos vemos na próxima lição, que trata do agrupamento de quadros de layout automático 6. Como aninhar quadros de layout automático: Na Figma, aninhar molduras significa colocar uma ou mais molduras dentro É muito simples e totalmente compatível com o layout automático. Então, deixe-me mostrar como você faria isso. Aqui temos dois quadros. Uma é uma moldura horizontal, outra é uma moldura vertical e ambas têm layout automático. Agora, se eu quiser criar uma moldura muito maior que contenha ambas, eu posso fazer isso de várias maneiras. Primeiro de tudo, e o mais fácil, é selecionar esses dois quadros e pressionar Shift A. E isso adicionará os dois a um quadro, ou devo dizer, a um novo quadro, que tem layout automático, como você pode ver aqui. E isso me permite criar layouts muito mais complexos usando molduras horizontais e verticais Outra opção seria simplesmente pegar uma das molduras e arrastá-la para dentro de outra. E você pode fazer isso no painel de camadas. Então, se eu quiser colocar essa, a moldura vertical dentro da moldura horizontal, eu posso ir para o painel de camadas aqui, e eu posso simplesmente clicar e arrastar para dentro. Então, agora eu tenho apenas uma moldura que contém a moldura vertical e meus dois elementos. Nesse caso, o quadro com objetos é um quadro aninhado. Agora, vamos dar uma olhada em uma aplicação prática para aninhamento E para esta lição, estamos recriando um layout de get pixel snap.com Então, se rolarmos para baixo, podemos encontrar essa área aqui onde diz medir a distância, e é isso que vamos recriar Agora, no Figma, eu trouxe uma captura de tela. Fiz algumas medições para obter a lacuna entre o título e a descrição entre a descrição e esses recursos, vamos chamá-los. E também a distância entre cada recurso e entre o ícone e o texto do recurso. Agora, criaremos o primeiro quadro que contém o título e a descrição. Então, vamos alinhá-los à esquerda e definir uma lacuna de 14 pixels entre eles. Assim, selecione os dois turnos A, primeiro quadro pronto. Vamos criar os recursos. Então, vou mover o texto, mover o ícone. Selecione o texto de um ícone, alinhe-o ao meio e vamos definir uma distância de 24 pixels entre os dois Selecione os dois turnos A. Faça o mesmo com o outro. 24 pixels, selecione alinhar shift A. Agora temos um quadro, dois quadros, três quadros Vamos criar nesta parte uma moldura com os dois recursos. Então, vamos selecionar os dois ou, desculpe, vamos apenas alinhá-los primeiro à esquerda Verifique se temos a distância adequada entre eles e agora selecionamos os dois deslocamentos A para criar o segundo quadro grande. Agora, para reunir tudo isso, basta selecionar esses dois quadros, alinhá-los à esquerda e definir a lacuna de 42 pixels entre eles. Então, vamos selecionar isso e continuar até chegarmos a 42 pixels. Por fim, selecionamos os dois e fazemos Shift ou clicamos com o botão direito do mouse no layout automático. Ele faz exatamente a mesma coisa. Então, agora, vamos ver o que temos aqui. Temos o quadro 96. Este é o nosso quadro principal. Então, no interior, temos a moldura superior que tem o título e a descrição. E depois a moldura inferior. Isso tem as duas características. E cada recurso é um quadro em si, que tem o ícone e o texto. Então, quantos quadros aninhados temos aqui? Bem, temos o quadro 94, então um dos recursos, esse é um. O outro recurso, são dois. moldura 95 também é uma moldura aninhada, porque fica dentro da moldura maior Então, são três e são quatro. Portanto, temos quatro quadros aninhados dentro desse quadro principal. E é assim que você agrupa os quadros de layout automático. Em seguida, você tem uma tarefa. 7. Assignment: aninhando quadros de layout automático: agrupamento de quadros de layout automático permite que você crie estruturas de design mais complexas, e é exatamente isso que eu quero que você pratique nesta lição Portanto, a tarefa para você é recriar um layout do Timely Se você acessar o mega menu de produtos, encontrará esta primeira seção que estou destacando aqui, então é isso que você estará recriando Eu adicionei todos os elementos para você no Figma, incluindo o ícone e os elementos de texto, e você também tem algumas especificações de design, bem como instruções aqui no lado esquerdo, que você pode escolher usar ou ignorar. A escolha é realmente Agora, quando você terminar de recriar esse layout, nos vemos na próxima lição, que é sobre fluxo de layout 8. Como explorar o fluxo de layout em quadros de layout automático: fluxo de layout se refere à forma como os elementos são organizados em um quadro de layout automático e consiste em três coisas. Direção, posição absoluta e ordem de empilhamento da tela. Vamos começar com a direção. Aqui, eu tenho uma moldura com três elementos, que são posicionados um abaixo do outro, começando de cima para baixo Isso porque a direção na minha moldura de layout automático está definida como vertical. Eu sempre posso mudar isso para horizontal ou um toque clicando nos outros botões. Portanto, uma direção horizontal seria mais ou menos assim onde os elementos são posicionados da esquerda para a direita em uma única linha O rap é um pouco especial porque Figma colocará automaticamente itens que não cabem em linhas adicionais Então, se eu estiver redimensionando esse quadro e os elementos na primeira linha não couberem mais, eles serão exibidos na segunda linha ou na terceira linha E o Figma fará isso automaticamente para mim, mantendo o mesmo alinhamento e espaço entre os itens Então, para recapitular rapidamente, uma vertical exibirá os itens verticalmente, de cima para baixo, em uma coluna, independentemente da altura do elemento pai Então, se eu estiver redimensionando isso, os elementos ficarão em uma coluna Horizontal, exibe o elemento da esquerda para a direita em uma linha, independentemente do tamanho da moldura principal, e uma embalagem exibirá ou moverá elementos em linhas adicionais se eles não couberem quando eu estiver redimensionando Agora, vamos passar para a posição absoluta. Então, eu tenho uma moldura com dois objetos e adicionei essa borda branca para que você possa ver os limites dessa moldura principal. Se eu arrastar esse elemento para dentro, o quadro será redimensionado para acomodar seu conteúdo Se eu selecionar esse elemento e movê-lo para a esquerda, direita, para cima e para baixo, Figma o colocará automaticamente em posições definidas, dependendo do alinhamento e da lacuna entre os itens Portanto, não posso mover esse elemento livremente para qualquer lugar que eu queira. No entanto, se eu for até o inspetor e clicar nesse botão que diz posição absoluta, duas coisas acontecerão Em primeiro lugar, a moldura simplesmente se redimensionou para corresponder ao w e à altura dos dois elementos originais Basicamente, a moldura nem considera esse elemento rosa como parte dela. E segundo, agora eu posso me mover. Eu posso mover livremente esse elemento para qualquer lugar dentro desse quadro. E se eu quiser movê-lo para fora dos limites do quadro, posso segurar a barra de espaço. Essa é uma dica profissional para você. E isso não vai tirar a camada da moldura. Basta movê-lo, apenas mudar sua posição, basicamente. Essa é uma posição absoluta. Finalmente, vamos discutir a ordem de empilhamento do Canvas. Isso é muito fácil de entender. Eu tenho uma moldura de layout automático aqui com três caixas e estou usando uma lacuna negativa entre os itens, mais sobre isso posteriormente, para sobrepô-los. Então, como você pode ver aqui, eles são colocados um em cima do outro. E se observarmos a posição na lista de camadas, temos as caixas um, dois, três. Então, a caixa três fica em cima de todo o resto. A caixa dois fica entre a caixa um e a caixa três, certo? Visualmente. Agora, se eu selecionar esse quadro, ir ao inspetor no painel de layout automático e clicar nas configurações avançadas, posso alterar o empilhamento do Canvas do último para cima, que é o padrão para o primeiro no Isso significa que agora a primeira camada no painel de camadas, que no meu caso é a caixa um, ficará no topo. E então ele será seguido pelos outros. Então, agora a caixa três fica atrás das outras duas caixas. Agora, vamos dar uma olhada em uma aplicação prática. E para esta lição, estamos recriando um layout do airbnb.com Mais especificamente, uma dessas listagens, que inclui uma imagem, algumas informações de texto, alguns ícones e, em alguns casos, um crachá favorito do convidado Então, de volta à Figma, fiz uma captura de tela de uma dessas listagens e também adicionei algumas e também adicionei Também trouxe para a imagem qualquer ícone que precisássemos e criei os elementos de texto. Então, vamos começar a recriar esse layout. Com o distintivo favorito do convidado. Esta é uma moldura simples à qual adicionamos um plano de fundo, uma borda e altura, e também a contornamos. Então, isso é muito fácil de fazer. Vamos selecionar isso. Desloque A para criar uma moldura com ela. Vamos definir sua altura para 26. Vamos adicionar uma cor de preenchimento. E vamos adicionar uma borda branca, um pixel. E também, vamos dar uma volta, assim. A seguir, vamos começar com o texto aqui na parte inferior. Portanto, temos a data da distância do ladrilho alinhada à esquerda, sem espaço entre eles. Então, vamos fazer isso. Data da distância do título. Vamos alinhá-los à esquerda e não vamos deixar nenhuma lacuna entre eles. Então, com esses três selecionados, mude A, e esse é o nosso primeiro quadro. E como os itens foram inicialmente posicionados um em cima do outro, Figma é muito inteligente e define a direção automaticamente para a vertical Em seguida, temos o preço, que fica a seis pixels dos elementos acima. Então, vamos fazer isso. Vamos alinhar tudo e vamos configurá-lo para seis pixels assim Desloque A para criar mais uma moldura vertical. A seguir, vamos trabalhar nessa classificação aqui. Portanto, temos estrela, diferença de quatro pixels e a pontuação da classificação. Vamos selecionar esses dois elementos. Vamos alinhá-los no meio. Vamos colocar o ícone aqui em quatro pixels, assim. Em seguida, selecionaremos os dois e adicionaremos um quadro de layout automático. Então, agora vamos mover o texto para cima, e vamos mover a moldura horizontal da classificação para cima também, alinhando-a com a imagem Em seguida, selecionaremos os dois, deslocaremos A para criar um quadro horizontal e, em seguida, selecionaremos esse quadro e a imagem, deslocaremos A para criar um quadro vertical. Agora, os dois últimos elementos que precisamos colocar são o emblema favorito do convidado e o ícone físico Eles ficam no topo da imagem, 12 pixels das bordas. Como fazemos isso? Bem, se pegarmos esses elementos e os movermos sobre nossa estrutura principal, eles serão posicionados apenas acordo com a direção da moldura, no meu caso é vertical No entanto, posso selecioná-los e posso ir até o inspetor e clicar na posição absoluta E isso me permitirá mover esse elemento livremente dentro do quadro de layout automático. E com um pouco de empurrão para cima e para baixo. Conseguimos posicioná-los corretamente, deixando a lacuna de 12 pixels das bordas da imagem. Então essa é a nossa moldura finalizada. Usamos várias técnicas aqui, agrupando uma, e também criamos quadros de layout automático vertical, criamos quadros de layout automático horizontal e também usamos posicionamento absoluto nesses dois elementos E isso é tudo para o fluxo de layout. Em seguida, você tem uma tarefa. 9. Assignment: como explorar o fluxo de layout em quadros de layout automático: Tudo bem, é hora de você praticar o uso do fluxo de layout no Figma E sua tarefa é recriar um layout do Notion. Este é o site do Notion e, se você rolar até o fim, encontrará esta seção. Então, você recriará essa caixa, junto com a imagem em cima dela E na Figma, eu, é claro, forneci uma captura de tela, algumas especificações de design e também imagens, textos e ícones brutos , junto com algumas instruções que, como de costume, você pode usar para obter ajuda ou ignorar e fazer tudo sozinho Então vá em frente e faça a tarefa e, quando terminar, junte-se a mim na próxima lição, que é sobre espaçamento 10. Como dominar o espaçamento de layout automático: No layout oral, temos dois métodos principais para controlar o espaçamento. E essas são lacunas e preenchimento. Vamos começar com a lacuna, mais especificamente, a lacuna entre os itens e, em uma moldura de layout oral, a lacuna entre os itens é sempre igual. Portanto, neste exemplo, tenho 56 pixels entre o primeiro e o segundo item e, novamente, 56 pixels entre o segundo e o terceiro. E posso alterar facilmente a lacuna clicando nas alças e arrastando aqui, ou posso ir até o inspetor e inserir um valor manualmente aqui, digamos, Eu também posso fazer operações matemáticas. Então eu posso fazer 50 vezes dois ou mais dois ou menos dois ou dividir por dois Funciona da mesma forma. Também posso clicar e arrastar essa alça aqui para alterar a lacuna manualmente. Agora, em molduras horizontais e verticais, tenho um único valor para a lacuna. No entanto, se minha moldura estiver configurada para quebrar, tenho valores para horizontal e vertical. E, por padrão, o espaço vertical é o mesmo que o horizontal. Mas eu posso ignorar isso. Eu posso fazer com que esse seja um valor totalmente diferente e também posso alterá-los daqui ou daqui. E se eu quiser voltar para que a lacuna vertical seja igual à horizontal, posso simplesmente selecionar essa exclusão, pressionar enter e elas voltarão a ser vinculadas uma à outra Agora, a diferença também pode ser um valor negativo. Então, vamos mudar isso de volta para um layout horizontal, e eu posso simplesmente arrastar isso até chegar a menos o que for, -100 Nesse caso, meus itens e meus elementos secundários estão se sobrepondo Eles estão empilhados um em cima do outro. E eu posso mudar essa lacuna do Canvas ou do inspetor, assim como mostrei anteriormente Agora, a lacuna também pode ser definida como automática. E aqui está o que isso faz. Então, um valor numérico basicamente definiremos a mesma quantidade de espaçamento entre os elementos secundários independentemente do tamanho do quadro principal Mas se eu definir isso como automático vá aqui no Inspetor, clique no menu suspenso e selecione Automático, ou clicando nas alças e digitando Ele faz exatamente a mesma coisa. Ele usa a maior distância possível entre os itens, independentemente do tamanho da moldura principal. Assim, posso redimensioná-lo assim, e o Figma adicionará automaticamente a mesma distância entre todos os itens Ele calculará isso em tempo real. Muito, muito legal. E também há um atalho de teclado muito útil para alternar entre a lacuna automática e a lacuna numérica Então, se você clicar na caixa de alinhamento aqui e pressionar x, isso vai alternar entre automático e um Agora, vamos passar para o preenchimento. E o preenchimento é basicamente o espaço entre os limites de uma moldura de layout automático e seus elementos secundários E para ilustrar isso, adicionei uma borda branca a essa moldura de layout automático Assim, você pode ver onde estão seus limites. E você pode adicionar preenchimento indo até o inspetor, você pode usar essas duas caixas Para adicionar preenchimento horizontal, que significa preenchimento esquerdo e direito, ou preenchimento vertical, que significa superior e inferior Como alternativa, você pode clicar na caixa aqui para alterar o preenchimento dessa forma, ou você pode usar as alças aqui no Canvas, desta forma, ou você pode clicar e inserir um valor manualmente Você também pode manter pressionada a opção ou a tecla antiga enquanto clica nessas alças para alterar os dois lados opostos ao mesmo tempo Então isso significa superior e inferior ou esquerda e direita. Se você também pressionar a tecla Shift, poderá mudar os quatro lados ao mesmo tempo. No inspetor, você também pode inserir dois valores aqui. Então, por exemplo, 5030, usaremos 50 de preenchimento para a esquerda, 30 A mesma coisa vale para o fundo. Dez, 20, usamos dez na parte superior, 20 na parte inferior. E você também pode clicar em Preenchimento individual, o que permitirá que você altere cada lado individual de acordo com sua preferência Como estamos aqui, você também pode manter pressionado o controle ou o comando e clicar em qualquer uma dessas caixas para alterar os quatro lados ao mesmo tempo inserindo o mesmo valor. Agora, vamos dar uma olhada em uma aplicação prática para GAAP e preenchimento E para esta lição, vamos recriá-lo outro layout a partir de um get pixel snap.com E vamos recriar essa primeira parte da seção de heróis, que tem o título, os dois botões e o texto de devolução do dinheiro em 30 dias Então, de volta à Figma, eu trouxe uma captura e também fiz algumas Eu criei algumas especificações de design. E eu recriei os elementos de texto e trouxe o ícone que vamos colocar aqui mesmo no segundo botão Por falar em botões, vamos começar por aí porque um botão é um dos principais casos de uso do layout automático. Isso é muito simples de criar e permitirá que o botão se redimensione conforme o texto interno muda Então, vamos realmente recriar esse primeiro botão que diz agora E precisamos adicionar um plano de fundo a ele, um gradiente linear. raio da borda altera a cor do texto para branco e também alteraremos seu preenchimento Então, vamos começar selecionando o botão até agora. Desloque A para adicioná-la a uma moldura de layout automático. E vamos adicionar o preenchimento necessário aqui. Ou, na verdade, você sabe o que? Não, vamos adicionar a cor de preenchimento. Então, vamos adicionar um gradiente linear aqui. Então, deixe-me ampliar aqui para que você possa ver o que estamos fazendo um pouco melhor. Então, vamos mudar a primeira cor que vai ser F E 84 B. segunda, vai ser FA 4567 Já que estamos aqui, mude a cor do texto para branco. E agora vamos mudar o preenchimento. Então, se olharmos as especificações muito rapidamente, temos 30 pixels Acolchoamento lateral ou horizontal e 14 acolchoamentos verticais Vamos também alterar o raio da borda para oito pixels, e nosso primeiro botão agora está completo Quão fácil foi isso? E, claro, se eu for alterar o texto aqui, agora ou, digamos, hoje, você pode ver o botão apenas um redimensionamento para caber no elemento de texto Vamos passar para o segundo botão. Isso é muito parecido, exceto que temos esse ícone. Então, vamos em frente e, primeiro de tudo, alinhá-los. Desloque A para adicionar os dois a um quadro de layout automático, e temos uma borda para adicionar aqui, então vamos fazer uma borda de dois pixels. E vamos também adicionar o preenchimento necessário, de modo que seja 30 na horizontal, 14 na vertical Vamos mudar o raio do canto para oito e vamos mudar a lacuna entre os itens para dez pixels, sem mais nem E esse é o nosso segundo botão completo. Agora, vamos passar para o resto do layout. Precisamos de uma lacuna de 30 pixels entre esses dois botões. Então, vamos criar um quadro com os dois. Selecione os dois, mude a posição A e, em seguida, altere a lacuna para 30 com facilidade. Agora, vamos definir uma lacuna de 40 pixels entre o texto e os dois botões. Então, vamos alinhá-los aproximadamente no meio. Selecione os dois turnos A e definiremos a lacuna em 30 pixels. E, finalmente, precisamos, oops, eram 40 pixels lá Desculpe. E, finalmente, precisamos definir uma lacuna de 55 pixels entre o título e esses outros elementos. Então, selecione tudo, Shift A e 55. Lá vamos nós. Esses foram posicionados perfeitamente Então, usando as técnicas de espaçamento bem como algumas outras técnicas que aprendemos anteriormente, pudemos recriar rapidamente esse layout Então, usamos o preenchimento para criar os dois botões e também usamos a propriedade GAP para definir o espaçamento entre todos os elementos em nosso layout, bem como o espaçamento entre o ícone e o texto dentro do E isso é tudo para espaçamento. Em seguida, você tem uma tarefa. 11. Assignment: como dominar o espaçamento de layout automático: Esta tarefa trata de dominar o espaçamento automático do layout , porque você trabalhará muito com preenchimentos e GAPS. Portanto, sua tarefa é recriar um layout do Estamos falando sobre essa primeira parte do layout do herói, que começa aqui e termina com esse texto de devolução do dinheiro em 30 dias. E para ajudá-lo, adicionei, como de costume, a captura de tela, algumas especificações de design e todos os elementos de texto Além disso, todos os ícones estão preparados para você junto com algumas instruções, aqui no lado esquerdo, que você pode escolher usar ou ignorar. Depende realmente de você. Agora, vá em frente e conclua esta tarefa porque é muito, muito importante E depois de fazer isso, junte-se a mim na próxima lição, onde falaremos sobre alinhamento. 12. Como obter o alinhamento perfeito: Antes de começarmos, há uma coisa importante que você precisa entender. Ou seja, você não pode controlar o alinhamento de objetos secundários separadamente. Em vez disso, você define o alinhamento na moldura principal. E aqui está o que quero dizer com isso. Aqui, temos três elementos. Desloque A para adicioná-los a um quadro de layout automático. E se olharmos no inspetor, temos a caixa de alinhamento. Atualmente, todos os três elementos estão configurados para se alinharem no canto superior esquerdo. E se eu fosse redimensionar essa moldura, e deixe-me mostrar uma visão geral aqui, alterando a opção de alinhamento, moveremos os três elementos na direção que eu quiser ou os alinharemos da maneira que E eu posso alinhá-los aos quatro lados. Então, em cima, na direita, no canto inferior esquerdo, canto superior esquerdo, no meio superior, no canto superior direito e assim por diante. Então, se eu quiser que eles fiquem bem no meio da minha moldura principal, tanto na horizontal quanto na vertical Eu só clico aqui no meio. Se eu quiser que fiquem à esquerda, mas verticalmente no meio, eu simplesmente faço isso. Você entendeu. Mas a ideia é que todos se movam ao mesmo tempo, estão agrupados Eles estão alinhados como um grupo e eu não posso mudar o alinhamento individualmente. Em qualquer um desses. Portanto, não posso ter esse primeiro elemento alinhado no canto superior esquerdo e esse outro elemento no canto superior direito Não funciona assim. E você tem essas nove opções de alinhamento praticamente o tempo todo, independentemente da direção em que seu quadro está definido Portanto, mesmo que esteja definido como layout vertical ou horizontal ou, um, p, você tem as mesmas nove direções que você pode escolher. Existem apenas diferenças sutis, por exemplo, ao configurá-lo para p, você terá um ícone diferente aqui. E os itens, você sabe, serão alinhados de forma um pouco diferente porque você pode estar lidando com várias linhas Mas na maioria das vezes você terá essas nove opções. Isso, é claro, até que você altere a diferença entre os itens de número para automático. Então, quando você faz isso, quando muda para automático, você não tem mais nove opções de alinhamento. Você só tem três opções de alinhamento. E, dependendo da direção do layout, eles podem ser no centro esquerdo ou direito em um layout vertical, ou na parte superior central ou inferior em um layout horizontal. E se você trocar isso por embrulho, então, você sabe, você tem duas lacunas, e as opções de alinhamento também mudam Agora, a qualquer momento, você pode clicar nessa caixa e usar as teclas de seta do teclado. Para mover o ponto ativo, por assim dizer. Então, atualmente, se eu pressionar para a direita, ele vai mover isso para a direita. Se eu pressionar da esquerda para a esquerda, cima para baixo, você obterá a foto. Você também pode pressionar WASD para movê-los para os cantos. Assim. E antes de passar para uma aplicação prática, quero falar rapidamente sobre outra opção de alinhamento , chamada linha de base do texto Portanto, quando você tem molduras de layout horizontais, cuidadosas, somente horizontais, você tem a opção de alinhar elementos de texto à E o que é uma linha de base? Bem, essencialmente, é nessa linha aqui que o texto está. OK. Então, aqui eu tenho dois elementos de texto de tamanhos diferentes. E se eu criar uma moldura de layout automático com eles, posso escolher alinhá-los da parte superior ao centro ou à parte inferior, mas nenhuma dessas opções realmente parece muito boa Eu gostaria de alinhar suas linhas de base. Está bem? E você pode fazer isso facilmente acessando as configurações avançadas de layout automático e marcando esta caixa aqui. E isso basicamente fará isso. Ele alinhará a linha de base do texto um com a linha de base do Muito, muito útil, e você está prestes a ver exatamente um caso de uso muito interessante para essa técnica Agora, vamos fazer uma aplicação prática. E para esta lição, recriaremos um layout do kineticlabs.com Mais especificamente, esta parte aqui que oferece informações sobre um determinado produto. Então, eu trouxe tudo para Figma. Como de costume, temos a captura de tela, junto com algumas especificações de design E eu também trouxe todas as imagens necessárias. Eu recriei os elementos do texto. E eu fui em frente e criei algumas molduras, como esse botão ou essa pilha de estrelas, só para economizar um pouco de tempo Dito isso, vamos recriar o layout usando as novas técnicas que aprendemos hoje sobre alinhamento Vamos começar do topo com essa parte. Quero minha pilha de estrelas, uma lacuna de um pixel, classificação, diferença de dez pixels e, em seguida, um link para as avaliações, e tudo tem que estar alinhado no meio Então, vamos fazer as estrelas, selecioná-las. Vamos garantir que o alinhamento aqui esteja definido como meio e vamos definir a lacuna como um E então vamos trazer as avaliações. Selecione os dois. Shift A. E, novamente, vamos garantir que o alinhamento esteja definido para o meio E vamos definir a lacuna em dez pixels. Então essa é a nossa primeira moldura maior feita. Agora, sempre que crio esses layouts complexos, eu sempre tento ver elementos com a mesma lacuna entre eles e, em seguida, agrupá-los em um quadro de layout automático Por exemplo, os primeiros três elementos meu layout têm a mesma lacuna entre eles, 16 pixels. Então pegue esses três, mude A, certifique-se de que estejam alinhados à esquerda Vou definir uma lacuna de 16 pixels. Vamos seguir em frente. Temos a lista aqui. Então, ícone e texto. E temos uma lacuna de oito pixels entre o ícone e texto e uma lacuna de dez pixels entre cada item da lista. Então, vamos trazer os ícones. Vamos duplicar isso. Traga o outro. Em seguida, selecione o primeiro, desloque A, alinhe ao meio, defina a lacuna Vamos fazer o mesmo com o segundo. Defina a lacuna e para esta. Em seguida, selecione todos os três, shift A. Certifique-se de alinhá-los à esquerda e definir uma lacuna de dez pixels Esse é o nosso segundo quadro completo. Vamos seguir em frente. Temos o preço e, em seguida, o pacote de 18. Não há espaço entre eles, mas eles estão bem alinhados usando a linha de base, a linha de base do texto Está bem? Então, selecione isso. Shift A, vou mudar o layout para horizontal, clique aqui e pressione B. Esse é o atalho de teclado para ativar e desativar o alinhamento do texto E vamos remover a lacuna aí. Então, esse é o quadro número três. seguir, vamos ver, temos essa quantidade de texto, que já está pronto, e então temos esses botões. Portanto, temos mais menos. Cada botão tem 48 pixels de tamanho circular e, com o ícone colocado exatamente no meio, temos um número entre eles e uma lacuna de 16 pixels. Então, vamos começar criando os botões. Agora, esses ícones aqui já são molduras, como você pode ver no painel de camadas, e eles contêm um vetor em seu interior. E como eles já são molduras, podemos adicionar o layout automático. Turno A. E no inspetor, eu vou mudar apenas a largura e a altura Vou alterar o raio da borda 2100 para torná-lo um círculo perfeito E então eu quero ter certeza de que o ícone está posicionado exatamente no centro, então eu vou clicar aqui E, finalmente, vou adicionar uma borda de um pixel dF dF D F. Vamos fazer o mesmo com o sinal de E então pegaremos o sinal de menos e o número. Selecione todos os três, shift A. Certifique-se de alinhá-los no meio E também vamos definir uma lacuna de 16 pixels. E essa é outra moldura pronta para ser usada. Depois disso, temos o botão, que já está feito, e ainda precisamos trabalhar na criação desses dois elementos aqui. Então, ícone, texto, texto do ícone. Oito pixels entre os 230 pixels entre os dois elementos maiores. Vamos trazer o ícone. Assim. E assim por diante. Selecione-os. Mude a tecla A, alinhe para o meio. Oito pixels, faça o mesmo aqui. E agora selecione os dois deslocamentos A, alinhe os dois ao meio e defina uma lacuna de 30 pixels Agora temos todos os quadros principais concluídos. Agora só precisamos juntá-los todos e definir o espaçamento adequado entre eles. Então, vamos começar do topo. Temos o primeiro quadro e depois 18 pixels e, em seguida, esta segunda seção. Então, selecione todos e alinhe-os à esquerda. 18 pixels. Em seguida, temos a lacuna de 22 pixels e o preço. E aqui, eu vou te mostrar um truque muito legal. Em vez de selecionar os dois e criar outro quadro com eles, apenas para que eu possa definir uma lacuna maior. Eu posso mover isso para dentro do quadro principal, posso empurrá-lo para baixo, e atualmente tenho uma lacuna de 18 pixels e preciso de 22. Assim, posso compensar os outros quatro pixels adicionando uma parte superior acolchoada a esse quadro Então, é mais ou menos assim. Eu seleciono a moldura, entro aqui e adiciono quatro pixels. Certo? Isso só adicionará quatro pixels de preenchimento acima, basicamente, do texto do preço E esses quatro pixels com os outros 18 que eu tenho da lacuna do quadro principal me levam a 22 pixels. Isso permite que você crie esses quadros de uma forma mais eficiente e não os complique com vários quadros aninhados Muito legal. Em seguida, temos uma lacuna de 25 pixels até o próximo item, que é essa quantidade. Então, eu posso simplesmente comandar X isso e colar. E como isso também é uma moldura, posso compensar o resto da diferença adicionando um preenchimento superior Então eu preciso de 25 pixels, e eu tenho 18 lacunas aqui. A diferença é o que são sete pixels, certo? Então selecione esse quadro, adicione sete pixels na parte superior. E então temos 16 pixels entre esse elemento e a linha de botões. É aqui que preciso selecionar esses dois elementos, deslocar a para criar outro quadro e, em seguida definir esse espaçamento para 16, porque é menor que 18, que definimos como uma lacuna para o quadro principal E como não posso usar preenchimento negativo para chegar a 16, tive que criar outro quadro com esses dois elementos Agora, vamos selecionar esses elementos, deslocar A para criar outro quadro com eles, alinhá-los ao meio e definir a lacuna em 16 pixels Isso só vai tornar as coisas um pouco mais fáceis para mim, porque agora preciso definir a lacuna entre isso e o resto em 32 pixels, como você pode ver aqui. Então, novamente, duas maneiras de fazer isso: selecionar ambas, selecionar ambas, criar uma nova moldura com elas ou colocar isso diretamente na moldura principal. Temos 16 pixels aqui, e eu preciso de outros 16. E como essa é uma moldura de layout automático, posso adicionar 16 na parte superior, e isso a empurrará para baixo apenas o suficiente. Então, visualmente, eu tenho essa lacuna de 32 pixels. Então aí está. É assim que você pode criar um layout um pouco mais complexo no Figma usando todo o alinhamento e todas as opções de espaçamento e preenchimento que aprendemos Agora, a próxima para você, há uma tarefa, então eu vou te ver lá 13. Aprovação: como obter o alinhamento perfeito: Essa tarefa consiste em se familiarizar com o alinhamento em quadros de layout automático É muito importante, então, por favor, não perca. Agora, sua tarefa é recriar um layout do aplicativo nucleo E é uma dessas seções da tabela de preços. Não é exatamente o que você vê no site ao vivo no momento. Eu tenho uma versão um pouco mais antiga. Aparentemente, o aplicativo nucleo mudou sua página de preços entre o momento em que fiz a captura de tela e o momento em que comecei a gravar, mas está tudo Você ainda pode praticar bastante , mesmo com essa versão desatualizada. Então, como sempre, incluí a captura de tela, as especificações de design e também todos os elementos de texto, os ícones, e também criei esse botão para você, para que você não precise mexer nos gradientes e tudo Além disso, incluí algumas instruções que você pode ignorar ou usar. Depende realmente de você. Então vá em frente e faça essa tarefa. Como eu disse, é muito importante e, quando terminar, vemos na próxima lição, que é sobre redimensionamento com layout automático 14. Redimensionamento com layout automático: Ao redimensionar com o layout automático, você pode controlar tanto o quadro principal quanto os elementos secundários E nesta lição, você aprenderá sobre as três opções de redimensionamento a seguir Abrace o conteúdo, fixe e encha o recipiente. Como bônus, discutiremos o tamanho mínimo máximo. Vamos começar com o conteúdo do Hug. Isso funciona somente no quadro principal e é o comportamento padrão. Então, se eu selecionar esses três elementos e adicionar o layout automático, Figma define o redimensionamento horizontal e vertical para abraçar, mais especificamente para abraçar mais especificamente Isso significa que a moldura é tão alta e tão larga quanto seu conteúdo. Isso significa que, se eu excluir um de seus elementos secundários, o quadro será redimensionado É muito menor, certo? Se eu adicioná-lo novamente, o quadro ficará maior. Agora, lembre-se de que o Figma fará isso mantendo o mesmo acolchoamento que eu Então, se eu mudar o preenchimento aqui para, digamos, 30 pixels, isso tornará o quadro tão grande e tão alto quanto os elementos secundários mais o preenchimento que eu configurei para Então, novamente, se eu excluir esse filho, o quadro ficará menor, mas também manterá esse preenchimento E se, em algum momento, eu tiver uma moldura configurada para saber, uma opção de redimensionamento diferente do conteúdo do abraço Sempre posso configurá-lo de volta para abraçar o conteúdo do inspetor Se eu clicar aqui, posso configurá-lo horizontalmente, ou posso configurá-lo verticalmente, ou na verdade, e essa é uma dica profissional, posso clicar duas vezes em uma borda horizontal para definir o redimensionamento horizontal para abraçar conteúdos como esse, ou posso clicar duas vezes em uma borda vertical ou posso Então, use as bordas superior e inferior, faça isso para definir o redimensionamento vertical para abraçar o Agora, se você quiser que sua moldura principal permaneça fixa, independentemente do tamanho dos elementos secundários, você precisa definir a opção de redimensionamento como fixa E você pode fazer isso de duas maneiras. Aqui, eu tenho uma moldura padrão que usa conteúdo de abraço e, para defini-la como fixa, posso alterar o tamanho da tela, você sabe, arrastando qualquer uma das E se olharmos no inspetor, agora, tanto o redimensionamento horizontal quanto o vertical estão definidos como fixo, ou se estiverem configurados para abraçar o conteúdo, posso inserir um valor manualmente, e isso o definirá automaticamente como E isso funciona, é claro, para ambas as direções. E um quadro definido como fixo não será redimensionado de acordo com seus elementos secundários Então, por exemplo, se eu fosse tornar esse elemento muito maior, você verá que a moldura, porque está definida como fixa, permanece exatamente do mesmo tamanho. Até agora, você aprendeu que conteúdo do Hug basicamente permite que uma moldura seja reduzida ou expandida conforme necessário para ajustar seu conteúdo ao tamanho dos elementos secundários Mas e se você quiser que um elemento secundário diminua ou se expanda para preencher todo o espaço disponível na moldura principal É quando você precisa usar o recipiente de enchimento. Agora, o recipiente de enchimento só funciona em elementos secundários. Então, vamos dar uma olhada neste quadro com duas caixas dentro. Cada um está configurado para uma dimensão fixa. Então, quando estou redimensionando esse quadro principal, nada acontece. Os elementos secundários permanecem exatamente no mesmo tamanho. No entanto, se eu selecionar um deles e definir, digamos, redimensionamento horizontal para preencher o contêiner, esse elemento filho agora ocupará todo o espaço disponível E o Figma leva em conta, é claro, o preenchimento dentro do elemento e também a lacuna em relação aos outros Além disso, se eu definir esse elemento como recipiente de preenchimento, esses dois elementos secundários terão exatamente o mesmo tamanho porque preencherão o recipiente em quantidades iguais. Ambos ocuparão a mesma quantidade de espaço. E se eu adicionar um terceiro, todos os três agora terão exatamente o mesmo tamanho porque estão prontos para encher o recipiente, então ocuparão a mesma quantidade de espaço. Também posso definir um elemento filho para encher o recipiente na direção vertical, sem mais nem menos. E isso significa que agora redimensionar esse quadro principal produzirá resultados totalmente diferentes dos que vimos antes Os elementos agora estão sendo redimensionados junto com a moldura principal E aqui está outra dica profissional para você aqui. Se você tiver um elemento filho selecionado, mantenha pressionada a tecla Option ou ult e clique duas vezes em uma de suas bordas. Por exemplo, essa borda inferior, que criará esse elemento ou definirá seu redimensionamento vertical para encher o recipiente Como alternativa, se estiver definido como fixo horizontalmente, digamos que, mantendo pressionada a tecla ult ou option e clicando duas vezes na borda direita ou esquerda, o item será configurado para encher o recipiente na direção horizontal Agora, o redimensionamento automático às vezes pode fazer com que um elemento quebre o layout se ele ficar muito grande ou muito pequeno. É por isso que você pode definir valores mínimos e máximos para largura e altura. E isso funciona tanto nos elementos secundários quanto nos quadros principais. E é muito simples de fazer. Digamos que eu queira permitir esse quadro seja redimensionado, mas não fique muito pequeno. Tipo, quando fica tão pequeno, não é bom. Eu queria ter pelo menos 400 pixels. Então, para fazer isso, você iria até o inspetor onde encontra a largura, clica no menu suspenso e adiciona uma largura mínima ou máxima Então, largura mínima, digamos 400, e vamos também adicionar uma largura máxima de 800. Então, agora, eu só posso redimensionar esse quadro principal 400-800, que são os limites que eu estabeleci para ele. Tudo bem É hora de uma aplicação prática sobre redimensionamento. E para esta lição, estamos recriando um layout a partir do ponto IO de chamada aérea Mais especificamente, essa aqui, toda essa tabela de preços. Então eu o trouxe para Figma. Como de costume, fiz uma captura de tela, fiz algumas E também recriei os elementos do texto, trouxe os ícones E por uma questão de tempo, eu já fiz algumas das seções mais complexas. Onde, você sabe, basicamente usamos técnicas que aprendemos nas aulas anteriores. Então, agora o que eu quero fazer é completar esse layout e mostrar algumas técnicas de redimensionamento que serão úteis Em primeiro lugar, basicamente temos duas metades aqui. Essa metade esquerda já está pronta. Ele tem um, na verdade, devemos configurá-lo como automático. Então, dependendo da altura aqui, esse botão sempre fica na parte inferior. Agora, quero que esse botão ocupe todo o espaço disponível. Então, vou clicar nele e definir seu redimensionamento horizontal para seu redimensionamento horizontal para encher o recipiente, desse jeito Em seguida, vamos para o lado direito onde temos esses separadores, essas linhas cinzas entre cada item Então, eu quero configurá-los para também preencher todo o espaço disponível. Então, na verdade, vou selecionar todos eles e criar um quadro de layout automático para alinhá-los à esquerda E vou selecionar cada item aqui e vou definir seu redimensionamento horizontal para encher o recipiente E isso inclui os próprios itens da lista, bem como os separadores E vamos realmente criar quantos separadores precisarmos simplesmente duplicando e alterando sua posição Precisamos definir essa lacuna de 32 pixels entre o título e a lista. Então, vamos fazer isso. Shift A. Vamos definir a lacuna aqui para 32 pixels. E então temos essa seção na parte inferior, que também deve ser redimensionada junto com todo o resto. Então, vamos selecionar esses dois turnos A. Não precisamos de nenhum tipo de espaçamento entre Então, vou selecionar esta seção, clique duas vezes com a tecla Alt para configurá-la para encher o recipiente. Selecione também essa ou a posição da moldura. Faça a mesma coisa, configure-o para encher o recipiente e, em seguida, faremos o mesmo com esses dois. Vamos configurá-los para encher em vez de cavar. Agora, quando eu redimensiono isso, as coisas começam a ficar bem, mas não exatamente Portanto, esta seção na parte inferior está boa, mas não a da parte superior. Então, vamos configurar este para encher o recipiente e, em seguida, vamos analisar o pedido e definir o resto. Isso é bom. Vamos também definir os elementos do texto. Vou apenas selecionar todos os elementos de texto e configurá-los para preencher o recipiente. Então, agora, quando estou redimensionando, tudo é redimensionado Isso inclui o separador, o texto e esses dois elementos na parte inferior Agora, vamos juntar esses dois. Eles fazem parte de uma moldura maior com fundo branco. Eu tenho um pouco de preenchimento aplicado a ele. Selecione os dois, shift A. E vamos aplicar primeiro o preenchimento, então temos é quatro e 48 E vamos fazer um preenchimento branco. Vamos fazer 24 para o raio da fronteira. E devemos estar prontos para ir. Agora, e a lacuna entre eles? Atualmente, fixado em 103. Vamos torná-lo um pouco menor, digamos 96, e vamos definir esses dois elementos para encher o recipiente. Então, eles ocupam quantidades iguais de espaço, e quando eu redimensiono esse quadro principal, esses elementos internos são redimensionados junto com Agora, há uma coisa que não é redimensionada. E essa é a primeira metade. E aqui eu tenho uma escolha. Também posso configurá-los para encher o recipiente. Mas talvez eu gostaria que eles ficassem exatamente como estão. Então, vamos definir uma largura máxima, ou desculpe, uma largura mínima na seção. Então, atualmente, está definido em 376 pixels. Vamos definir 300 e assim que seis pixels como a largura mínima para a seção. Isso significa que, quando estou redimensionando, ele não ficará abaixo desse valor E eu posso fazer o mesmo com o da direita. Posso dizer que talvez eu queira que tenham no mínimo 450 pixels. Então, agora o redimensionamento basicamente me dará isso. Tudo bem Então, foram muitas informações sobre um redimensionamento Espero que as demonstrações básicas e também este aplicativo prático todas as informações de que você precisa para entendê-lo muito melhor Agora, a seguir, temos uma tarefa, ou melhor, você tem uma tarefa 15. Assignment: redimensionamento com layout automático: O aspecto de redimensionamento do layout automático do Figma é provavelmente o aspecto mais complexo E é por isso que você deve realmente se familiarizar com isso. E para ajudá-lo com isso, aqui está uma tarefa na qual você pode praticar Você recriará um layout a partir do design do sistema de módulos e, se rolar até o fim, encontrará a seção de preços Portanto, esta é a seção que você recriará. um pouco mais complexo. Mas se você aplicar todas as técnicas que aprendeu até agora, tenho certeza de que não terá problemas com isso. Eu criei tudo o que você precisa. Eu trouxe a captura de tela, fiz as especificações de design e criei os elementos de texto e os ícones Obviamente, como sempre, você tem um conjunto de instruções que pode escolher usar ou ignorar. A escolha realmente depende de você. Agora, essa foi a tarefa final. Então, por favor, junte-se a mim na próxima lição para a conclusão e algumas reflexões finais. 16. Conclusão e considerações finais: D 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 esta aula e espero ver você na próxima. Mas até lá, vamos fazer uma rápida recapitulação do que aprendemos até agora Exploramos diferentes métodos de adicionar layout automático e organizar objetos dentro de molduras Descobrimos que os quadros de layout automático podem ser agrupados, o que é essencial para criar estruturas complexas Experimentamos o fluxo do layout, aprendendo sobre direção e posicionamento absoluto Nós dominamos as técnicas de espaçamento, incluindo a criação de espaços entre os itens e a adição de preenchimento ao redor deles. No final, exploramos minuciosamente todas as opções de alinhamento no layout automático FiCMA E, finalmente, aprendemos sobre as várias opções de redimensionamento e como usá-las para criar layouts dinâmicos Então, o que você deve fazer a seguir? Em primeiro lugar, eu realmente agradeceria se você deixasse um comentário para esta aula. Seu feedback é valioso e me ajudará a criar aulas melhores para você no futuro. Em segundo lugar, confira meu perfil e explore minhas outras aulas de Figma Você pode encontrar algo em que esteja interessado. Também administro um canal no YouTube onde compartilho conteúdo em um web design com foco no Figma e no Webflow Se você estiver interessado, fique à vontade para conferir. Você também pode entrar em contato comigo no X Instagram ou Facebook. Os links estão na minha página de perfil. Tudo bem. É hora de eu assinar. Obrigado novamente por assistir, e estou ansioso para ver você na minha próxima aula. Tchau por enquanto.