HTML to Canvas: capturas en bitmap frente a capas de Figma

"HTML to canvas" es una de esas expresiones que significan dos cosas distintas según quién busque. Un desarrollador front-end suele referirse a renderizar un elemento del DOM dentro de un <canvas> HTML, el trabajo de librerías como html2canvas. Un diseñador suele referirse a llevar una página web al lienzo (canvas) de Figma para poder trabajar con ella.

Ambas parten de HTML. Ambas acaban en algo llamado canvas. Pero los resultados son radicalmente distintos: uno es una cuadrícula plana de píxeles; el otro, un árbol de capas editables. Elegir mal cuesta tiempo, así que conviene ser preciso.

Significado 1: de HTML a un <canvas> HTML (bitmaps)

Cómo funciona

El elemento HTML <canvas> es una superficie de dibujo: un rectángulo de píxeles sobre el que JavaScript puede pintar. Librerías como html2canvas recorren el DOM, leen los estilos calculados y vuelven a dibujar la página sobre un canvas con la API Canvas 2D. El resultado es un bitmap que puedes exportar como PNG o JPEG.

Otros enfoques relacionados producen el mismo tipo de resultado:

• Capturas del navegador: la función de captura del propio navegador, "Capture node screenshot" de DevTools o capturas con navegadores headless.
• Trucos con foreignObject de SVG: incrustar HTML dentro de un SVG, dibujarlo en un canvas y exportar píxeles.
• Servicios de captura en servidor: un navegador headless renderiza la página y devuelve una imagen.

Cuándo un bitmap es la respuesta correcta

Los bitmaps son realmente útiles cuando la imagen en sí es el entregable:

• Botones de "compartir como imagen": un gráfico, un recibo, una tarjeta con una cita.
• Pruebas de regresión visual que comparan píxeles entre builds.
• Miniaturas e imágenes de vista previa para redes sociales.
• Informes de errores que deben mostrar exactamente lo que vio el usuario.
• Archivar el aspecto de una página en un momento dado.

En todos estos casos, nadie necesita editar el resultado. Necesitan mirarlo.

Limitaciones de los bitmaps

En cuanto quieres trabajar sobre la página capturada, los píxeles estorban:

• Sin edición. No puedes cambiar un titular, ajustar un espacio ni cambiar un color. Solo puedes pintar encima.
• Sin texto. El texto son píxeles. No puedes seleccionarlo, buscarlo, comprobar su tamaño de fuente ni copiarlo en una especificación.
• Borroso al escalar. Un bitmap tiene una resolución fija. Haz zoom, o coloca una captura a 1x en una pantalla de alta densidad, y los bordes se suavizan.
• Sin estructura. No hay frames, ni jerarquía, ni valores de espaciado que inspeccionar. Un botón y el fondo que tiene detrás son la misma capa.
• Sin capacidad responsive. Una captura a 1440 siempre será de 1440. Necesitas una captura por cada ancho, y ninguna se puede redimensionar con sentido.
• Sin sistema de diseño. Los colores y la tipografía no se pueden convertir en variables ni estilos, y los elementos repetidos no pueden convertirse en componentes.
• Fallos de fidelidad (en los que re-renderizan). Las librerías que vuelven a dibujar el DOM en un canvas reimplementan el CSS en JavaScript, así que las funciones CSS más nuevas o menos comunes pueden renderizarse de forma distinta a como lo hace el navegador real.

Significado 2: HTML en el lienzo de Figma (capas editables)

Cómo funciona

En Figma, "el canvas" es el espacio de trabajo infinito donde viven tus frames. Llevar HTML al lienzo de Figma significa convertir la página renderizada en objetos nativos de Figma: frames, capas de texto, vectores y rellenos de imagen.

Eso es lo que hace HTML to Frames. Una página se renderiza en un navegador real, se miden su geometría y sus estilos calculados, y el plugin la reconstruye en Figma como:

• frames anidados que reflejan la estructura de la página, con Auto Layout donde se puede verificar,
• capas de texto reales con estilos mixtos, letter-spacing, line-height y enlaces,
• SVG como vectores editables,
• imágenes como rellenos de imagen, respetando object-fit y background-size,
• bordes, radios, sombras, degradados, desenfoque y modos de fusión como propiedades nativas.

El resultado es algo que puedes editar, reestilizar, redimensionar y convertir en componentes: no una imagen de una página, sino un archivo de diseño funcional. La guía HTML to Figma cubre el flujo de importación completo.

Cuándo las capas editables son la respuesta correcta

• Rediseños que parten de un sitio existente.
• Auditorías de espaciado, tipografía y color.
• Extracción del sistema de diseño: variables de color, estilos de texto y estilos de sombra (Pro).
• Handoff y revisión de páginas construidas en código, incluido localhost mediante la extensión de Chrome.
• Pulir interfaces generadas por IA importadas por MCP: consulta AI to Figma.
• Trabajo responsive: Desktop, Tablet y Mobile en una sola importación.

Lado a lado

La versión corta: html2canvas te da píxeles; HTML to Frames te da capas en el lienzo de Figma.

Por qué importa renderizar en un navegador real

Ambos enfoques dependen, ante todo, de la fidelidad con que se renderice la página. Las librerías que vuelven a dibujar, como html2canvas, se ejecutan dentro de la página y reimplementan el layout y el pintado CSS en JavaScript. Funciona bien con los estilos comunes, pero todo lo que la librería no ha implementado (o implementa de forma ligeramente distinta) aparece como una discrepancia en la imagen.

