Auto Layout no Figma: como usar na prática

Auto Layout é um dos recursos que mais muda a forma de trabalhar no Figma. No começo, muita gente monta telas posicionando cada elemento manualmente e ajustando tudo “no olho”. Isso funciona enquanto o projeto é pequeno, mas começa a dar problema quando o conteúdo muda, surgem novas telas ou é preciso reaproveitar os mesmos elementos em diferentes situações.

É justamente aí que o Auto Layout faz diferença.

Com ele, você consegue criar estruturas que seguem regras de alinhamento, espaçamento e dimensionamento. Em vez de reposicionar cada item sempre que alguma coisa muda, o próprio layout se reorganiza de acordo com as configurações definidas.

O Figma descreve o Auto Layout como um recurso que permite criar designs que respondem dinamicamente às mudanças de conteúdo e se tornam mais adaptáveis.

Na prática, isso ajuda a construir botões que crescem conforme o texto, cards que se adaptam ao conteúdo, listas com espaçamentos consistentes e componentes que funcionam melhor em diferentes contextos.

Se você ainda está começando na ferramenta, vale ler primeiro o guia sobre como aprender Figma do zero. Para uma explicação mais direta do conceito, consulte também o verbete Auto Layout no Dicionário de Design da 4ED.

O que é Auto Layout no Figma?

Auto Layout é um sistema de organização aplicado a frames e outros elementos para definir como o conteúdo deve se comportar dentro de uma estrutura.

Pense em um botão com um texto dentro. Se você montar esse botão manualmente, talvez precise aumentar sua largura sempre que trocar “Entrar” por “Criar minha conta”, por exemplo. Também será necessário conferir novamente o espaçamento entre o texto e as bordas.

Com Auto Layout, você define essas regras uma vez. O botão passa a se adaptar ao conteúdo sem exigir que você refaça todos os ajustes.

Essa mesma lógica pode ser usada em estruturas muito maiores. Um card pode crescer quando recebe mais texto, uma lista pode manter o mesmo espaço entre seus itens e um menu pode reorganizar o conteúdo de forma mais previsível.

Por isso, Auto Layout não serve apenas para “deixar tudo alinhado”. Ele ajuda a construir interfaces que lidam melhor com mudanças.

Por que aprender Auto Layout?

Quando você está criando uma única tela para um exercício, pode parecer mais rápido posicionar tudo manualmente. O problema aparece quando o projeto precisa mudar.

Imagine que você criou dez cards e depois decidiu alterar o espaçamento interno de todos eles. Se cada card foi montado de uma forma diferente, o ajuste se torna demorado e sujeito a inconsistências.

Com uma estrutura bem organizada em Auto Layout, você consegue controlar melhor essas relações.

Isso também melhora o trabalho com componentes. Botões, campos, cards, menus e outros elementos reutilizáveis funcionam muito melhor quando o tamanho e o espaçamento não dependem de ajustes manuais a cada uso.

É por isso que Auto Layout aparece tão cedo no aprendizado profissional de Figma. Ele muda a lógica do arquivo: você deixa de pensar apenas na posição exata de cada camada e começa a pensar em como os elementos devem se relacionar.

Como aplicar Auto Layout no Figma

Você pode aplicar Auto Layout a um conjunto de elementos selecionados ou a um frame. O atalho mais conhecido para isso é Shift + A.

Ao ativar o recurso, o Figma cria uma estrutura com propriedades próprias de layout. A partir daí, você consegue controlar como os elementos se distribuem, o espaço entre eles e o espaço entre o conteúdo e as bordas do frame.

A documentação atual do Figma trabalha com diferentes fluxos de Auto Layout, incluindo estruturas horizontais, verticais e também grid.

Para quem está começando, o mais importante é entender primeiro os fluxos horizontal e vertical. Eles aparecem o tempo todo em interfaces.

Uma lista de produtos, por exemplo, normalmente organiza seus itens verticalmente. Já um grupo de botões lado a lado pode usar um fluxo horizontal.

Depois que você entende essa lógica básica, fica mais fácil combinar diferentes Auto Layouts dentro de uma mesma interface.

Entenda a direção dos elementos

Imagine três elementos dentro de um mesmo frame.

