As grades bento inspiram-se nas tradicionais caixas bento japonesas, que são divididas em compartimentos pequenos e desiguais, criando uma sensação de ordem na diversidade. Essas grades são dinâmicas e oferecem flexibilidade e uma estética minimalista, sendo uma alternativa criativa aos layouts tradicionais.

O tutorial detalha a criação de grades bento no Figma, começando com a configuração de uma nova moldura e a adição de colunas e linhas para criar a estrutura desejada. O design envolve a criação de compartimentos desiguais para um layout dinâmico e a inclusão de imagens para uma estética agradável.

Por que as grades bento são populares?

Elas quebram a rigidez dos sistemas de grade tradicionais, oferecendo equilíbrio entre criatividade e estrutura. Designers as amam por sua flexibilidade e capacidade de destacar elementos únicos em um design.

Como criar uma grade bento no Figma

1. Configurando a moldura

A moldura é a base onde todos os compartimentos desiguais serão inseridos. Crie uma nova moldura no Figma com largura de 1200 e altura de 675, nomeando-a de “Bento”.

2. Adicionando grades

Adicione grades de coluna e linha para estruturar a moldura bento.

3. Adicionando caixas à moldura

Use a ferramenta de retângulo para desenhar caixas dentro da grade. Experimente tamanhos e posições para um layout dinâmico.

4. Tornando a caixa bento responsiva

Defina as restrições para as caixas, configurando-as para “Esquerda & Direita” e “Topo & Fundo” para garantir a adaptabilidade.

Exemplos de grades bento no mundo real

Grades bento oferecem infinitas possibilidades criativas, podendo ser combinadas com outros tipos de grade para layouts versáteis.

Por fim, o artigo oferece dicas para adicionar micro-interações que melhoram a usabilidade e tornam o design mais envolvente.