Cómo convertir HTML a Figma (HTML to Figma): guía completa 2026

Tarde o temprano, todo equipo de diseño se topa con el mismo muro: aquello sobre lo que necesitas trabajar existe como HTML en un navegador, pero el lugar donde quieres trabajarlo es Figma. Quizá sea el sitio en vivo de un cliente antes de un rediseño, un build de staging que un desarrollador acaba de publicar o una landing page que una herramienta de IA generó en segundos. Reconstruirlo a mano lleva horas. Pegar una captura de pantalla te da algo que puedes mirar, pero no editar.

Esta guía explica cómo convertir HTML a Figma (HTML to Figma) en capas reales y editables (frames, textos, vectores e imágenes) con el plugin HTML to Frames. Aprenderás las cinco formas de importar una página, cómo elegir pantallas, qué opciones activar, qué se convierte limpiamente y qué no, y cómo resolver el problema más común: las fuentes que faltan.

¿Por qué convertir HTML a Figma?

Un navegador y una herramienta de diseño resuelven problemas distintos. El navegador es la fuente de verdad de lo que se publica; Figma es donde exploras, anotas, comparas y entregas. Convertir lleva la realidad actual al lugar donde tomas decisiones.

Motivos habituales por los que los equipos lo hacen:

• Rediseños. Empieza desde el sitio existente en lugar de un lienzo en blanco, para ver lo que realmente hay antes de cambiarlo. Nuestra guía de rediseño de website to Figma profundiza en ello.
• Auditorías. Inspecciona el espaciado, la escala tipográfica y el uso del color capa a capa en lugar de adivinarlos desde DevTools.
• Desfase entre diseño y código. Trae la versión publicada de vuelta a Figma para compararla con el mockup original.
• Handoff a la inversa. Un desarrollador front-end construye en localhost y el diseñador lo revisa y lo pule en Figma.
• Interfaces generadas por IA. Herramientas como Claude o Cursor producen HTML rápidamente; Figma es donde lo dejas listo para producción.
• Aprendizaje. Estudiantes y diseñadores junior pueden estudiar sitios bien construidos capa a capa.

La palabra clave en todos estos casos es editable. Un bitmap solo te muestra la página. Las capas te permiten cambiarla.

Las 5 formas de llevar HTML a Figma

HTML to Frames acepta páginas web desde cinco tipos de fuentes. Elige la que corresponda a dónde está tu HTML.

1. Link (una sola URL pública)

Pega la URL de cualquier página web pública en la pestaña Link. La página se renderiza en un navegador aislado, se mide y se reconstruye como capas de Figma. Es el camino más rápido cuando la página es accesible públicamente. Consulta URL to Figma para saber más sobre este flujo.

2. Multiple (hasta 10 enlaces)

La pestaña Multiple admite hasta 10 enlaces de una vez. Se procesan uno tras otro y cada página se convierte en una fila del lienzo, así que la página de inicio, la de precios y una entrada del blog quedan una al lado de la otra para compararlas. La importación Multiple está disponible en todos los planes, incluido Free.

3. Archivo local, carpeta, .zip o código pegado

Si el HTML aún no está en línea, usa la pestaña Local file:

• un solo archivo HTML,
• la carpeta completa de un sitio (arrástrala y luego elige qué páginas importar),
• un archivo .zip, o
• Paste code: HTML y CSS sin procesar.

