Frames con sentido
HTML to frame: cada página y pantalla se convierte en un frame de Figma
Frames de nivel superior con el nombre de la página y la pantalla, frames anidados que siguen el DOM y un Auto Layout que se verifica antes de aplicarse.
- Ancho del frame medido a partir del diseño real
- Los frames anidados reflejan la estructura de la página
- Frames Desktop, Tablet y Mobile en una sola importación (Pro)
Muy pronto en Figma Community
HTML to frame describe el resultado que los diseñadores realmente quieren de una importación: no una sola imagen, sino un frame de Figma por página y pantalla, con una jerarquía de frames anidados que tiene sentido cuando abres el panel de capas. Así estructura cada importación HTML to Frames, el plugin de Figma de EUREKA!.
Cada pantalla capturada se convierte en un frame de nivel superior con un nombre predecible, como example.com/pricing — Desktop (1920). Se eliminan el protocolo y el www, y los nombres no superan los 60 caracteres, así que una importación de varias páginas es fácil de recorrer con la vista. Dentro, los contenedores de la página se convierten en frames, y esos frames siguen el DOM. Un frame de encabezado contiene un frame de navegación, que a su vez contiene frames de enlaces, muy parecido al marcado del que proceden.
El ancho del frame no es una suposición. El plugin mide el ancho de diseño real de la página al importarla. Los diseños a sangre completa reciben un frame de 1920 con la caja de contenido centrada, los sitios realmente en caja reciben el ancho de su caja, como 1200, 1280 o 1440, y los sitios fluidos reciben 1440. En una importación de varias páginas se usa el mismo ancho para todas las páginas de un sitio, así que los frames quedan alineados.
Cuando el layout lo permite, los frames se convierten en frames con Auto Layout. El plugin deduce la dirección, los espacios, el padding, la alineación y el ajuste de línea a partir de la geometría medida por el navegador, aplica el plan y comprueba cada hijo con 2 px de tolerancia. Los frames en los que eso no se sostiene mantienen posiciones absolutas con restricciones, así que nada se mueve de forma inesperada.
Para conocer los detalles de ese motor, lee Auto Layout explicado. Para la conversión en general, consulta HTML to Figma, y para muchas páginas a la vez, website to Figma.
Cómo una página se convierte en frames
- 01
Medir el ancho del sitio
El plugin detecta si el diseño es a sangre completa, en caja o fluido y elige en consecuencia el ancho del frame Desktop.
- 02
Construir frames con precisión de píxel
Cada contenedor se convierte en un frame en su posición medida, reflejando la jerarquía del DOM.
- 03
Deducir el Auto Layout de dentro hacia fuera
Empezando por los frames más internos, se deducen y aplican pilas, ajustes de línea, espacios, padding y alineación.
- 04
Verificar o retroceder
Cada hijo se comprueba con 2 px de tolerancia; los frames que no se sostienen prueban un plan más sencillo o mantienen posiciones absolutas con restricciones.
Detalles a nivel de frame que ahorran tiempo de limpieza
Ancho del sitio medido
Los frames Desktop usan el ancho real del diseño: 1920 para sangre completa, el ancho de la caja para sitios en caja y 1440 para los fluidos.
Jerarquía con forma de DOM
Los frames anidados siguen la estructura de la página, así que secciones, tarjetas y botones son fáciles de encontrar en el panel de capas.
Frames con Auto Layout
Pilas horizontales y verticales, filas que se ajustan, espacios y padding, verificados hijo por hijo.
Intención responsive
El contenido centrado sigue centrado, las tarjetas iguales usan Fill y el espacio entre un logotipo y un menú se convierte en un elemento Fill.
Responsive set
Frames Desktop, Tablet 768 y Mobile 390 de una página capturados en paralelo y contados como una importación (Pro).
Volver a importar un frame
Cada frame guarda su URL de origen y su ancho, así que puedes actualizarlo con un clic.
Nombres de los frames y ancho del sitio
Cuando importas diez páginas en tres pantallas, los nombres de los frames importan. HTML to Frames usa un único patrón coherente:
domain/path?query — Screen (width)
Por ejemplo, shop.example.com/products?sort=new — Mobile (390). No hay protocolo ni www, y los nombres tienen un máximo de 60 caracteres para que sigan siendo legibles en el lienzo.
Cómo se elige el ancho de Desktop
La pantalla Desktop se llama Site width porque se mide, no se adivina:
| Tipo de sitio | Ancho del frame Desktop |
|---|---|
| Diseño a sangre completa | 1920, caja de contenido centrada |
| Sitio realmente en caja | El ancho de la caja, por ejemplo 1200, 1280 o 1440 |
| Layout fluido | 1440 |
Un sitio recibe un único ancho en toda una importación de varias páginas, así que todos los frames Desktop quedan alineados en una fila. Las demás pantallas usan anchos fijos: Laptop 1280, Tablet 768 y Mobile 390. En Pro también puedes introducir un ancho personalizado cuando necesites un breakpoint concreto.
Además, cada frame guarda su URL de origen y su ancho, que es lo que hace posible volver a importarlo con un clic más adelante.
Los nombres coherentes también ayudan fuera de Figma. Cuando compartes el enlace a un frame o lo exportas, el nombre le dice a un desarrollador exactamente qué página y qué breakpoint está viendo.
Frames anidados y Auto Layout, verificados
Dentro de cada frame de nivel superior, la jerarquía refleja el DOM. Eso hace que el panel de capas resulte familiar para cualquiera que conozca el marcado, y le da al Auto Layout contenedores reales con los que trabajar.
El motor trabaja en un orden fijo:
- Construye la página con precisión de píxel y posiciones absolutas.
- Recorre los frames de dentro hacia fuera y deduce pilas verticales u horizontales, filas que se ajustan, espacios, padding y alineación a partir de la geometría medida.
- Traduce el significado responsive: el contenido centrado pasa a Center, las cajas con ancho máximo siguen centradas, las tarjetas iguales y los elementos con flex-grow pasan a Fill, y el espacio entre un logotipo y un menú se convierte en un elemento Fill.
- Aplica el plan y verifica la posición de cada hijo con 2 px de tolerancia.
- Si no se sostiene, prueba un plan más sencillo; si no, mantiene las posiciones absolutas.
Los frames que se quedan en posición absoluta reciben restricciones como Stretch, Scale, Center, Min o Max, así que siguen comportándose bien al redimensionarlos. La pantalla de resultados indica por qué cada uno se quedó en posición absoluta.
En nuestras pruebas con sitios reales, se dedujo Auto Layout en aproximadamente entre el 86 y el 97 % de los frames. Lo importante no es la cifra, sino la garantía que hay detrás: el diseño nunca se rompe. Más sobre cómo el CSS se traduce en frames en De CSS flexbox y grid a Auto Layout.
Una página, varias pantallas: el Responsive set
Un solo frame muestra un breakpoint. El trabajo de diseño real suele necesitar al menos tres. Con la opción Responsive set, HTML to Frames captura Desktop, Tablet y Mobile de la misma página con un clic.
Algunos detalles prácticos:
- Las pantallas de una página se capturan en paralelo, no una tras otra.
- Una página con todas sus pantallas cuenta como una importación, no como tres.
- Pro y Team permiten hasta cuatro pantallas por importación; el plan Free captura una pantalla por importación.
- Cada pantalla es su propio frame de nivel superior, con el nombre de la pantalla y el ancho para distinguirlas de un vistazo.
Como cada pantalla se captura con su ancho real, obtienes el layout móvil real del sitio, no un frame de escritorio estrechado. La navegación que se pliega en un botón de menú, las cuadrículas que pasan de cuatro columnas a una y la tipografía que se reduce aparecen tal como el sitio las renderiza en ese ancho, lo que convierte el conjunto en un punto de partida fiable para revisiones de diseño responsive.
Combina los Responsive sets con la importación Multiple para capturar varias páginas en distintos breakpoints, y consulta los límites en la página de precios.
Preguntas frecuentes
Significa que cada página web y cada pantalla se convierten en un frame de Figma, con frames anidados en su interior que reflejan la estructura del DOM de la página. HTML to Frames crea un frame de nivel superior por página y pantalla y convierte los frames internos a Auto Layout siempre que el resultado se pueda verificar.
Los frames de nivel superior siguen el patrón domain/path?query — Screen (width), por ejemplo example.com/pricing — Desktop (1920). Se eliminan el protocolo y el www, y los nombres se limitan a 60 caracteres, así que las importaciones grandes de varias páginas siguen siendo fáciles de recorrer en el lienzo y en el panel de capas.
El ancho de Desktop se mide a partir del diseño real. Los diseños a sangre completa reciben 1920 con la caja de contenido centrada, los sitios realmente en caja reciben el ancho de su caja, como 1200 o 1440, y los sitios fluidos reciben 1440. Un sitio mantiene un único ancho en toda una importación de varias páginas.
No necesariamente. El Auto Layout solo se aplica cuando todos los hijos se mantienen a menos de 2 px de su posición original. Si no, se prueba un plan más sencillo y, si también falla, el frame mantiene posiciones absolutas con restricciones. La pantalla de resultados explica por qué cada frame se quedó en posición absoluta.
Free captura una pantalla por importación. Pro y Team capturan hasta cuatro pantallas por importación, incluido el Responsive set de Desktop, Tablet y Mobile con un clic. Todas las pantallas de una página cuentan como una sola importación y se capturan en paralelo, no una tras otra.
Sí. Cada frame importado guarda su URL de origen y su ancho, así que puedes volver a importarlo con un clic cuando cambie la página en vivo. Así el archivo de diseño sigue al ritmo de producción sin empezar una importación nueva desde cero ni volver a renombrar frames.
Relacionado
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.
Sin tarjeta de crédito. Pro se compra dentro de Figma.
Muy pronto en Figma Community