¿HTML to Frames lee mi CSS para crear el Auto Layout?

Trabaja a partir de la geometría renderizada por el navegador en lugar de copiar propiedades CSS. Primero se construye la página con precisión de píxel y luego se deducen de dentro hacia fuera las pilas, los espacios, el padding y la alineación. La posición de cada hijo se verifica con una tolerancia de 2 px, así que el resultado coincide con lo que dibujó el navegador, tanto si el layout venía de flexbox, de grid o del flujo de bloque normal.

¿Cómo se convierte CSS Grid si Figma no tiene Auto Layout en cuadrícula?

Las cuadrículas se traducen a la estructura más parecida que se pueda verificar. Las cuadrículas uniformes con columnas iguales suelen convertirse en filas que se ajustan, los layouts asimétricos en pilas horizontales y verticales anidadas, y las celdas con spans complejos o solapamientos mantienen posiciones absolutas con restricciones. En cualquier caso, el resultado visual coincide con el navegador.

¿Qué pasa cuando un frame no puede convertirse en Auto Layout?

Primero se prueba un plan de layout más sencillo. Si tampoco supera la verificación, el frame mantiene posiciones absolutas y recibe restricciones sensatas, como Stretch, Scale, Center, Min o Max, así que sigue comportándose bien al redimensionarlo. La pantalla de resultados indica por qué cada uno de esos frames se quedó en posición absoluta, lo que te ayuda a ajustar tu CSS.

¿flex-grow se convierte en Fill container en Figma?

Sí, en los casos típicos. Los hijos que crecen con flex-grow o flex: 1 pasan a Fill container, y las filas de tarjetas iguales se convierten en elementos Fill iguales. En las barras de encabezado con un logotipo, un menú e iconos repartidos, el elemento del hueco pasa a Fill, de modo que los elementos exteriores se quedan anclados a los bordes cuando redimensionas el frame.

¿Qué parte de una página suele acabar con Auto Layout?

En nuestras pruebas con sitios reales, se dedujo Auto Layout en aproximadamente entre el 86 y el 97 % de los frames, por ejemplo el 93 % en el sitio de un producto y el 88 % en Linear y Stripe. Los resultados dependen de cómo esté escrito el CSS; los espacios uniformes, flexbox y los contenedores explícitos aumentan la proporción.

CSS to Figma Auto Layout: guía de flexbox y grid a Auto Layout

Cómo se traduce CSS a Auto Layout de Figma: flex-direction, gap, padding, alineación, flex-grow, wrap, grid, absolute y max-width, con consejos para importar limpio.

EUREKA! · 22 de octubre de 2026 · 10 min de lectura

Si escribes código front-end, el Auto Layout de Figma te resultará familiar: una dirección, un espacio, padding, alineación, hijos que se ajustan al contenido (hug) o rellenan (fill). Es tentador suponer que pasar de CSS a Auto Layout de Figma (CSS to Figma Auto Layout) es una traducción uno a uno. No lo es. Flexbox y Grid son más ricos, el navegador resuelve márgenes, porcentajes y tamaños intrínsecos que el Auto Layout no modela, y el mismo resultado visual puede salir de CSS muy distinto.

Esta guía explica cómo HTML to Frames traduce los layouts CSS a Auto Layout, por qué cada resultado se verifica contra el navegador, dónde están los límites y cómo escribir CSS que se importe limpiamente.

El enfoque: primero la geometría, luego la deducción

Un conversor ingenuo lee display: flex y copia las propiedades. Eso se rompe enseguida: un contenedor flex con gap: 0 y márgenes en los hijos, un elemento de bloque que solo parece una pila vertical o una cuadrícula que se renderiza como dos filas ordenadas.

HTML to Frames trabaja a partir de lo que el navegador renderizó realmente:

Construir con precisión de píxel. La página se construye primero en Figma con posiciones absolutas tomadas de la geometría medida por el navegador.
Recorrer de dentro hacia fuera. Empezando por los frames más profundos, el plugin deduce pilas verticales, pilas horizontales, filas que se ajustan, espacios, padding y alineación a partir de posiciones y tamaños.
Añadir significado responsive. El contenido centrado pasa a Center, las cajas con ancho máximo siguen centradas, las tarjetas iguales y flex-grow pasan a Fill, y en una barra "logo … menú … iconos" el elemento del hueco pasa a Fill.
Verificar. Se aplica el Auto Layout y luego se comprueba la posición de cada hijo frente al original, con una tolerancia de 2 px.
Retroceder con seguridad. Si no se sostiene, se prueba un plan más sencillo. Si también falla, el frame mantiene posiciones absolutas con restricciones sensatas (Stretch, Scale, Center, Min, Max).

