CSS Grid a Figma: Qué Sobrevive en la Conversión a Capas

CSS grid se traduce al flujo de grid auto layout de Figma casi propiedad por propiedad. Los tracks se convierten en tracks. Los spans se convierten en spans. El gap se convierte en gap. Dos ideas exclusivas de CSS, grid-template-areas y subgrid, no tienen un equivalente nativo en Figma, así que se reconstruyen o se aplanan. Esta referencia recorre qué se traslada de forma directa, qué no, y qué pasa cuando un grid importado es demasiado complejo para reproducirse como un layout funcional.

Cómo los tracks de CSS grid se convierten en tracks de Figma

Una página construida con display: grid llega a Figma como un frame configurado en el flujo de grid auto layout. La mayor parte de lo que define ese grid en CSS tiene un lugar directo en los controles de grid de Figma. El grid auto layout de Figma organiza un frame en filas y columnas, llamadas tracks, de la misma forma que grid-template-columns y grid-template-rows lo hacen en CSS. Un objeto que abarca varias celdas en el origen, definido con grid-column o grid-row, se convierte en un objeto con un valor de Column span o Row span en Figma. Se llega ahí configurando el objeto en fill container y luego redimensionándolo hasta los bordes de las celdas.

El resto de las propiedades habituales se trasladan de forma casi igual de limpia:

Vale la pena marcar una diferencia: justify-items y align-items de CSS fijan la alineación para todo el contenedor a la vez, mientras que Figma aplica esa alineación por objeto dentro de su celda. El resultado visual suele coincidir, pero un grid importado puede terminar con cada objeto llevando su propio ajuste de alineación en lugar de una sola regla a nivel de frame.

La unidad fr es fácil de pasar por alto, así que merece su propio apartado. En CSS, 1fr 2fr reparte el espacio disponible en un tercio para la primera columna y dos tercios para la segunda. En Figma, esa misma proporción viene de configurar un track en fill container en vez de un tamaño fijo, así que una columna que usaba fr en el CSS de origen debería llegar redimensionándose junto a sus vecinas en lugar de quedarse con un ancho fijo. Según el conjunto de datos actual de caniuse, CSS grid tiene 96.89 por ciento de soporte global en navegadores, con soporte completo desde Chrome 57, Firefox 52 y Safari 10.1. Casi cualquier página que un diseñador importe hoy está trabajando con CSS grid real, no con un respaldo de flexbox o de tablas.

Lo que CSS grid tiene y el grid auto layout de Figma no

Dos conceptos de CSS grid no tienen una contraparte nativa en Figma. Saber cuáles son ahorra tiempo al revisar la importación.

grid-template-areas. CSS permite nombrar regiones de un grid con sintaxis de arte ASCII y colocar elementos por nombre de área en vez de por número de fila y columna. El grid auto layout de Figma no tiene un sistema de nombres equivalente. Cuando una página usa grid-template-areas, la importación reconstruye la posición de cada elemento como un span explícito de columna y fila. Eso reproduce el layout, pero pierde el mapeo legible por nombre de área que un desarrollador vería en el CSS.

subgrid. La referencia de CSS grid de MDN describe grid-template-columns: subgrid como una forma de que un grid anidado herede los tracks de su padre, de modo que los elementos del hijo se alineen automáticamente con las líneas de grid del padre. Figma no tiene concepto de subgrid. Un layout con subgrid llega como dos frames de grid con tracks independientes, uno padre y uno hijo anidado, cada uno con su propio gap y padding, según la guía de auto layout de Figma. Los dos frames no se mantienen alineados entre sí como lo hacían en el navegador. Esa alineación hay que reconstruirla a mano.

grid-auto-flow, la propiedad que controla cómo CSS coloca los elementos que quedan fuera del grid explícito, tampoco se traslada como un ajuste con nombre propio. Figma aproxima la misma colocación de izquierda a derecha y de arriba hacia abajo por su cuenta, con reflujo automático cuando se elimina un objeto. Pero el dimensionamiento implícito de tracks que controlan grid-auto-rows y grid-auto-columns en CSS no tiene un campo explícito que revisar después.

