Documentación de HTML to Frames

1. Abre Figma (la app de escritorio o el navegador) y ve a la página de HTML to Frames en Community.
2. Haz clic en Open in… o Try it out y elige un archivo. El plugin se guarda en tu cuenta.
3. La próxima vez, ábrelo desde el menú: Plugins → HTML to Frames, o pulsa ⌘/ (Ctrl / en Windows) y escribe HTML to Frames.

El plugin funciona en archivos de Figma Design. No necesita cuenta: el plan Free se activa automáticamente y Pro se compra dentro de Figma.

1. En la pestaña Import, deja la fuente en Link y pega una URL, por ejemplo la de tu propia página de inicio.
2. En Screens, Desktop está seleccionado y muestra Site width: el plugin medirá el ancho de diseño real de la página durante la importación. En Pro, haz clic en Responsive set para añadir Tablet y Mobile.
3. Deja Auto Layout activado. Haz clic en Import.
4. Sigue el progreso: la página se renderiza, se preparan las imágenes, se construyen las capas y se aplica y verifica el Auto Layout.
5. La pantalla de resultados muestra el número de frames y capas, la proporción de frames con Auto Layout, las fuentes que faltan y cualquier advertencia.

Tu página aparece en el lienzo como una fila de frames con nombres como yoursite.com — Desktop (1920). Cada texto, imagen y vector es editable.

Link

Cualquier página pública. El servicio de captura no puede acceder a las páginas que requieren inicio de sesión, que están en localhost o en una red privada: para esas, usa la extensión de Chrome.

Multiple

Pega hasta 10 enlaces, uno por línea. Se importan uno tras otro, cada uno en su propia fila. Las páginas del mismo sitio comparten un único ancho medido para que queden alineadas.

Local file

Elige un archivo HTML, una carpeta del sitio o un .zip (hasta 30 MB). En las carpetas, elige qué páginas importar. También puedes elegir Paste code (pegar código) y pegar HTML con CSS en línea o incrustado. Los archivos se abren desde la memoria en un navegador aislado y se eliminan justo después de la importación.

Browser

Pega una captura hecha con la extensión HTML to Frames para Chrome (⌘V), arrastra un archivo .h2f o conecta la extensión una vez y usa Send to Figma. Consulta Extensión de Chrome.

AI

Conecta un cliente MCP en la pestaña AI y deja que tu herramienta de IA envíe páginas. Consulta Herramientas de IA (MCP).

Site width se mide al importar: los layouts con secciones de borde a borde se colocan en un frame de 1920 con la caja de contenido centrada; los sitios realmente en caja usan el ancho de su caja (por ejemplo, 1200 o 1280); los layouts fluidos usan 1440. Free importa una pantalla por página; Pro y Team, hasta cuatro. Todas las pantallas de una página cuentan como una importación.

Antes de construir, el plugin comprueba qué fuentes de la página no están disponibles en Figma en tu ordenador. La pantalla Missing fonts sugiere un reemplazo para cada una: primero una familia que empiece por la misma palabra, luego la primera fuente instalada de la pila de fuentes CSS y, por último, Inter. Si quieres, busca y elige otra familia, y luego decide si recordar la elección para este sitio o para todos los sitios. Skip usa las sugerencias una vez sin guardarlas. Borra las elecciones guardadas con forget saved debajo de la opción.

Con Styles & variables activado (Pro):

• Los colores usados al menos dos veces (y los que coinciden con las propiedades personalizadas CSS del sitio) se convierten en variables dentro de una colección llamada Colors · yoursite.com. Los nombres salen de los tokens del sitio cuando es posible (--brand-primary → brand/primary); si no, del tono y la intensidad (blue/500).
• La tipografía usada al menos dos veces, o de 20 px o más, se convierte en estilos de texto con nombres como yoursite.com/Heading/32/40 Bold.
• Las sombras repetidas se convierten en estilos de sombra sm, md, lg, xl.
• Si tu archivo ya contiene una variable o un estilo con el mismo valor, se reutiliza.

Snap to my file's styles va un paso más allá y asigna las coincidencias aproximadas a tu propio sistema de diseño.

Con Components & hover states activado, las estructuras repetidas se convierten en componentes que se colocan en un frame Components · yoursite.com junto a la página, y cada aparición se convierte en una instancia con sus propios textos e imágenes. Los elementos con estado hover se convierten en conjuntos de componentes con variantes State=Default y State=Hover.

