Plugin de Figma · Extensión de Chrome · MCP
Cualquier página web, como capas reales de Figma.
HTML to Frames convierte URLs en vivo, HTML local, pestañas de Chrome y código generado por IA en frames de Figma editables y responsive, con un Auto Layout verificado para que tu diseño nunca se rompa.
Plan Free: 10 importaciones al mes. Sin cuenta ni tarjeta de crédito.
Muy pronto en Figma Community
- Auto Layout verificado
- Desktop · Tablet · Mobile
- Variables y estilos
- Componentes y estados hover
Cinco formas de entrar. Un resultado limpio.
- LinkPega cualquier URL pública.
- MultipleHasta 10 enlaces de una vez, en todos los planes.
- Local fileArchivo HTML, carpeta del sitio, .zip o código pegado.
- BrowserPáginas con sesión iniciada, localhost, menús abiertos.
- Herramientas de IAClaude, Cursor y cualquier cliente MCP.
Cómo funciona
De una URL a frames con Auto Layout en cuatro pasos
Este es el flujo real del plugin: el mismo panel que usarás dentro de Figma.
yoursite.com — Desktop (1440)
Tablet (768)
Mobile (390)
3 frames importados
Auto Layout en 60 de 77 frames · 23 variables de color · 19 estilos de texto · 10 componentes
- 01
Pega un enlace
O arrastra una carpeta, pega código, envía una pestaña de Chrome o deja que tu herramienta de IA mande una página.
- 02
Elige tus pantallas
Desktop se abre con el ancho de diseño real del sitio: medido, no adivinado. Añade Tablet y Mobile con un clic.
- 03
Import
Un navegador aislado renderiza la página tal como la ve un visitante normal, oculta los banners de cookies y carga el contenido diferido.
- 04
Edita al instante
Frames, textos, vectores e imágenes llegan con Auto Layout, variables, estilos de texto y componentes.
2 px
El Auto Layout se comprueba contra el propio layout del navegador con una tolerancia de 2 px.
86–97%
Proporción de frames que recibieron Auto Layout en los sitios reales que probamos.
10
Enlaces en una importación Multiple, también incluida en el plan Free.
4
Pantallas por importación en Pro: Desktop, Laptop, Tablet y Mobile.
Cifras de nuestras propias pruebas con sitios reales, no cuentas de marketing.
El motor de Auto Layout
Auto Layout que nunca rompe tu diseño
La mayoría de los conversores adivinan un layout y cruzan los dedos. HTML to Frames primero construye la página con precisión de píxel y luego trabaja de dentro hacia fuera: deduce pilas, filas que se ajustan, espacios, padding y alineación a partir de la geometría medida por el navegador, aplica Auto Layout y comprueba la posición de cada hijo. Si algo se mueve más de 2 px, prueba un plan más sencillo y, si también falla, el frame conserva sus posiciones exactas con restricciones sensatas. La pantalla de resultados incluso te dice por qué un frame se quedó en posición absoluta.
- El contenido centrado pasa a Center; las tarjetas iguales, a Fill
- Los contenedores con ancho máximo siguen centrados al redimensionar
- Los frames absolutos reciben restricciones Stretch, Scale, Center o Min/Max
- Una lista de diagnóstico explica cada frame que mantuvo posiciones absolutas
Funciones
Todo lo que, de otro modo, reconstruirías a mano
HTML to Frames lee la página tal como la maqueta un navegador y luego escribe capas de Figma tal como las construiría un diseñador.
Auto Layout verificado
Filas, pilas y cuadrículas se convierten en Auto Layout. Cada frame se comprueba después de aplicarlo: si no coincide, se revierte.
Responsive set
Desktop, Tablet y Mobile en una sola importación, capturados en paralelo y colocados uno al lado del otro.
Ancho del sitio medido
Desktop se abre con el ancho de diseño real de la página: 1920 para diseños a sangre completa, el ancho de la caja para sitios en caja.
Variables y estilos
Los colores se convierten en variables con el nombre de los tokens CSS del sitio; la tipografía y las sombras, en estilos. Los existentes se reutilizan.
Componentes y hover
Las tarjetas, botones y elementos de menú repetidos se convierten en componentes con instancias; los estados hover, en variantes.
Modos claro y oscuro
Una importación, dos modos: una colección de variables con valores Light y Dark y una copia oscura de cada pantalla.
Listo para prototipar
Los enlaces siguen siendo clicables, las páginas importadas se enlazan entre sí y los encabezados fijos y las zonas con scroll funcionan en Present.
Mapeo de fuentes
¿Faltan fuentes? Elige los reemplazos una vez y se recuerdan para cada sitio.
Privado por diseño
Los resultados se entregan una sola vez y nunca se escriben en disco. Los archivos subidos se eliminan al terminar la importación.
Pensado para sistemas de diseño
Importaciones que encajan en tu sistema de diseño
Los colores que se usan más de una vez se convierten en variables, con el nombre de las propiedades personalizadas CSS del propio sitio cuando existen, como brand/primary. La tipografía se convierte en estilos de texto y las sombras repetidas, en estilos de sombra. Con Snap to my file's styles (ajustar a los estilos de mi archivo), los colores y tipos casi idénticos a los tuyos se asignan a tus propias variables y estilos, así que la importación parece hecha en tu archivo.
- Hasta 96 variables de color y 48 estilos de texto por sitio
- Reutiliza las variables y estilos que ya existen en tu archivo
- Light + Dark capturados en una colección con dos modos
- Componentes con variantes Default / Hover e interacciones on-hover
Hecho para quienes trabajan entre la web y Figma
Diseñadores de producto y UI
Empieza un rediseño desde lo real, no desde una captura. Audita espaciado, tipografía y color en segundos.
Agencias de diseño
Lleva el sitio actual de un cliente a Figma para una propuesta el mismo día. Plan Team para cinco puestos.
Equipos de sistemas de diseño
Encuentra cada color y estilo tipográfico que un producto usa de verdad, asignado a tus variables.
Desarrolladores front-end
Entrega el trabajo de localhost o staging a los diseñadores como frames de Figma editables.
Creadores con IA
Envía interfaces desde Claude Code, Claude Desktop o Cursor directamente a tu archivo de Figma.
Estudiantes
Desmonta grandes sitios web capa a capa y aprende cómo están construidos.
Las capas editables superan a las capturas y a las reconstrucciones
| Captura de pantalla | Reconstrucción manual | HTML to Frames | |
|---|---|---|---|
| Texto editable | No | Sí | Sí |
| Auto Layout | No | Sí, a mano | Sí, verificado |
| Variables y estilos | No | A mano | Generados o reutilizados |
| Tablet y móvil | Capturas aparte | Horas de trabajo extra | Una importación |
| Tiempo por página | Segundos | Horas | De segundos a un minuto |
Precios justos, descuento de lanzamiento incluido
Empieza gratis. Pro es ilimitado por $7 al mes en el lanzamiento, y los primeros clientes conservan ese precio.
- 10 importaciones al mes
- 1 pantalla por importación
- Importación Multiple: hasta 10 enlaces
- Link, archivos locales, extensión de Chrome, herramientas de IA
- Auto Layout verificado
- Ancho del sitio medido
- Mapeo de fuentes
- Enlaces de prototipo
Pro
Precio de lanzamientoImportaciones ilimitadas y el kit completo, comprado dentro de Figma.
- Importaciones ilimitadas (uso razonable: 1,000 / mes)
- Hasta 4 pantallas por importación
- Estilos y variables
- Snap to my file's styles
- Componentes y variantes hover
- Modos de variables Light + Dark
- Anchos personalizados
- Capas detalladas, captura de referencia, espera adicional
Team
5 puestosTodo lo de Pro para todo tu equipo, con una sola clave de licencia.
- Todo lo de Pro
- 5 puestos con una sola clave de licencia
- Importaciones ilimitadas (uso razonable: 5,000 / mes)
- Los puestos se pueden reasignar entre personas
Tus páginas no son nuestros datos
Las páginas se renderizan en un navegador aislado y en sandbox. El resultado se entrega a tu plugin una sola vez y luego se elimina; nunca se escribe en disco. Los archivos subidos se borran en cuanto termina la importación. Sin cookies, sin analítica, sin anuncios.
CSS to Figma Auto Layout: guía de flexbox y grid a Auto Layout
Flexbox y el Auto Layout de Figma se parecen, pero no son el mismo modelo. Esta guía técnica relaciona las propiedades CSS con los ajustes de Auto Layout, explica por qué importa la verificación y muestra cómo escribir CSS que se importe limpiamente.
10 min de lecturalocalhost to FigmaLocalhost to Figma: captura cualquier página con la extensión
A algunas páginas no se puede llegar con una importación por URL: tu build en localhost, un panel que requiere inicio de sesión, un menú que está abierto ahora mismo. La extensión gratuita HTML to Frames para Chrome las captura desde tu propio navegador y las convierte en capas de Figma editables.
9 min de lecturaAI to FigmaAI to Figma: envía interfaces de Claude y Cursor a Figma vía MCP
Las herramientas de programación con IA pueden construir una interfaz funcional en minutos, pero los diseñadores la siguen necesitando en Figma. Así se conecta Claude Code, Claude Desktop o Cursor a HTML to Frames por MCP para obtener capas editables en lugar de capturas de pantalla.
9 min de lecturaPreguntas frecuentes
Es un plugin de Figma que convierte páginas web en capas de Figma reales y editables. Puedes importar una URL en vivo, hasta 10 enlaces a la vez, un archivo HTML local o la carpeta de un sitio, código pegado, una pestaña capturada con la extensión de Chrome o HTML enviado por una herramienta de IA mediante MCP. Las páginas llegan como frames con textos, vectores e imágenes, con Auto Layout, variables, estilos y componentes.
No. Cada título es una capa de texto que puedes editar, cada icono es un vector y cada sección es un frame. Solo el contenido que no es HTML (un mapa en un iframe, una escena WebGL o un vídeo sin póster) se coloca como imagen de esa caja, así que el resto de la página sigue siendo totalmente editable.
El plugin aplica Auto Layout y luego verifica la posición de cada hijo contra el layout del navegador con una tolerancia de 2 px. Si un frame no se sostiene, prueba un layout más sencillo o mantiene las posiciones absolutas con restricciones. En nuestras pruebas con sitios reales, entre el 86 % y el 97 % de los frames recibieron Auto Layout; el resto aparece en una lista con el motivo.
Sí, con la extensión gratuita HTML to Frames para Chrome. Captura la pestaña en tu propio navegador (incluidos paneles con sesión iniciada, localhost, redes privadas, menús abiertos y formularios rellenados) y la envía al plugin por el portapapeles o con Send to Figma.
Desktop con el ancho de diseño medido del sitio, Laptop 1280, Tablet 768 y Mobile 390, además de anchos personalizados en Pro. El Responsive set importa Desktop, Tablet y Mobile con un clic. Free incluye una pantalla por importación; Pro y Team, hasta cuatro.
Free te da 10 importaciones al mes. Pro es ilimitado (uso razonable) por $7 al mes en el lanzamiento, $9 normalmente, y se compra dentro de Figma. Team cuesta $22 al mes en el lanzamiento, $29 normalmente, para cinco puestos con una clave de licencia compartida. Una importación es una página con todas sus pantallas.
Se renderizan en un navegador aislado, se entregan a tu plugin una sola vez y luego se eliminan de la memoria; nunca se escriben en disco. Los archivos subidos se borran al terminar la importación. El plugin no lee tu archivo de Figma y no recibimos tu nombre ni tu correo electrónico de Figma.
Sí. Conecta Claude Code, Claude Desktop, Cursor u otro cliente MCP desde la pestaña AI del plugin. Tu herramienta de IA podrá llamar a import_html o import_url y la página llegará a tu archivo de Figma abierto, importada con tu propio plan.
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