[Dúvida] Agrupamento e organização

Ei! Tudo bem, Vinicius?

Ao organizar os elementos em um grid de 12 colunas no Figma, é importante ter em mente que eles estejam alinhados para manter a consistência visual do design.

Caso queira reparar o desalinhamento, comece ajustando sua posição com as ferramentas de alinhamento do Figma, que permitem centralizar ou alinhar à esquerda, ou direita com facilidade. Se atente à hierarquia visual, sempre destacando os elementos mais importantes e posicionando-os de forma estratégica.
Por fim, revise o espaçamento entre os elementos dentro do grupo para que tudo esteja proporcional e visualmente equilibrado, criando um design fluido e harmonioso.

É interessante para praticar o olhar quanto a isso.

Continue se dedicando aos estudos e qualquer dúvida, compartilhe.

Até mais!

Então, por exemplo, a palavra HOJE, está alinhada de acordo com a coluna, porém o quadrado azul em volta não, isso é do sistema?

Pessoal, existe algum teste pra saber se no modo mobile ficará otimizado? editei a parte dos icones com auto layout e quero saber se vai funcionar.
obs: quando eu puxo o retangulo do cabeçalho (profile) pra esquerda os icones acompanham, quando eu puxo pra direita o retangulo "engole" os icones.

Ei, Vinicius!

Sobre o "HOJE" e o quadrado azul desalinhado: Isso não é exatamente "do sistema", mas sim uma questão de como os elementos estão configurados no seu design. Isso é comum quando você ajusta elementos manualmente sem travar no grid. Teste o seguinte:

• Selecione o retângulo azul.
• Ative o Layout Grid no frame pai e use o Align to grid pra snapear o retângulo.
• Teste redimensionando o frame pra ver se mantém o alinhamento.

Isso vai deixar tudo consistente, sem precisar reorganizar o grupo inteiro.

Quanto ao teste pra mobile e a otimização: Sim, dá pra simular e testar isso direto no Figma sem complicação.

• Vá pro modo Prototype (clique na aba ao lado de Design).
• Selecione um device mobile no topo (como iPhone ou Android) para preview.
• Redimensione o frame manualmente ou use o botão de Device frames para alternar tamanhos.
• Clique em Play para interagir e ver como os elementos fluem. Fique atento aos ícones se rearranjam sem quebrar.

Por fim, sobre o retângulo do cabeçalho (profile) e os ícones: Isso acontece porque o retângulo é o background de um auto layout frame, e os ícones estão dentro dele ou agrupados de forma que o resize afeta o clipping. Quando você puxa para esquerda, os ícones acompanham porque estão "hugging" o conteúdo; para direita, o retângulo "engole" eles se o clip content estiver ativado ou se a ordem das layers estiver invertida (ícones atrás do background). Teste também:

• Selecione o frame do cabeçalho.
• No painel de Design, confira se é auto layout (se não for, converta com o botão Auto layout).
• Veja os ícones estão como children diretos do frame, com Fill container na largura se precisar expandir, ou Fixed se quiserem ficar no lugar.
• Desative o Clip content no frame se estiver on, isso impede que elementos sejam cortados ao resize.
• Teste puxando as bordas: se ainda engolir, mude a ordem das layers (arraste os ícones para o topo no painel Layers).

Espero que as sugestões te ajude, até mais!