Localhost to Figma: captura cualquier página con la extensión
Pasa de localhost a Figma, y también paneles con sesión iniciada y estados en vivo, con la extensión gratuita de Chrome: página, elemento o Send to Figma.
EUREKA! · · 9 min de lectura
Una importación por URL funciona cuando la página es pública. Muchas de las pantallas que de verdad necesitas en Figma no lo son: la rama de una funcionalidad que corre en localhost:3000, un panel de administración que requiere inicio de sesión, un servidor de staging en la red de la oficina o un proceso de pago con artículos ya en el carrito.
Para esos casos, HTML to Frames tiene una extensión de Chrome gratuita. Captura la página desde tu propio navegador, exactamente como la ves, y se la pasa al plugin de Figma, que la convierte en frames, textos, vectores e imágenes editables con Auto Layout. Esta guía explica cómo pasar de localhost a Figma (localhost to Figma), cómo capturar páginas con sesión iniciada y estados concretos, y qué hacer cuando algo sale mal.
Cuándo usar la extensión de Chrome en lugar de una URL
La fuente Link del plugin renderiza las páginas en un navegador aislado del servicio de captura de HTML to Frames. Ese navegador ve lo que ve un visitante anónimo en internet. No puede llegar a tu máquina, a tu red privada ni a tu sesión iniciada.
Usa la extensión cuando la página:
- Se ejecuta en local, como
localhost,127.0.0.1o un servidor de desarrollo en tu red. - Requiere inicio de sesión, como paneles SaaS, áreas de administración, ajustes de cuenta o portales de clientes.
- Está en una red privada, como entornos de staging en una VPN o herramientas de intranet.
- Está en un estado concreto, como un desplegable abierto, un formulario rellenado, un modal, un carrito con productos o un mensaje de error tras enviar.
Para las páginas públicas, una importación URL to Figma sigue siendo el camino más sencillo, y admite Responsive sets con un clic.
Qué es la extensión (y qué no es)
La extensión se ejecuta en tu navegador. No necesita cuenta, no contiene analítica y no carga código remoto. No envía nada a HTML to Frames a menos que elijas Send to Figma. Incluso entonces, la captura se mantiene en memoria solo hasta que tu plugin la recoge, durante un máximo de 30 minutos.
Una captura cuenta como una importación en tu plan. La extensión en sí es gratuita. Más información en la página de la extensión de Chrome.
Paso a paso: de localhost a Figma
- Instala la extensión HTML to Frames para Chrome y fíjala en la barra de herramientas.
- Arranca tu servidor de desarrollo y abre la página en Chrome, por ejemplo
http://localhost:3000/settings. - Ajusta el ancho de la ventana a la pantalla que quieras (más sobre esto abajo).
- Lleva la página al estado que quieras: con sesión iniciada, datos cargados, menú abierto.
- Haz clic en el icono de la extensión y elige capturar la página completa o seleccionar un elemento.
- Entrega la captura a Figma, ya sea por el portapapeles o con un archivo
.h2f, o con Send to Figma. - En Figma, el plugin construye las capas y muestra la pantalla de resultados con frames, capas, proporción de Auto Layout y cualquier advertencia.
Página completa frente a un solo elemento
La extensión ofrece dos modos de captura.
Capturar la página completa
Es la opción predeterminada para las pantallas que quieres revisar o rediseñar enteras: un panel, una página de ajustes, una landing en desarrollo. Obtienes un frame para la página con frames anidados que reflejan el DOM.
Seleccionar un solo elemento
A menudo solo necesitas un componente: una tarjeta de precios, la barra de navegación, una tabla de datos, un modal. Elige la selección de elementos y:
- Pasa el cursor por la página; el elemento bajo el cursor se resalta.
- Pulsa ↑ para ir al elemento padre y ↓ para ir a un hijo.
- Pulsa Enter para capturar el elemento resaltado.
- Pulsa Esc para cancelar.
Capturar un elemento es la forma más rápida de crear una referencia de componentes a partir de un producto en vivo, o de enviar un solo widget a un diseñador para que lo revise sin el resto de la página.
Dos formas de entrega: portapapeles/.h2f o Send to Figma
Portapapeles o archivo .h2f | Send to Figma | |
|---|---|---|
| Configuración | Ninguna | Vincular una vez con un código de un solo uso |
| Cómo llega a Figma | Pegando en la pestaña Browser del plugin | Va directamente al plugin abierto |
| Sale de tu navegador | Solo cuando lo pegas en Figma | En memoria en el servicio hasta que el plugin lo recoge, máx. 30 minutos |
| Ideal para | Capturas ocasionales, compartir un archivo con un compañero | Capturas frecuentes durante una sesión de trabajo |
Portapapeles y .h2f
La captura se copia en tu portapapeles o se guarda como archivo .h2f. En Figma, abre el plugin, ve a la pestaña Browser y pega. Un archivo .h2f resulta práctico cuando otra persona captura la página (por ejemplo, un PM con acceso al panel de un cliente) y un diseñador la importa más tarde.
Send to Figma
Si capturas a menudo, conecta la extensión a tu plugin una vez con un código de un solo uso. A partir de entonces, las capturas van directamente al plugin abierto, sin paso de pegado. Mantén el plugin abierto en Figma mientras trabajas.
Una captura = una pantalla con el ancho actual de la ventana
La extensión captura lo que renderiza tu navegador, así que una captura es una pantalla con el ancho actual de la ventana. Si tu ventana mide 1440 px de ancho, obtienes un frame de escritorio de 1440.
Para capturar otros breakpoints, redimensiona la ventana y vuelve a capturar:
- Tablet: redimensiona a unos 768 px de ancho y captura.
- Móvil: redimensiona a unos 390 px de ancho y captura.
La barra de dispositivos de DevTools de Chrome es una forma cómoda de fijar anchos exactos. Cada captura cuenta como una importación. Si la página es pública, la fuente Link del plugin puede producir el Responsive set completo (Desktop + Tablet + Mobile) en una sola importación.
Capturar estados que una URL no puede reproducir
La extensión captura el estado actual de la página, lo que abre la puerta a pantallas que de otro modo serían tediosas de recrear:
- Menús y desplegables abiertos. Abre el menú y luego captura la página o selecciona el elemento del menú.
- Formularios rellenados y errores de validación. Rellena los campos, envía para provocar los errores y luego captura.
- Carritos y procesos de pago. Añade productos y captura el carrito con líneas de pedido reales.
- Estados vacío, de carga y con datos. Captura el mismo panel con y sin datos para tener un inventario de estados.
- Modales y notificaciones. Provócalos y captura mientras están en pantalla.
Para los equipos de producto, es la forma más rápida de documentar en Figma todos los estados de un flujo antes de un rediseño o de una prueba de usabilidad.
Qué se traslada
La extensión alimenta el mismo motor de conversión que las demás fuentes, así que obtienes todas las funciones descritas en la página de funciones: layout, texto con estilos mixtos, degradados, imágenes, SVG como vectores editables, bordes, sombras, desenfoque, ::before/::after, campos de formulario, shadow DOM y orden de z-index.
El Auto Layout se deduce de la geometría medida por el navegador y se verifica: la posición de cada hijo se comprueba con una tolerancia de 2 px y, si no se sostiene, se prueba un plan más sencillo o el frame mantiene posiciones absolutas con restricciones sensatas. En nuestras pruebas, se dedujo Auto Layout en aproximadamente entre el 86 y el 97 % de los frames, según el sitio. Si escribes tú mismo el front-end, esta guía de correspondencias muestra cómo escribir CSS que se importe limpiamente.
El contenido incrustado que no puede convertirse en capas, como iframes con mapas, vídeos sin póster o canvas WebGL, llega como una imagen de esa caja.
Una lista rápida antes de capturar
Repasa esta lista antes de cada sesión de captura para no repetir trabajo:
- Ancho: ¿la ventana está en el breakpoint que quieres, con el zoom del navegador al 100 %?
- Datos: ¿la página ha cargado por completo, incluidos gráficos, imágenes y secciones diferidas?
- Estado: ¿los menús, modales o errores de formulario se ven exactamente como los quieres en Figma?
- Contenido: ¿has cambiado a una cuenta de prueba o a datos de ejemplo donde, si no, aparecerían datos reales de clientes?
- Alcance: ¿necesitas la página completa o un solo elemento sería más claro para la revisión?
- Entrega: ¿está el plugin abierto en Figma si usas Send to Figma?
Dos minutos aquí te ahorran varias rondas de volver a capturar la misma pantalla.
Privacidad en páginas con sesión iniciada e internas
Capturar un panel significa capturar lo que haya en él. Algunas reglas prácticas:
- La captura se hace en tu navegador. Nada sale de él a menos que lo pegues en Figma o uses Send to Figma.
- Send to Figma es transitorio. La captura espera en memoria hasta que tu plugin la recoge, como máximo 30 minutos, y no se escribe en disco.
- Oculta primero los datos sensibles. Usa cuentas de prueba o datos de ejemplo cuando puedas, porque lo que hay en pantalla acaba como capas de texto en tu archivo de Figma.
- Tu archivo de Figma no se lee. El plugin solo escribe capas y lee los metadatos de sus propios frames.
Consulta la página de seguridad para ver la política completa.
Solución de problemas
A la captura le falta contenido que carga tarde
Espera a que la página haya cargado por completo, incluidas las secciones diferidas y los gráficos, antes de capturar. Desplázate una vez por la página si el contenido se carga al hacer scroll.
El layout se ve distinto de lo que veo yo
Comprueba el ancho de la ventana; la captura refleja exactamente el ancho actual. Asegúrate también de que no hay zoom aplicado en el navegador.
Send to Figma no hace nada
Asegúrate de que el plugin está abierto en Figma. Si los vinculaste hace tiempo o has cambiado de equipo, vuelve a vincularlos con un nuevo código de un solo uso. Las capturas esperan hasta 30 minutos, así que si abres el plugin dentro de ese plazo seguirán llegando.
Pegar en la pestaña Browser no funciona
Puede que otra copia haya sobrescrito tu portapapeles. Vuelve a capturar, o guarda la captura como archivo .h2f y cárgalo en su lugar.
Las fuentes se ven mal
Es posible que las fuentes web locales o con licencia no estén instaladas en tu máquina. La pantalla Missing fonts del plugin sugiere reemplazos antes de construir y recuerda tus elecciones para cada sitio.
Algunos frames no tienen Auto Layout
La pantalla de resultados indica por qué un frame se quedó en posición absoluta. A menudo se debe a contenido superpuesto o a márgenes negativos. El frame sigue coincidiendo con la página; simplemente mantiene posiciones absolutas con restricciones.
De localhost a Figma en un flujo de desarrollo
Para los desarrolladores front-end, la extensión convierte el handoff de diseño en una calle de doble sentido:
- Construye la funcionalidad en local.
- Captura las nuevas pantallas en anchos de escritorio y móvil.
- Envíalas a Figma junto al diseño original.
- Los diseñadores revisan la implementación real, comentan y ajustan.
- Corriges, vuelves a capturar y comparas.
Si construyes con herramientas de IA, también hay una vía directa: Claude Code, Claude Desktop o Cursor pueden enviar HTML al plugin por MCP. Consulta AI to Figma vía MCP.
Cómo empezar
Instala la extensión de Chrome, abre tu build local y captura primero un elemento, una tarjeta o un botón, para ver cómo llega. Después captura la página completa en anchos de escritorio y móvil. La documentación cubre en detalle la vinculación y la pestaña Browser, y los precios explican cómo cuentan las capturas en tus importaciones.
Preguntas frecuentes
- ¿HTML to Frames puede importar una página que se ejecuta en localhost?
- Sí, mediante la extensión gratuita de Chrome. La fuente Link del plugin renderiza las páginas en el servicio de captura, que no puede llegar a tu máquina, así que la extensión captura la página en tu propio navegador. Funciona con localhost, redes privadas, paneles con sesión iniciada y el estado actual de una página, como un menú abierto o un formulario rellenado.
- ¿Cómo capturo las versiones para tablet y móvil con la extensión?
- Una captura es una pantalla con el ancho actual de la ventana. Redimensiona la ventana del navegador, por ejemplo a unos 768 px para tablet o 390 px para móvil, y vuelve a capturar. La barra de dispositivos de DevTools de Chrome ayuda a fijar anchos exactos. Cada captura cuenta como una importación. Las páginas públicas pueden usar en su lugar el Responsive set del plugin.
- ¿Qué diferencia hay entre el portapapeles y Send to Figma?
- Con el portapapeles o un archivo .h2f, pegas tú mismo la captura en la pestaña Browser del plugin, y hasta entonces nada sale de tu navegador. Send to Figma vincula la extensión con tu plugin una vez mediante un código de un solo uso y, a partir de ahí, las capturas van directamente al plugin abierto, guardadas en memoria como máximo 30 minutos.
- ¿La extensión de Chrome recopila mis datos?
- No. La extensión se ejecuta en tu navegador, no necesita cuenta, no tiene analítica y no carga código remoto. No envía nada a HTML to Frames a menos que uses Send to Figma, e incluso entonces la captura se conserva en memoria solo hasta que tu plugin la recoge, hasta 30 minutos, y nunca se escribe en disco.
- ¿Puedo capturar un solo componente en lugar de la página completa?
- Sí. Elige la selección de elementos, pasa el cursor para resaltar un elemento, usa la flecha arriba para ir a su padre o la flecha abajo para ir a un hijo y pulsa Enter para capturar. Pulsa Esc para cancelar. Es una forma rápida de enviar a Figma una sola tarjeta, barra de navegación o tabla.
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.