Píxeles frente a capas
HTML to canvas: de HTML al lienzo de Figma como capas editables
Las librerías de capturas en bitmap te dan píxeles. HTML to Frames lleva la página a tu lienzo de Figma como vectores, textos y frames que puedes modificar.
- Texto editable y vectores SVG, no una imagen rasterizada
- Las cajas de canvas y WebGL reales se conservan como imagen de esa caja
- Animaciones congeladas para un frame limpio y coherente
Muy pronto en Figma Community
"HTML to canvas" significa dos cosas distintas, y conviene separarlas antes de elegir una herramienta. Los desarrolladores suelen referirse a html2canvas, la librería de JavaScript que recorre el DOM y pinta una aproximación de la página dentro de un elemento <canvas>, o a una captura del navegador que recoge los píxeles visibles. Los diseñadores suelen referirse a otra cosa: llevar una página web al lienzo de Figma para poder trabajar con ella.
Ambas cosas producen algo que se parece a la página, pero solo una te da algo con lo que trabajar. Un bitmap, por nítido que sea, es una cuadrícula de píxeles de colores. No puedes corregir una errata, cambiar un tamaño de fuente, recolorear un botón ni sacar una tarjeta a un layout nuevo. Solo puedes recortarlo, escalarlo y pintar encima.
HTML to Frames, un plugin de Figma de EUREKA!, se toma el segundo significado al pie de la letra. Renderiza la página en un navegador real, lee la geometría y los estilos calculados de cada elemento y recrea la página en tu lienzo de Figma como capas nativas: frames que reflejan la estructura de la página, texto editable con sus estilos originales, SVG convertido en vectores e imágenes colocadas con su encaje original. El layout se convierte a Auto Layout donde se puede verificar, así que el resultado también responde cuando lo redimensionas.
Hay un caso en el que los píxeles son la respuesta correcta, y el plugin lo trata de forma deliberada. Un elemento <canvas> real o una escena WebGL no tienen DOM en su interior que reconstruir, así que esa caja llega como una imagen mientras el resto de la página sigue siendo editable.
Para la versión larga de esta comparación, lee HTML to canvas frente a capas editables. Para ver la conversión principal, empieza por HTML to Figma o repasa lo que se convierte en la página de funciones.
Cómo llevar una página a tu lienzo de Figma
- 01
Elige de dónde viene la página
Una URL, un archivo o carpeta local, HTML y CSS pegados, una pestaña de Chrome o una herramienta de IA por MCP.
- 02
Deja que el navegador la renderice
La página se carga en un navegador aislado, las animaciones se congelan y el WebGL se congela tras unos pocos fotogramas.
- 03
Obtén capas en el lienzo
Frames, textos, vectores e imágenes se colocan en tu página actual de Figma, listos para editar.
Por qué las capas superan a un bitmap en el lienzo
El texto sigue siendo texto
Los titulares y el texto principal llegan como texto editable, con letter-spacing, line-height y estilos mixtos intactos.
El SVG se convierte en vectores
Iconos y logotipos se convierten en capas vectoriales editables que puedes recolorear y redimensionar sin que se emborronen.
Una estructura que puedes seleccionar
Los frames anidados siguen la estructura de la página, así que puedes elegir una sola tarjeta en lugar de recortar una imagen.
Píxeles solo donde hacen falta
Los iframes, los vídeos sin póster y las cajas de canvas WebGL o 3D llegan como una imagen de esa caja.
Captura congelada y limpia
Las animaciones se pausan para obtener un frame coherente, así que no aparecen elementos a medio desvanecer.
Capa de referencia
En Pro, una capa de captura oculta y bloqueada te permite comparar la reconstrucción con los píxeles originales.
html2canvas y capturas de pantalla frente a capas editables
Las capturas de pantalla y HTML to Frames parten de la misma página renderizada, pero terminan en lugares muy distintos.
| html2canvas / captura del navegador | HTML to Frames en el lienzo de Figma | |
|---|---|---|
| Resultado | Una imagen rasterizada | Frames, textos, vectores e imágenes |
| Editar texto | No es posible | Edición directa |
| Escalar | Se emborrona por encima de 1x | Los vectores siguen nítidos |
| Layout | Píxeles fijos | Auto Layout donde se verifica, restricciones en el resto |
| Seleccionar un elemento | Recortar a mano | Clic en el frame |
| Uso típico | Informes de errores, miniaturas, vistas previas | Rediseños, auditorías, handoff, sistemas de diseño |
Además, html2canvas vuelve a implementar el renderizado CSS en JavaScript, por lo que puede pasar por alto funciones que el navegador sí admite. HTML to Frames lee los valores de un navegador real basado en Chromium una vez que este ha hecho el renderizado, y luego los asigna a propiedades de Figma: degradados (incluidos los cónicos y los repetidos), sombras, modos de fusión, desenfoque y backdrop-blur, clip-path, mask-image y más.
Las capturas siguen teniendo su lugar. Si necesitas un registro visual rápido, un bitmap está bien. Si piensas cambiar algo, las capas te ahorran redibujar la página.
Una regla práctica: si el siguiente paso es un comentario o un ticket, basta con una captura. Si el siguiente paso es abrir Figma y cambiar algo, importa capas.
Qué ocurre con un elemento <canvas> o WebGL real
Parte del contenido de una página ya son píxeles. Un elemento <canvas> dibuja con JavaScript y una escena WebGL renderiza gráficos 3D en la GPU. Dentro de estas cajas no hay DOM que leer, así que ninguna herramienta puede convertirlas en capas vectoriales con sentido.
HTML to Frames las trata de forma explícita en lugar de fallar en silencio:
- La caja se captura como una imagen en su posición y tamaño exactos.
- Las escenas WebGL se congelan tras unos pocos fotogramas, así que obtienes una imagen estable en lugar de un frame en blanco o a mitad de transición.
- Todo lo que rodea la caja, como títulos, botones y superposiciones colocadas encima, sigue siendo capas editables.
La misma regla se aplica a otro contenido incrustado que no puede ser capas: iframes como los mapas, vídeos sin imagen de póster y elementos object o embed. Cada uno se convierte en una imagen de su propia caja, y la pantalla de resultados enumera cualquier advertencia.
En la práctica, esto significa que una landing page con un hero en 3D se sigue convirtiendo en un diseño útil. Puedes sustituir la imagen del hero por un nuevo visual, reescribir el texto que tiene encima y ajustar el espaciado, mientras el resto de la página conserva su Auto Layout. Mira cómo se deduce ese layout en Auto Layout explicado.
Cómo obtener un frame limpio de una página en movimiento
Las páginas modernas se mueven: los carruseles giran, los elementos aparecen al hacer scroll, los banners de cookies se deslizan hacia arriba y los heros se animan al cargar. Una captura ingenua congela lo que estuviera pasando en ese milisegundo.
HTML to Frames captura la página tal como la ve un visitante normal, con algunos controles para que el resultado sea predecible:
Animaciones congeladas
Las animaciones se congelan para que la captura muestre cada elemento en un estado estable en lugar de a mitad de una transición.
Hide cookie banners & popups
Activa esta opción y los banners de consentimiento y las ventanas emergentes se ocultan antes de la captura, para que no tapen la página en tu lienzo.
Extra wait
A las páginas lentas que cargan contenido tarde se les puede dar más tiempo antes de la captura. Extra wait (espera adicional) es una opción Pro.
Full page
Captura toda la página con scroll o solo la primera pantalla, según lo que necesites.
Estas opciones se aplican tanto si la página viene de una URL como de un archivo local o de la extensión de Chrome. La extensión es la opción adecuada cuando quieres un estado concreto, como un menú abierto, en lugar de la vista predeterminada.
Si aun así algo se captura a mitad de una animación o falta, la pantalla de resultados enumera las advertencias, y volver a importar con un clic usando otra opción suele ser la solución más rápida.
Preguntas frecuentes
No. html2canvas es una librería de JavaScript que pinta una aproximación del DOM en un bitmap. HTML to Frames es un plugin de Figma que reconstruye la página en el lienzo de Figma como capas editables: frames, textos, vectores e imágenes, con Auto Layout donde se puede verificar.
Sí. El texto llega como capas de texto nativas de Figma, incluidos estilos mixtos dentro de un mismo párrafo, enlaces, letter-spacing, line-height y text-transform. Si una fuente no está disponible, una pantalla Missing fonts te permite elegir un reemplazo antes de construir la página, y tu elección se recuerda.
No tienen DOM en su interior que reconstruir, así que cada una de esas cajas llega como una imagen en su posición y tamaño exactos. El WebGL se congela tras unos pocos fotogramas para ofrecer una imagen estable. Todo lo que rodea la caja sigue siendo capas editables.
Sí, en Pro. La opción Reference screenshot añade una capa de imagen oculta y bloqueada bajo la importación. Actívala cuando quieras comparar las capas reconstruidas con el renderizado original y déjala oculta el resto del tiempo para que no estorbe.
Las animaciones se congelan y, si lo eliges, los banners de cookies y las ventanas emergentes se ocultan, así que la captura muestra una página estable. Una captura de pantalla recoge lo que hubiera en pantalla en ese momento. Si necesitas un estado concreto, como un menú abierto, usa la extensión de Chrome.
Degradados lineales, radiales y cónicos, sombras interiores y exteriores, text-shadow, opacidad, modos de fusión, desenfoque y backdrop-blur, clip-path, mask-image, rotación y escala. Todavía no se admiten las transformaciones skew y 3D, los clip-paths con path(), las máscaras de varias capas ni los colores Display-P3. La lista completa está en la página de funciones.
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