6
respostas

Dificuldade com Layout Automático e Grid ao agrupar elementos

Fala, pessoal! Tudo certo?

Tô travado numa parte aqui do final do curso. Toda vez que eu tento criar um frame em volta dos meus posts pra aplicar o grid e organizar as colunas, o Figma dá uma doidice e desalinha tudo.

Eu ativei o Auto Layout e usei o modo Envolver (Wrap) pra tentar deixar igual ao do professor, mas meus cards ficam com tamanhos diferentes e os ícones que coloquei dentro do post saem do lugar. No vídeo do instrutor aparece 2x4 no painel, mas o meu ficou com grid 2x4 mas ainda assim, desalinhado, refiz tudo e agora insiste em ficar 2x3 ou todo torto, mesmo eu tentando ajustar a largura. Já perdi a paciência. Fiquei fuçando tudo mas não encontrei o erro.

O que eu tô fazendo de errado na hora de agrupar esses elementos? Tem alguma ordem certa pra criar esse frame por trás sem o Figma "chutar" os objetos pra onde ele quer? Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Valeu!

6 respostas

Oi, Ygor! Tudo bem?

Tem uns pontos que você pode checar e ir ajustando se necessário, por exemplo:

  • Todos os elementos dentro do seu frame precisam estar configurados para o Auto Layout.

  • Quando você aplica um grid, veja se o tamanho do frame pai está ajustado para acomodar o grid que você deseja. Se o grid for 2x4, o frame precisa ter espaço suficiente para acomodar duas colunas e quatro linhas.

  • Ao criar o frame, comece agrupando os elementos menores, como ícones e textos, dentro de cada card. Depois, agrupe os cards no frame principal. Isso pode ajudar a manter a organização.

Se depois de verificar isso ainda permanecer o comportamento, compartilhe o seu projeto por favor? Assim poderemos investigar melhor vendo as configurações.

Espero que dê certo. Bons estudos e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado

Eu parei nessa parte e fritei meus neurônios, tentei de todas as formas e não encontrei o erro kkkk, depois fiquei retornando a ultima versão salva varias vezes e tentando de novo o mesmo processo e sempre ocorria o mesmo erro ao aplicar o grid. (rindo de nervoso)
Vou tentar compartilhar o projeto com você: https://www.figma.com/design/ePqxBE7EH8dNeP8AaEg3jX/Arquivo-1?m=auto&t=McTx120uTxyP8xIK-1

Se puder avaliar e me da um feedback, agradeço.

Pode me ajudar? Quero seguir na lição...

Ei, Ygor! Tudo bem?

Agradeço por aguardar o nosso retorno.

Ao comparar o seu projeto com o do aula, notamos algumas diferenças nas configurações, então teste:

  • Organize os Cards Internamente

    • Antes de colocá-los no grid, cada card individual deve ser um componente de auto layout estável, notei que apenas alguns itens estão com auto layout.
    • Selecione os elementos do card (Título, Texto, Ícones) e aplique Auto Layout (Shift + A).
    • Configure o card para Hug Content na altura (para que ele se ajuste ao texto).
    • Aplique o fill container nos elementos internos (como o campo de texto) na largura, para que o texto não "escape" do card.
  • Configure o Container do GridSelecione todos os cards e aplique o Auto Layout

    • No painel lateral, mude o ícone para a opção de Grid (Beta) (o ícone de quatro bolinhas).
    • Defina a grade manualmente para 2 colunas e 4 linhas (ou o valor desejado como 2x4).
  • Ajuste os Limites (Constraints)

    • Para manter a estrutura 2x4 sem que ela vire 2x3, use o Fill Container nos cards enquanto o frame pai tem uma largura definida. No da aula podemos ver que está como Fill e o seu como Hug.
    • Garanta de que o Gap (espaço entre itens) esteja padronizado (ex: 34px como mostra sua imagem) para evitar que os cards "empurrem" uns aos outros para fora da linha.
    • Mantenha o Clip Content (Recortar conteúdo) ativado no frame principal para que os elementos não apareçam fora dos limites caso você reduza muito o tamanho.

E deixo aqui o link do projeto para te guiar nas mudanças e na comparação do que precisa ser feito:

Espero ter ajudado e conte sempre conosco no fórum.

Até mais e tenha bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado

Olá! Eu estou tento o mesmo problema e identifiquei que o problema não é com o card mas sim com o campo de busca. O grid está se ajustando ao tamanho do campo de busca, ele não fica em duas colunas como no projeto da aula. Ao tentar diminuir os frames da esquerda, o campo de busca diminui junto.

Exatamento o problema que a Camila está tendo...