Cómo capturar una página con inicio de sesión para importarla en Figma

Para importar una página que está detrás de un inicio de sesión, inicia sesión tú mismo, guarda la página como archivo desde ese navegador y suelta el archivo en el plugin. No le pases una URL al plugin esperando que pueda iniciar sesión. Un Web Archive de Safari o un archivo HTML autónomo contiene la página tal como la renderizó tu navegador, así que la importación nunca tiene que autenticar nada.

Esta guía es para diseñadores y desarrolladores que tienen un panel, una pantalla de administración o una versión de staging y ningún archivo de diseño. Cubre páginas que tienes derecho a ver, como tu propio producto, la app de staging de un cliente o una cuenta que pagas. No es una forma de saltarse un muro de inicio de sesión, y nada de lo que sigue ayuda con eso.

Requisito previo: una cuenta que ya pueda ver la página y Safari en un Mac, o una forma de guardar HTML autónomo desde tu navegador.

Por qué una importación por URL no puede ver la página

Una petición nueva a una URL con sesión no lleva cookies, así que el servidor responde con la pantalla de inicio de sesión o con una redirección. Una herramienta que trabaje a partir de esa petición convertiría la pantalla de inicio de sesión. Eso no es lo que querías.

La CLI de captura documentada de UnHTML recibe una URL y una opción de salida, y ejecuta un navegador headless real que descarga los recursos sin límites de CORS y con desplazamiento de página completa. La documentación publicada no menciona cookies, cabeceras ni estado de sesión. Por eso este artículo no da por hecho que la CLI o el bookmarklet puedan llevar una sesión, y tú tampoco deberías. La vía fiable es aquella en la que tu propio navegador se encarga de iniciar sesión.

Un servidor de desarrollo local es un caso parecido, con sus propios pasos. Si es tu situación, consulta cómo importar una app de Next.js que corre en localhost.

Guarda la página desde tu propio Safari con la sesión iniciada

El formato Web Archive de Safari guarda una página completa, con las imágenes, el CSS y el JavaScript enlazados, en un solo archivo, como describe Wikipedia. Como lo guardas desde la pestaña que ya tienes abierta, el archivo contiene lo que mostraba esa pestaña. Para una guía más detallada, consulta cómo guardar una página como Web Archive de Safari.

Los pasos en Mac

1. Inicia sesión y abre la página en Safari.
2. Espera a que termine de cargar, incluido el contenido que se carga al desplazarte. Baja hasta el final una vez.
3. Abre el menú Archivo y elige Guardar como.
4. En Formato, elige Web Archive. Los formatos Código fuente de la página y Página web, solo HTML no empaquetan los recursos enlazados de la misma manera.
5. Guarda el archivo y anota dónde quedó.

Qué contiene el archivo

El archivo es un recurso principal más sus subrecursos y los archivos de los subframes, así que los iframes anidados conservan sus propios recursos. Es una instantánea de la página tal como estaba renderizada al guardar. Eso es lo útil frente a un inicio de sesión: el contenido guardado ya no depende de tu sesión.

En iPhone o iPad

Safari en iOS o iPadOS 13 y posteriores puede guardar el mismo formato. Abre la página, toca el icono de compartir, elige Guardar en Archivos y escoge una ubicación a la que puedas llegar desde un Mac, como iCloud Drive. Pasa el archivo a tu Mac antes de importarlo.

Qué hacer si trabajas en Chrome

Si Chrome es tu navegador de diario, usa un guardado de HTML autónomo. Los pasos están en cómo exportar HTML autónomo desde Chrome. Un archivo autónomo lleva consigo sus imágenes, estilos y fuentes, que es lo que necesita el plugin.

También puedes encontrar la API de extensiones pageCapture de Chrome, que guarda una pestaña como MHTML. Es una API para autores de extensiones, no una opción de menú. Necesita el permiso pageCapture en el manifiesto, y la documentación dice que un archivo MHTML solo puede cargarse desde el sistema de archivos y solo en el frame principal. Además, MHTML no figura entre los tipos de archivo que documenta el plugin, así que trátalo como un experimento, no como un paso de este flujo.

Prepara la página antes de guardarla

La instantánea conserva lo que hay en pantalla, así que prepara la pantalla primero.

• Deja la app en el estado que quieres diseñar. Abre el menú, expande la tabla, cambia de pestaña. Un desplegable cerrado es una capa que nunca obtendrás.
• Sustituye los datos reales por datos de prueba. Usa una cuenta de prueba o datos de staging. Los nombres, correos y cifras de clientes de un archivo guardado viajan con él a tu archivo de diseño y a cualquier sitio donde lo compartas.
• Deja que las animaciones terminen. El contenido que sigue renderizándose después de cargar puede quedarse congelado a medias en una instantánea guardada o perder por completo el contenido de otros orígenes (cross-origin). Si un gráfico se anima al entrar, espera a que termine antes de guardar.
• Comprueba que puedes copiarla. Revisa los términos que se aplican al producto antes de llevar sus pantallas a un archivo de diseño.

Por qué la importación se queda en tu equipo

Una página con sesión suele contener datos que no querrías enviar a ningún sitio. En las importaciones de archivos, no se envía nada. Las importaciones por defecto no hacen ninguna petición de red y nada sale de tu equipo, según el sitio de UnHTML. Descargar recursos remotos y ejecutar los scripts de la página es una única opción que sigue desactivada hasta que la activas. Cuando está activada, los scripts se ejecutan solo en un frame aislado (sandbox) y el marcado se sanea antes: se eliminan los scripts, los controladores de eventos en línea y las URL javascript:.

Por eso este flujo encaja con una página protegida por inicio de sesión. La sesión nunca llega a un tercero, y el archivo que guardaste es la única entrada.

Qué revisar después de la importación

Una importación es fiel, no exacta al píxel, y el informe de importación te dice dónde hubo un respaldo. A 2026, tres cosas aparecen más en las pantallas de una app:

• Fuentes. Cualquier fuente que no esté instalada localmente se sustituye, con Inter por defecto, y cada cambio aparece en el informe. Las interfaces de producto suelen usar una tipografía con licencia, así que espera sustituciones.
• Capas. El plan gratuito limita una importación a 500 capas y recurre al posicionamiento absoluto a partir de ahí. Una tabla de datos densa puede llegar al límite enseguida.
• Cuadrículas. Las cuadrículas CSS complejas que no se pueden mapear a auto layout recurren al posicionamiento absoluto.

Los enlaces dentro de la página guardada solo siguen funcionando mientras sus páginas de destino sigan en línea, y esos destinos pueden volver a pedirte que inicies sesión.

Conclusión

Inicia sesión tú mismo, guarda una instantánea de la página que puedes usar e importa el archivo en local. El inicio de sesión se queda en tu navegador, los datos se quedan en tu equipo y la importación recibe una página fija que convertir. Empieza con una cuenta de prueba, espera a que la página se asiente y lee el informe de importación antes de fiarte del resultado.