Bento Grid: qué es y cómo diseñarlo en Figma paso a paso

Es una guía completa: anatomía, tutorial, pesos, responsive, errores y recursos. Usa el índice si quieres ir directo a una parte, y al final te dejo una plantilla gratis para arrancar.

Qué es un bento grid y de dónde viene

Un bento grid es un layout formado por celdas rectangulares de distinto tamaño, organizadas en una rejilla unificada con gutters (espacios) consistentes. El nombre viene de los bento japoneses, esas cajas de comida con compartimentos de distinto tamaño que separan los elementos sin desperdiciar ni un hueco. Llegó al diseño web de la mano de Apple, que usa este patrón en sus páginas de producto desde hace años, y de ahí saltó al resto del sector.

La idea clave: no es una rejilla uniforme de tarjetas iguales. Es una composición donde el tamaño de cada celda comunica importancia. La grande manda, las pequeñas acompañan. Esa es toda la magia.

Por qué funciona tan bien (y por qué es tendencia)

Hay tres razones de fondo, y ninguna es estética:

• Jerarquiza de forma natural. El ojo va primero a la celda más grande. Defines la importancia con el tamaño, sin necesidad de flechas ni textos «mira aquí».
• Reduce decisiones. Todo está visible a la vez, sin scroll infinito ni pestañas. El usuario abarca el conjunto de un vistazo.
• Absorbe contenido heterogéneo. Puedes mezclar texto, imagen, vídeo, datos o un gráfico en la misma sección sin que se vea desordenado.

Encaja además con la dirección estética de 2026: paletas más cálidas, tipografía amplia y mucho aire. Ese «respirar» se nota especialmente bien dentro de celdas modulares con bordes redondeados.

Anatomía de un bento grid efectivo

Un bento que funciona cumple cinco reglas. Saltarte una sola es lo que separa «jerarquizado» de «puzzle sin armar».

Regla	Recomendación
Rejilla base	12 columnas en desktop, 6 en tablet, 1 en móvil
Gutter constante	Entre 16 y 32 px, igual en todo el grid
Anchos de celda	Múltiplos limpios: 2, 3, 4 o 6 columnas (sin fracciones raras)
Celda dominante	Al menos una por sección que mande sobre las demás
Consistencia visual	Mismo radio de borde, sombra y padding en todas las celdas

Si interiorizas solo una, que sea la cuarta: sin celda dominante no hay bento, hay una cuadrícula. La jerarquía es el corazón del patrón.

Tutorial paso a paso en Figma

Vamos a montarlo desde cero. Si aún no tienes soltura con auto layout, este ejercicio te lo va a fijar para siempre.

1. Crea el frame. Un frame de 1440 px de ancho con auto layout vertical. Será el contenedor de tus secciones.
2. Activa la rejilla. Añade un layout grid de 12 columnas, con márgenes laterales de 80 px y gutter de 24 px. Esta rejilla es tu guía, no se exporta.
3. Crea la fila. Dentro del frame, una fila con auto layout horizontal y una altura mínima de unos 280 px. El gap entre celdas debe coincidir con el gutter (24 px).
4. Construye las celdas. Cada celda es un frame con auto layout interno, fondo, border-radius de 24 px y padding de 32 px. Así el contenido nunca toca el borde.
5. Reparte los anchos. Asigna a cada celda su número de columnas: por ejemplo una de 6 + dos de 3, o una de 8 + una de 4. Usa «fill container» para que se ajusten solas.
6. Rellena con contenido. Título, texto, icono o imagen dentro de cada celda, respetando el mismo padding. La celda dominante lleva el mensaje principal.
7. Convierte en componentes. Transforma las celdas en componentes con variantes (tamaño S, M, L). Reutilizarlas y mantener la consistencia será inmediato.

El secreto del bento en Figma es auto layout dentro de auto layout: filas que reparten ancho y celdas que reparten su contenido. Cuando lo dominas, reorganizar es arrastrar y soltar.

Si te atascas con las fuentes al maquetar, te vendrá bien repasar cómo añadir tipografías en Figma antes de seguir.

Composiciones de pesos que funcionan

No improvises la distribución. Estas combinaciones sobre una rejilla de 12 columnas dan resultado casi siempre:

• 6 + 3 + 3. Una dominante a la izquierda y dos de apoyo. La más versátil para una sección de características.
• 8 + 4. Un bloque protagonista enorme (imagen o vídeo) y una columna de texto. Ideal para hero o destacado.
• 4 + 4 + 4 con una celda doble de alto. Tres columnas donde una se estira en vertical para romper la simetría.
• 6 + 6 alternando alturas. Dos mitades que no miden lo mismo de alto; el desajuste controlado da dinamismo.