Se o fluxo estiver configurado verticalmente, eles ficam organizados um abaixo do outro. Se estiver horizontalmente, aparecem lado a lado.

Parece simples, mas essa decisão está na base de estruturas muito mais complexas.

Um card de produto pode ter um Auto Layout vertical para organizar imagem, título, preço e botão. Dentro dele, outra estrutura horizontal pode colocar preço e desconto lado a lado.

É comum usar vários Auto Layouts encaixados uns dentro dos outros.

Essa combinação é uma das chaves para construir interfaces mais flexíveis. Em vez de pensar em uma tela como um conjunto de objetos soltos, você passa a enxergá-la como uma composição de pequenos grupos que seguem regras próprias.

O que é padding no Auto Layout?

Padding é o espaço entre o conteúdo e as bordas do elemento que contém esse conteúdo.

Voltando ao exemplo do botão, imagine que o texto “Entrar” esteja dentro de um frame. O padding define quanto espaço existe entre esse texto e as bordas do botão.

Você pode controlar esse espaço em diferentes lados e criar uma área interna mais confortável visualmente.

Esse conceito também vale para cards, menus, caixas de mensagem e muitos outros elementos.

A documentação do Figma permite controlar o padding de forma uniforme ou ajustar lados individualmente, dependendo da necessidade da estrutura.

Uma boa forma de entender padding é pensar que ele define o “respiro interno” de um componente.

Quando esse espaço não segue uma lógica, a interface começa a parecer irregular, mesmo que seja difícil identificar imediatamente o motivo.

E o espaço entre os elementos?

Além do espaço interno, o Auto Layout permite controlar a distância entre os itens de uma estrutura.

Imagine uma lista com título, descrição e botão. Você pode definir um espaço específico entre esses elementos e manter essa relação mesmo quando o conteúdo muda.

Esse controle evita um problema comum em arquivos montados manualmente: pequenas diferenças de espaçamento entre elementos semelhantes.

Em vez de mover cada item individualmente, você define uma regra para o grupo.

Quando precisa alterar o ritmo visual da interface, ajusta essa relação de forma mais previsível.

O que significam Hug contents e Fill container?

Esses dois comportamentos costumam confundir quem está aprendendo Auto Layout.

A melhor forma de entendê-los é observar o que deve controlar o tamanho do elemento.

Com Hug contents, o elemento acompanha o tamanho do próprio conteúdo.

Pense novamente em um botão. Se o texto aumenta, o botão também cresce para acomodá-lo, respeitando o padding que você definiu.

Esse comportamento é útil quando o conteúdo deve determinar o tamanho da estrutura.

Já Fill container faz o elemento ocupar o espaço disponível dentro do contêiner em que está inserido.

Imagine dois campos lado a lado dentro de uma área maior. Dependendo da estrutura, você pode querer que ambos cresçam para preencher o espaço disponível.

A diferença parece técnica no começo, mas fica intuitiva com a prática.

Uma boa pergunta para fazer é: quem deve controlar o tamanho aqui? O conteúdo ou o espaço disponível?

A resposta costuma indicar qual comportamento faz mais sentido.

Um exemplo simples: criando um botão com Auto Layout

Um botão é um bom exercício para entender Auto Layout porque reúne vários conceitos em uma estrutura pequena.

Comece com uma camada de texto, como “Continuar”. Em vez de desenhar um retângulo atrás do texto e ajustar tudo manualmente, selecione a camada e aplique Auto Layout.

O Figma cria uma estrutura ao redor do conteúdo. A partir daí, você pode definir o padding horizontal e vertical, aplicar uma cor de fundo e ajustar o raio das bordas.

Agora altere o texto para algo maior, como “Continuar para pagamento”.

Se a estrutura estiver configurada corretamente, o botão aumenta para acomodar o novo conteúdo sem que você precise redimensioná-lo manualmente.

Esse pequeno exemplo mostra uma das principais vantagens do recurso: a interface passa a responder às mudanças em vez de depender de correções constantes.

O próprio material introdutório oficial do Figma usa um botão responsivo para ensinar os fundamentos do Auto Layout e mostrar como a estrutura cresce e diminui conforme o texto muda.

Auto Layout em cards