Como la deducción parte de la geometría renderizada, una pila de elementos de bloque se convierte en un Auto Layout vertical igual que una columna flex. El mecanismo CSS importa menos que el resultado. Para una visión más general, consulta Auto Layout explicado.

La tabla de correspondencias

Así se traducen normalmente los patrones CSS habituales. Tómala como el resultado esperado, no como una promesa; la verificación tiene la última palabra.

CSS	Resultado de Auto Layout en Figma	Notas
`flex-direction: column`	Auto Layout vertical	El apilado normal del flujo de bloque también se traduce aquí
`flex-direction: row`	Auto Layout horizontal
`row-reverse`, `column-reverse`	Pila en el orden renderizado	Las capas siguen el orden visual
`gap: 24px`	Espaciado entre elementos de 24	Medido a partir de las distancias reales
Márgenes iguales entre hermanos	Espaciado entre elementos	Se deduce cuando las distancias son uniformes
`padding: 32px 24px`	Padding superior/inferior 32, izquierdo/derecho 24	Medido a partir del desplazamiento de los hijos
`justify-content: flex-start`	Eje principal: inicio
`justify-content: center`	Eje principal: centro
`justify-content: flex-end`	Eje principal: final
`justify-content: space-between`	Space between, o el elemento del hueco pasa a Fill	Las barras de encabezado suelen quedar como logo, Fill, iconos
`align-items: center`	Eje transversal: centro
`align-items: stretch`	Hijos en Fill en el eje transversal	Cuando los hijos realmente se estiran
`flex: 1` / `flex-grow: 1`	Fill container en el eje principal	Las tarjetas iguales pasan a ser elementos Fill iguales
`width` fijo en un hijo	Ancho fijo
Hijo con tamaño según el contenido	Hug contents
`flex-wrap: wrap`	Filas que se ajustan	Usa el wrap de Auto Layout
`display: grid` con columnas iguales	Filas que se ajustan, o pilas anidadas	Depende de lo que se verifique
`grid-template-columns` con spans	Pilas horizontales/verticales anidadas	O absoluto si los spans se solapan
`max-width` + `margin: 0 auto`	Caja centrada dentro de un frame de ancho completo	La caja de contenido sigue centrada al redimensionar
`position: absolute`	Absoluto dentro de su frame, con restricciones	Los solapamientos no caben en una pila
`position: fixed` / `sticky`	Comportamiento fijo o sticky en el modo Present	Los encabezados siguen funcionando en los prototipos
`z-index`	Orden de capas	Coincide con el apilamiento del navegador
`transform: rotate()` / `scale()`	Se aplican rotación y escala	Skew y 3D aún no se admiten

Flexbox en detalle

Dirección y orden

flex-direction determina si un contenedor se convierte en una pila horizontal o vertical. Como la deducción usa las posiciones renderizadas, las direcciones invertidas y order simplemente producen capas en orden visual. Lo que ves en el navegador es lo que obtienes en el panel de capas.

Gap y padding

gap es la entrada más limpia: una única distancia uniforme entre hijos que se traduce directamente al espaciado entre elementos de Auto Layout. Los márgenes entre hermanos funcionan cuando son uniformes. Cuando no lo son, por ejemplo 16, 24, 16, el plugin no puede representarlos como un único espacio, y la verificación elegirá otro plan o mantendrá las posiciones absolutas.

El padding se mide a partir de dónde están realmente los hijos dentro del contenedor, así que padding, el grosor de border y los márgenes interiores contribuyen todos al resultado.

Justify y align

justify-content se traduce a la alineación en el eje principal y align-items, a la alineación en el eje transversal. El caso interesante es space-between. En un encabezado del tipo "logo … menú … iconos", el plugin convierte el elemento del hueco en Fill, así que al redimensionar el logotipo se queda a la izquierda, los iconos a la derecha y el centro se estira. Es el significado responsive que esperarías, en lugar de un valor de espaciado fijo que solo funciona en un ancho.

flex-grow y Fill

Los hijos con flex-grow o flex: 1 pasan a Fill container. Las filas de tarjetas iguales se convierten en elementos Fill iguales, así que al redimensionar el frame padre las tarjetas se redimensionan juntas, igual que en el navegador.

Ajuste de línea

