Dia 6: Grid e layout responsivo
A espinha dorsal de todo bom design. Aprenda a organizar seu conteúdo de forma harmoniosa e a garantir que ele fique ótimo em qualquer tela.
O que é um sistema de grid?
Pense no grid como as colunas invisíveis de um jornal ou revista. Elas não fazem parte do conteúdo, mas servem como um guia para posicionar cada texto e imagem de forma consistente. Em web design, o grid mais comum é o de 12 colunas. Por quê 12? Porque é um número magicamente divisível por 2, 3, 4 e 6, o que nos dá imensa flexibilidade para criar layouts (ex: duas colunas de 6, três de 4, quatro de 3, etc.).
Layout responsivo: o design que se adapta
Design responsivo é a prática de criar interfaces que "respondem" e se adaptam a diferentes tamanhos de tela. Um layout que funciona bem em um monitor de 27 polegadas precisa se reorganizar para ser legível e funcional em um celular de 6 polegadas. Isso geralmente é feito definindo "breakpoints" (pontos de quebra), que são larguras de tela onde o design muda. Por exemplo, um layout com 3 cards lado a lado no desktop pode se transformar em uma lista com os 3 cards empilhados verticalmente no mobile.
Colunas, calhas e margens: o vocabulário do grid
Para configurar seu grid no Figma, você encontrará estes termos:
- Colunas (Columns): Os blocos verticais onde seu conteúdo será alinhado.
- Calhas (Gutters): O espaço horizontal *entre* cada uma das colunas. É essencial para o respiro.
- Margens (Margins): O espaço nas laterais externas do grid, que o afasta das bordas da tela.
Vídeos para estruturar suas ideias
Aprender a configurar e usar grids no Figma é o primeiro passo para criar layouts profissionais.
Como usar GRID no figma? Web e Mobile (Canal Hericky Alencar)
Seu desafio de hoje: o camaleão de telas
Hoje o desafio é pensar de forma adaptativa. Você vai desenhar a mesma tela simples em duas versões: uma para desktop e outra para mobile, usando um grid de 12 colunas como base.
Checklist do desafio:
- No Figma, crie um Frame para "Desktop" (ex: 1440px de largura) e ative um Layout Grid de 12 colunas nele.
- Dentro dele, crie um layout simples com um título e três "cards de feature" lado a lado (cada card pode ocupar 4 colunas, por exemplo).
- Agora, crie um Frame para "Mobile" (ex: 375px de largura) com um grid de 4 ou 6 colunas.
- Adapte o mesmo conteúdo para a tela mobile. Como os três cards se comportarão? Eles devem ficar empilhados na vertical.
Concluiu? Mostre sua versatilidade!
Compartilhar designs responsivos mostra que você pensa na experiência do usuário em todos os contextos.