Guia definitivo para layout automático no Figma
Um guia prático para o Auto Layout do Figma: criando um cartão de produto, um formulário de envio e uma página inteira com ele
27 de novembro de 2025
19 min
Conteúdo:
O que é o layout automático
O Auto Layout é a ferramenta do Figma para organizar e espaçar automaticamente os elementos dentro de um grupo com base nas regras definidas por você. Se você alterar algo, como o comprimento do texto ou o tamanho da imagem, tudo o mais será ajustado automaticamente, sem que você precise fazer ajustes manuais.
Em vez de especificar valores exatos para várias configurações, você define regras:
- Fluxo ( anteriormente chamado de Direção): Horizontal, vertical ou quebrar para uma nova linha.
- Gap: Espaçamento entre itens e preenchimento dentro do quadro pai.
- Alinhamento e distribuição de elementos filhos.
- Comportamento de redimensionamento (Ajustar, Fixo, Preencher): para fazer com que os componentes aumentem ou diminuam de tamanho de acordo com o conteúdo.
Como adicionar layout automático no Figma
Atalhos do Auto Layout:
- Shift + A — aplicar Layout Automático.
- Shift + Alt/Option + A — remover o Layout Automático.
- Ctrl/Cmd + Shift + G — desagrupar elementos.
- Ctrl/Cmd + D — duplicar (clonar) um quadro de Auto Layout.
Você pode aplicar o Auto Layout a um único quadro — que pode conter vários elementos, como texto, formas e imagens — ou a uma seleção de elementos; o Figma os envolverá em um novo quadro Auto Layout automaticamente. Exemplos de onde o Auto Layout pode ser aplicado:
Vamos ver o Auto Layout em ação com frames. Crie dois frames, selecione-os e clique no botão “Usar Auto Layout” ou pressione Shift + A.
- Estrutura (única)
- Moldura + Moldura
- Elemento + Elemento (o Figma irá envolvê-los em um novo quadro)
Vamos ver o Auto Layout em ação com frames. Crie dois frames, selecione-os e clique no botão “Usar Auto Layout” ou pressione Shift + A.
Você pode encontrar a configuração Auto Layout na barra lateral direita do inspetor quando um quadro ou seleção estiver ativo.
Para verificar se o Layout automático foi aplicado, abra o painel Camadas. Um ícone de Layout automático aparecerá ao lado do nome do quadro, e os quadros selecionados serão agrupados em um único quadro de Layout automático.
O painel Camadas está localizado à esquerda. Você também pode abri-lo usando o atalho Opt/Ctrl + 1.
Se você já tiver um quadro com elementos dentro, ainda poderá aplicar o Auto Layout. Depois disso, não será necessário ajustar o tamanho do quadro manualmente — basta definir os preenchimentos e o espaçamento, e o quadro será redimensionado automaticamente para se ajustar ao seu conteúdo.
Auto Layout em ação: se você redimensionar o retângulo verde, a moldura se ajustará automaticamente ao novo tamanho.
Principais propriedades do layout automático
Vamos revisar as principais configurações do Auto Layout e como elas se comportam em layouts responsivos. Você encontrará esses controles no painel direito quando um elemento com o Auto Layout ativado for selecionado.
Fluxo
O fluxo define como os elementos se comportam quando não há espaço suficiente dentro de um quadro de layout automático. Essa configuração permite escolher se os objetos permanecem em uma única linha/coluna ou se passam automaticamente para a próxima linha quando o quadro fica sem espaço.
1
Forma livre: você pode mover elementos para qualquer lugar dentro do quadro. Embora essa opção apareça em Layout automático, ela efetivamente desativa o Layout automático para esses elementos.
Forma livre — posicione os elementos livremente (desativa o Layout automático).
2
Vertical: Os elementos são colocados um abaixo do outro.
Os objetos são empilhados automaticamente em uma coluna.
3
Horizontal: Os objetos são alinhados horizontalmente. Neste modo, aparece uma configuração adicional — Quebrar. Ela determina se os elementos ultrapassam o quadro (e são cortados) ou quebram para a próxima linha quando o espaço se esgota.
Layout horizontal com quebra automática desativada.
Layout horizontal com quebra automática ativada.
4
Grade: um novo modo que posiciona automaticamente os elementos em uma grade. Um painel Grade é exibido para que você possa personalizar a grade, e os elementos são atualizados automaticamente quando você a altera.
Quando você altera a grade, os elementos se ajustam automaticamente a ela.
Redimensionamento
Esta seção contém controles W (largura) e H (altura). Eles definem a largura e a altura de todo o quadro com o Layout Automático aplicado.
Você pode escolher entre dois modos:
- Corrigido: A largura e a altura do quadro permanecem inalteradas, independentemente de outras configurações ou dos tamanhos dos itens dentro dele.
- Ajustar ao conteúdo: A largura e a altura do quadro são ajustadas com base no preenchimento configurado e nos tamanhos dos itens dentro dele.
Quando o Hug está ativado, alterar o espaçamento entre os quadrados faz com que a moldura aumente ou diminua.
Lacuna
Esta configuração controla o espaçamento entre os itens dentro de um Layout Automático. Você pode definir espaços horizontais e verticais independentemente.
Exemplo: O espaçamento vertical e horizontal entre os quadrados dentro do Layout Automático é de 40 px.
Alinhamento
Essa configuração controla como os elementos dentro de um Layout Automático são alinhados — à esquerda, à direita, no centro, na parte superior ou na parte inferior. Ela fica disponível quando o Fluxo do layout é definido como Horizontal ou Vertical.
Se a opção Wrap estiver ativada, o Alinhamento também determina como as linhas/colunas irregulares são posicionadas. Por exemplo, o quadrado roxo pode ficar no centro por padrão, mas você pode fixá-lo à esquerda ou à direita.
Acolchoamento
Essa configuração controla o espaçamento entre as bordas do quadro e seu conteúdo. O preenchimento pode ser definido individualmente para cada lado. Quaisquer novos elementos adicionados serão ajustados no lugar e respeitarão essas configurações de preenchimento.
Configurações adicionais
Várias configurações adicionais estão disponíveis para o Layout Automático. Vamos examinar cada uma delas.
Para acessar outras configurações, clique em “Configurações de layout automático” em “Layout automático”.
1
Traços: O contorno em torno de um quadro ou elemento. Você pode escolher se o contorno será colocado dentro ou fora das bordas do elemento.
Esta é a aparência do quadro com o traço ativado e desativado.
2
Empilhamento de telas: definecomo os elementos se sobrepõem quando há um espaço negativo. Escolha se o primeiro ou o último elemento deve ser colocado na frente.
Essa configuração não está disponível quando o layout está definido como Grade.
3
Alinhar linha de base do texto: Alinha os elementos de texto ao longo da mesma linha de base.
Essa configuração não está disponível quando o layout está definido como Grade.
Quando ativado, os elementos de texto se alinham perfeitamente na linha de base.
Exemplos de casos de uso
Sejamos honestos: todos esses termos podem parecer complicados. Sem prática, eles não ficam na cabeça e não fazem muito sentido. Então, em vez de memorizar a teoria, vamos ver o Auto Layout em ação. Criaremos três elementos comuns da interface: um botão, um cartão de produto e um formulário de inscrição.
Se você ainda não conhece as soluções sem código, use este código promocional exclusivo para obter um mês do Tilda Personal Plan em vez da avaliação padrão de duas semanas.
Consulte as instruções sobre como ativá-lo
Botão
Vamos criar um botão usando uma moldura e uma camada de texto. Normalmente, você ajustaria manualmente a largura da moldura para corresponder ao comprimento do texto. Mas o que acontece se o texto ficar mais longo? Você teria que redimensionar a moldura novamente. E se sua interface ou site tiver muitos botões, isso rapidamente se torna demorado.
Como você pode ver, quando o comprimento do texto excede o quadro, você precisa ajustar manualmente o segundo botão.
Vamos ativar o Auto Layout para reduzir os ajustes manuais.
- Aplique o Layout Automático ao quadro (Shift + A).
- Defina Hug para que a largura do botão se adapte ao comprimento do texto.
- Ajuste o preenchimento para que o texto não fique colado às bordas do quadro.
Com o Layout automático ativado, o botão se ajusta automaticamente ao comprimento da legenda.
Ficha do produto
Os cartões de produto são usados com mais frequência em lojas online. Podem existir centenas ou mesmo milhares deles. Cada cartão contém títulos e descrições de diferentes comprimentos, além de imagens de diferentes tamanhos.
Com o Layout Automático, você pode simplesmente substituir textos e imagens — tudo o mais se ajusta automaticamente.
Um cartão sem layout automático: com uma pequena quantidade de texto, tudo parece estar bem.
Mas se o texto ficar mais longo, parte do conteúdo ficará fora do cartão.
Dentro do cartão, diferentes elementos requerem espaçamentos diferentes:
• o espaço entre o título e a descrição é um valor.
• o espaço entre o texto e a imagem é outro.
Para fazer com que o cartão seja redimensionado automaticamente, vamos criá-lo usando várias camadas de Auto Layout.
• o espaço entre o título e a descrição é um valor.
• o espaço entre o texto e a imagem é outro.
Para fazer com que o cartão seja redimensionado automaticamente, vamos criá-lo usando várias camadas de Auto Layout.
1
Comece aplicando o Layout Automático à camada do título e da descrição. Defina um fluxo vertical e um espaço de 12 pixels para que a altura se ajuste automaticamente a diferentes comprimentos de texto.
2
Em seguida, aplique o Layout Automático aos elementos de imagem e texto juntos. Isso permite que o cartão se adapte a imagens de tamanhos diferentes. Adicione preenchimento ao redor do cartão e defina a cor de fundo como branca.
Agora você pode substituir a imagem ou adicionar um texto mais longo — o Figma ajusta automaticamente a altura do cartão.
Quando adicionamos outra linha de texto, o cartão se reajusta e nada se quebra.
Formulário de contato/envio
Um formulário em um site geralmente inclui vários campos de entrada e um botão. No entanto, se você redimensionar o quadro, os campos não se esticarão automaticamente e o espaçamento entre eles poderá ser quebrado.
Um formulário sem Auto Layout: os campos não se estendem e nada se ajusta automaticamente.
Agora vamos aplicar tudo o que aprendemos e criar um formulário com três campos de entrada padrão.
1
Adicione um rótulo de campo e um quadro que funcionará como entrada.
Rótulo do campo de entrada futuro e o elemento que atuará como entrada.
2
Aplique o Layout automático e defina o Fluxo como Horizontal. Dê ao rótulo uma largura fixa para que todos os nomes dos campos fiquem alinhados corretamente. Defina a largura do campo de entrada como Preencher — dessa forma, quando você redimensionar o contêiner, o campo de entrada se ajustará automaticamente à sua largura.
3
Duplique o campo mais duas vezes (por exemplo, Sobrenome e E-mail).
4
Selecione os três campos, agrupe-os e aplique o Layout Automático novamente. Defina a largura do grupo como Preencher. Agora, quando você redimensionar o contêiner do formulário, os campos internos serão ajustados automaticamente.
O formulário está pronto. Adicione quantos campos forem necessários e coloque o botão Enviar abaixo — assim como fizemos anteriormente.
Criando um layout “fluido” com o Auto Layout
O Auto Layout permite criar páginas web inteiras com espaçamento que se ajusta automaticamente. Comece definindo a distância entre o título e a descrição e, em seguida, adicione espaçamento abaixo da imagem, do botão e do restante do quadro. Passo a passo, você obterá um layout totalmente automatizado no Figma.
Ao criar qualquer layout, é muito conveniente quando o conteúdo se adapta automaticamente a diferentes tamanhos de tela. Isso é o que costuma ser chamado de design responsivo. Para conseguir isso, precisamos criar um layout fluido.
Para este exemplo, vamos pegar nosso cartão de produto, duplicá-lo duas vezes e alinhar os três cartões a uma grade. Isso fará com que eles se adaptem à largura do quadro.
1
Primeiro, crie uma moldura e, em seguida, adicione uma grade de 12 colunas.
2
Adicione três cartões de produto e posicione-os de forma que cada um ocupe quatro colunas.
3
Para cada contêiner de cartão, defina a largura como Preencher para que os cartões se estendam quando você redimensionar o contêiner principal.
4
Para o contêiner que contém os três cartões, defina uma largura fixa. Nas configurações de Restrições, escolha a opção “L + R” para que o layout se estenda com a largura do quadro.
Agora você pode substituir ou adicionar rapidamente qualquer elemento e até mesmo redimensionar o quadro principal. Todos os elementos se ajustarão automaticamente à sua largura.
Tenha em mente que, no Figma, a largura e as restrições de um elemento estão conectadas, e algumas combinações não funcionam juntas.
Se você definir a largura de um quadro de layout automático como “Ajustar ao conteúdo”, ele será redimensionado com base no conteúdo interno. Mas se uma camada dentro desse quadro usar restrições “Esquerda + Direita”, ela se estenderá de um lado ao outro do contêiner pai. Essas duas configurações se contradizem: no primeiro caso, o conteúdo determina o tamanho e, no segundo, o contêiner. Quando isso acontece, o Figma prioriza automaticamente uma das configurações.
Se você precisar que um elemento se estenda junto com sua moldura pai (como no exemplo anterior com cartões de produto), primeiro dê ao elemento uma largura fixa. Em seguida, você pode ativar as restrições “Esquerda + Direita” e ele será redimensionado corretamente junto com o pai.
Se você definir a largura de um quadro de layout automático como “Ajustar ao conteúdo”, ele será redimensionado com base no conteúdo interno. Mas se uma camada dentro desse quadro usar restrições “Esquerda + Direita”, ela se estenderá de um lado ao outro do contêiner pai. Essas duas configurações se contradizem: no primeiro caso, o conteúdo determina o tamanho e, no segundo, o contêiner. Quando isso acontece, o Figma prioriza automaticamente uma das configurações.
Se você precisar que um elemento se estenda junto com sua moldura pai (como no exemplo anterior com cartões de produto), primeiro dê ao elemento uma largura fixa. Em seguida, você pode ativar as restrições “Esquerda + Direita” e ele será redimensionado corretamente junto com o pai.
Como ignorar as propriedades de layout automático (posicionamento absoluto)
E se você precisar adicionar um pequeno elemento, como uma etiqueta de desconto ou um botão “Adicionar aos favoritos”, dentro de um cartão de produto que usa o Layout Automático?
Nesse caso, a configuração de posicionamento absoluto é a solução. Ela permite que você posicione livremente um elemento dentro de um quadro de layout automático, ignorando as regras de layout aplicadas aos outros elementos. Essa opção fica disponível assim que você ativar “Ignorar layout automático”.
Vamos examinar mais de perto um exemplo em que precisamos adicionar uma pequena etiqueta de desconto a um cartão de produto.
1
Primeiro, crie a etiqueta de desconto.
2
Adicione-o ao cartão do produto. Se você simplesmente soltá-lo dentro da moldura do Layout Automático, ele será reajustado com base nas regras de layout existentes e aparecerá em algum lugar entre os outros elementos.
3
Ative a opção “Ignorar layout automático”. Agora você pode posicionar a etiqueta onde quiser.
A configuração de posicionamento absoluto substitui o layout automático, permitindo que você coloque os elementos onde quiser, por exemplo, bem em cima da imagem do produto.
Perguntas frequentes: Principais nuances de uso do layout automático
Como remover todo o Auto Layout
Você pode remover o Auto Layout usando o mesmo botão da barra de ferramentas que usou para aplicá-lo. Você também pode usar o atalho Shift + Option + A no Mac ou Shift + Alt + A no Windows. Isso alterna o quadro do Auto Layout de volta para um quadro normal.
Se você quiser desagrupar elementos individuais que estão agrupados, pode usar o atalho Cmd/Ctrl + Shift + G.
Quando usar o Layout Automático
- Você precisa de elementos para manter um espaçamento consistente. Exemplo: um botão com ícones e texto.
- Você precisa atualizar o conteúdo regularmente. Exemplo: uma lista de serviços com um número variável de itens.
- Você precisa que seu layout seja totalmente responsivo em diferentes tamanhos de tela. Exemplo: projetar uma página com versões para desktop e dispositivos móveis.
- Você costuma modificar a estrutura. Exemplo: itens de menu que você adiciona ou remove com frequência.
- Você usa muitos elementos de design repetitivos. Exemplo: cabeçalhos e rodapés que aparecem em várias páginas.
Por que a opção Preencher contêiner está disponível para alguns elementos, mas não para outros?
A opção Redimensionar contêiner de preenchimento aparece apenas para elementos colocados dentro de um quadro de layout automático. Isso ocorre porque “Preencher contêiner” instrui o elemento filho a aumentar ou diminuir de acordo com a lógica do layout automático pai.
Não é possível definir Preencher contêiner em um quadro de nível superior ou em qualquer elemento que não esteja dentro de um quadro de Layout automático, pois não há nenhum pai de Layout automático cujo espaço o elemento possa “preencher”.
Quando não usar o Layout Automático
O Auto Layout nem sempre é necessário. Por exemplo, se você estiver criando algo simples, como um banner único que não pretende reutilizar, não há necessidade de configurar regras automáticas de espaçamento ou layout. Você só precisa colocar o título e a imagem dentro do quadro uma vez, a distâncias fixas. Configurar o Auto Layout para um layout que você nunca modificará ou repetirá não oferece nenhum benefício real.
Um banner simples como este não precisa realmente de Auto Layout.
Se você gostou do artigo, compartilhe-o com seus amigos. Obrigado!
Leia também:
Livro de curso gratuito sobre como projetar, configurar e executar páginas de destino de alta conversão em
Guia prático gratuito para animação na Web com exemplos e técnicas,
e dicas sobre como usá-los
