Cuadrículas y Sistemas de Layout

¿Qué es un sistema de cuadrícula y por qué lo necesitamos?

Imagina construir una casa sin regla ni medidas — todo quedaría torcido e inconsistente. Un sistema de cuadrícula es la regla y las medidas del diseñador digital.

Una cuadrícula es una estructura invisible que organiza los elementos de diseño en filas, columnas y márgenes consistentes. Sin una cuadrícula, cada página se verá diferente a la siguiente y cada diseñador colocará los elementos en posiciones diferentes.

Beneficios de usar una cuadrícula:

• Consistencia: todas las páginas parecen pertenecer al mismo producto
• Velocidad: en lugar de decidir dónde colocar cada elemento desde cero, la cuadrícula te da un marco dentro del cual trabajar
• Colaboración: todos los diseñadores y desarrolladores hablan el mismo idioma
• Adaptabilidad: la cuadrícula facilita convertir los diseños a diferentes tamaños de pantalla
• Legibilidad: el contenido organizado es más fácil de leer

El sistema de cuadrícula de 8 puntos (8-Point Grid)

El sistema 8-Point Grid es el estándar actual en el diseño de interfaces digitales. La idea es simple: todas las dimensiones de tu diseño deben ser múltiplos de 8.

¿Por qué 8 específicamente?

• El número 8 se divide fácilmente: 8 ÷ 2 = 4, 8 ÷ 4 = 2
• La mayoría de los tamaños de pantalla se dividen uniformemente entre 8
• Google Material Design y Apple HIG usan un sistema basado en 8

Aplicación práctica

Todos estos valores deben ser múltiplos de 8:

• Padding: 8, 16, 24, 32, 40, 48
• Margin: 8, 16, 24, 32
• Gap entre elementos: 8, 16, 24
• Tamaños de iconos: 16, 24, 32
• Alturas de botones: 32 (pequeño), 40 (mediano), 48 (grande)

Excepción: los tamaños de fuente y la altura de línea no tienen que seguir el sistema de 8 — estos valores se determinan en función de la jerarquía visual.

La cuadrícula en Figma

En Figma, puedes activar la cuadrícula fácilmente:

1. Selecciona el Frame
2. En las propiedades de Layout Grid, añade una cuadrícula
3. Selecciona Grid de 8px
4. Haz que el color de la cuadrícula sea claro con poca opacidad

Los puntos que aparecen son las líneas de la cuadrícula — cada elemento debe alinearse con ellas.

La cuadrícula de columnas (Column Grid)

La cuadrícula de columnas es el método principal para organizar el contenido horizontalmente en páginas web y aplicaciones.

Componentes de la cuadrícula de columnas

• Columns (columnas): los espacios donde se coloca el contenido
• Gutters (separadores): los espacios entre las columnas
• Margins (márgenes): el espacio entre el borde de la pantalla y la primera columna

La cuadrícula de 12 columnas

La cuadrícula más famosa en el diseño web es la de 12 columnas. ¿Por qué 12? Porque el número se divide entre:

• 2 (6 + 6) — dos mitades iguales
• 3 (4 + 4 + 4) — tres columnas
• 4 (3 + 3 + 3 + 3) — cuatro columnas
• 6 (2 × 6) — seis columnas
• Divisiones desiguales: 3 + 9, 4 + 8, 5 + 7

Esta flexibilidad hace que la cuadrícula sea adecuada para casi cualquier layout.

Configuraciones comunes para la cuadrícula de 12 columnas

Escritorio (1440px):

• Columnas: 12
• Ancho de columna: 72px
• Gutter: 24px
• Margen: 100px en cada lado

Tablet (768px):

• Columnas: 8
• Gutter: 16px
• Margen: 32px

Móvil (375px):

• Columnas: 4
• Gutter: 16px
• Margen: 16px

Sistema de espaciado

El espacio en blanco no es espacio vacío — es un elemento de diseño activo que mejora la legibilidad y construye la jerarquía visual.

Escala de espaciado

Basándose en el sistema de 8 puntos, aquí está la escala de espaciado recomendada:

Nombre	Valor	Uso
2xs	4px	Espaciado muy ajustado (entre icono y texto)
xs	8px	Espaciado ajustado (dentro de botones)
sm	12px	Espaciado pequeño
md	16px	Espaciado mediano (padding base)
lg	24px	Espaciado grande (entre elementos)
xl	32px	Espaciado mayor (entre subsecciones)
2xl	48px	Espaciado muy grande
3xl	64px	Entre secciones principales
4xl	96px	Entre secciones de la página

La Ley de Proximidad

Los elementos que están cerca entre sí parecen relacionados y los elementos que están lejos parecen separados. Úsalo para organizar la información:

• Espacio entre un título y su contenido: pequeño (8-16px)
• Espacio entre dos secciones diferentes: grande (32-48px)
• Espacio entre secciones de la página: muy grande (64-96px)

Una diferencia clara en los espaciados permite al usuario entender la estructura de la página sin leer una sola palabra.

Alineación (Alignment)

La alineación es lo primero que el ojo nota — aunque el usuario no sea consciente de ello. Un solo elemento desalineado hace que algo se sienta incorrecto.

Tipos de alineación

• Alineación izquierda/derecha: la más común para textos. En árabe (RTL), la alineación a la derecha es la predeterminada
• Alineación al centro: para títulos principales y hero sections. No la uses para textos largos
• Alineación a la cuadrícula: todos los elementos deben alinearse con las líneas de la cuadrícula