flex-wrap: wrap se traduce al modo wrap de Auto Layout y produce filas que se ajustan. Es lo natural para listas de etiquetas, muros de logotipos y cuadrículas de tarjetas construidas con flexbox.

CSS Grid en detalle

El Auto Layout de Figma es un modelo de pilas, no una cuadrícula bidimensional. Por eso los layouts grid se traducen a la estructura más parecida que se pueda verificar:

Las cuadrículas uniformes (columnas iguales, espacios iguales) suelen convertirse en filas que se ajustan.
Las cuadrículas asimétricas (una barra lateral y una columna principal, un reparto 2:1) suelen convertirse en pilas anidadas: una pila horizontal de pilas verticales, o al revés.
Las celdas con spans y solapamientos que no se descomponen en pilas mantienen posiciones absolutas con restricciones.

En todos los casos, el resultado visual coincide con el navegador dentro de la tolerancia. Lo que cambia es qué parte del frame puedes redimensionar con fluidez en Figma.

Posicionamiento absoluto, centrado y márgenes automáticos

position: absolute

Una insignia con posición absoluta, una mancha decorativa o una superposición no encajan en una pila, porque se solapan con sus hermanos. Esos elementos mantienen posiciones absolutas, y el plugin les asigna restricciones para que sigan comportándose de forma sensata cuando se redimensiona el padre: una insignia anclada arriba a la derecha sigue arriba a la derecha y una superposición a pantalla completa se estira.

max-width y margin: auto

El contenedor de contenido clásico, max-width: 1200px; margin: 0 auto, se convierte en una caja centrada dentro de un frame de ancho completo. Aquí también entra en juego Site width: el plugin mide el ancho de diseño real de la página al importarla. Los diseños a sangre completa llegan a 1920 con la caja de contenido centrada, los sitios realmente en caja con el ancho de su caja y los sitios fluidos a 1440. El valor medido mantiene intacta la lógica de tu contenedor.

Márgenes automáticos dentro de flex

margin-left: auto en un hijo flex lo empuja hasta el final, un patrón habitual en las barras de navegación. Igual que space-between, se deduce de la geometría, normalmente como un elemento de hueco en Fill que mantiene el elemento empujado en el borde opuesto.

Por qué importa la verificación

Sin verificación, los conversores tienen dos malas opciones: aplicar Auto Layout en todas partes y aceptar que algunos frames se desplacen, se solapen o se colapsen, o evitar el Auto Layout y entregarte capas absolutas congeladas.

HTML to Frames aplica el Auto Layout y luego comprueba la posición de cada hijo con una tolerancia de 2 px. Si un frame falla, se prueba un plan más sencillo; si también falla, el frame se queda en posición absoluta. El diseño nunca se rompe. Puedes confiar en que lo que ves en Figma coincide con el navegador, y el Auto Layout que obtienes es un Auto Layout que realmente se sostiene.

La pantalla de resultados muestra la proporción total de Auto Layout y, para los frames que se quedaron en posición absoluta, indica por qué (diagnóstico). Eso convierte el "¿por qué esto no tiene Auto Layout?" en algo sobre lo que puedes actuar en tu CSS.

En nuestras pruebas con sitios reales, se dedujo Auto Layout en aproximadamente entre el 86 y el 97 % de los frames, por ejemplo el 93 % en el sitio de un producto y el 88 % en Linear y Stripe. Tus cifras dependerán de cómo esté escrito el CSS.

Limitaciones que conviene conocer

La semántica de cuadrícula bidimensional no existe en Auto Layout; las cuadrículas se convierten en filas que se ajustan o en pilas anidadas, y los spans complejos pueden quedarse en posición absoluta.
El espaciado no uniforme entre hermanos no se puede expresar como un único espacio.
Los solapamientos (márgenes negativos, hijos absolutos) mantienen esos elementos en posición absoluta.
Las transformaciones skew y 3D, los clip-paths con path(), las máscaras de varias capas y los colores Display-P3 aún no se convierten.
El contenido incrustado, como iframes, canvas WebGL y vídeos sin póster, llega como una imagen de su caja.
Un ancho cada vez. Cada pantalla se maqueta con su propio ancho. Usa el Responsive set (Desktop, Tablet, Mobile) para capturar cada breakpoint como un frame independiente.

Consejos: escribe CSS que se importe limpiamente

Estos hábitos hacen que tus layouts se traduzcan a Auto Layout más a menudo, y de todos modos son buenas prácticas de CSS.

