Cómo importar un sitio React o Vue a Figma

Un sitio React o Vue parece una página terminada en el navegador, pero el HTML que su servidor realmente envía está casi vacío. Impórtalo de la misma forma que importarías una página estática y capturarás ese contenedor vacío, no la página que ve una visita real. Aquí es donde entra la CLI de UnHTML: ejecuta la app primero, espera a que el JavaScript termine de construir la página, y captura el resultado. Este recorrido explica por qué ocurre el problema del contenedor vacío, cómo lo resuelve la CLI paso a paso, y qué llega a Figma una vez terminada la captura.

Por qué React y Vue necesitan una ruta de captura distinta

La mayoría de las apps React y Vue usan renderizado del lado del cliente. El trabajo del servidor es pequeño: envía un documento HTML mínimo y un paquete de JavaScript, y se hace a un lado. Como explica la entrada del glosario de MDN sobre renderizado del lado del cliente, una respuesta puramente renderizada en el cliente apenas incluye un contenedor raíz vacío y una única referencia a un script. El contenido real se construye después, en el navegador, mediante manipulación del DOM. Toda la lógica, la obtención de datos, el templado y el enrutamiento ocurren en el cliente, como explica la visión general de web.dev sobre el renderizado en la web.

Puedes comprobarlo tú mismo: desactiva JavaScript en una app renderizada del lado del cliente y recárgala. La página queda prácticamente inerte, porque nunca hubo demasiado en la respuesta inicial. Ese es exactamente el problema para cualquier herramienta de captura que solo lee lo que envió el servidor. Obtiene el contenedor, y el contenedor casi no dice nada sobre el diseño, el espaciado o el contenido.

Para una herramienta de captura, esto significa que una app React o Vue necesita que su JavaScript se ejecute antes de la captura, no en lugar de ella. Lee el código fuente sin procesar y no habrá nada que valga la pena importar. Deja que la app se renderice primero y tendrás una página completa de marcos, texto e imágenes lista para entrar a Figma.

Esto es distinto de importar un sitio de marketing construido con HTML y CSS simples, donde la respuesta del servidor ya contiene la página terminada. Una herramienta de captura enfocada solo en el HTML del servidor funciona bien ahí, y falla silenciosamente en una app React o Vue, devolviendo una página de divs casi vacíos en lugar de un error. Ese fallo silencioso es el riesgo real: no descubres que la captura estaba mal hasta que abres Figma y no ves nada con qué diseñar.

Cómo la CLI de UnHTML captura una URL en vivo

La CLI existe justo para este caso, y es un solo comando. No se requiere ninguna configuración de proyecto de tu parte:

1. Instala y ejecuta el comando de captura contra la URL en vivo.

   node capture/cli/capture.js https://tu-app.ejemplo.com --out scene.json
   

   Esto apunta la CLI a la página que quieres, con una ruta de salida para el resultado.
2. Abre un navegador headless contra esa URL. Analiza el HTML, luego ejecuta los scripts de la página, la misma técnica fundamental detrás del flag dump-dom de Chrome:

   chrome --headless --dump-dom https://example.com
   

   Chrome for Developers documenta esto como analizar el HTML en un DOM, ejecutar cualquier script que lo altere, y luego serializar ese resultado de vuelta a HTML. La CLI aplica esa idea a todo un flujo de captura en lugar de un solo volcado.
3. Espera a que la página termine su comportamiento. Se ejecuta un scroll completo de la página para que el contenido que carga al hacer scroll tenga oportunidad de montarse, y los recursos remotos se obtienen sin toparse con las limitaciones de CORS que bloquearían una captura desde dentro del propio navegador.
4. Escribe el resultado en scene.json. Ese archivo contiene el estado del DOM completamente renderizado, su estructura, estilos y referencias a los recursos, listo para que el plugin lo lea.
5. Importa scene.json desde el plugin de Figma. Como la captura ya ocurrió en la línea de comandos, el plugin no necesita acceso a la red en vivo al momento de importar. Estás importando un archivo, no volviendo a consultar una página.

Para una página pequeña de marketing, toda esta secuencia toma segundos. Para un panel grande en Vue o una app React con muchas rutas, siguen siendo los mismos cinco pasos, solo con más contenido para recorrer con scroll y más recursos que obtener.

