Auto layout no Figma: como criar interfaces responsivas | Alura Cursos Online
Auto layout no Figma: como criar interfaces responsivas
8 min8 minutos de leitura
8 min8 minutos de leitura
Autor(a)
Maria Isabelle Silveira
Graduada em Design pela Universidade Federal do Maranhão, com certificação em Designing High Impact Solutions pelo MITdesignX. Desde 2020, atuo na criação de elementos gráficos e, a partir de 2022, iniciei minha trajetória na área de UX/UI Design. Com mais de 2 anos de experiência, dediquei-me na construção de produtos digitais nos segmentos de educação, saúde e beleza, além da construção de produtos SaaS, dashboards e soluções para os mercados B2B e B2C.
Inscreva-se em nossa Newsletter
Fique por dentro de conteúdos, insights e oportunidades do universo tech. Receba novidades e lançamentos direto no seu e-mail.
O Figma é uma das principais ferramentas de design digital do mercado e escolhido tanto por iniciantes quanto profissionais.
Para quem busca entender o que é Figma, para que serve e como usar o Figma, vale destacar que ele oferece um ambiente colaborativo, gratuito para uso básico, e acessível para designers de diferentes níveis e equipes.
Com o Figma, é possível criar interfaces de usuário, protótipos interativos e até animações, tudo em uma única plataforma.
Uma das principais vantagens do Figma é que ele é baseado na nuvem, permitindo acesso de qualquer lugar, a qualquer momento. O Figma também possui versão gratuita para uso individual, o que facilita o início nos projetos. É possível usar o Figma no computador ou em dispositivos móveis.
Se você está em dúvida sobre para que serve o Figma, saiba que ele é ideal tanto para criar interfaces quanto colaborar com equipes, servir como protótipo, montar componentes reutilizáveis e exportar projetos para desenvolvimento.
O que é Auto Layout no Figma e para que serve
O Auto Layout do Figma é uma funcionalidade muito buscada por quem deseja criar interfaces flexíveis, responsivas e adaptáveis a diferentes dispositivos. Pense nele como uma maneira de criar e combinar elementos que se ajustam automaticamente em qualquer tela, sem a necessidade de reposicionamento manual.
Assim, os elementos da interface se adaptam automaticamente a diferentes tamanhos de tela, dispositivos e orientações.
Em vez de posicionar manualmente cada elemento para cada tamanho de tela, com o Auto layout é possível definir regras de posicionamento e dimensionamento automáticas. Isso simplifica e agiliza todo o processo de criação de interfaces.
O Auto Layout é particularmente útil para designs responsivos, nos quais a interface precisa se adaptar a diferentes tamanhos de tela e dispositivos.
Como usar o Auto Layout no Figma: passo a passo e dicas
No Figma, é possível utilizar o Auto layout para criar botões que crescem ou diminuem ao editar o seu label, criar listas que se adaptem à medida que os itens são adicionados, removidos ou ocultos e até mesmo para criar uma interface completa.
O Auto layout oferece propriedades que otimizam a criação de componentes e interfaces. Para ativá-lo, selecionae o frame ou objeto e pressione Control + Shift + A (Windows) ou Control + Shift + A (Mac).
A seguir, veja como cada propriedade funciona na prática.
Direção
A propriedade "Direção" define como os objetos serão organizados dentro do frame. Atualmente há três direções, sendo elas:
Vertical: Adicionar, remover e reordenar objetos ao longo do eixo y, ou seja, os objetos ficarão distribuídos um abaixo do outro. Por exemplo: objetos em uma lista, publicações em um feed de notícias ou linha do tempo.
Horizontal: Adicionar, remover e reordenar objetos ao longo do eixo x, ou seja, os objetos ficarão organizados um do lado do outro . Por exemplo: uma linha de botões ou ícones em um menu de navegação móvel.
Wrap: Organize objetos em várias linhas e colunas em um quadro. Os objetos fluirão horizontalmente e serão distribuídos com quebra de linha, de acordo com o tamanho do container. Por exemplo: galerias de fotos ou um conjunto de tags."
Padding
No Auto layout, o padding controla o espaço entre as bordas do frame e seus objetos internos. É possível definir o padding de forma uniforme ou especificar valores diferentes para cada lado (superior, direito, inferior e esquerdo).
Ele pode ser ajustado facilmente na barra lateral de propriedades, permitindo que você crie layouts precisos e bem alinhados em seu design.
"Assim como no CSS, o Figma possibilita posicionar um objeto exatamente onde se deseja, em relação ao contêiner principal." Essa propriedade é útil para criar componentes e interfaces mais complexas, permitindo que você controle a posição exata dos objetos em seu layout.
Assim, é possível configurar restrições para definir como esses objetos se comportam quando o frame com auto layout é redimensionado. Outras configurações de auto layout, como opções de redimensionamento automático, não se aplicam a eles.
Dimensões máxima e mínima
O Auto layout permite definir dimensões máximas e mínimas para um objeto dentro do frame. Esses limites determinam a largura e altura máxima e mínima que o objeto pode alcançar.
Essa funcionalidade é essencial para que interfaces se adaptem automaticamente ao conteúdo e ao espaço disponível.
Com dimensões máximas e mínimas, é possível garantir que o elemento expanda ou contraia conforme o necessário, mantendo a consistência visual em variados layouts e tamanhos de tela. Essas configurações ficam disponíveis na barra lateral de propriedades do Figma.
O Auto layout permite que você alinhe objetos em um frame. As opções de alinhamento disponíveis são determinadas pela direção do frame e pela distribuição ou espaço entre os itens.
Se a diferença entre itens estiver definida como “Auto”, você terá três opções para cada direção:
Quando o espaçamento entre os itens é um valor fixo, nove opções de alinhamento se tornam disponíveis, garantindo maior controle sobre posicionamento e distribuição no layout. As opções incluem:
O alinhamento desejado pode ser facilmente ajustado na barra lateral de propriedades do frame ou do objeto no Auto layout.
Layout automático
O layout automático permite que você torne seu design responsivo com apenas um clique. Ao usar a opção "Suggest auto layout" (Sugerir auto layout), o Figma determina quais objetos em um frame ou componente devem ser colocados em frames de layout automático e adiciona quantos frames forem necessários para tornar o design responsivo.
Com as melhorias recentes em 2026, o Figma agora consegue sugerir múltiplos frames de auto layout de uma vez, tornando o processo ainda mais eficiente para designs complexos.
O layout automático sugerido é ideal para estruturas de média complexidade, como cartões, barras de navegação ou telas simples. Para projetos mais complexos, como sites completos, é recomendável aplicar o recurso a partes menores, ajustando conforme necessário.
Você pode acessar essa opção de algumas maneiras:
No teclado: Mac: ⌃ Control ⇧ Shift A
Windows: ⌃ Control Alt ⇧ Shift A
Clique com o botão direito do mouse no frame ou objeto e selecione "Mais opções de layout > Sugerir layout automático". Selecione "Suggest auto layout" no menu Ações.
Após usar essa ação, os frames que possuem layout automático criados pelo "Suggest auto layout" serão indicados por um ponto azul na seção de camadas no painel esquerdo, conforme o gif abaixo.
Configurações avançadas do Auto layout
As configurações avançadas do Auto Layout permitem que você configure o comportamento das bordas ("Strokes"), a pilha de camadas ("Canvas Stacking") e o alinhamento da linha de base do texto ("Align text baseline").
Você pode acessá-las clicando nos três pontinhos no canto superior direito, próximo ao nome “Auto layout”.
Strokes
O “Strokes” leva em consideração o espaçamento das bordas no layout, retratando de forma mais precisa como o código renderiza as bordas. Isso torna o processo de design para código mais fácil.
Há duas opções que podem ser utilizadas dentro dessa propriedade, o “Excluded”, que não irá considerar as bordas como parte do layout, e o “Included”, que levará em conta as bordas como parte do layout.
Canvas Stacking é uma propriedade relacionada à ordem de empilhamento visual dos elementos (camadas) num frame: define qual elemento será exibido acima dos demais quando sobrepostos.
A opção "Last on top” (Último em cima) coloca os elementos das últimas camadas acima das demais, enquanto "First on top" (Primeiro em cima) exibe as primeiras camadas sobre as posteriores.
A opção "Align text baseline" (alinhar pela linha de base do texto) alinha todos os elementos do frame horizontalmente pela linha de base do texto, quando ativada. É possível utilizá-la somente quando o texto está dentro de um frame com orientação horizontal.
Por que usar o Auto Layout no Figma é essencial para design responsivo?
No Figma, o Auto layout funciona como um conjunto de peças de LEGO, permitindo criar interfaces flexíveis e adaptáveis. Os elementos são automaticamente encaixados, garantindo que o layout se ajuste a diferentes tamanhos de tela.
Assim, é possível adaptar o design a diversos dispositivos e tamanhos de tela, economizando tempo e garantindo consistência visual. Vale lembrar: assim como em construções complexas com LEGO, é importante conhecer as funcionalidades do Auto layout para obter bons resultados.
Figma na Alura: aprenda Figma do básico ao avançado com nossos cursos
Para isso, acesse gratuitamente as primeiras aulas do curso Figma: Conhecendo o programa e conheça mais sobre uma das principais ferramentas de prototipagem do mercado.
