Configurar rejillas de maquetación en Figma

Una rejilla de maquetación en Figma es una superposición por marco a la que los elementos se ajustan, y la configuración que refleja una rejilla web responsiva es: rejillas de tipo columna con columnas stretch y medianil y margen fijos, un marco por breakpoint — un marco de escritorio de 1440px con 12 columnas / 24 de medianil / 66 de margen, un marco de tablet de 768px con 8 / 24 / 29, un marco de móvil de 375px con 4 / 16 / 16 — cada uno guardado como estilo de rejilla para que cualquier marco nuevo reciba la rejilla de su nivel con un solo clic.

Los números importan tanto como la mecánica: una rejilla de maquetación es el lado de diseño de la misma rejilla de maquetación que implementa el código, y ambas solo siguen siendo un mismo sistema si comparten valores. Este artículo cubre los ajustes, la configuración de tres niveles con números reales, cómo el modelo stretch se corresponde con las columnas fluidas de la web, y el truco de auditoría para pantallas que ya se publicaron.

¿Qué significan los ajustes de rejilla de maquetación de Figma?

Las rejillas de maquetación viven por marco — selecciona un marco, añade una rejilla — y vienen en tres tipos: una rejilla cuadrada uniforme, filas y columnas. Para la maquetación de página, las columnas son el tipo relevante, y cuatro ajustes las definen (la propia referencia de Figma es el documento de rejillas de maquetación):

• Recuento — cuántas columnas lleva el marco.
• Tipo — stretch, fixed (un ancho de columna fijo, los medianiles no absorben nada) o center (un bloque fijo de columnas centrado en el marco).
• Medianil — el espacio entre columnas.
• Margen — el espacio desde el borde del marco hasta las columnas más externas (solo en el tipo stretch).

Stretch es el ajuste que coincide con las rejillas web modernas: los márgenes quedan fijados, los medianiles son fijos, y las columnas se reparten el ancho que quede — la misma división del trabajo que las pistas 1fr en CSS, donde los miembros fijos se descuentan primero y las fracciones comparten lo que sobra. Los tipos fixed y center se corresponden con el antiguo modelo de lienzo fijo; todavía encajan con mesas de trabajo tipo impresión, pero para el trabajo responsivo stretch es el valor por defecto honesto.

¿Cómo configuras las tres rejillas de breakpoint?

Un marco por breakpoint, una rejilla de columnas por marco, y luego cada una guardada como estilo. Con los valores comunes por nivel:

El paso a paso: crea los tres marcos con esos anchos, añade una rejilla de columnas a cada uno, define recuento/tipo/medianil/margen a partir de la tabla, y luego guarda cada rejilla como estilo — Grid/Desktop, Grid/Tablet, Grid/Mobile. Los estilos son la capa de reutilización: a partir de ahí, nadie vuelve a teclear cuatro valores por marco; una pantalla nueva recibe la rejilla de su nivel aplicada con un solo clic, y un cambio en un estilo se propaga a cada marco que lo use.

Como las columnas se estiran, el estilo lleva las decisiones y el ancho del marco fija el resultado. El estilo de escritorio en su marco de 1440px calcula columnas de (1440 − 2 × 66 − 11 × 24) ÷ 12 = 87px; el mismo estilo aplicado a un marco de 1280px da columnas de ≈73,7px. Misma rejilla, distintos anchos — que es exactamente cómo se comporta la versión web entre breakpoints.

¿Cómo se mantienen sincronizados los números de diseño con el código?

El fallo clásico es la divergencia silenciosa: el diseñador calcula a ojo una disposición de tres columnas más o menos, el desarrollador implementa doceavos exactos, y cada entrega renegocia de quién son los números reales. La deriva no es descuido — son dos fuentes de verdad haciendo lo que dos fuentes siempre hacen. La solución es una sola fuente.

La exportación a Figma de Scale Composer entrega la rejilla como una colección de variables con un modo por breakpoint: cambia el modo y grid/columns, grid/gutter, grid/margin y grid/min-width pasan de valores de escritorio a tablet a móvil, con el ancho máximo del contenedor al lado. Los valores de cada nivel llegan al archivo como datos en lugar de ajustes tecleados a mano — los mismos números que la exportación CSS vuelve a declarar por media query.

Abre la exportación a Figma de la rejilla en Scale Composer — la colección Grid con sus tres modos, uno por breakpoint, junto a la vista de rejilla que la generó.

Una nota honesta de alcance: Figma aplica las rejillas de maquetación por marco. Las variables llevan los números de cada nivel al archivo donde todos pueden leerlos y referenciarlos, pero poner una rejilla en un marco — y mantener los valores de los estilos de rejilla emparejados con la colección — sigue siendo una acción del diseñador, no un enlace automático.

¿Cómo trabajas con una rejilla una vez que está en el marco?

Tres comportamientos hacen la mayor parte del trabajo diario. Ajuste (snapping): con la rejilla visible, los elementos que arrastras y redimensionas se ajustan a los bordes de las columnas, que es lo que convierte «abarcar cuatro columnas» en un gesto en lugar de una operación aritmética. Visibilidad: las rejillas se activan y desactivan con un atajo de teclado (el atajo de la familia Ctrl/Cmd-G, según la plataforma), así la superposición es una herramienta que invocas, no un papel pintado que aprendes a ignorar. Restricciones: los elementos con restricción izquierda-y-derecha, o configurados para escalar, siguen a las columnas stretch cuando el marco se redimensiona — fija una barra lateral a sus columnas y un marco más ancho la ensancha como lo haría el navegador.

¿Cómo auditas una pantalla ya publicada contra la rejilla?

Suelta una captura de pantalla de producción en un marco, ajusta el marco al ancho de la captura, y aplica el estilo de rejilla del nivel encima. Cada deriva se vuelve visible de un vistazo: elementos que cruzan medianiles, márgenes que crecieron en la traducción, una barra lateral que se renderiza con el ancho de cinco columnas cuando el archivo dice cuatro. El truco cuesta un minuto y convierte «el build se siente raro» en una lista de desalineaciones concretas y señalables — la misma lógica de una sola fuente que las variables, ejecutada al revés como comprobación.

Ejecuta la comprobación de paridad en un marco

Configura los tres estilos a partir de la tabla de arriba, luego verifica que el bucle se cierra: aplica el estilo de escritorio a un marco de 1200px — el ancho del contenedor — y las columnas se calculan como (1200 − 132 − 264) ÷ 12 = 67px, el mismo ancho de columna que el navegador produce dentro de un contenedor limitado. En el marco de trabajo de 1440px el mismo estilo da columnas de 87px: esa rejilla más ancha es lo que una página sin límite calcula en un viewport de 1440px, así que cuál de las dos muestra realmente el navegador lo decide un solo ajuste del lado del código, el ancho máximo del contenedor. Los números que puedes comprobar ganan a los números en los que confías — exporta la colección Grid y compárala con tus propios marcos.