Usa gap en lugar de márgenes entre hermanos. Un único valor uniforme se traduce directamente al espaciado entre elementos.
Mantén un espaciado uniforme dentro de cada contenedor. El espaciado mixto obliga a retroceder.
Prefiere flexbox para los layouts unidimensionales. Barras de navegación, barras de herramientas, grupos de botones y filas de tarjetas se traducen directamente.
Usa grid con pistas iguales para las cuadrículas de tarjetas. Las columnas uniformes se convierten en filas limpias que se ajustan.
Envuelve los layouts asimétricos en contenedores explícitos. Una barra lateral y un área de contenido en su propia fila flex producen pilas anidadas claras.
Usa flex: 1 para los elementos que deben estirarse. Indica Fill.
Centra el contenido con max-width y margin: 0 auto. Se convierte en una caja centrada que sigue centrada.
Reserva position: absolute para las superposiciones reales. No lo uses para el layout normal.
Evita los márgenes negativos en el layout. Crean solapamientos que no se pueden apilar.
Nombra los colores con propiedades personalizadas. Con Styles & variables (Pro), --brand-primary se convierte en una variable brand/primary.
Usa texto real. El texto dentro de imágenes no puede convertirse en capas de texto editables.

Cómo ver tus propias correspondencias

La forma más rápida de saber cómo se traduce tu CSS es importarlo. Pega código o sube una carpeta con el flujo HTML to Figma, captura un build local con la extensión de Chrome o haz que una herramienta de IA lo envíe por MCP. Después abre la pantalla de resultados, comprueba la proporción de Auto Layout y lee el diagnóstico de los frames que se quedaron en posición absoluta.

Activa Reference screenshot (Pro) para añadir una capa oculta y bloqueada de la página original, de modo que puedas alternar entre la importación y el renderizado del navegador. Activa Detailed layers (Pro) cuando quieras una estructura de capas más detallada.

Para saber más sobre cómo las páginas se convierten en frames, lee sobre la conversión HTML to frame y consulta las funciones para ver todo lo que admite el importador. La documentación cubre cada opción de importación en detalle.

Preguntas frecuentes

¿HTML to Frames lee mi CSS para crear el Auto Layout?: Trabaja a partir de la geometría renderizada por el navegador en lugar de copiar propiedades CSS. Primero se construye la página con precisión de píxel y luego se deducen de dentro hacia fuera las pilas, los espacios, el padding y la alineación. La posición de cada hijo se verifica con una tolerancia de 2 px, así que el resultado coincide con lo que dibujó el navegador, tanto si el layout venía de flexbox, de grid o del flujo de bloque normal.
¿Cómo se convierte CSS Grid si Figma no tiene Auto Layout en cuadrícula?: Las cuadrículas se traducen a la estructura más parecida que se pueda verificar. Las cuadrículas uniformes con columnas iguales suelen convertirse en filas que se ajustan, los layouts asimétricos en pilas horizontales y verticales anidadas, y las celdas con spans complejos o solapamientos mantienen posiciones absolutas con restricciones. En cualquier caso, el resultado visual coincide con el navegador.
¿Qué pasa cuando un frame no puede convertirse en Auto Layout?: Primero se prueba un plan de layout más sencillo. Si tampoco supera la verificación, el frame mantiene posiciones absolutas y recibe restricciones sensatas, como Stretch, Scale, Center, Min o Max, así que sigue comportándose bien al redimensionarlo. La pantalla de resultados indica por qué cada uno de esos frames se quedó en posición absoluta, lo que te ayuda a ajustar tu CSS.
¿flex-grow se convierte en Fill container en Figma?: Sí, en los casos típicos. Los hijos que crecen con flex-grow o flex: 1 pasan a Fill container, y las filas de tarjetas iguales se convierten en elementos Fill iguales. En las barras de encabezado con un logotipo, un menú e iconos repartidos, el elemento del hueco pasa a Fill, de modo que los elementos exteriores se quedan anclados a los bordes cuando redimensionas el frame.
¿Qué parte de una página suele acabar con Auto Layout?: En nuestras pruebas con sitios reales, se dedujo Auto Layout en aproximadamente entre el 86 y el 97 % de los frames, por ejemplo el 93 % en el sitio de un producto y el 88 % en Linear y Stripe. Los resultados dependen de cómo esté escrito el CSS; los espacios uniformes, flexbox y los contenedores explícitos aumentan la proporción.

Deja de redibujar la web.

Pega un enlace y obtén capas de Figma reales, editables y responsive en segundos. Gratis para empezar: 10 importaciones cada mes.

Consigue el plugin