ANÚNCIO

~/questoes/design-grafico

O que é auto-layout no Figma e para que serve?

Responda, confira o feedback e use o resultado para orientar sua revisão.
Aula de referência Como usar o Figma 2025/26 em 1 hora
Para fixar

Auto-layout no Figma: organize elementos com inteligência

Conceito central

Auto-layout é uma ferramenta do Figma que posiciona elementos automaticamente em um grid com espaçamento definido, sem você precisar ajustar manualmente cada um. Quando você muda o tamanho ou quantidade de elementos, o layout se adapta instantaneamente, tornando designs muito mais flexíveis e responsivos.

Por que essa resposta faz sentido

A alternativa B está correta porque auto-layout distribui elementos automaticamente seguindo regras de espaçamento que você define. Isso é diferente de posicionamento manual e permite que o layout se reorganize sozinho quando mudanças ocorrem, economizando tempo e evitando erros.

Armadilhas comuns

  • Confundir auto-layout com constraints: constraints definem como um elemento se comporta quando o frame é redimensionado, enquanto auto-layout organiza múltiplos elementos entre si.
  • Pensar que auto-layout substitui posicionamento manual: na verdade, ele complementa. Você ainda escolhe direção (horizontal ou vertical), espaçamento e alinhamento.
  • Acreditar que auto-layout é apenas para grids: embora funcione bem em grids, ele também organiza listas, linhas de botões e qualquer sequência de elementos que precise de distribuição uniforme.

Entenda as alternativas

A

Auto-layout não organiza nomes de layers. Essa é uma funcionalidade de nomenclatura, completamente diferente de posicionamento visual de elementos no canvas.

B

Essa é a definição exata de auto-layout. A ferramenta cria um sistema automático de distribuição de elementos com espaçamento configurável, muito útil para criar layouts responsivos sem precisar alinhar manualmente cada item.

C

Auto-layout não gera código CSS. Existem plugins no Figma que fazem isso, mas auto-layout é apenas uma ferramenta visual para organizar elementos no design, não para exportar código.

D

Criar paletas de cores harmônicas é função do sistema de cores e variáveis no Figma, não do auto-layout. Auto-layout trabalha com posicionamento e espaçamento, não com geração de cores.

Dica prática: Comece usando auto-layout em uma linha de botões: selecione os botões, ative auto-layout (Shift + A), defina espaçamento e veja como adicionar ou remover um botão reorganiza tudo automaticamente. Isso vale muito mais que qualquer explicação teórica.

Revise pensando: Se você tem um card de produto com imagem, título e preço, e precisa que o espaçamento entre eles se mantenha mesmo quando você muda o tamanho do card, qual ferramenta você usaria: constraints ou auto-layout?