El diseño responsive y las grids en Figma son la base para construir interfaces que se vean bien en cualquier dispositivo. Aquí entenderás qué significa responsive, qué es mobile first y cómo armar una grilla de 12 columnas en Figma usando una escala octal. Es una guía pensada para diseñadores UI/UX que están dando sus primeros pasos con layouts adaptativos.

¿Qué es el diseño responsive y en qué se diferencia de mobile first?

Cuando hablamos de responsive design, nos referimos a un layout adaptativo que se ve bien en cualquier dispositivo: tablet, smartphone o desktop. La idea es que el navegador renderice la información de forma flexible, sin importar el tamaño de la pantalla.

Ahora, mobile first es algo distinto, aunque relacionado. Es un enfoque que parte desde el navegador: diseñas pensando primero en el dispositivo móvil, y luego escalas hacia pantallas más grandes. Así, cualquier estilo que incluyas se verá bien de principio a fin en mobile.

¿Qué significa mobile first en diseño web? Es un enfoque donde diseñas primero para pantallas pequeñas y luego adaptas el layout a tablets y desktops. El nombre viene de cómo el navegador prioriza los estilos al renderizar.

¿Por qué usar una grid octal en diseño UI?

Las grids existen desde la época de la imprenta. Una grid es una rejilla que te ayuda a organizar y diseñar todo el contenido de forma uniforme y consistente. En diseño digital, usamos una grid octal, que significa trabajar con múltiplos de ocho.

¿Por qué octal? Porque establece un ritmo vertical que evita que tomes decisiones sobre medidas constantemente. Tienes valores predefinidos y consistentes que aceleran tu flujo de trabajo. [00:51]

Las ventajas de trabajar con grids son varias:

• Permiten un diseño uniforme y consistente entre pantallas.
• Facilitan el trabajo responsive porque muchas se comportan de forma fluida.
• Sirven tanto para layouts digitales como para piezas de imprenta como revistas.
• Te liberan de pensar en medidas arbitrarias.

¿Cómo crear una grid de 12 columnas en Figma?

Armar una grilla en Figma es bastante simple. Primero, presionas la tecla F para crear un frame. En el panel derecho aparecen opciones como MacBook Pro o Desktop, y al elegir Desktop obtienes las dimensiones estándar de 1440 píxeles. [01:48]

Para agregar la grilla, vas al panel derecho y buscas la sección Layout Grid. Tienes dos caminos:

1. Crear una grid desde cero ajustando columnas, filas y gutter.
2. Hacer clic en los cuatro puntos para acceder a estilos predefinidos guardados en tu librería.

Los estilos incluyen colores, sombras, tipografía y también grids. Si tu equipo ya tiene una grid de 12 columnas configurada en la librería, puedes reutilizarla directamente.

¿Cómo configurar el gutter y las columnas?

El gutter es el espacio entre columnas. En este caso lo configuramos en 24, porque seguimos la regla de múltiplos de ocho. Dentro de la configuración avanzada también puedes:

• Cambiar el color de la grid para distinguirla visualmente.
• Hacerla visible u oculta según necesites.
• Definir si debe estirarse, crecer al centro, a la derecha o a la izquierda.

Desde Edit Style puedes nombrar la grid y describir su uso, por ejemplo: grid de 12 columnas para layout desktop. Eso ayuda a tu equipo a saber cuándo aplicarla. [03:30]

¿Qué es el gutter en una grid? Es el espacio que separa una columna de otra. En diseño octal se configura en múltiplos de ocho, como 16 o 24 píxeles, para mantener la coherencia visual.

¿Qué sigue después de armar la grid?

Una vez que tienes la grilla lista, el siguiente paso son los constraints. Los constraints le indican a un elemento cómo debe comportarse de forma responsive dentro de su contenedor, ya sea el frame general o las columnas de la grid.

Con esto puedes empezar a montar el layout principal de tu página: la barra de navegación, la sección de cards y demás bloques estructurales. La grid te da el esqueleto, y los constraints le dan la flexibilidad.

¿Ya intentaste armar tu primera grid de 12 columnas en Figma? Cuéntame en los comentarios qué proyecto estás diseñando y qué resolución estás usando como base.