Por que o Auto Layout do Figma desalinha depois de importar uma página web

Uma fileira de cards alinhada no navegador chega ao Figma com um card quatro pixels abaixo. Nada está quebrado o bastante para você apontar. Foi isso que aconteceu.

Você importa uma página web para o Figma, o painel de camadas se enche e alguma coisa não bate. Uma fileira de cards que estava alinhada no navegador agora tem um card quatro pixels abaixo. Uma navegação que era centralizada está mais ou menos centralizada. Nada está quebrado o bastante para você apontar, mas o arquivo já não corresponde ao print que você deixou aberto do lado.

Quase sempre é o Auto Layout, aplicado onde não devia. Vale entender por quê, porque a solução não é «desligar o Auto Layout»: é saber quando os dois sistemas de layout realmente concordam e quando uma ferramenta está chutando.

Dois motores de layout que nunca combinariam

O navegador monta uma página com CSS. Flexbox, grid, floats, fluxo inline, margens que colapsam, um line-height que empurra o texto para fora da própria caixa, arredondamento de subpixel que varia por plataforma. Décadas de regras, e a maioria são casos de borda que só importam uma vez.

O Figma monta um frame com Auto Layout. Um sistema bem menor, e de propósito: uma direção, um espaçamento, quatro valores de padding, alinhamento em dois eixos e, por filho, um grow e um stretch. É quase tudo.

Auto Layout não é uma reimplementação do flexbox. Ele lembra flexbox do jeito que uma bicicleta lembra uma moto. Então quando um conversor lê display: flex e define layoutMode: "HORIZONTAL", ele está afirmando uma coisa: estes dois sistemas vão colocar cada filho no mesmo lugar. Às vezes é verdade. Muitas vezes é quase verdade, o que é pior.

Onde os dois se separam sem avisar

Alguns casos concretos, todos com cara de flexbox e nenhum reproduzível pelo Auto Layout.

• Margens em itens flex. No CSS um filho carrega a própria margem, inclusive margin-left: auto para empurrar um grupo para a direita. O Auto Layout tem um espaçamento só para o frame inteiro e nenhuma margem por filho.
• space-around e space-evenly. O Auto Layout tem SPACE_BETWEEN. Os outros dois distribuem o espaço que sobra de outro jeito, e não existe ajuste que reproduza isso.
• align-items: baseline. Textos de tamanhos diferentes apoiados numa linha de base comum, comum em títulos e linhas de preço. O Auto Layout alinha por bordas e centros de caixa, não por linhas de base.
• flex-grow fracionário. flex: 1 vira layoutGrow: 1. flex: 2 e flex: 0.5 não viram nada.
• flex-wrap. Uma fileira que quebra é outra geometria, e onde ela quebra depende da largura do contêiner no momento da captura.
• Remedição do texto. É a que pega as ferramentas. Uma camada de texto ajustada ao conteúdo é medida pelo Figma, com a fonte que o Figma tem, no tamanho que o Figma calcula. Se essa medida diferir do navegador nem que seja um pixel, todos os irmãos seguintes na pilha se deslocam.

Por causa desse último item, o problema muitas vezes só aparece depois que você instala uma fonte que faltava, ou só na máquina de outra pessoa.

Por que os conversores aplicam mesmo assim

Porque um arquivo cheio de frames com Auto Layout parece um produto melhor que um cheio de retângulos posicionados em absoluto. Fica bem numa demo e vira um item na lista de recursos. E no caso comum, uma fileira simples ou uma grade de cards com espaçamento uniforme, é genuinamente melhor: você redimensiona o frame e ele se comporta.

O problema é que a ferramenta não distingue o caso comum do quase-certo sem conferir, e conferir dá mais trabalho do que não conferir.

O que fazer

Se você já importou

Pegue o frame que parece errado e coloque o modo de layout em nenhum, na seção de layout do painel da direita. Os filhos mantêm a posição atual, então se o deslocamento já aconteceu isso congela em vez de desfazer. Por isso o movimento útil quase sempre é reimportar, não consertar.

Antes, confira uma coisa: as fontes que a página usava estão instaladas na sua máquina? Uma fonte substituída remede cada camada de texto, e nenhum ajuste de layout salva um arquivo cujo texto tem a largura errada. O Figma avisa quais fontes faltam ao abrir o arquivo.

Se você está escolhendo ferramenta

Pergunte o que ela faz quando os dois sistemas discordam. Há três respostas possíveis e só uma que presta.

1. Aplicar Auto Layout onde vir flexbox. Rápido, bonito na demo, e te entrega um arquivo que se moveu caladinho.
2. Nunca aplicar. Sempre correto, nunca útil. Você recebe uma pilha de camadas absolutas, exatas e dolorosas de editar.
3. Aplicar só onde reproduz o original. Correto e útil, mas exige que a ferramenta realmente preveja o que o Figma fará e compare.

Como o Snapture decide

O Snapture escolhe a terceira opção, e o mecanismo cabe num parágrafo.

Na hora da captura ele já sabe onde cada elemento está, porque leu a página renderizada: tem o retângulo real, calculado pelo navegador, de cada filho. Antes de aplicar um layout, ele simula o que o motor do Figma faria com o mesmo frame — o padding, o espaçamento, o alinhamento, a distribuição do grow — e produz um retângulo previsto por filho. Depois compara os dois conjuntos. Se cada filho cair a menos de meio pixel de onde o navegador colocou, o layout é aplicado. Se algum errar, o frame inteiro mantém coordenadas absolutas exatas.

Há uma segunda checagem do outro lado. Depois que o plugin do Figma aplica o layout, ele remede os filhos, agora contra o motor de verdade e não contra uma previsão, e se algo se moveu além daquele mesmo meio pixel, devolve o frame às coordenadas capturadas. Essa checagem existe porque uma camada de texto pode ser remedida na importação de um jeito que nenhuma simulação prevê.

Como isso fica na prática

Rodar o conversor em páginas reais dá noção de quão seletivo ele é. São os números da mesma medição publicada na página de medições.

A linha interessante é a do MDN. Cinco frames com Auto Layout em 253 nós parece falha da ferramenta. É a ferramenta funcionando: o layout dos artigos do MDN é sobretudo fluxo de documento e floats, coisa que o Auto Layout não modela de jeito nenhum, então o filtro recusou quase tudo e manteve posições exatas. Para aquela página, é a troca certa.

Já o Linear é montado quase inteiro com fileiras flex de espaçamento uniforme. 261 dos seus frames passam mesmo na comparação, e esses se comportam direito quando você redimensiona no Figma.

Resumindo

Auto Layout depois de uma importação só é confiável se alguma coisa verificou. Flexbox e Auto Layout se sobrepõem o bastante para enganar um conversor e diferem o bastante para deslocar seu arquivo, e a diferença costuma aparecer como alguns pixels em vez de uma quebra óbvia, que é justamente o tipo de erro que mais custa tempo para achar.

Se uma ferramenta não sabe dizer o que faz quando os dois discordam, considere que ela não verifica.

English · 한국어 · 日本語 · 简体中文 · 繁體中文 · Español · Português · Français · Deutsch · Русский · Italiano · Bahasa Indonesia