Auto layout

Um recurso do Figma e similares que ajusta e alinha os elementos sozinho quando o conteudo muda.

Hard

O que é

Auto layout e o recurso de ferramentas como Figma e Sketch que deixa voce definir regras de como os elementos se comportam dentro de um quadro. Quando o conteudo muda ou a tela redimensiona, tudo se ajusta sozinho, sem precisar alinhar na mao.

E justamente isso que torna o design responsivo de verdade. Um botao expande conforme o texto cresce, o espacamento interno se mantem, e uma pequena mudanca cascateia pelos componentes mantendo a uniformidade. Sem o auto layout, cada ajuste vira trabalho manual e cheio de erro.

Ele tambem ajuda no handoff, porque o componente passa a se comportar mais perto de como o codigo se comporta, o que reduz o ruido entre design e desenvolvimento. Dominar bem o recurso, porem, pede entender hierarquia, aninhamento e restricao.

Em uma frase

Bota auto layout nesse botão pra ele crescer com o texto mantendo o respiro interno igual.

A pergunta que ele responde

Como eu faço um componente se ajustar sozinho quando o conteúdo muda, em vez de alinhar na mão?

Quando usar

Ajuda na hora de montar um componente que muda de tamanho com o conteudo e precisa virar responsivo de verdade.

Como não usar

O cuidado e nao definir as restricoes de qualquer jeito e acabar com um layout que quebra assim que o texto cresce.

Na prática

Pense num botao que cresce sozinho quando o rotulo fica maior, mantendo o respiro interno igual em todos os tamanhos.

Não confunda com

Vale separar auto layout de grid. O auto layout arruma o espacamento e o ajuste de um componente conforme o conteudo, enquanto o grid e a estrutura de colunas que organiza a pagina inteira.

D

Em inglês

Auto Layout

Pronúncia

au-to-lei-aut

Também chamado de

auto layout, layout automatico

Origem

n/a

Fonte

Saiba mais

Figma, documentação oficial sobre auto layout