Alineación en diseño RTL

En el diseño árabe:

• El texto se alinea a la derecha
• Los menús empiezan desde la derecha
• Los botones principales están a la izquierda (opuesto a LTR)
• El progreso se mueve de derecha a izquierda

Consejo: cuando diseñes para RTL, piensa como si estuvieras viendo el diseño en un espejo — no todo se invierte, pero la dirección general cambia.

Patrones de layout comunes

1. Layout de una sola columna

El layout más simple — todo el contenido en una sola columna en el centro de la página. Adecuado para:

• Páginas de artículos y blogs
• Páginas de inicio de sesión
• Móvil

Ancho del contenido: normalmente 600-800px

2. Layout de dos columnas

Una columna principal de contenido y una barra lateral (sidebar). Adecuado para:

• Paneles de control (dashboards)
• Correo electrónico
• Aplicaciones de notas

Proporción común: 8 columnas de contenido + 4 columnas de Sidebar (o 9 + 3)

3. Layout de tarjetas (Card Grid)

Tarjetas iguales en una cuadrícula. Adecuado para:

• Páginas de productos
• Galerías de portfolio
• Resultados de búsqueda

Configuración: 3-4 tarjetas por fila en escritorio, 2 en tablet, 1 en móvil.

4. Layout roto (Broken Grid)

Un layout creativo que rompe deliberadamente las reglas de la cuadrícula. Los elementos se superponen y tienen diferentes tamaños. Adecuado para:

• Sitios web creativos
• Landing pages

Advertencia: difícil de implementar y hacer responsive. Úsalo solo cuando sea apropiado para el contenido.

5. Layout en patrón F (F-Pattern)

Basado en cómo el usuario escanea la página — el ojo escanea horizontalmente en la parte superior y luego desciende verticalmente. Adecuado para:

• Páginas de inicio
• Páginas de noticias
• Motores de búsqueda

Auto Layout en Figma

Auto Layout es la funcionalidad más potente de Figma para los diseñadores. Te permite construir componentes flexibles que se adaptan automáticamente al contenido — igual que funciona CSS Flexbox en la web.

Conceptos básicos

• Direction: la dirección — horizontal o vertical
• Gap: el espacio entre los elementos internos
• Padding: el espacio entre el contenido y el borde del frame
• Alignment: la alineación de los elementos dentro del frame

Usos prácticos

Botón simple: Auto Layout horizontal + Padding 12 arriba/abajo y 24 izquierda/derecha + Gap 8 entre icono y texto

Tarjeta: Auto Layout vertical + Padding 16 en todos los lados + Gap 12 entre elementos

Lista de elementos: Auto Layout vertical + Gap 0 + Padding 0 (cada elemento tiene su propio padding)

Barra de navegación: Auto Layout horizontal + Space Between + Padding 16

Fill Container y Hug Contents

• Hug Contents: el elemento toma exactamente el tamaño de su contenido — adecuado para botones y etiquetas
• Fill Container: el elemento llena el espacio disponible — adecuado para campos de entrada y columnas flexibles
• Fixed: ancho o alto fijo — para imágenes e iconos

Trabajar con restricciones (Constraints)

Max Width y Min Width

• Max Width: un límite máximo en el ancho del contenido. Muy importante para la legibilidad — el texto que se extiende al ancho completo de una pantalla grande es imposible de leer
• Min Width: un ancho mínimo. Importante para los botones — no dejes que un botón se encoja hasta el punto en que su texto se corte

Contenido variable

Diseña siempre para el contenido más largo y más corto:

• ¿Cómo queda la tarjeta si el título es de una línea? ¿Y si son tres líneas?
• ¿Cómo queda la lista si tiene 3 elementos? ¿Y si tiene 30?
• ¿Cómo queda la tabla si una columna tiene un número de una cifra? ¿Y si tiene 10 cifras?

Esto se llama Edge Cases y es lo que diferencia un diseño robusto de uno frágil.

Errores comunes en el layout

1. Cuadrícula inconsistente

Cuando el espaciado cambia de página en página o incluso de sección en sección en la misma página. Define una escala de espaciado y síguelo.

2. Márgenes demasiado pequeños en móvil

El contenido que toca el borde de la pantalla se siente abarrotado. 16px de margen es el mínimo en móvil.

3. No usar Auto Layout

Cada frame en Figma debe tener Auto Layout a menos que haya una razón específica. Un diseño sin Auto Layout no es escalable.

4. Ignorar el espacio en blanco

El espacio vacío no es un desperdicio — es respiración visual. Un diseño abarrotado hace que el usuario se sienta agobiado.

5. Diseñar solo para un tamaño

Si diseñaste solo para escritorio, cuando el desarrollador convierta el diseño para móvil tendrá que tomar decisiones de diseño por su cuenta — y eso no es su trabajo.

Ejercicio práctico

Diseña una página de inicio para una aplicación de noticias:

1. Construye la cuadrícula: 12 columnas, Gutter 24px, Margen 100px (escritorio)
2. Header: una barra de navegación que abarque todo el ancho
3. Hero Section: una noticia principal que ocupe 8 columnas + noticias laterales en 4 columnas
4. Content Grid: tarjetas de noticias en una cuadrícula de 3×3
5. Footer: información y enlaces en 4 columnas

Después de terminar el escritorio, crea una versión de tablet (8 columnas) y otra de móvil (4 columnas). Observa cómo el contenido se adapta con el cambio en el número de columnas — eso es la esencia del diseño responsive.