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.
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.
Novidade no Auto Layout: ordem das layers (Créditos: Figma)
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.
Novidade no Auto Layout: espaçamento negativo (Créditos: Figma)
É 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.
Novidade no Auto Layout: ordem de empilhamento dos elementos da tela (Créditos: Figma)
Um outro problema clássico de design no Figma era o de alinhamento vertical de fontes e ícones.
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.
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.
Novidade no Auto Layout: opções de redimensionamento (Créditos: Figma)
Agora, temos uma “alça” (handles) para clicar e definir o padding que gostaríamos de aplicar no layout.
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.
Inclusive com um atalho para mudarmos os 4 lados de uma vez só. (Ufa, finalmente temos atalhos para isso!).
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.
Além disso, aceitam também a sintaxe de CSS, onde você pode utilizar vírgulas para definir valores para cada um dos lados.
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.
Novidade no Auto Layout: posicionamento absoluto (Créditos: Figma)
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!
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!
