HTML to Frame: cómo un DOM se convierte en Auto Layout de Figma

Convertir una página web en una imagen es fácil. Lo difícil es convertirla en frames de Figma que se comporten como si los hubiera construido un diseñador. Un frame que se ve bien pero se desmorona en cuanto editas un titular no es mucho mejor que una captura de pantalla.

Este artículo explica, paso a paso, cómo HTML to Frames convierte un DOM en frames de Figma anidados, cómo decide su motor de Auto Layout qué se convierte en una pila y por qué revisa su propio trabajo antes de conservarlo.

Del DOM al árbol de frames

Una página web es un árbol: body contiene secciones, las secciones contienen contenedores, los contenedores contienen tarjetas y las tarjetas contienen títulos y botones. Un archivo de Figma también es un árbol: los frames contienen frames, textos y vectores.

La idea básica de la conversión HTML to frame (de HTML a frame) es trasladar un árbol al otro:

• Cada página y pantalla se convierte en un frame de nivel superior. Una importación Desktop, Tablet y Mobile de una página produce tres frames uno al lado del otro.
• Los elementos que actúan como cajas se convierten en frames anidados. Sus fondos, bordes, radios, sombras y recortes se convierten en propiedades del frame.
• El texto se convierte en capas de texto que conservan los estilos mixtos, así que una frase con un enlace en negrita sigue siendo una sola capa de texto.
• El SVG se convierte en vectores editables, y las imágenes, en rellenos de imagen.
• Los pseudoelementos (::before, ::after), el contenido del shadow DOM y el orden de z-index se trasladan, así que el apilamiento coincide con lo que dibujó el navegador.

El objetivo es un panel de capas que un diseñador pueda leer, no un volcado de cada nodo del DOM. Si necesitas una estructura de capas más granular para inspeccionar, para eso está la opción Detailed layers (Pro).

Nombres de los frames

Los frames de nivel superior se nombran de forma que puedas encontrarlos en un archivo grande:

example.com/pricing — Desktop (1920)

El nombre contiene el dominio y la ruta (más la consulta, si la hay), sin protocolo ni www, seguido de la pantalla y su ancho, y tiene un máximo de 60 caracteres. La URL de origen también se guarda en el frame, que es lo que hace posible Re-import con un clic.

Paso 1: primero, construirlo con precisión de píxel

El motor no empieza adivinando el Auto Layout. Empieza con una versión que seguro que se ve bien:

1. La página se renderiza en un navegador real con el ancho elegido. En Desktop, ese es Site width, un ancho que el plugin mide a partir del diseño real de la página (1920 para sangre completa, el ancho de la caja para sitios en caja, 1440 para sitios fluidos).
2. Se miden la geometría y los estilos calculados de cada elemento.
3. El árbol de frames se construye con posiciones absolutas, así que cada capa queda exactamente donde la colocó el navegador.

Esta versión absoluta es la red de seguridad. Todo lo que viene después es una mejora que tiene que demostrar su valía.

Paso 2: deducir el Auto Layout, de dentro hacia fuera

A continuación, el motor recorre los frames desde el más interno hacia fuera. Para cada frame, examina la geometría medida de sus hijos y se pregunta: ¿se pueden describir como una pila de Auto Layout?

Deduce:

• Dirección: ¿los hijos están dispuestos en una pila vertical u horizontal?
• Ajuste de línea: ¿forman filas que se ajustan, como una cuadrícula CSS de tarjetas o flex-wrap?
• Espacio (gap): ¿el espaciado entre hijos es lo bastante uniforme como para ser un único valor?
• Padding: ¿a qué distancia están los hijos de los bordes del frame en cada lado?
• Alineación: ¿están alineados al inicio, al centro o al final en cada eje?

Trabajar de dentro hacia fuera es importante: una vez que el contenido de una tarjeta es una pila vertical limpia, la propia tarjeta puede tratarse como un único elemento de la fila de tarjetas que la rodea.

Y, sobre todo, la deducción se basa en lo que el navegador renderizó realmente, no en analizar el CSS. Tanto si una fila se construyó con flexbox, grid, floats o inline-block, el resultado medido es el mismo, y eso es con lo que trabaja el motor.

Paso 3: añadir significado responsive

Una pila con el espacio y el padding correctos es un comienzo, pero todavía no se comporta como un diseño responsive. El motor también deduce la intención:

• Contenido centrado → Center. Si el contenido está centrado en su padre, se alinea en Center, así que sigue centrado cuando se redimensiona el frame.
• Las cajas con ancho máximo siguen centradas. Un contenedor de contenido con un ancho máximo dentro de una sección de ancho completo conserva su ancho y se queda en el centro.
• Tarjetas iguales y flex-grow → Fill. Las tarjetas que se reparten una fila a partes iguales, o los elementos que crecen para ocupar espacio, se configuran como Fill container.
• Logo … menú … iconos → el elemento del hueco pasa a Fill. En un encabezado típico, lo que se estira es el espacio entre grupos. El motor convierte ese elemento del hueco en Fill, de modo que el logotipo se queda a la izquierda y los iconos a la derecha a medida que el encabezado se ensancha.

Esta es la diferencia entre un frame que coincide con la página en un ancho y un frame que realmente puedes redimensionar.

Paso 4: verificar cada hijo (tolerancia de 2 px)

Esta es la parte que mantiene intacto el diseño. Tras aplicar un plan de Auto Layout a un frame, el motor comprueba la posición de cada hijo frente al layout original con precisión de píxel. Cada uno debe quedar a menos de 2 px de donde lo colocó el navegador.

