Figma Grid 2025: Debes entender CSS Grid si diseñas para web

Sergio Vergara -

Con el anuncio del nuevo sistema de Grid en Figma durante Config 2025, el diseño de interfaces entra en una nueva fase. Esta actualización representa mucho más que una mejora funcional. Es un puente entre diseño y desarrollo. Pero para cruzarlo bien, hay que entender qué hay al otro lado: cómo funciona CSS Grid.

De auto layout a grid: una evolución natural

Hasta ahora, Figma se apoyaba principalmente en Auto Layout, un sistema inspirado en Flexbox. Es decir, diseño en una sola dirección: horizontal o vertical. Con el nuevo Figma Grid, se abre la posibilidad de diseñar en dos dimensiones simultáneamente: filas y columnas, igual que con CSS Grid en desarrollo web.

El nuevo panel de Layout en Figma ahora incluye tres opciones:

  • Ninguno
  • Auto Layout (Horizontal o Vertical)
  • Grid (el gran protagonista, inspirado en CSS Grid)

Esta última opción permite definir estructuras complejas, con múltiples filas y columnas, y posicionar elementos de forma precisa y fluida.

¿Qué es CSS Grid y por qué importa?

CSS Grid es un sistema de diseño en dos dimensiones que permite organizar contenido en filas y columnas, y situarlo con precisión. Desde cabeceras y sidebars hasta sistemas de cards o galerías, CSS Grid es la base de muchas interfaces modernas. Comprender cómo funciona te permite diseñar pensando en cómo se implementará tu trabajo como diseñador.

Figma ha creado su nuevo Grid inspirándose directamente en CSS Grid. Pero no es una copia exacta. Entender sus similitudes y diferencias te permitirá colaborar mejor con tu equipo de desarrollo y evitar sorpresas al ver el diseño implementado en el navegador.

CSS Grid explicado visualmente: como una “bento box”

Cada ingrediente (botones, imágenes, textos) se coloca en su compartimento, definido por líneas de grid. Figma ahora te permite imitar esta lógica: colocas un componente en el cruce de líneas.

Líneas de grid: cambia tu mentalidad

Los diseñadores pensamos en columnas. Pero CSS Grid piensa en líneas.

grid-column: 1 / 4;
grid-row: 2 / 3;

Esto no son “3 columnas”, sino “de la línea 1 a la 4”. Este cambio sutil implica mayor control y precisión.

Comparativa directa: Figma Grid vs CSS Grid

Característica

CSS Grid

Figma Grid 2025

Diseño en 2D (filas + columnas)

✅ Sí

✅ Sí

Gutters y márgenes

✅ Personalizable

✅ Personalizable

Áreas nombradas

✅ Sí

❌ No (aún)

Unidades fr

✅ Sí

❌ No

Auto width/height

✅ Sí

❌ No todavía

Grid implícito

✅ Sí

❌ No (todo es explícito)

Anidación de layouts

✅ Sí

✅ Sí

Grid no reemplaza Auto Layout, se complementan

  • Auto Layout = Flexbox → alineación uno a uno (columnas o filas).
  • Grid = CSS Grid → control total en dos direcciones.

Grids implícitos

CSS puede generar filas o columnas automáticamente cuando el contenido lo necesita (implícito). Figma, por ahora, no. Por eso, es importante que sepas cómo se comportará tu diseño cuando pase al mundo real:

  • ¿Se romperá el layout al añadir más elementos?
  • ¿Hay huecos inesperados?
  • ¿El navegador los rellena como tú esperas?

Si conoces CSS Grid, no te pillará desprevenido.

Recomendaciones prácticas

  1. Activa las etiquetas de propiedades en Figma: Te ayudan a entender qué estás configurando realmente.
  2. Usa Dev Mode para ver equivalencias CSS: Verás instrucciones como grid-column: 1 / 3, lo que facilita la comunicación con developers.
  3. Experimenta con Codepens: Te comparto estos enlaces interactivos para que entiendas cómo funcionan los fr, auto-fit, y más.

Conclusión

El nuevo Grid de Figma es una herramienta poderosa que acerca aún más diseño y desarrollo. Pero no es magia. Para aprovechar todo su potencial necesitas entender cómo funciona CSS Grid, qué limitaciones tiene Figma y cómo se comportará tu layout en el navegador.

Diseñar sin conocer CSS Grid es como componer música sin saber leer partituras. Puedes hacerlo, pero te perderás la armonía entre lo visual y lo funcional.

Referencias:
· Figma’s new grid — you must understand CSS Grid as a designer