Bento grids take their inspiration from the traditional Japanese bento box, a container divided into small, uneven compartments, each holding a variety of foods. These compartments — both functional and visually appealing — create a sense of order amidst diversity.
Unlike traditional grid layouts, bento grids are more dynamic in structure. Their flexible yet minimal design is something the UX world will forever appreciate. And the emergence of the bento grid is a great example of thinking outside the box when creating user-centered designs.
In this tutorial, I’ll go step by step through designing the trending bento grids in Figma.
In UX design, bento grids translate this concept into a layout system where uneven but organized sections are used to display diverse content. Their popularity stems from their ability to break free from the rigidity of traditional grid systems, offering a balance of creativity and structure.
Designers love bento grids for their flexibility, visual intrigue, and ability to highlight unique elements within a design.
From portfolios to dashboards, bento grids make layouts feel modern, dynamic, and engaging.
All in all, bento grids are a fresh alternative to the standard grid layouts that can feel monotonous.
Think of the frame as your lunchbox where all the uneven compartments will sit.
Grids provide the structure for adding smaller boxes to the bento grid frame. To set them up, add both a column and a row grid to the bento frame.
Use the following settings for the column:
Then, use the following settings to set up the row:
Now, we’ll add the compartment (uneven boxes) to the bento frame.
To view your progress without the grid overlay, press Shift+G on your keyboard:
Let’s add images to make the boxes look “aesthetic.” To do this:
We’re all done with designing the bento box. There’s still some work to be done on the responsiveness of this bento grid. When we try to stretch or squeeze the design, it gets cluttered. Something like this:
To make this process fluid, we need to set what we call constraints.
And that’s it! Your bento box is now fully responsive:
Side note:
You know that breakpoints are crucial in responsive design. Here, they’ll ensure that your bento grid adapts to different screen sizes.
On mobile, it may collapse into a single column, while tablets could display two or three columns. And on desktops, the grid utilizes the larger screen space for maximum impact.
Mastering breakpoints ensures your design is user-friendly across devices. To create responsive designs in Figma, check out this guide.
There is no single, straight way to design a bento grid, and that’s the beauty of it. Bento grids offer endless possibilities for creativity — from adding a touch of bento to existing layouts to experimenting with overlapping compartments and non-rectangular shapes.
Let’s explore a few innovative approaches:
Designers may blend bento grids with other grid types to create more versatile layouts. This hybrid approach strikes a balance between uniformity and flexibility, allowing the grid to maintain its structural integrity while offering creative freedom.
For example, the portfolio may use a 3-column modular grid as its base, but the designer introduces bento grid elements — small, irregular compartments — that add a creative twist to the layout:
Another creative approach would be:
For visual examples and more creative approaches, check out this website to find more bento grid inspirations.
The bento grid has been trending over the past year or two, giving designers a fresh way to organize layouts. But there are other grid systems, each with its own purpose and style:
| GRID TYPE | WHAT IT LOOKS LIKE | BEST FOR | NOT IDEAL FOR |
| Column grids | Divide content into uniform vertical sections | When you need to divide content into distinct sections | Designs requiring varied visual emphasis |
| Modular grids | Rows and columns are arranged in a uniform pattern | Complex designs that need a grid with consistent rows and columns | Flexible or creative layouts |
| Hierarchical grids | Asymmetrical sections with varying sizes | Unique or creative layouts with emphasis on specific content | Designs needing strict uniformity |
| Baseline grids | Horizontal lines that align text and elements | Typography-heavy layouts where alignment is crucial | Visually diverse layouts |
| Manuscript grids | Large blocks of text with consistent margins and spacing | Layouts focused on large bodies of text | Layouts that require heavy visual elements |
Here are your main takeaways on creating stunning bento grids in Figma:
Ooh, and here’s a pro tip.
Add micro-interactions to elevate your design. Include hover states (e.g., color or scale changes), subtle animations like fade-ins or zoom effects, and smooth transitions when resizing or switching layouts. These small touches enhance usability and make your grid feel alive.
Here’s the already completed file to compare when you follow along.
By following these steps and incorporating micro-interactions, your bento grids will stand out for their creativity and functionality. Start experimenting today and take your designs to the next level!
LogRocket lets you replay users' product experiences to visualize struggle, see issues affecting adoption, and combine qualitative and quantitative data so you can create amazing digital experiences.
See how design choices, interactions, and issues affect your users — get a demo of LogRocket today.
The future of design is here, and Figma is leading it. Get ahead of the curve with Make, Sites, and more. Here’s how to take action now.
Here are ten great options for usability testing and what you should consider if you’re willing to invest in a usability testing tool.
If you’re tired of jumping between tools, here are the ones that’ll make ideation, prototyping, and feedback feel like a flow.
Atomic design provides a structured way of building up complex UIs from basic building blocks and components.
Learn more →