Regla práctica: entre 4 y 9 celdas por sección. Con menos parece una rejilla normal; con más, agobia.

Adaptarlo a responsive sin romperlo

El error que más se repite es intentar mantener el bento intacto en móvil. No funciona: las celdas quedan minúsculas e ilegibles. La estrategia correcta en 2026 es por breakpoint:

• Desktop (≥1024 px). El bento completo, con su celda dominante y los pesos repartidos.
• Tablet (768-1023 px). Colapsa a dos columnas y reordena con criterio: lo importante primero.
• Móvil (<768 px). Una sola columna, apilando las celdas en orden de jerarquía. La dominante arriba del todo.

En Figma, documenta cada breakpoint como una variante del frame. Así el desarrollador ve exactamente cómo se reordena y no improvisa. Y si quieres que ese diseño llegue al código sin pelearte con CSS, te interesa la combinación con Tailwind CSS v4, que mapea muy bien las rejillas modulares.

Errores comunes que lo arruinan

• Todas las celdas iguales. Sin dominante no hay jerarquía; vuelve a ser una cuadrícula aburrida.
• Gutters irregulares. Espacios distintos entre celdas rompen la sensación de rejilla unificada al instante.
• Demasiadas celdas. Más de nueve por sección satura y se pierde el efecto de «todo a la vista».
• Radios y sombras mezclados. Una celda con borde de 8 px y otra de 24 px parece un error, no una decisión.
• Forzar el bento en móvil. El pecado capital. En móvil, una columna y jerarquía vertical.

Ejemplos reales para inspirarte

Estudiar cómo reparten pesos los que lo hacen bien enseña más que cualquier teoría. Algunas referencias que merece la pena analizar: las páginas de producto de Apple (el origen del patrón), las páginas de funciones de Notion (jerarquía impecable), Stripe (bento con datos y números), Linear (bento minimalista) y Vercel (bento con interactividad). Abre cualquiera, identifica la celda dominante y cuenta las columnas: verás las cinco reglas aplicadas.

Recursos y plugins de Figma

Para acelerar, apóyate en plugins de Figma que generan rejillas y rellenan contenido de prueba, y en kits de UI ya montados con secciones bento. Si tu trabajo es para un cliente y necesitas ir rápido con licencia comercial, partir de un UI kit profesional te ahorra horas frente a maquetar desde cero.

Tip: Si quieres partir de una base profesional, en Envato Elements tienes UI kits y plantillas de Figma con licencia comercial, muchas con secciones bento listas para adaptar a tu marca.

Preguntas frecuentes

¿El bento grid funciona en móvil?

Solo si lo colapsas a una columna manteniendo el orden de jerarquía: la celda dominante primero. Forzar el bento en pantallas pequeñas produce celdas demasiado diminutas para leerse.

¿Cuántas celdas debe tener un bento grid?

Entre 4 y 9 por sección. Una dominante de 6 columnas, dos a cuatro medianas de 3-4 columnas y, si hace falta, alguna pequeña de 2. Menos parece una rejilla normal; más se vuelve abrumador.

¿Bento grid o grid tradicional para una landing?

Bento si tienes 4-8 elementos heterogéneos que jerarquizar (características, ventajas, métricas). Grid tradicional si todo el contenido tiene el mismo peso, como un catálogo, un listado o un blog.

¿Necesito auto layout para hacer un bento en Figma?

No es obligatorio, pero te lo recomiendo. Con auto layout las celdas se ajustan solas al cambiar contenido o anchos, y reorganizar la composición es arrastrar bloques en lugar de recolocar todo a mano.

¿El bento grid perjudica el SEO o la velocidad?

No por sí mismo. Es un patrón de maquetación; lo que afecta al rendimiento es cómo lo implementas (imágenes pesadas, demasiado JavaScript). Cuida las imágenes de las celdas y vigilarás los Core Web Vitals sin problema.

¿Cómo paso el bento de Figma a código?

Con CSS Grid es casi directo: defines las columnas y asignas a cada celda cuántas ocupa con grid-column y grid-row. Frameworks como Tailwind lo hacen con clases de utilidad, y los breakpoints reflejan tus variantes de Figma.

Conclusión

El bento grid es la herramienta de jerarquía visual más potente que tiene un diseñador en 2026. Bien hecho, comunica más en menos espacio que cualquier layout tradicional; mal hecho, parece un puzzle sin armar. La diferencia está en respetar las cinco reglas de anatomía y trabajar la versión móvil con la misma dedicación que la de escritorio. Abre Figma y monta tu primera fila 6 + 3 + 3: en diez minutos lo tienes.

¿Vas a probar el bento en tu próximo proyecto? Cuéntame en los comentarios qué composición de pesos vas a usar.