Los archivos subidos pueden ocupar hasta 30 MB. Se abren desde la memoria dentro de un navegador aislado (nunca mediante file://) y se eliminan en cuanto termina la importación. Las subidas abandonadas se borran a los 2 minutos. La página de seguridad recoge todos los detalles.

4. Browser (la extensión gratuita de Chrome)

A algunas páginas no puede llegar un servidor: paneles con sesión iniciada, localhost, redes privadas o una página en un estado concreto, como un menú abierto, un formulario rellenado o un carrito con artículos. Para esos casos, instala la extensión gratuita HTML to Frames para Chrome.

Puedes capturar la página completa o seleccionar un solo elemento (pasa el cursor para resaltar, usa las flechas para ir al elemento padre o hijo, pulsa Enter para capturar y Esc para cancelar). El resultado va a tu portapapeles, o a un archivo .h2f, y lo pegas en la pestaña Browser del plugin. Aún más sencillo: conecta la extensión al plugin una vez con un código de un solo uso y usa Send to Figma, para que las capturas vayan directamente al plugin abierto.

5. Herramientas de IA vía MCP

Si construyes interfaces con un asistente de IA, conecta Claude Code, Claude Desktop, Cursor o cualquier cliente MCP desde la pestaña AI del plugin. Te da un token y una configuración lista para copiar y pegar. El asistente podrá llamar a import_html (HTML de hasta 2 MB), import_url o import_status, y la página llegará a tu plugin abierto, importada con tu propio plan. Los conectores web de claude.ai aún no son compatibles. Más información en AI to Figma.

¿Qué método deberías usar?

Paso a paso: cómo convertir una página con HTML to Frames

Este es el flujo completo para una página pública típica.

1. Abre el plugin en un archivo de diseño de Figma y elige la pestaña Link.
2. Pega la URL de la página que quieres convertir.
3. Elige tus pantallas: Desktop (Site width), Laptop, Tablet, Mobile o el Responsive set con un clic.
4. Revisa las opciones, como Auto Layout, Full page, Images y Hide cookie banners & popups.
5. Inicia la importación. Si la página usa fuentes que no tienes instaladas, aparece una pantalla Missing fonts antes de construir nada.
6. Elige reemplazos para las fuentes que faltan (o acepta las sugerencias).
7. Revisa la pantalla de resultados. Muestra los frames, las capas, la proporción de Auto Layout, las fuentes que faltan y las advertencias.
8. Empieza a editar. Tu página es ahora un conjunto de frames de Figma anidados con textos, vectores e imágenes reales.

Cada pantalla se convierte en su propio frame, con un nombre como example.com/pricing — Desktop (1920) (sin protocolo, sin www y con un máximo de 60 caracteres), así que las importaciones grandes siguen siendo fáciles de recorrer en el panel de capas.

Cómo elegir pantallas: Site width explicado

La elección de pantalla importa más de lo que parece. Una página renderizada con el ancho equivocado o se estira de forma extraña o se comprime en un layout que el diseñador nunca pretendió.

Desktop = Site width

HTML to Frames no elige 1440 sin más y cruza los dedos. Mide el ancho de diseño real de la página al importarla:

• Los diseños a sangre completa (fondos que van de borde a borde) llegan a 1920, con la caja de contenido centrada.
• Los sitios realmente en caja llegan con el ancho de su caja, por ejemplo 1200, 1280 o 1440.
• Los sitios fluidos sin un contenedor fijo llegan a 1440.

Medido, no adivinado. En una importación de varias páginas, un sitio recibe un único ancho en todas sus páginas, así que los frames quedan alineados.

Otras pantallas

• Laptop: 1280
• Tablet: 768
• Mobile: 390
• Ancho personalizado: el ancho que necesites (Pro)

El Responsive set te da Desktop, Tablet y Mobile con un clic. Las pantallas de una misma página se capturan en paralelo.

En Free, cada importación incluye una pantalla. Pro y Team permiten hasta cuatro pantallas por importación. Y lo importante: una importación = una página con todas sus pantallas, así que un Responsive set de una página cuenta como una sola importación. Consulta los precios para ver los detalles de cada plan.

Opciones que conviene conocer

Los valores predeterminados funcionan para la mayoría de las páginas, pero conviene entender estas opciones:

• Auto Layout: deduce pilas, espacios, padding y alineación a partir de la geometría del navegador y verifica el resultado antes de conservarlo. La explicación del Auto Layout cuenta cómo funciona.
• Styles & variables (Pro): crea variables de color, estilos de texto y estilos de sombra, y reutiliza los que ya existen en tu archivo.
• Snap to my file's styles (Pro): cuando no hay una coincidencia exacta, ajusta colores y textos a los estilos más cercanos de tu propio sistema de diseño.
• Full page: captura toda la página con scroll en lugar de solo el primer viewport.
• Images: incluye u omite los rellenos de imagen.
• Hide cookie banners & popups: captura la página como la ve un visitante normal, sin superposiciones.
• Color scheme: Light, Dark o Light + Dark (Pro), que crea una colección de variables con ambos modos.
• Detailed layers (Pro), Reference screenshot (Pro, una capa oculta y bloqueada para comparar) y Extra wait (Pro, para páginas que cargan despacio).
• Accordion text as notes: desactivada por defecto; convierte el texto de los <details> cerrados en anotaciones de Figma.
• Page language: 15 idiomas, útil para sitios multilingües.

Qué se convierte y qué no

El objetivo es un archivo de diseño en el que puedas trabajar de verdad, así que conviene saber exactamente qué se traslada.

Lo que se convierte en capas editables

• Layout como frames anidados, con Auto Layout donde se puede verificar
• Texto con estilos mixtos, enlaces, letter-spacing, line-height y text-transform
• Colores y degradados: lineales, radiales y cónicos, incluidos puntos en px y degradados repetidos
• Imágenes con object-fit, background-size, mosaico y srcset de alta resolución
• SVG como vectores editables
• Bordes (incluido un solo lado de otro color), radio de esquina y sombras (interiores, exteriores y text-shadow)
• Opacidad, modos de fusión, desenfoque y backdrop-blur
• Rotación y escala CSS, filter: grayscale/opacity
• ::before y ::after, clip-path, mask-image
• Campos de formulario, viñetas de lista dibujadas como en Chrome, contadores CSS, superíndices y subíndices
• Shadow DOM y el orden de z-index correcto

Lo que llega como imagen

Algunos contenidos no se pueden representar como capas. Los iframes (como los mapas incrustados), los vídeos sin póster, los canvas WebGL o 3D y los elementos object/embed se capturan como una imagen solo de esa caja. El resto de la página sigue siendo editable. La comparación HTML to canvas explica por qué.

Aún no compatible

• Transformaciones skew y 3D
• Clip-paths con path()
• Máscaras de varias capas
• Colores Display-P3

Consejos para obtener resultados limpios

Algunos hábitos marcan una diferencia notable:

1. Activa "Hide cookie banners & popups" en los sitios de marketing. Si no, un diálogo de consentimiento puede quedar encima de tu sección hero.
2. Usa la extensión de Chrome para las páginas con autenticación. Un servidor no puede iniciar sesión por ti; tu navegador ya la tiene iniciada.
3. Captura los estados de forma deliberada. Abre primero el menú o rellena el formulario en tu navegador y luego captura con la extensión.
4. Selecciona un solo elemento cuando solo necesites un componente, como una tarjeta de precios o una barra de navegación. Las capturas más pequeñas son más rápidas de limpiar.
5. Usa Extra wait (Pro) en las páginas que cargan contenido tarde.
6. Añade un Reference screenshot (Pro) cuando necesites demostrar que la importación coincide con la página en vivo: es una capa oculta y bloqueada que puedes activar para comparar.
7. Importa un Responsive set en lugar de tres importaciones separadas. Es una sola importación y los frames quedan juntos.
8. Usa Import linked pages tras la primera importación para elegir otras páginas del mismo sitio; llegan como una importación Multiple.
9. Vuelve a importar con un clic cuando cambie la página en vivo. La URL de origen se guarda en el frame.

Cómo resolver las fuentes que faltan

Las fuentes que faltan son el motivo más habitual de que una página importada se vea "rara". El sitio puede usar una tipografía con licencia o una fuente web que no tienes instalada localmente.

HTML to Frames lo resuelve antes de construir las capas:

1. Tras la captura, una pantalla Missing fonts muestra todas las familias que usa la página y que Figma no encuentra.
2. Para cada una, el plugin sugiere un reemplazo. Puedes aceptarlo o elegir otra fuente.
3. Tus elecciones se recuerdan por sitio (o para todos los sitios, si lo prefieres), así que la siguiente importación del mismo dominio no vuelve a preguntar.

El mapeo de fuentes está disponible en todos los planes. Las fuentes solo se enumeran localmente; el plugin no lee el contenido de tu archivo de Figma. Si piensas seguir trabajando en el diseño a largo plazo, instalar la tipografía real que usa el sitio sigue siendo la opción más precisa.

Y ahora, ¿qué?

Convertir HTML a Figma es el primer paso. El valor está en lo que haces con las capas:

• ¿Planeas un rediseño? Lee el flujo de trabajo HTML to design.
• ¿Trabajas con páginas generadas por IA? Consulta AI to Figma y nuestra guía De interfaz generada por IA a Figma vía MCP.
• ¿Necesitas localhost o páginas con sesión iniciada? Empieza por la extensión de Chrome.
• ¿Comparas herramientas? Nuestra página de alternativas presenta las opciones con justicia.

Cuando estés listo, consigue el plugin y pruébalo con la página en la que estás trabajando ahora mismo. La documentación cubre cada opción en detalle.