Auto layout é flexbox

O flexbox virou padrão da web em 2012. O auto layout chegou ao Figma em 2019, sete anos depois, com o mesmo modelo mental e nomes mais amigáveis nos campos.

A ordem dessas datas é a informação útil deste guia. O painel que você preenche todo dia é uma interface gráfica para um pedaço de CSS que já existia, e cada campo dele tem um equivalente com nome próprio no código.

Então a parte cara, que é o raciocínio sobre como as coisas se distribuem no espaço, você já exerce. O que falta é a tradução, e ela cabe numa tabela.

A tradução, campo por campo

Guardando essa tabela, você lê 80% do CSS de layout de qualquer projeto.

Ligando o auto layout

No Figma você seleciona o frame e aperta Shift + A. No CSS você escreve uma linha no elemento pai:

.barra {
  display: flex;
}

A partir daí, os filhos diretos param de ficar empilhados um embaixo do outro e passam a se organizar numa linha. Repare no detalhe: quem recebe display: flex é o pai, e quem obedece são os filhos. É idêntico ao Figma, onde você liga o auto layout no frame e os elementos dentro se comportam.

Direção

.barra {
  display: flex;
  flex-direction: row;    /* padrão, horizontal */
}
 
.lista {
  display: flex;
  flex-direction: column; /* vertical */
}

row é o padrão, então quando você vê só display: flex num código, a direção é horizontal.

Espaçamento

.barra {
  display: flex;
  gap: 16px;
}

O gap é o mesmo campo de espaçamento entre itens do Figma. Ele só coloca espaço entre os elementos, nunca nas pontas, exatamente como você espera.

Vale registrar que isso é novo em CSS. Antes de gap funcionar em flexbox, todo mundo resolvia com margin-right no filho e uma exceção pro último, o que gerava aquela categoria de bug de "sobrou um espaço no fim". Se você abrir um projeto antigo e ver margem entre irmãos, é isso.

Alinhamento nos dois eixos

Aqueles nove quadradinhos do painel do Figma são duas propriedades no CSS:

.barra {
  display: flex;
  justify-content: center;  /* no sentido da direção */
  align-items: center;      /* no sentido contrário */
}

A regra que evita confusão: justify-content age no sentido da direção, align-items age no sentido cruzado.

Numa linha (row), justify empurra na horizontal e align na vertical. Numa coluna, os dois trocam de eixo. É a mesma inversão que acontece quando você muda a direção do auto layout e o painel de alinhamento passa a significar outra coisa.

Os valores de justify-content que resolvem quase tudo:

justify-content: flex-start;     /* início */
justify-content: center;         /* centro */
justify-content: flex-end;       /* fim */
justify-content: space-between;  /* pontas coladas nas bordas */

space-between é o famoso "logo na esquerda, menu na direita" e tem o nome idêntico ao do Figma.

Hug, fill e fixed

Esses três são os que mais confundem na hora da tradução:

.item-hug   { width: fit-content; }  /* do tamanho do conteúdo */
.item-fill  { flex: 1; }             /* ocupa o espaço que sobrar */
.item-fixo  { width: 320px; }        /* travado */

Quando vários itens têm flex: 1, eles dividem o espaço livre em partes iguais. Quando um tem flex: 2 e outro flex: 1, o primeiro fica com o dobro.

.painel-lateral { width: 280px; }  /* fixed */
.conteudo       { flex: 1; }       /* fill */

Isso aí é o layout de dashboard inteiro: barra lateral travada, conteúdo elástico. Duas linhas.

Wrap, que o Figma também tem

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

Com wrap, quando não couber mais na linha, o item pula pra linha de baixo em vez de espremer todo mundo. É o mesmo checkbox de wrap do auto layout, e é a solução mais simples pra listas de tag, chips e filtros.

Onde a analogia começa a rachar

Duas diferenças que valem saber antes de prometer algo numa reunião.

O conteúdo é imprevisível. No Figma, o texto do botão é o que você digitou. No navegador, pode ser uma tradução em alemão com 40 caracteres. Flexbox aguenta bem, mas o resultado só é bom se você tiver decidido o que acontece: o botão cresce, o texto quebra em duas linhas ou vira reticências? Essa decisão é sua, não do CSS.

Flexbox é uma dimensão por vez. Ele organiza uma linha ou uma coluna. Quando você precisa que colunas e linhas se alinhem entre si, tipo uma grade de cards em que o botão de todos fica na mesma altura, o caminho é grid, não flexbox.

Traduzindo uma tela de verdade

Pega o cabeçalho deste site. No Figma seria: frame com auto layout horizontal, alinhamento space between, itens centralizados na vertical, padding de 20px nas laterais, altura fixa de 64px.

.cabecalho {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-inline: 20px;
  height: 64px;
}

Cinco linhas, e cada uma delas é um campo que você já preenche no painel do Figma há anos.

O que fazer hoje

Escolhe um componente do seu design system que use auto layout. Um card, uma barra, um campo com ícone.

Abre o painel de propriedades dele e escreve, campo por campo, o CSS equivalente usando a tabela do começo deste guia. Depois abre o mesmo componente no produto em produção, aperta F12 e compara com o que o dev escreveu.

Uma de três coisas vai acontecer. Bate, e você acabou de confirmar que já sabia. Não bate porque o código tem algo a mais, e você descobriu uma decisão que foi tomada sem você. Ou não bate porque o design tem algo que o código não implementou, e você achou um bug.

Nos três casos você sai com uma informação que não tinha, e o exercício leva vinte minutos.

O próximo módulo é JavaScript, onde a comparação com o Figma para de funcionar tão bem. Vale ir sabendo disso.