• Si todos los hijos se sostienen, el plan se conserva.
• Si no, se prueba un plan más sencillo, por ejemplo una sola pila sin la alineación o los ajustes Fill más ambiciosos.
• Si ningún plan se sostiene, el frame mantiene sus posiciones absolutas.

La regla es sencilla: el diseño nunca se rompe. Puede que obtengas menos frames con Auto Layout en una sección complicada, pero no obtendrás un layout que se desplace en silencio.

¿Con qué frecuencia lo consigue? En nuestras pruebas con sitios reales, se dedujo Auto Layout en aproximadamente el 86–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é construida la página, así que tómalos como mediciones, no como una garantía.

Paso 5: restricciones para los frames que se quedan en posición absoluta

Los frames que mantienen posiciones absolutas no se quedan atrás. El motor les asigna restricciones sensatas:

• Stretch: para elementos que abarcan su padre, como una capa de fondo de ancho completo.
• Scale: para elementos que deben redimensionarse proporcionalmente.
• Center: para elementos centrados en su padre.
• Min: anclados a la izquierda o arriba.
• Max: anclados a la derecha o abajo.

Así, incluso un frame absoluto se comporta de forma razonable cuando redimensionas su padre.

Paso 6: diagnóstico, o por qué un frame se quedó en posición absoluta

La pantalla de resultados informa de los frames, las capas y la proporción de Auto Layout de la importación, junto con las fuentes que faltan y las advertencias. También indica por qué determinados frames se quedaron en posición absoluta. En la práctica, las secciones que se quedan absolutas suelen ser aquellas en las que los hijos se solapan, quedan fuera del flujo normal o tienen un espaciado demasiado irregular para describirse como una sola pila.

Este diagnóstico es útil de dos maneras:

• Para los diseñadores: sabes qué secciones convertir a mano si las necesitas totalmente responsive.
• Para los desarrolladores: a menudo es una pista de que el código del layout es más complejo de lo necesario.

De CSS flexbox y grid a Auto Layout: una tabla de correspondencias

Como el motor trabaja a partir de la geometría medida, la tabla siguiente describe el resultado típico, no una traducción literal de las propiedades CSS. Para profundizar, consulta De CSS flexbox y grid a Auto Layout de Figma.

Un ejemplo práctico: una sección de precios con tres tarjetas

Para concretar los pasos, imagina una sección habitual: un título y un subtítulo centrados arriba y, debajo, tres tarjetas de precios en fila, cada una con el nombre del plan, un precio, una lista de funciones y un botón.

Así es como el motor la abordaría normalmente:

1. Construcción con precisión de píxel. Cada elemento se coloca en su posición medida. La sección ya se ve bien.
2. Primero los frames más internos. Cada lista de funciones se convierte en una pila vertical con un espacio uniforme. Cada tarjeta se convierte en una pila vertical (nombre, precio, lista, botón) con el padding tomado de la distancia a los bordes de la tarjeta.
3. La fila de tarjetas. Las tres tarjetas están una al lado de la otra con el mismo ancho y el mismo espaciado, así que la fila se convierte en una pila horizontal con un único espacio, y cada tarjeta se configura como Fill para que se repartan el ancho por igual.
4. El bloque del encabezado. El título y el subtítulo están centrados, así que se convierten en una pila vertical alineada en Center.
5. Verificación. Cada hijo de cada frame se comprueba frente a su posición original. Si, por ejemplo, una insignia "Most popular" se superpone al borde superior de la tarjeta central, el plan de esa tarjeta puede no superar la comprobación de 2 px. El motor prueba un plan más sencillo y, si tampoco se sostiene, la tarjeta mantiene posiciones absolutas con restricciones, y la pantalla de resultados te dice qué frame fue.

El resultado es una sección que puedes redimensionar: ensancha el frame y las tarjetas crecen juntas; edita una lista de funciones y la tarjeta crece con ella. Con Components & hover states (Pro), las tres tarjetas también pueden llegar como instancias de un mismo componente, ya que comparten estructura.

Qué significa esto en la práctica

Cuando abres una página importada, puedes:

• Editar un titular y la sección crece, desplazando hacia abajo el contenido que tiene debajo.
• Cambiar un solo valor de espacio para compactar una cuadrícula de tarjetas.
• Redimensionar el frame y ver cómo se estiran los elementos Fill mientras el contenido centrado se queda en su sitio.
• Sustituir una tarjeta por una instancia de componente; y con Components & hover states (Pro), puede que las tarjetas repetidas ya sean componentes.

Eso es lo que separa un árbol de frames de una imagen aplanada. La comparación HTML to canvas trata ese contraste con más detalle.

Consejos para mejores resultados de Auto Layout

1. Importa con el ancho correcto. Deja que Desktop use Site width y añade Tablet y Mobile con el Responsive set para poder comprobar cada breakpoint.
2. Oculta las superposiciones. Activa Hide cookie banners & popups para que los diálogos fijos no se solapen con las secciones y obliguen a usar posiciones absolutas.
3. Captura estados estables. Las animaciones se congelan al capturar, pero para el contenido que carga tarde, Extra wait (Pro) ayuda.
4. Revisa el diagnóstico antes de convertir nada a mano. Te dice exactamente qué frames mirar.
5. Usa Reference screenshot (Pro) cuando necesites confirmar que las capas coinciden con la página en vivo.

Más información

• El flujo de importación completo: Cómo convertir HTML a Figma
• Todas las funciones de conversión: funciones
• Cada opción, explicada: documentación
• Planes y límites: precios

Consigue el plugin e importa una página que conozcas bien. La forma más rápida de entender el motor es redimensionar el resultado y ver qué se sostiene.