Vale la pena revisar algunas cosas antes de ejecutar el comando. Asegúrate de que la URL que estás capturando sea la que realmente renderiza tu app, no una pantalla de inicio de sesión o una pantalla de carga que la precede. La CLI captura el estado del DOM que exista cuando deja de esperar, así que una página aún a medio cargar produce una escena incompleta. Si tu app depende de autenticación, captura una ruta accesible sin ella, o un estado al que puedas llegar directamente. Y como los recursos remotos se obtienen durante la captura, un servidor de imágenes o una CDN de fuentes lentos pueden añadir tiempo real a la ejecución en una página con mucho contenido.

De la captura por CLI a las capas de Figma

Una vez que scene.json está en Figma, el plugin convierte el DOM capturado en capas nativas: marcos, texto, imágenes y vectores, mapeados desde el propio CSS de la página.

El auto layout es donde más se nota ese mapeo. Los controles de dirección, gap, padding y redimensionado de Figma siguen de cerca a flexbox de CSS, como detalla la guía de auto layout de Figma: gap distribuye los objetos de la misma forma que justify-content y el gap de CSS, padding refleja el padding de CSS, y los modos de redimensionado hug contents y fill container corresponden al tamaño según el contenido y a flex: 1. ¿Quieres el mapeo propiedad por propiedad? Consulta cómo CSS flexbox se mapea a auto layout de Figma.

Las fuentes reciben el mismo trato honesto. Una fuente que no está instalada localmente se sustituye, Inter por defecto, y cada sustitución queda registrada en el informe de importación en lugar de cambiarse en silencio. Los detalles de esa sustitución y registro se cubren en sustitución de fuentes en Figma.

No todo se mapea de forma limpia, sin embargo. Una cuadrícula CSS compleja, o un diseño construido con trucos de posicionamiento en lugar de flex, puede caer de vuelta en posicionamiento absoluto en lugar de auto layout. Esto no es un clon exacto al píxel de la página original, y el informe de importación lo dice directamente en lugar de ocultar la diferencia.

Captura por CLI frente al re-renderizado dentro del plugin

El plugin también puede re-renderizar una página con los scripts activados, dentro de un marco aislado, directamente al momento de importar. Esa ruta existe, pero es opcional, porque necesita acceso a la red en vivo en el momento en que ejecutas la importación.

Para una app React o Vue pesada, capturar primero con la CLI e importar después scene.json es la ruta más confiable. El trabajo de renderizado ocurre una sola vez, en la línea de comandos, con tiempo para esperar el scroll y la carga de recursos. El re-renderizado dentro del plugin es cómodo para una revisión rápida en una página ligera, pero para cualquier cosa con complejidad real del lado del cliente, el flujo de dos pasos con la CLI es el que aguanta.

También hay una razón de flujo de trabajo para preferir la CLI más allá de la fiabilidad. Un archivo scene.json es portátil: captura una ruta una vez, entrégale el archivo a alguien de tu equipo, o vuelve a importarlo más tarde sin tocar de nuevo la URL en vivo. El re-renderizado dentro del plugin tiene que llegar a la red cada vez, lo que significa que cada nueva importación depende de que el sitio siga accesible y sin cambios mientras tanto.

Límites de capas y precios para capturas más grandes

Una app React o Vue puede producir fácilmente más capas que una página estática, así que vale la pena conocer los límites antes de capturar una grande. A fecha del 21 de septiembre de 2026, el plan gratuito ya aplica conversión a auto layout, con un límite de 500 capas por importación. Pro, un cargo único de 39 dólares por editor, elimina ese límite de capas y añade componentes y estilos de texto. Studio, un cargo único de 119 dólares, otorga licencia de Pro para hasta cinco editores. Todos los planes incluyen un año de actualizaciones. Revisa unhtml.pro directamente antes de comprar, ya que los precios pueden cambiar.

Conclusión

La razón por la que un sitio React o Vue necesita la CLI se reduce a un hecho: el servidor apenas envía nada, y la página real solo existe después de que se ejecuta el JavaScript. La CLI resuelve eso capturando el DOM en vivo y ya ejecutado en scene.json, para que el plugin de Figma tenga una página completa que importar en lugar de un contenedor vacío. A partir de ahí, el flujo de trabajo es igual que en cualquier otra captura: auto layout mapeado desde CSS, fuentes sustituidas y registradas, y un informe de importación que te dice exactamente dónde se sostuvo la conversión y dónde no.