1
resposta

[Projeto] Atividade com a ferramenta Figma/ problema com o auto layout

Toda vez que ligo a função do auto layout ele quebra a organização do bloco e não obedecee ne se ajusta ao redor do testo da layer selecionada
Insira aqui a descrição dessa imagem para ajudar na acessibilidade

1 resposta

Olá, Lucas. Como vai?

Analisando a imagem do seu projeto, o comportamento que você descreveu acontece porque o Auto Layout redefine as coordenadas de todos os elementos para que eles sigam uma pilha lógica (vertical ou horizontal), ignorando as posições manuais que você criou anteriormente. No seu print, os elementos da parte inferior estão se sobrepondo pois o Gap (espaçamento) está em 0 e o alinhamento está para a esquerda.

Para corrigir isso e fazer com que o bloco se ajuste perfeitamente ao texto, siga estes passos:

  • Agrupamento de camadas: Selecione os elementos que devem ficar na mesma linha (como os ícones e o nome de usuário) e aperte Shift + A para criar um Auto Layout apenas para eles primeiro.
  • Direção do Layout: No Frame principal, certifique-se de que a direção está definida como Vertical (seta para baixo).
  • Resizing (Redimensionamento): Selecione as camadas de texto dentro do bloco e, no menu lateral direito, mude o redimensionamento horizontal de Fixed para Fill Container. Isso fará o texto respeitar a largura do bloco.
  • Ajuste de Hug: No Frame pai (o bloco inteiro), mude o redimensionamento vertical para Hug Contents. Isso fará com que a borda do bloco "abrace" o conteúdo conforme o texto aumenta ou diminui.
  • Padding e Gap: Adicione valores maiores que zero no campo de Padding (espaçamento interno das bordas) e no Gap (espaço entre os itens) para que as informações não fiquem coladas umas nas outras.

O segredo do Auto Layout no Figma é o empilhamento: se você quer itens lado a lado e outros um abaixo do outro, você terá que colocar um Frame de Auto Layout dentro de outro.

Espero que possa ter lhe ajudado!