Plugin de Figma
HTML to Figma: convierte HTML a Figma en capas editables, no en una captura
HTML to Frames convierte cualquier página web en frames, textos, vectores e imágenes reales de Figma, con un Auto Layout que se comprueba antes de conservarlo.
- Cinco fuentes: enlace, varios enlaces, archivos locales, pestaña de Chrome, herramientas de IA
- Auto Layout verificado hijo por hijo, para que el diseño nunca se rompa
- Plan Free con 10 importaciones al mes
Muy pronto en Figma Community
Convertir HTML a Figma parece sencillo hasta que abres el resultado: una imagen plana que no puedes editar, o un montón de cajas con posición absoluta que se desmoronan en cuanto redimensionas un frame. HTML to Frames, un plugin de Figma de EUREKA!, toma otro camino. Renderiza tu página en un navegador real, mide cada elemento y la reconstruye en tu lienzo como capas nativas de Figma: frames, texto editable con estilos mixtos, SVG convertido en vectores e imágenes con su encaje y mosaico originales.
Primero, el plugin construye la página con precisión de píxel y posiciones absolutas. Después recorre los frames de dentro hacia fuera y deduce pilas, filas que se ajustan, espacios, padding y alineación a partir de la geometría del navegador. Cada plan de Auto Layout se aplica y la posición de cada hijo se verifica con una tolerancia de 2 px. Si un plan no se sostiene, se prueba uno más sencillo; si nada encaja, ese frame mantiene sus posiciones absolutas con restricciones sensatas. Obtienes un archivo que se comporta como algo construido por un diseñador, no como un calco.
Puedes traer el HTML desde donde esté: una URL pública, hasta 10 enlaces en un lote, un archivo HTML local, la carpeta de un sitio o un .zip, código pegado, una pestaña de tu propio Chrome o una herramienta de IA conectada por MCP. El resumen de funciones enumera todo lo que se convierte, desde degradados y sombras hasta pseudoelementos ::before y shadow DOM.
Si el proceso es nuevo para ti, la guía paso a paso Cómo convertir HTML a Figma te acompaña en tu primera importación. Si trabajas sobre todo con sitios en vivo, consulta URL to Figma; para páginas que requieren inicio de sesión o que están en localhost, la extensión de Chrome es el camino adecuado. Los precios empiezan en $0 con 10 importaciones al mes, y la página de precios explica lo que añade Pro.
Cómo convertir HTML a Figma en cuatro pasos
- 01
Abre el plugin y elige una fuente
Elige Link, Multiple, Local file, Browser o AI según dónde esté tu HTML.
- 02
Elige pantallas y opciones
Selecciona Desktop, Laptop, Tablet o Mobile y activa opciones como Auto Layout, Images o Hide cookie banners & popups (ocultar banners de cookies y ventanas emergentes).
- 03
Resuelve las fuentes que faltan
Antes de construir nada, una pantalla Missing fonts sugiere reemplazos y recuerda tus elecciones para cada sitio.
- 04
Revisa el resultado
La pantalla de resultados muestra frames, capas, proporción de Auto Layout y advertencias, incluido por qué un frame se quedó en posición absoluta.
Qué hace que la conversión sea editable
Capas nativas, no píxeles
Frames, textos, vectores e imágenes que puedes seleccionar, renombrar y reestilizar como cualquier cosa dibujada a mano.
Auto Layout verificado
Pilas, espacios, padding y alineación se deducen de la geometría medida y se comprueban con 2 px de tolerancia antes de conservarlos.
Estilos de texto reales
Estilos mixtos, enlaces, letter-spacing, line-height y text-transform llegan como texto editable.
Degradados, sombras, desenfoque
Se conservan los degradados lineales, radiales y cónicos, las sombras interiores y exteriores, los modos de fusión, el desenfoque y el backdrop-blur.
Pantallas responsive
Captura Desktop, Laptop 1280, Tablet 768 y Mobile 390, o un Responsive set completo con un clic en Pro.
Cinco formas de entrar
Importa desde un enlace, hasta 10 enlaces, archivos locales, una pestaña de Chrome o una herramienta de IA por MCP.
Capas editables frente a una captura de pantalla
Muchas herramientas que prometen convertir HTML a Figma pegan una imagen de la página. Sirve para un moodboard, pero ahí se queda: no puedes cambiar un titular, cambiar un color ni mover una tarjeta. HTML to Frames, en cambio, reconstruye la estructura.
| Importación como captura | HTML to Frames | |
|---|---|---|
| Texto | Píxeles | Texto editable con estilos mixtos |
| Iconos y logotipos | Píxeles | SVG convertido en vectores editables |
| Layout | Imagen plana | Frames anidados con Auto Layout verificado |
| Colores | Muestreados a ojo | Valores exactos, variables de color opcionales (Pro) |
| Redimensionar | Estira la imagen | Auto Layout y restricciones responden |
Hay una excepción, y la decimos con honestidad. El contenido que no puede existir como capas, como un iframe con un mapa incrustado, un vídeo sin póster o una escena WebGL, llega como una imagen de esa caja concreta. El resto de la página sigue siendo editable a su alrededor, así que un hero con vídeo de fondo te sigue dando titulares, botones y navegación editables.
Si aun así quieres una referencia en píxeles, Pro incluye la opción Reference screenshot: una capa oculta y bloqueada que se coloca bajo la importación para que puedas comparar la reconstrucción con el original en cualquier momento. Para ver la diferencia más a fondo, lee HTML to canvas frente a capas editables.
Cinco fuentes, un resultado
Todas las fuentes terminan en el mismo tipo de resultado, así que puedes elegir la que mejor encaje con tu situación.
Link y Multiple
Pega una URL pública, o hasta 10 enlaces que se procesan uno tras otro. Cada página llega como su propia fila en el lienzo. La importación Multiple está disponible en todos los planes, incluido Free.
Local file
Arrastra un archivo HTML, la carpeta completa de un sitio (y luego elige qué páginas), un .zip, o pega HTML y CSS directamente. Los archivos subidos pueden ocupar hasta 30 MB y se eliminan en cuanto termina la importación.
Browser
La extensión gratuita de Chrome captura lo que ve tu navegador: paneles con sesión iniciada, localhost, redes privadas y el estado actual de una página, como un menú abierto o un formulario rellenado. Consulta De la extensión de Chrome a Figma.
Herramientas de IA
Conecta Claude Code, Claude Desktop, Cursor u otro cliente MCP desde la pestaña AI del plugin, y las páginas generadas llegarán a tu plugin abierto. Los detalles están en AI to Figma.
Sea cual sea la fuente que elijas, una importación cuenta como una página con todas sus pantallas, así que una captura Desktop, Tablet y Mobile de la misma página es una sola importación. Cada frame guarda su URL de origen, lo que significa que puedes volver a importarlo con un clic cuando la página en vivo cambie.
Lo que maneja el conversor
El CSS moderno es donde la mayoría de las herramientas de HTML a Figma pierden fidelidad. HTML to Frames lee el resultado calculado por el navegador, así que maneja una amplia gama de propiedades:
- Layout de flexbox y grid, traducido a Auto Layout cuando se sostiene (consulta De CSS flexbox y grid a Auto Layout)
- Bordes, incluido un solo lado de otro color, y radio de esquina
- Imágenes con
object-fit,background-size, mosaico ysrcsetde alta resolución clip-path,mask-image,::beforey::after, contadores CSS y viñetas de lista dibujadas como en Chrome- Rotación y escala CSS, opacidad,
filter: grayscale/opacity - Campos de formulario, superíndices y subíndices, shadow DOM y orden de z-index
Algunas cosas aún no se admiten: transformaciones skew y 3D, clip-paths con path(), máscaras de varias capas y colores Display-P3. Lo decimos abiertamente para que sepas qué esperar antes de importar. La lista completa está en la página de funciones, y las dudas de configuración se resuelven en la documentación.
Cuando algo no se puede representar exactamente, la pantalla de resultados te lo dice. Enumera las fuentes que faltan, las advertencias, la proporción de frames que recibieron Auto Layout y, para cada frame que se quedó en posición absoluta, el motivo. Nunca tienes que adivinar qué partes de la conversión debes revisar.
Preguntas frecuentes
No. HTML to Frames reconstruye la página como capas nativas de Figma: frames, texto editable, vectores a partir de SVG e imágenes. Solo las cajas que no pueden ser capas, como iframes de mapas, vídeos sin póster o canvas WebGL, llegan como una captura de esa caja, mientras que todo lo que las rodea sigue siendo editable.
Cinco: un enlace público, hasta 10 enlaces en una importación Multiple, archivos locales (un archivo HTML, la carpeta de un sitio, un .zip o código pegado), una pestaña de Chrome mediante la extensión gratuita y herramientas de IA como Claude Code, Claude Desktop o Cursor conectadas por MCP.
Sí. Después de construir la página con precisión de píxel, el plugin deduce pilas, espacios, padding y alineación, los aplica y verifica cada hijo con 2 px de tolerancia. Si un plan falla, se prueba uno más sencillo; si no, el frame mantiene las posiciones absolutas con restricciones, así que el diseño no se rompe.
Sí. El plan Free incluye 10 importaciones al mes con una pantalla por importación, y la importación Multiple de hasta 10 enlaces está incluida. Pro añade hasta cuatro pantallas por importación, estilos y variables, componentes, Light + Dark y más, por un precio de lanzamiento de $7 al mes.
Las páginas se renderizan en un navegador aislado y en sandbox. El resultado se entrega una sola vez y luego se elimina de la memoria; nunca se escribe en disco y el registro del trabajo se olvida a los 15 minutos. Los archivos subidos se eliminan en cuanto termina la importación.
Antes de construir, el plugin muestra una pantalla Missing fonts con reemplazos sugeridos. Tus elecciones se recuerdan por sitio, o para todos los sitios si lo prefieres, así que las siguientes importaciones del mismo sitio no vuelven a preguntar. El mapeo de fuentes está disponible en todos los planes, incluido Free.
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