Depois do botão, um card é um bom próximo exercício.

Imagine um card com imagem, título, descrição e uma área inferior com preço e botão.

Você pode organizar a estrutura principal verticalmente, mantendo uma distância consistente entre os blocos. Dentro da área inferior, pode criar outro Auto Layout horizontal para colocar preço e botão lado a lado.

Se o título ocupar duas linhas ou a descrição ficar maior, o card consegue se adaptar melhor porque os elementos não dependem de posições fixas.

Esse tipo de composição também mostra por que é comum trabalhar com Auto Layouts aninhados.

Você não precisa criar uma única regra para tudo. Pode dividir a interface em pequenos grupos, cada um com seu próprio comportamento.

Auto Layout e componentes funcionam melhor juntos

Auto Layout se torna ainda mais útil quando você começa a trabalhar com componentes.

Imagine um componente de botão que será usado em diferentes partes do projeto. Alguns terão textos curtos, outros precisarão de textos maiores. Talvez uma versão tenha ícone e outra não.

Se o componente depender de dimensões totalmente fixas, cada variação pode exigir ajustes manuais.

Quando a estrutura usa Auto Layout corretamente, ela lida melhor com essas diferenças.

O mesmo vale para cards, campos de formulário, menus e outros elementos reutilizáveis.

Por isso, aprender componentes sem entender Auto Layout costuma gerar arquivos mais frágeis. Os dois recursos se complementam.

Não use Auto Layout em tudo sem pensar

Depois que o estudante entende o recurso, surge outro problema: querer aplicar Auto Layout em absolutamente tudo.

Nem sempre isso melhora o arquivo.

O objetivo não é criar a maior quantidade possível de estruturas automáticas. O objetivo é usar regras onde elas ajudam a organizar relações entre elementos.

Antes de aplicar Auto Layout, pense se os itens realmente fazem parte de um grupo que precisa responder de forma conjunta.

Um botão com texto claramente se beneficia dessa lógica. Uma lista de cards também.

Já elementos que precisam de posicionamento completamente livre podem exigir outro tipo de organização.

Usar Auto Layout bem significa entender quando ele resolve um problema, e não apenas ativá-lo por hábito.

Um erro comum: usar posições fixas demais

Um dos sinais de que a estrutura pode melhorar é quando você precisa reposicionar elementos manualmente toda vez que muda algum conteúdo.

Se trocar um título faz você mover o parágrafo abaixo, depois mover o botão e depois reajustar o tamanho do card, provavelmente existe uma oportunidade de estruturar melhor essa área.

Com Auto Layout, os elementos podem manter relações entre si.

Quando o título cresce, o conteúdo seguinte se reposiciona de acordo com as regras definidas.

Isso reduz retrabalho e também torna a estrutura mais previsível.

Outro erro: criar Auto Layout sem entender a hierarquia

É possível aplicar Auto Layout e ainda assim manter um arquivo confuso.

Isso acontece quando o estudante cria muitos frames sem uma lógica clara de agrupamento.

Imagine uma tela de formulário. Talvez faça sentido ter um Auto Layout para cada campo, outro para agrupar os campos e um terceiro para organizar o formulário inteiro.

Se tudo for colocado dentro de uma única estrutura sem pensar na hierarquia, os ajustes podem se tornar difíceis.

O segredo está em identificar quais elementos pertencem ao mesmo grupo.

Uma label e seu campo formam uma unidade. Vários campos formam um formulário. O formulário pode fazer parte de uma página maior.

Pensar dessa forma ajuda a construir uma hierarquia mais natural.

Auto Layout deixa uma interface responsiva automaticamente?

Não necessariamente. Auto Layout ajuda muito a criar estruturas adaptáveis, mas responsividade envolve mais decisões.

Você ainda precisa definir como os elementos se comportam quando o espaço disponível muda, quais partes podem crescer, quais precisam manter tamanho fixo e como a interface deve responder em diferentes contextos.

O recurso fornece mecanismos para organizar essas relações, mas não toma as decisões de design por você.

Esse ponto é importante porque muita gente aprende Auto Layout esperando que a interface inteira se torne responsiva apenas ao ativá-lo.

