Funciones
El kit completo de HTML to Figma
De una sola URL a un archivo de Figma con varias páginas, responsive y coherente con tu sistema de diseño. Esto es todo lo que hace HTML to Frames, y cómo lo hace.
Importa desde cualquier lugar
Cinco fuentes cubren sitios públicos, archivos de tu ordenador, páginas que solo ve tu navegador y código escrito por IA.
Link
Pega cualquier URL pública. La página se renderiza en un navegador aislado, el contenido diferido se desplaza a la vista y, si quieres, se ocultan los banners de cookies y las ventanas emergentes.
Importación Multiple
Hasta 10 enlaces por importación, procesados uno tras otro. Cada página se convierte en su propia fila de pantallas. Incluida en todos los planes, sin necesidad de Pro.
Archivos locales y código pegado
Arrastra un archivo HTML, la carpeta completa de un sitio o un .zip y elige qué páginas importar, o pega HTML/CSS directamente. Los archivos se sirven desde la memoria y se eliminan al terminar la importación.
Extensión de Chrome
Captura paneles con sesión iniciada, localhost, redes privadas y el estado actual de la página. Elige un solo elemento o la página completa y luego pégalo o usa Send to Figma.
Herramientas de IA vía MCP
Conecta Claude Code, Claude Desktop, Cursor o cualquier cliente MCP. Llaman a import_html o import_url y la página llega a tu plugin abierto.
Importa páginas enlazadas y vuelve a importar
Después de una importación, elige más páginas del mismo sitio en una lista. Actualiza cualquier frame más tarde con Re-import en un clic.
Pantallas que coinciden con el sitio real
El diseño responsive es más que tres capturas de pantalla. HTML to Frames renderiza cada ancho por separado, así que obtienes los layouts reales de tablet y móvil.
Site width, medido
Desktop se abre con el ancho de diseño para el que se construyó el sitio: 1920 con una caja centrada para diseños a sangre completa, el ancho de la caja para sitios en caja y 1440 para los fluidos.
Responsive set
Desktop + Tablet 768 + Mobile 390 con un clic; Laptop 1280 y anchos personalizados en Pro. Las pantallas se capturan en paralelo.
Lienzo ordenado
Una fila por página, pantallas una al lado de la otra y frames con nombres como yoursite.com/pricing — Desktop (1920).
Auto Layout en el que puedes confiar
El núcleo de HTML to Frames. El Auto Layout se deduce de la geometría real del navegador, se aplica y se verifica; nunca se da por supuesto.
Pilas, filas y cuadrículas
Las pilas verticales y horizontales, las filas que se ajustan, los espacios, el padding y la alineación se deducen de la posición medida de cada hijo.
Significado responsive
El contenido centrado sigue centrado, las tarjetas iguales usan Fill, los contenedores con ancho máximo se quedan en el medio y los separadores se estiran, así que los frames se redimensionan como el sitio.
Verificado con 2 px de tolerancia
Tras aplicar Auto Layout, la posición de cada hijo se compara con el navegador. Si se movió, se prueba un plan más sencillo; si no, el frame mantiene las posiciones exactas.
Restricciones inteligentes
Los frames que mantienen posiciones absolutas reciben restricciones Stretch, Scale, Center o Min/Max, así que redimensionar sigue funcionando bien.
Diagnóstico
La pantalla de resultados indica por qué cada frame se quedó en posición absoluta (espacios desiguales, solapamientos, diferencias de tamaño de texto), así que nada es un misterio.
El sistema de diseño, extraído
Convierte los colores, la tipografía y la interfaz repetida de un sitio en las piezas de un sistema de diseño en Figma, o asígnalos al tuyo.
Variables de color
Hasta 96 variables de color en una colección 'Colors · domain', con nombres tomados de las propiedades personalizadas CSS del sitio (por ejemplo, --brand-primary → brand/primary).
Estilos de texto y sombra
Hasta 48 estilos de texto nombrados por función y tamaño, además de estilos de sombra de sm a xl. Rellenos, trazos y colores de texto se vinculan a variables.
Reutiliza, no dupliques
Si tu archivo ya tiene una variable o un estilo con el mismo valor, se usa ese. Importar el mismo sitio dos veces no crea nada nuevo.
Snap to my file's styles
Las coincidencias aproximadas se ajustan al color y estilo de texto más cercano de tu propio sistema de diseño, usando distancia de color perceptual.
Componentes y variantes hover
Las tarjetas, botones y elementos de menú repetidos se convierten en componentes e instancias. Los estados hover se convierten en variantes Default/Hover con una interacción on-hover.
Light + Dark
La página se lee en los esquemas de color claro y oscuro y se escribe en una sola colección con dos modos, además de una copia oscura de cada pantalla.
Fidelidad hasta el último detalle
El CSS real es caótico. HTML to Frames se ocupa de los detalles que hacen que una página se vea como ella misma.
Texto
Estilos mixtos en un mismo párrafo, enlaces, letter-spacing, line-height, text-transform, superíndices y subíndices, contadores CSS y viñetas de lista idénticas a las de Chrome.
Pintura
Degradados lineales, radiales y cónicos, incluidos puntos en px y patrones en mosaico, modos de fusión, opacidad, desenfoque y desenfoque de fondo, filtros de escala de grises.
Formas y efectos
SVG como vectores editables, radio de borde, sombras interiores y exteriores, sombras de texto, bordes en un solo lado, ::before/::after, clip-path, mask-image, rotación y escala.
Contenido incrustado
Mapas, iframes, WebGL y vídeos sin póster se capturan como una imagen de esa caja, así que nada queda en blanco.
Imágenes
Fuentes srcset de alta resolución, object-fit, background-size y fondos en mosaico.
Fuentes
Una pantalla Missing fonts (fuentes que faltan) sugiere reemplazos antes de construir nada y recuerda tu elección para ese sitio.
Prototipo y flujo de trabajo
Las páginas importadas están listas para recorrerlas con clics y son fáciles de mantener al día.
Enlaces clicables
Los enlaces abren su URL en el modo Present; los enlaces entre páginas importadas se convierten en interacciones Navigate.
Fijo, sticky y scroll
Los encabezados fijos y sticky se quedan en su sitio y las zonas con scroll horizontal, como los carruseles, se desplazan en los prototipos.
Texto de acordeones como notas
Opcional: el texto oculto en acordeones cerrados se añade como anotaciones de Figma para no perder contenido.
Captura de referencia
Una capa de captura oculta y bloqueada bajo cada pantalla para comparar píxel a píxel (Pro).
Preguntas frecuentes
Free incluye todas las fuentes de importación, la importación Multiple de hasta 10 enlaces, el ancho del sitio medido, Auto Layout con verificación, mapeo de fuentes, enlaces de prototipo y capturas del contenido incrustado, con 10 importaciones al mes y una pantalla por importación. Los estilos y variables, los componentes, Light + Dark, los anchos personalizados y la captura de referencia son funciones Pro.
Sí. El plugin no lee directamente las reglas CSS para construir el layout; usa la geometría medida por el navegador. Los layouts con flexbox y grid se convierten en pilas de Auto Layout y filas que se ajustan siempre que el resultado coincida con el navegador con una tolerancia de 2 px.
Sí, en Pro. En las pantallas de ancho de escritorio, el servicio de captura fuerza el estado hover en enlaces y botones, lo compara con el estado normal y crea variantes Default/Hover con una interacción de prototipo on-hover. Los menús que JavaScript abre al pasar el ratón no se capturan.
Aún no se convierten las transformaciones skew y 3D, clip-path con path(), las máscaras de varias capas ni los colores Display-P3. Los canvas incrustados, mapas e iframes se convierten en imágenes de su caja en lugar de capas.
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