Olá, Estudante. Como vai?
A sua percepção está totalmente correta! A organização das camadas na barra lateral esquerda interfere diretamente no resultado, e o comportamento do Auto Layout pode parecer um pouco confuso no começo. Não se preocupe, esse comportamento de "deformar" os ícones e o texto não se mover corretamente é muito comum quando estamos aprendendo a dominar a ferramenta.
O segredo para o Auto Layout funcionar perfeitamente, permitindo esticar ou encolher o card sem quebrar nada, está na combinação de duas coisas: aninhamento de caixas e a configuração de redimensionamento (Resizing).
Para resolver o problema e deixar o seu componente idêntico ao da aula, siga este passo a passo estruturado:
1. Corrigindo os Ícones de Interação
O Auto Layout tenta alinhar tudo em linha ou coluna. Se você aplicar o comando direto em elementos soltos, ele vai esmagá-los.
- Selecione apenas o primeiro ícone de coração e o número "15" ao lado dele e aperte
Shift + A. Isso criará um Auto Layout individual para esse conjunto. Configure a direção como horizontal e defina um espaçamento fixo pequeno (ex: 4px) entre eles. - Faça exatamente a mesma coisa para o ícone de balão com o "03" (
Shift + A) e para o aviãozinho com o "09" (Shift + A). - Agora que você tem 3 blocos separados, selecione esses 3 blocos juntos e aperte
Shift + A mais uma vez. Pronto! Você criou um grupo horizontal de interações que nunca mais vai deformar os ícones.
2. Agrupando a Linha de Baixo (Rodapé)
Repare que na parte inferior do seu card existem as interações do lado esquerdo e o usuário (@mateusvillain) do lado direito.
- Selecione o grupo de interações (que criamos no passo anterior) junto com o grupo do usuário e aperte
Shift + A para criar uma linha horizontal que junta os dois. - Na barra lateral direita, mude o alinhamento desse grupo para o centro-vertical e, no espaçamento entre eles, clique na setinha e mude de um valor fixo para Auto (ou clique no menu de três pontinhos do Auto Layout e mude o Spacing Mode para Space between). Isso fará com que as interações fiquem coladas na esquerda e o usuário colado na direita automaticamente.
3. Juntando o Card Completo
Agora vamos empilhar o conteúdo verticalmente:
- Selecione o "Título do post", a "Descrição do post" e a linha do rodapé que acabamos de estruturar.
- Aperte
Shift + A para criar o Auto Layout principal do card. Defina a direção como vertical e adicione o preenchimento de cor escura (Fill) e as bordas arredondadas diretamente nesse quadro principal.
4. O Pulo do Gato: Configuração de Redimensionamento (Resizing)
Para o card responder corretamente quando você aumentar ou diminuir o tamanho dele com o mouse, selecione as camadas internas e ajuste a barra lateral direita (na seção Frame):
- Textos (Título e Descrição): Mude a largura (Horizontal Resizing) de Hug contents ou Fixed para Fill container. Isso garante que o texto quebre linhas de forma interativa quando o card encolher.
- Linha do Rodapé: Também mude a largura horizontal para Fill container. Como configuramos o espaçamento como Space between no passo 2, o usuário e as interações vão se afastar ou se aproximar perfeitamente conforme você estica o card.
Fazendo essa blocagem de baixo para cima, o Figma consegue entender perfeitamente a hierarquia e o seu layout passará a se comportar com total fluidez!
Espero que possa ter lhe ajudado!