Na prática, você precisa combinar as propriedades corretamente e entender a estrutura que está construindo.

Auto Layout e grid são a mesma coisa?

Não. O grid ajuda a estruturar e alinhar o layout a partir de referências espaciais. Auto Layout controla como elementos dentro de uma estrutura se organizam e respondem a mudanças.

Os dois podem trabalhar juntos.

Você pode usar um grid para orientar a composição geral de uma página e Auto Layout para organizar cards, menus, seções e componentes dentro dela.

Além disso, versões atuais do Figma também oferecem um fluxo de grid dentro do próprio Auto Layout, ampliando as possibilidades de organização de linhas, colunas e células.

Para quem está começando, porém, vale dominar primeiro os fluxos vertical e horizontal antes de avançar para estruturas mais complexas.

Como praticar Auto Layout

A melhor forma de aprender não é começar por uma tela enorme.

Escolha componentes pequenos.

Crie um botão que se adapte ao texto. Depois, faça um card com título, descrição e botão. Em seguida, monte uma lista com vários cards.

Altere o conteúdo.

Troque um título curto por outro com duas linhas. Mude o texto do botão. Remova uma informação. Observe o que acontece com a estrutura.

Esses testes ajudam muito mais do que simplesmente reproduzir valores de um tutorial.

O objetivo é perceber quando o layout continua funcionando e quando quebra.

Quando quebrar, tente entender por quê.

Por exemplo, talvez um elemento esteja com tamanho fixo quando deveria acompanhar o conteúdo. Talvez outro devesse preencher o espaço disponível. Talvez dois itens que parecem pertencer ao mesmo grupo estejam separados em estruturas diferentes.

Essa investigação faz parte do aprendizado.

Quando você começa a dominar Auto Layout?

Você começa a dominar Auto Layout quando deixa de pensar apenas nas configurações e passa a prever o comportamento da estrutura.

Em vez de perguntar “qual botão eu preciso clicar?”, você começa a pensar: “esse elemento deve crescer com o conteúdo” ou “essa área precisa ocupar o espaço restante”.

Essa mudança é importante.

Significa que você deixou de decorar o recurso e começou a entender sua lógica.

Com o tempo, Auto Layout passa a fazer parte natural da forma como você estrutura interfaces no Figma.

Preciso dominar Auto Layout antes de aprender componentes?

Não precisa dominar completamente, mas vale entender bem os fundamentos.

Componentes e Auto Layout trabalham muito próximos em projetos reais. Se você cria um componente reutilizável sem pensar em como ele deve responder a mudanças de conteúdo, ele pode funcionar apenas em situações muito específicas.

Por outro lado, você também não precisa esperar dominar todos os detalhes para começar a estudar componentes.

Os dois conhecimentos podem evoluir juntos.

Crie um botão com Auto Layout, transforme em componente e teste diferentes textos. Depois faça o mesmo com um card.

Esse tipo de exercício mostra de forma clara como os dois recursos se complementam.

Auto Layout vale a pena para quem está começando?

Sim. Pode parecer mais fácil adiar e continuar montando tudo manualmente, mas isso cria hábitos que depois precisam ser corrigidos.

Você não precisa começar por estruturas complexas. Basta entender primeiro os princípios básicos: direção, espaçamento, padding e comportamento de tamanho.

A partir daí, aplique em elementos simples e avance aos poucos.

O ganho aparece rápido, principalmente quando você começa a alterar conteúdos e percebe que a interface continua organizada.

Aprenda Auto Layout dentro de um projeto completo

Entender Auto Layout isoladamente ajuda, mas o recurso faz muito mais sentido quando aparece dentro de um projeto.

É aí que você percebe sua relação com frames, componentes, wireframes, prototipagem e organização do arquivo.

No Curso de Figma da 4ED, o estudante trabalha Auto Layout como parte de um workflow completo. Em vez de praticar apenas exercícios soltos, aplica o recurso durante a evolução de um projeto e entende como ele ajuda a construir componentes e interfaces mais organizadas.

Se você está começando agora, também vale seguir o guia Como aprender Figma do zero, que organiza uma sequência de aprendizado desde os primeiros recursos até a prototipagem.

Conheça o Curso de Figma da 4ED.

Perguntas frequentes