HTML to Frames toma otro camino. Las páginas públicas, los archivos locales y el código pegado se renderizan en un navegador aislado y en sandbox, y las páginas capturadas con la extensión de Chrome vienen de tu propio navegador. En ambos casos, el plugin lee la geometría y los estilos calculados que el navegador produjo realmente y luego los reconstruye como objetos de Figma. Por eso llegan correctamente detalles en los que es fácil equivocarse:

• Viñetas de lista dibujadas como en Chrome, contadores CSS, superíndices y subíndices.
• Degradados: lineales, radiales y cónicos, incluidos puntos en px y degradados repetidos o en mosaico.
• Imágenes de alta resolución desde srcset, respetando object-fit, background-size y mosaico.
• Un solo lado del borde de otro color, sombras interiores y exteriores y text-shadow.

Además, la página se captura tal como la ve un visitante normal: los banners de cookies y las ventanas emergentes se pueden ocultar si lo pides, y las animaciones se congelan para que el frame quede limpio y no a mitad de una transición.

¿Y lo que de verdad es un canvas?

Aquí es donde se encuentran los dos significados. Algunas partes de una página web son píxeles por naturaleza, y ningún conversor puede convertirlas en capas vectoriales con sentido:

• Escenas WebGL y 3D dibujadas dentro de un <canvas>,
• dibujos en canvas 2D, como algunos gráficos o juegos,
• iframes, incluidos los mapas incrustados,
• vídeos sin imagen de póster,
• elementos object y embed.

HTML to Frames los trata de forma pragmática: cada uno llega como una imagen solo de esa caja. La imagen se coloca en el lugar correcto, con el tamaño correcto, dentro de una página por lo demás totalmente editable. El titular del hero, la navegación y las tarjetas siguen siendo capas reales; solo el visor 3D del producto o el mapa incrustado es un bitmap.

Para el contenido animado, la captura busca un frame limpio y estable: las animaciones se congelan, y el WebGL se congela tras unos pocos fotogramas para que la escena tenga tiempo de renderizar algo con sentido antes de capturarla.

Este híbrido suele ser lo que quiere un diseñador. No rediseñas el interior de un mapa incrustado; diseñas la tarjeta que lo rodea. Una imagen de marcador para el contenido incrustado y todo lo demás editable es el resultado práctico.

Lo que aún no se convierte

Para ser completos con los límites: aún no se admiten las transformaciones CSS skew y 3D, los clip-paths con path(), las máscaras de varias capas ni los colores Display-P3. Sí se admiten la rotación y la escala CSS, las formas simples de clip-path, mask-image, el desenfoque y el backdrop-blur. La página de funciones tiene la lista completa.

Cómo elegir el enfoque adecuado

Hazte una pregunta: ¿alguien va a editar el resultado?

1. No, es para ver, compartir o probar. Usa un bitmap. html2canvas o una captura del navegador es más sencillo y rápido.
2. Sí, es para trabajo de diseño. Usa capas editables en el lienzo de Figma.
3. Casi siempre sí, pero hay partes que son mapas, vídeo o 3D. Usa capas editables; esas cajas llegan como imágenes automáticamente.

Algunos escenarios prácticos:

• "Necesito un PNG de este gráfico para una diapositiva." Bitmap.
• "Necesito rediseñar nuestra página de precios." Capas editables: impórtala y luego itera.
• "Quiero comparar producción con nuestro mockup." Capas editables, con el Reference screenshot opcional (Pro), una capa de imagen oculta y bloqueada que puedes activar para comparar píxel a píxel. Es un buen ejemplo de los dos significados trabajando juntos: un bitmap para comprobar, capas para trabajar.
• "Necesito en Figma el panel con sesión iniciada." Capas editables mediante la extensión de Chrome, que captura las páginas que ve tu navegador, incluido su estado actual.

Por qué "hazle una captura y ya" sale más caro después

Las capturas parecen más rápidas porque se hacen en segundos. El coste aparece después: alguien tiene que reconstruir cada frame a mano cuando empieza el trabajo de diseño de verdad. Medir el padding a partir de píxeles, adivinar tamaños de fuente, volver a teclear los textos, recrear los colores: todo eso suma horas por página.

Convertir a capas editables traslada ese trabajo a la herramienta. Obtienes tamaños medidos, texto real y, con Pro, variables, estilos de texto y componentes generados a partir de la propia página. El flujo HTML to design muestra cómo es eso a lo largo de un rediseño completo.

Nota sobre privacidad

Elijas el enfoque que elijas, piensa en dónde se renderiza la página. html2canvas se ejecuta dentro de la página, en el navegador del usuario. HTML to Frames renderiza las páginas públicas en un navegador aislado y en sandbox, entrega el resultado una sola vez y lo elimina de la memoria sin escribirlo en disco; la extensión de Chrome se ejecuta en tu propio navegador y no envía nada a menos que uses Send to Figma. Los detalles están en la página de seguridad.

Resumen

• HTML to canvas (bitmap) convierte una página en píxeles. Ideal para compartir, probar y previsualizar; no es editable.
• HTML al lienzo de Figma convierte una página en frames, textos y vectores con los que puedes trabajar.
• El contenido que de verdad es un canvas (WebGL, mapas, iframes, vídeo sin póster) se captura como una imagen de esa caja, mientras el resto sigue siendo editable.

Para ver el enfoque basado en capas con tu propia página, consigue el plugin y empieza por la documentación, o lee cómo el motor de Auto Layout convierte la estructura de la página en frames.