Auto layout no Figma é o recurso que organiza sozinho os objetos dentro de um quadro (frame) e faz o quadro crescer, encolher ou se reorganizar quando o conteúdo muda. Para usar, selecione uma ou mais camadas e pressione Shift + A, ou clique em Adicionar layout automático no painel direito. A partir daí você define a direção (vertical, horizontal ou grade), o espaçamento entre os itens, o espaçamento interno e como cada objeto se redimensiona.

Na interface em português, o Figma chama o recurso de “layout automático”, mas a busca e a maioria dos tutoriais usam o nome em inglês. É o mesmo recurso: o layout automático do Figma está disponível em todos os planos, inclusive o gratuito, para qualquer pessoa com acesso de editor ao arquivo, segundo o guia do layout automático na central de ajuda do Figma. Este guia mostra como usar auto layout no Figma passo a passo, com dois exemplos práticos, a diferença entre Envolver conteúdo, Preencher contêiner e Fixo, os atalhos e os erros que mais travam quem está começando.

Para que serve o auto layout no Figma

Sem auto layout, cada objeto de um quadro fica numa posição fixa. Se você troca o texto de um botão de “Enviar” para “Enviar proposta”, o texto passa da borda e você precisa redimensionar o fundo na mão. Com auto layout, o botão acompanha o texto.

Na prática, ele resolve quatro situações comuns em design de interface:

Para empresas, o ganho aparece na hora de mudar algo. Um design com auto layout bem montado aceita textos novos, tradução e itens extras sem que alguém refaça a tela. Ele também fica mais perto de como o desenvolvedor vai construir a página, porque a lógica é parecida com a do flexbox do CSS.

Como usar auto layout no Figma, passo a passo

  1. Selecione o que vai organizar. Pode ser um quadro vazio, um quadro com conteúdo, um componente ou várias camadas soltas. Se as camadas não estiverem num quadro, o Figma cria um quadro de layout automático ao redor delas, porque o recurso só funciona em quadros.
  2. Aplique o auto layout. Pressione Shift + A, clique em Adicionar layout automático no painel direito ou clique com o botão direito e escolha a mesma opção. O Figma tenta adivinhar a direção a partir da posição dos objetos.
  3. Confira a direção. Vertical empilha os objetos de cima para baixo (eixo Y). Horizontal coloca lado a lado (eixo X). Grade organiza em linhas e colunas.
  4. Defina o espaçamento entre os itens. Digite um valor, como 16, ou escolha Automático para distribuir os objetos pelo espaço disponível.
  5. Defina o espaçamento interno (padding). É a distância entre a borda do quadro e o conteúdo. Pode ser igual nos quatro lados ou diferente em cada um.
  6. Ajuste o alinhamento na caixa de alinhamento do painel direito, com nove posições quando o espaçamento é um número.
  7. Escolha como cada objeto se redimensiona: Envolver conteúdo, Preencher contêiner ou Fixo. Esse é o passo que define se o design é responsivo de verdade. A seção seguinte explica cada opção.

Para tirar o auto layout de um quadro, use Option + Shift + A no Mac ou Alt + Shift + A no Windows.

Exemplo 1: um botão que cresce com o texto

  1. Crie uma camada de texto com “Fale com a equipe”.
  2. Com o texto selecionado, pressione Shift + A. O Figma cria um quadro de layout automático em volta.
  3. No quadro, coloque espaçamento interno de 12 na vertical e 24 na horizontal, uma cor de preenchimento e cantos arredondados.
  4. Deixe largura e altura do quadro em Envolver conteúdo.
  5. Troque o texto para “Fale com a equipe comercial”. O botão cresce sozinho e mantém as margens.

Quer um ícone ao lado do texto? Arraste o ícone para dentro do quadro e use o indicador azul para escolher a posição. Com direção horizontal e espaçamento de 8 entre os itens, ícone e texto ficam sempre alinhados.

Exemplo 2: um card com título, texto e botão

  1. Monte o título, um parágrafo e o botão do exemplo anterior, um embaixo do outro.
  2. Selecione os três e pressione Shift + A. A direção deve ficar Vertical.
  3. Defina 12 de espaçamento entre os itens e 24 de espaçamento interno.
  4. Dê ao card uma largura Fixa, por exemplo 320.
  5. Selecione o parágrafo e mude a largura dele para Preencher contêiner. Assim o texto quebra linha dentro do card em vez de passar da borda.
  6. Teste: aumente a largura do card. O parágrafo acompanha e o botão continua do tamanho do próprio texto.