Elige Color scheme → Light + Dark (Pro). La página se lee dos veces, con prefers-color-scheme: light y dark, sin recargarla. Cada color que cambia se convierte en una variable con un valor Light y otro Dark, y junto a cada pantalla se coloca una copia oscura con la colección en modo Dark. Los archivos de Figma del plan Starter permiten un modo por colección; en ese caso, el plugin te avisa de que se omitió el modo oscuro. Los sitios que cambian de tema solo con un interruptor de JavaScript (y no con la configuración del sistema) se importarán con su tema predeterminado.

• Los enlaces siguen funcionando en el modo Present: los enlaces externos abren su URL; los enlaces a páginas que también importaste se convierten en interacciones Navigate.
• Los encabezados fijos y sticky se quedan en su sitio mientras haces scroll; los carruseles horizontales y las zonas con scroll se desplazan.
• Después de una importación, Import linked pages (importar páginas enlazadas) muestra otras páginas del mismo sitio encontradas en la página. Marca las que quieras y se importarán como una importación Multiple con la misma configuración.
• Selecciona un frame importado y haz clic en Re-import para obtener una versión nueva desde la URL de origen guardada.

Usa la extensión gratuita HTML to Frames para Chrome en las páginas a las que no llega el servicio de captura: páginas con sesión iniciada, localhost, intranets y el estado exacto de una página (un desplegable abierto, un formulario rellenado).

1. Instala la extensión y fíjala en la barra de herramientas.
2. Abre la página y haz clic en la extensión → Capture this page (capturar esta página), o Select an element (seleccionar un elemento) para capturar solo una parte (mueve el ratón, ↑ para el elemento padre, ↓ para volver, Enter para elegir, Esc para cancelar).
3. La captura se copia en tu portapapeles (o se descarga como archivo .h2f).
4. En Figma, abre el plugin → pestaña Browser → pulsa ⌘V o arrastra el archivo.

Send to Figma: en la pestaña Browser del plugin, haz clic en Connect para obtener un código de un solo uso e introdúcelo en la extensión, en Connect to Figma. A partir de entonces, el botón principal es Send to Figma y las capturas van directamente a tu plugin abierto.

La extensión captura una pantalla con el ancho actual de la ventana: redimensiona la ventana para obtener los layouts de tablet o móvil. Cada captura cuenta como una importación.

1. Abre el plugin → pestaña AI → Connect an AI tool (conectar una herramienta de IA). Se crea un token personal que se muestra una sola vez.
2. Copia la configuración para tu cliente: Claude Code (un comando claude mcp add), Claude Desktop (una configuración con mcp-remote) o Cursor & others (JSON con URL y cabecera).
3. Mantén el plugin abierto en Figma y pide a tu herramienta de IA que importe una página, por ejemplo: “Crea una página de precios con tres planes y envíala a Figma con HTML to Frames.”

Herramientas disponibles: import_html (HTML de hasta 2 MB, con nombre y pantallas opcionales), import_url (cualquier URL pública) e import_status. La importación se ejecuta en tu plugin con tu plan y la herramienta recibe un resumen: frames, capas, proporción de Auto Layout y fuentes que faltan. Create a new token (crear un token nuevo) invalida el anterior; Disconnect lo elimina. Los conectores web de claude.ai aún no son compatibles.

Una importación = una página con todas sus pantallas. Los contadores se reinician cada mes (UTC). Si una página muy larga queda cortada por un límite del plan, el frame recibe una franja morada Capture limit para que siempre lo sepas. Compra Pro en la pestaña Plan con el sistema de pago de Figma; los miembros de Team introducen su clave de licencia en la misma pestaña y pueden quitarla de una cuenta para liberar el puesto.

La página se ve distinta que en mi navegador. Activa Hide cookie banners & popups, prueba Extra wait para las animaciones lentas o usa la extensión de Chrome para capturar exactamente lo que ves.

“This address can't be reached” (no se puede acceder a esta dirección). El servicio de captura solo abre direcciones públicas. Para localhost, staging detrás de una VPN o páginas con sesión iniciada, usa la extensión de Chrome.

El texto salta de línea de otra forma. Normalmente es una diferencia de fuente: asigna la fuente que falta a la familia correcta en la pantalla Missing fonts.

Algunos frames no tienen Auto Layout. Es deliberado cuando el Auto Layout movería elementos. Abre la lista de diagnóstico en la pantalla de resultados para ver el motivo (espacios desiguales, solapamiento, tamaño de texto).

Algo aparece en blanco. Los mapas, iframes y escenas WebGL se capturan como imágenes; si alguno sigue en blanco, probablemente el contenido necesitaba una acción del usuario o un inicio de sesión.

“Limit reached” (límite alcanzado). Has usado las importaciones Free de este mes. Se reinician el día 1 (UTC), o pásate a Pro para tener importaciones ilimitadas.

¿Sigues atascado? Escribe a [email protected] con la URL y una captura de pantalla.