Cuándo la importación no puede reproducir el grid

Todo flujo de captura a Figma termina encontrando un frame que no puede reconstruirse como un grid funcional. Normalmente el CSS depende de algo para lo que el modelo de layout de Figma no tiene un lugar: grid-template-areas combinado con regiones superpuestas, por ejemplo, o un subgrid anidado varios niveles. Cuando eso pasa, el enfoque razonable es un respaldo a posicionamiento absoluto. El objeto conserva su tamaño y ubicación capturados, pero deja de comportarse como un track responsivo y hay que tratarlo como fijo.

UnHTML sigue exactamente este patrón al convertir una página. Traslada los layouts de flex y grid desde el CSS real de la página al auto layout nativo de Figma, y cuando un frame no puede reproducir la geometría capturada, cae por su cuenta a posicionamiento absoluto en lugar de adivinar un grid roto, con el cambio anotado en el reporte de importación. Ese mismo reporte también registra las sustituciones de fuentes. Una fuente faltante se sustituye por Inter de forma predeterminada, y como las celdas de un grid a veces están dimensionadas según las métricas de una fuente específica, una fuente sustituida puede alterar cómo se reacomoda una fila o columna aunque la estructura del grid se haya importado sin problemas.

Nada de esto hace que el resultado sea un clon píxel por píxel de la página original. Y no pretende serlo. grid-template-areas y subgrid son los dos lugares donde un diseñador debería esperar dedicar unos minutos a reconstruir relaciones que CSS expresaba de forma gratuita. Todo lo demás en la tabla de arriba debería estar ya donde corresponde.

Una lista rápida para páginas cargadas de CSS grid

Unas cuantas revisiones eliminan casi toda la incertidumbre al evaluar una importación de grid:

1. Busca grid-template-areas primero en el CSS de origen. Si está ahí, espera que el frame importado tenga spans explícitos en vez de regiones nombradas, y espera perder el mapeo legible entre el nombre de una región y su contenido hasta que renombres las capas tú mismo.
2. Busca subgrid después. Una sección con subgrid llega como un frame padre y un frame hijo con tracks separados. Revisa que los dos sigan alineados visualmente, y ajusta el gap o el padding del hijo si se han desviado.
3. Revisa cualquier columna o fila que usara fr. Confirma que el track correspondiente en Figma esté en fill container, no en un ancho fijo, o redimensionar el frame después no reacomodará el contenido como lo hacía la página original.
4. Abre el reporte de importación antes de tocar las capas. Tanto una sustitución de fuente como un respaldo a posicionamiento absoluto aparecen ahí, y cualquiera de los dos puede explicar una fila que se ve ligeramente distinta antes de que empieces a buscar la causa.
5. Trata justify-items y align-items como una revisión por objeto, no por frame. Como Figma aplica esa alineación a cada objeto dentro de su celda en vez de una sola vez a nivel de contenedor, cambiar la alineación de un elemento no se propaga a sus vecinos como lo haría editar la regla de CSS.

Ninguno de estos pasos requiere tocar el CSS en sí. Son las mismas cinco cosas que vale la pena revisar en cualquier importación cargada de CSS grid, ya sea que el grid venga de una página de marketing, un dashboard, o un layout editorial con varias regiones anidadas.

Conclusión

La mayor parte de lo que hace un layout de CSS grid tiene un lugar directo en el grid auto layout de Figma: los tracks se convierten en tracks, los spans en spans, el gap en gap, y la unidad fr en dimensionamiento fill container. Los dos vacíos reales son grid-template-areas, que pierde sus nombres de área y se reconstruye como spans, y subgrid, que llega como frames anidados separados en vez de un sistema alineado. Una página que depende de cualquiera de los dos es la primera que vale la pena revisar después de una importación.

UnHTML aplica exactamente este mapeo de grid a auto layout sobre páginas reales, y su página de precios incluye un nivel gratuito con un tope de 500 capas más una actualización Pro de pago único que elimina ese tope.