Esse card já é um quadro de layout automático dentro de outro (o botão). É assim que telas inteiras são montadas: auto layout aninhado, cada nível com a própria direção e os próprios espaçamentos.

Envolver conteúdo, Preencher contêiner e Fixo: qual usar

O redimensionamento é a parte que mais confunde e a que mais faz diferença. A documentação do Figma define assim cada opção:

Opção Onde pode ser usada O que faz Use quando
Envolver conteúdo (Hug) Só em quadros com auto layout O quadro fica do menor tamanho possível em volta dos filhos, respeitando o espaçamento interno Botões, etiquetas, chips
Preencher contêiner (Fill) Só em objetos dentro de um quadro com auto layout O objeto ocupa todo o espaço livre do quadro pai Textos de card, campos de formulário, colunas que dividem a largura
Fixo Em quadros e nos filhos O tamanho não muda, aconteça o que acontecer em volta Ícones, avatares, a largura de um card ou de uma tela
Mínimo e máximo Em quadros e nos filhos, junto com as outras opções Limita até onde o objeto pode crescer ou encolher Um botão que cresce até 280 px e não passa disso

Um exemplo numérico da própria documentação ajuda: um texto de 40 px num quadro com 10 px de espaçamento interno de cada lado gera um quadro de 60 px em Envolver conteúdo. Se o texto passar a ter 50 px, o quadro vai para 70 px.

Dois atalhos poupam cliques: clique duas vezes na borda da caixa de seleção de um objeto para defini-lo como Envolver conteúdo, e segure Option (Mac) ou Alt (Windows) enquanto clica duas vezes para defini-lo como Preencher contêiner.

Vertical, horizontal, quebra de linha e grade

Vertical e horizontal cobrem a maior parte dos casos. Nos dois, a opção Quebra de linha (Wrap) faz os objetos que não cabem passarem para a linha seguinte (no horizontal) ou para a coluna seguinte (no vertical), como uma lista de tags que se reorganiza conforme a largura. A documentação em inglês sobre os fluxos horizontal e vertical compara o vertical com quebra ao flexbox com flex-direction: column e flex-wrap: wrap.

Grade organiza os objetos em linhas e colunas fixas, e cada objeto pode ocupar mais de uma célula. Serve para galerias, painéis e layouts no estilo bento. Em novembro de 2026, a central de ajuda ainda marca a grade como beta aberto, então algumas opções de redimensionamento podem não estar disponíveis nela.

Quando o espaçamento entre os itens está em Automático, a mesma documentação lista três formas de distribuição: Between (padrão, sem espaço nas bordas), Evenly (espaços iguais entre os itens e nas bordas) e Around (espaços entre os itens com o dobro do tamanho das bordas). Elas equivalem a space-between, space-evenly e space-around do CSS, o que facilita a conversa com quem vai desenvolver o site.

Ignorar layout automático e restrições

Às vezes um objeto precisa ficar dentro do quadro, mas fora da fila: um selo de “Novo” no canto do card ou um botão de fechar. Para isso existe Ignorar layout automático, que antes se chamava Posição absoluta. Selecione o objeto filho e ative a opção no painel direito, ou arraste o objeto para dentro do quadro segurando Control.

O objeto que ignora o auto layout volta a aceitar restrições (como fixar no canto inferior direito). Os outros filhos de um quadro com auto layout não aceitam restrições: o comportamento deles é definido pelo redimensionamento. O próprio quadro com auto layout aceita restrições quando está dentro de um quadro comum.

Atalhos de auto layout no Figma

Ação Mac Windows
Adicionar layout automático Shift + A Shift + A
Sugerir layout automático Control + Shift + A Control + Alt + Shift + A
Remover layout automático Option + Shift + A Alt + Shift + A
Mesmo espaçamento interno nos quatro lados Command + clique no campo de espaçamento interno Ctrl + clique no campo de espaçamento interno
Duplicar um item dentro do auto layout Command + D Ctrl + D
Selecionar um objeto aninhado Command + clique Ctrl + clique

Com a caixa de alinhamento selecionada no painel direito, as setas mudam o alinhamento, W, A, S e D alinham à borda, X alterna entre espaçamento numérico e Automático e B liga o alinhamento pela linha de base do texto. No campo de espaçamento interno, dá para digitar no formato do CSS: “1,2,3,4” define cima, direita, baixo e esquerda.

