Novidades de Auto-Layout no Figma facilitando a vida de designers e developers

Novidades de Auto-Layout no Figma facilitando a vida de designers e developers

Última atualização:
13/12/2022
Pessoa autora:
Tiago
Categorias:

Entre 10 e 11 de maio, aconteceu o Figma Config 2022, evento no qual a empresa anunciou algumas importantes – e excelentes – novidades, incluindo atualizações para a função auto layout.

O auto layout é uma propriedade que você pode adicionar a quadros e componentes no Figma. Ele permite que você crie designs que se adaptem à medida que seu conteúdo muda, sem a necessidade de redesign.

Sendo assim, o auto layout no Figma facilita muito a vida de designers. E com as novas funcionalidades, listadas abaixo, irá facilitar ainda mais e tornar o handoff para desenvolvedores mais fiel.

Ordem das layers

Historicamente, e sem entender o motivo, a ordem das layers exibidas no canvas era o contrário da ordem das layers no menu lateral esquerdo. Algo que pode incomodar no começo e sempre exige um pouco de massa encefálica (mesmo para quem já está acostumado).

Nesta última atualização, o Figma “corrigiu” isso. Agora, as camadas ficam na mesma ordem no canvas e no menu de layers.

Uma das novidades no Auto Layout do Figma: ordem das layers

Novidade no Auto Layout: ordem das layers (Créditos: Figma)

Espaçamento negativo

Um dos atributos do auto layout é poder controlar exatamente a quantidade de espaço entre os elementos de forma muito fácil. Porém, uma das coisas que a comunidade de designers sentia falta era a possibilidade de sobrepor itens. Algo que era possível de fazer, mas necessitava uma coleçãozinha de gambiarras no Figma.

Felizmente, agora a ferramenta aceita um espaçamento negativo. Basta inserir o símbolo de “menos”, digitar o número que deseja e voilà: sobreposição realizada.

Uma das novidades no Auto Layout do Figma: espaçamento negativo

Novidade no Auto Layout: espaçamento negativo (Créditos: Figma)

Ordem de empilhamento dos elementos da tela

É verdade que o uso do espaçamento negativo traz consigo algumas possibilidades, por exemplo, escolher o que desejamos que fique por cima.

Pensando nisso, a equipe de produto do Figma não desapontou. Agora, podemos escolher quais itens da lista desejamos que fiquem por cima: os primeiros ou os últimos. Isso, claro, sem modificar a ordem dos elementos no menu de camadas.

🙂
Uma das novidades no Auto Layout do Figma: ordem de empilhamento dos elementos da tela

Novidade no Auto Layout: ordem de empilhamento dos elementos da tela (Créditos: Figma)

Alinhamento de texto na linha de base

Um outro problema clássico de design no Figma era o de alinhamento vertical de fontes e ícones.

Uma das novidades no Auto Layout do Figma: alinhamento de texto na linha de base

Novidade no Auto Layout: alinhamento de texto na linha de base (Créditos: Figma)

Agora, para resolver este problema, basta clicarmos no já amado ícone de configurações avançadas do auto layout, selecionar “text baseline alignment”… e pronto! Aquele alívio no nosso coração está de volta sem um esforço e sem o argumento de não usar a funcionalidade auto layout por conta disso.

🙂
Uma das novidades no Auto Layout do Figma: alinhamento de texto na linha de base

Opções de redimensionamento

Com a funcionalidade de auto layout tendo mais opções, a equipe do Figma – de forma bem feliz, na minha opinião – escolheu mover a funcionalidade de redimensionamento de lugar.

Uma das novidades no Auto Layout do Figma: opções de redimensionamento

Novidade no Auto Layout: opções de redimensionamento (Créditos: Figma)

Controles de tela

Agora, temos uma “alça” (handles) para clicar e definir o padding que gostaríamos de aplicar no layout.

Uma das novidades no Auto Layout do Figma: controles de tela

Novidade no Auto Layout: controles de tela (Créditos: Figma)

Há, também, a opção de clicar no ícone rosa de alça e digitar o valor desejado.

Uma das novidades no Auto Layout do Figma: controles de tela

Inclusive com um atalho para mudarmos os 4 lados de uma vez só. (Ufa, finalmente temos atalhos para isso!).

Uma das novidades no Auto Layout do Figma: controles de tela

Ainda é possível fazer ajustes clicando e digitando valores no menu do auto layout ao lado direito da tela. Porém, agora os valores estão mais explícitos na interface.

Uma das novidades no Auto Layout do Figma: controles de tela
Uma das novidades no Auto Layout do Figma: controles de tela

Além disso, aceitam também a sintaxe de CSS, onde você pode utilizar vírgulas para definir valores para cada um dos lados.

Uma das novidades no Auto Layout do Figma: controles de tela

Posicionamento absoluto

Essa novidade permite que objetos sejam removidos do fluxo de auto layout, mas sem ficarem de fora de fato. Assim, será possível posicionar objetos onde quisermos relativamente ao seu objeto pai.

Uma das novidades no Auto Layout do Figma: posicionamento absoluto

Novidade no Auto Layout: posicionamento absoluto (Créditos: Figma)

Regras de espaçamento das bordas

Para minimizar os problemas de handoff para os programadores, o Figma introduziu essa funcionalidade. Ela inclui o espaçamento das bordas no layout, representando com mais precisão a maneira que CSS renderiza bordas. Dessa forma, facilita o processo de design para código!

❤
Uma das novidades no Auto Layout do Figma: regras de espaçamento das bordas

Novidade no Auto Layout: regras de espaçamento das bordas (Créditos: Figma)

E aí, o que você achou das novidades de auto layout no Figma? Comenta aqui!

🙂