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

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!

Opa boa tarde
Tentei serguir o que voce sugeriu, alterei as configurações das peças e no processo tentei deixar mais arrumado.
Mas por alguma razão ele ainda não respeita o conteudo que esta dentro do bloco, independente doque eu adcione ou subtraia dos conteudos do card ele não se molda de acordo com as alteraçoes feitas
segue abaixo o link do projeto pois, não estou entendendo qual é o problema
https://www.figma.com/design/JdSNRV1pw5Pv2G3ZA0HyHW/Untitled?node-id=18-29&t=JDvZl1ArhuTBz1Vd-1

Olá, Lucas. Como vai?

Entendo perfeitamente a sua frustração. Dominar o Auto Layout exige um pouco de prática com a hierarquia das camadas e é muito comum nos depararmos com esse tipo de situação no início. Quando um bloco não se molda ao adicionar ou remover conteúdo, o problema geralmente está nas regras de redimensionamento (Resizing) configuradas entre o elemento "pai" (o card inteiro) e os elementos "filhos" (os textos, imagens e ícones dentro dele).

Para que o seu card cresça e diminua automaticamente conforme o conteúdo, recomendo que você verifique os seguintes pontos no seu arquivo:

• Altura do texto: Selecione as suas caixas de texto (como o título e os parágrafos de descrição). No painel do lado direito, na seção de redimensionamento, a altura (vertical) precisa estar configurada como Hug. Se estiver como Fixed, a caixa de texto terá um tamanho fixo e não empurrará o conteúdo inferior do card para baixo quando você digitar mais palavras. A largura (horizontal) deve ficar como Fill, para que o texto quebre a linha respeitando as margens que você definiu.
• Altura do Card Principal: Selecione o Frame que engloba todo o seu card. Ele também precisa ter a sua altura (vertical) configurada como Hug. Se ele estiver marcado como Fixed, as bordas do card ficarão "congeladas", mesmo que o texto dentro dele cresça, o que faz o conteúdo vazar ou ficar desproporcional.
• Atenção ao fundo estilizado: Observando o design dos seus cards na imagem, percebo que há um detalhe com uma curva separando a área transparente (onde ficaria a foto) da área de texto escura. Se esse fundo curvo for um vetor solto desenhado à mão e inserido dentro do frame, ele pode estar quebrando o seu Auto Layout. Formas complexas não esticam perfeitamente na vertical de forma automática a menos que você configure as restrições (Constraints) delas de forma bem específica ou utilize a opção de posição absoluta (Absolute position).

Exemplo prático de verificação:
A regra de ouro do Auto Layout funciona de dentro para fora. Para o card (pai) poder "abraçar" (Hug) o conteúdo inteiro, os textos e agrupamentos (filhos) precisam ditar qual é o tamanho que eles ocupam. Revise a árvore de camadas na sua lateral esquerda e certifique-se de que não há nenhum Frame intermediário agrupando os textos que esteja com a altura definida como Fixed. Tudo na verticalidade do texto deve ser Hug.

Espero que possa ter lhe ajudado!