Extensión gratuita de Chrome
Chrome extension to Figma: de páginas con sesión iniciada y localhost a Figma
Captura lo que muestra tu propio navegador, incluidos paneles, builds locales y menús abiertos, y conviértelo en capas de Figma editables.
- Funciona con inicios de sesión, localhost y redes privadas
- Captura la página completa o un solo elemento
- Sin cuenta, sin analítica, sin código remoto
Muy pronto en Chrome Web Store
Una extensión de Chrome a Figma resuelve los casos a los que no llega una importación por URL. El servicio de captura de HTML to Frames visita las páginas como visitante anónimo, así que no puede ver tu panel de administración, la aplicación que está detrás de tu inicio de sesión, un build en localhost en tu portátil ni un servidor de staging en una red privada. La extensión gratuita HTML to Frames para Chrome, en cambio, captura desde tu propio navegador, usando la sesión que ya tienes iniciada.
También captura el estado actual de la página. Si hay un desplegable abierto, un formulario a medio rellenar, un modal visible o un carrito con tres artículos, eso es lo que llega a Figma. Para los product managers que documentan flujos y los diseñadores que auditan estados reales, a menudo es la única forma práctica de llevar esas pantallas a un archivo de diseño sin recrearlas.
Puedes capturar la página completa o cambiar al selector de elementos para tomar un solo componente. Pasa el cursor para resaltar, usa las flechas para ir al elemento padre o hijo, pulsa Enter para capturar y Esc para cancelar. La captura va a tu portapapeles, o a un archivo .h2f, y la pegas en la pestaña Browser del plugin. O conecta la extensión a tu plugin una vez con un código de un solo uso y usa Send to Figma, que entrega las capturas directamente en el plugin abierto.
Las capas resultantes son las mismas que en cualquier otra importación: texto editable, vectores, imágenes y Auto Layout verificado. Una captura cuenta como una importación.
Los desarrolladores front-end encontrarán un recorrido completo en De localhost a Figma con la extensión de Chrome. Para páginas públicas, URL to Figma no necesita ninguna extensión, y la página de seguridad explica exactamente qué envía la extensión.
Cómo capturar una pestaña con la extensión
- 01
Instala la extensión de Chrome
Añade a Chrome la extensión gratuita HTML to Frames; no necesita cuenta.
- 02
Abre la página en el estado que quieras
Inicia sesión, arranca tu servidor local, abre el menú o rellena el formulario exactamente como quieras capturarlo.
- 03
Captura la página o un elemento
Toma la página completa o usa el selector para resaltar y seleccionar un elemento.
- 04
Pégalo o envíalo a Figma
Pégalo en la pestaña Browser del plugin, o usa Send to Figma tras vincularlos una vez con un código de un solo uso.
A qué puede llegar la extensión
Páginas con sesión iniciada
Paneles, áreas de administración y páginas de cuenta capturados con la sesión que ya tienes.
localhost y redes privadas
Servidores de desarrollo locales, staging y páginas de intranet a los que no puede llegar un servicio externo.
Estados exactos de la interfaz
Menús abiertos, formularios rellenados, modales y carritos se capturan tal como están en pantalla.
Selector de elementos
Pasa el cursor para resaltar, flecha arriba o abajo para moverte entre padre e hijo, Enter para capturar.
Send to Figma
Vincúlala una vez con un código de un solo uso y las capturas irán directamente a tu plugin abierto.
Privada por diseño
Sin cuenta, sin analítica, sin código remoto; no se envía nada a menos que uses Send to Figma.
De localhost a Figma para desarrolladores front-end
Los desarrolladores a menudo necesitan mostrar a los diseñadores lo que realmente se construyó, o llevar un prototipo programado a Figma para revisarlo. Las opciones habituales son las capturas de pantalla, que nadie puede editar, o reconstruir la pantalla a mano. La extensión ofrece una tercera opción: capturar localhost directamente.
Como se ejecuta en tu propio navegador, la extensión ve exactamente lo que renderiza tu servidor de desarrollo, incluidos:
- Ramas de funcionalidades que aún no están desplegadas en ningún sitio
- Páginas que dependen de datos locales o de APIs simuladas
- Entornos de staging en una VPN o una red privada
- Playgrounds de componentes y páginas de stories aisladas
Usa el selector de elementos para capturar un solo componente en lugar de la página completa. Resáltalo, pulsa la flecha arriba para salir a su contenedor si necesitas el padding y pulsa Enter. El resultado es un frame con Auto Layout deducido del CSS renderizado, así que una fila flexbox llega como un frame con Auto Layout horizontal con sus espacios y su padding.
Esto convierte el handoff en una calle de doble sentido: los diseñadores reciben frames editables de la implementación real y pueden comentar o ajustar lo que se publicó. La guía De CSS flexbox y grid a Auto Layout muestra cómo se traducen los layouts.
Pegar frente a Send to Figma
Hay dos formas de llevar una captura de Chrome a Figma, y ambas producen las mismas capas.
Pegar
Después de una captura, el resultado se coloca en tu portapapeles. Cambia a Figma, abre HTML to Frames, ve a la pestaña Browser y pega. Si lo prefieres, guarda la captura como archivo .h2f y llévala al plugin más tarde. En este flujo, nada sale de tu ordenador.
Send to Figma
Conecta la extensión a tu plugin una vez con un código de un solo uso. A partir de ahí, cada captura va directamente al plugin abierto sin pasar por el portapapeles, lo que es más rápido cuando capturas varios estados seguidos.
Con Send to Figma, la captura se mantiene en memoria en nuestro lado hasta que tu plugin la recoge, durante un máximo de 30 minutos. No se escribe en disco.
| Pegar | Send to Figma | |
|---|---|---|
| Configuración | Ninguna | Código de vinculación de un solo uso |
| Los datos salen de tu ordenador | No | En memoria hasta 30 minutos |
| Ideal para | Capturas ocasionales | Capturar muchos estados rápidamente |
En cualquier caso, una captura cuenta como una importación en tu plan, y las capas que obtienes son idénticas.
Qué hace y qué no hace la extensión con tus datos
Una extensión que puede leer páginas con sesión iniciada merece un examen atento. La extensión HTML to Frames para Chrome está diseñada para hacer lo mínimo posible:
- Se ejecuta en tu navegador. Las capturas se hacen localmente a partir de la página que estás viendo.
- Sin cuenta. No tienes que registrarte ni iniciar sesión para usarla.
- Sin analítica. La extensión no rastrea el uso.
- Sin código remoto. La extensión no descarga ni ejecuta código desde un servidor.
- No se envía nada por defecto. Los datos solo nos llegan si eliges Send to Figma, y entonces esperan en memoria a tu plugin durante 30 minutos como máximo.
La captura solo incluye lo que hay en la página que eliges capturar. Antes de capturar una página que muestre datos personales o de clientes, piensa si esos datos deberían acabar en un archivo de Figma compartido, y usa el selector de elementos para tomar solo la parte que necesitas.
En el lado de Figma, el plugin no lee el contenido de tu archivo. Escribe las capas nuevas y solo lee los metadatos de sus propios frames. La página de seguridad describe la configuración completa, y la documentación cubre la instalación y la vinculación. La extensión se está preparando para Chrome Web Store.
Preguntas frecuentes
La importación por URL carga las páginas como visitante anónimo desde nuestro servicio de captura, así que no puede llegar a páginas con sesión iniciada, a localhost ni a redes privadas, y siempre ve el estado predeterminado. La extensión captura desde tu propio navegador, con tu sesión y en el estado en que esté la página.
Sí. Cambia al selector 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 su hijo y pulsa Enter para capturar. Pulsa Esc para cancelar. El elemento llega como su propio frame con capas editables.
Vincula la extensión con tu plugin una vez usando un código de un solo uso. A partir de ahí, cada captura se entrega directamente en el plugin abierto. La captura espera en memoria como máximo 30 minutos hasta que el plugin la recoge, y nunca se escribe en disco.
No. No tiene cuenta, ni analítica, ni código remoto. No nos envía nada a menos que uses Send to Figma para una captura. Si pegas en su lugar, la captura pasa por tu portapapeles o por un archivo .h2f y nunca sale de tu ordenador.
Sí. Cada captura de la extensión cuenta como una importación en tu plan. El plan Free incluye 10 importaciones al mes, y Pro y Team son ilimitados dentro de un margen de uso razonable. Los contadores de uso se reinician cada mes en UTC, y una captura se cuenta solo una vez.
Sí. La extensión HTML to Frames para Chrome es gratuita y no necesita cuenta. Las capturas se importan a través del plugin de Figma y cuentan para tu plan, que empieza con el nivel Free. La extensión se está preparando para su publicación en Chrome Web Store.
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