Bite-sized bento grid UX designs: Think outside the lunchbox – LogRocket Blog

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.

Why are bento grids so popular today?

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.

How to create a bento grid in Figma

1. Setting up the frame

Think of the frame as your lunchbox where all the uneven compartments will sit.

1. Create a new frame in Figma
2. Set the width to 1200 and height to 675
3. Name this frame “Bento” to keep things organized

2. Adding grids

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:

• Type — Stretch
• Count — 12
• Gutter — 24
• Margin — 24

Then, use the following settings to set up the row:

• Type — Stretch
• Count — 6
• Gutter — 24
• Margin — 24

3. Adding boxes to the bento frame

Now, we’ll add the compartment (uneven boxes) to the bento frame.

1. Use the Rectangle tool to draw boxes inside the grid. Experiment with sizes and positions to create a dynamic layout
2. Rename each rectangle to “Box” for better organization
3. Smooth the edges of each box by setting the corner radius to 8px

To view your progress without the grid overlay, press Shift+G on your keyboard:

Add images to the boxes

Let’s add images to make the boxes look “aesthetic.” To do this:

1. Open the Actions tab by pressing Ctrl+K (Windows) or Cmd+K (Mac)
2. Search for the Unsplash plugin and launch it
3. Select each box, choose an image from Unsplash, and apply it. The images will fill the boxes automatically since they’re set to Fill mode

4. Making the bento box responsive

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.

1. Select the bento frame
2. Press Enter to select all the boxes within it
3. Apply constraints to the boxes by setting them to “Left & Right” and “Top & Bottom”

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.

Bento grid examples in real-world

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:

Combining bento grids with other grid types

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:

• Overlapping compartments
• Using non-rectangular shapes

For visual examples and more creative approaches, check out this website to find more bento grid inspirations.

Other types of grids

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:

Conclusion

Here are your main takeaways on creating stunning bento grids in Figma:

1. Start with a clear frame — Use a structured frame as the foundation for your grid
2. Use grids effectively — Combine column and row grids for balance and flexibility
3. Design dynamic compartments — Experiment with uneven box sizes for visual intrigue
4. Polish aesthetics — Smooth edges and use high-quality images for a clean look.
5. Ensure responsiveness — Apply constraints and breakpoints for seamless adaptability
6. Blend grid types — Combine bento grids with other grid systems for unique layouts

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!