Sugerir layout automático analisa um quadro e cria de uma vez todos os quadros de auto layout que achar necessários. O Figma recomenda usar em designs moderadamente complexos, como cards, barras de navegação e telas de celular, e em partes quando o design for grande, como um site inteiro, segundo o artigo Adicionar layout automático a um design. Revise o resultado: nem sempre ele escolhe a direção que você queria.

Por que o auto layout não funciona: erros comuns

O que acontece Causa provável Como resolver
O quadro parou de envolver o conteúdo Algum filho está em Preencher contêiner, e aí o pai passa a ser Fixo naquele eixo Volte o filho para Fixo ou Envolver conteúdo, ou defina a largura do pai de propósito
O texto passa da borda ou sobrepõe outros itens A camada de texto tem tamanho fixo Mude a largura do texto para Preencher contêiner ou deixe o texto com largura automática
Não consigo soltar um objeto dentro do quadro O objeto é maior que o quadro pai em alguma dimensão Segure Command (Mac) ou Ctrl (Windows) ao arrastar
As opções de restrição sumiram Objetos dentro de auto layout não aceitam restrições Use o redimensionamento ou ative Ignorar layout automático naquele objeto
Não consigo reordenar nem apagar itens Você está numa instância, não no componente principal Faça a mudança no componente principal; apagar na instância só oculta a camada
O espaçamento mudou depois de pôr uma borda Bordas internas entram no cálculo do tamanho por padrão Nas configurações do auto layout, mude a opção de borda interna (Inside stroke) para excluída do layout
Ocultei um item e os outros andaram para ocupar o lugar Ocultar uma camada tira ela do fluxo do auto layout Para manter o espaço vazio, deixe a opacidade da camada em 0% em vez de ocultar

Um cuidado com componentes: o auto layout precisa ser adicionado em cada componente, um por um. Em instâncias dá para mudar espaçamentos, mas não reordenar nem adicionar camadas, segundo a tabela de componentes e instâncias da central de ajuda.

Do Figma para o site

Um arquivo bem montado em auto layout costuma encurtar a passagem do design para o desenvolvimento, porque espaçamento entre itens, espaçamento interno e distribuição têm equivalente direto no CSS. Se você está organizando o projeto de um site novo, o briefing para criação de site ajuda a definir conteúdo e páginas antes de abrir o Figma. Para mais dicas curtas de design e marketing para empresas, a Iglu publica conteúdo no Instagram da Iglu.

Perguntas frequentes

Para que serve o auto layout no Figma? Serve para criar designs que se ajustam sozinhos quando o conteúdo muda. Botões crescem com o texto, listas se reorganizam quando você adiciona ou remove itens e telas se adaptam a larguras diferentes, sem reposicionar nada à mão.

Qual é o atalho do auto layout no Figma? Shift + A adiciona o auto layout, no Mac e no Windows. Para remover, use Option + Shift + A no Mac ou Alt + Shift + A no Windows. Sugerir layout automático é Control + Shift + A no Mac e Control + Alt + Shift + A no Windows.

O auto layout do Figma é gratuito? Sim. A central de ajuda do Figma informa que o layout automático está disponível em todos os planos, inclusive o gratuito. Basta ter acesso de editor ao arquivo.

Qual a diferença entre auto layout e restrições? Restrições definem como um objeto se comporta quando o quadro comum em volta dele muda de tamanho. O auto layout organiza os objetos em fila ou grade e controla o tamanho pelo redimensionamento. Dentro de um quadro com auto layout, só os objetos com Ignorar layout automático aceitam restrições.

Como colocar auto layout em português no Figma? Não é preciso mudar nada: na interface em português, o recurso aparece como “layout automático”, com as mesmas funções e o mesmo atalho Shift + A.

Próximo passo

Abra um arquivo, crie o botão do primeiro exemplo e depois o card do segundo. Em dez minutos você vê na prática a diferença entre Envolver conteúdo, Preencher contêiner e Fixo, que é o que separa um design que quebra de um que se adapta. Para acompanhar mais conteúdo de design e marketing para empresas, siga o Instagram da Iglu.

Siga também a Iglu no LinkedIn e o André Lug, fundador da Iglu, no Instagram.