El plugin HTML para Figma que crea capas que de verdad puedes editar

HTML to Frames es un único producto con tres puntos de entrada, y todos terminan en el mismo resultado editable dentro del plugin.

Solo el plugin de Figma

Ideal para cualquier página con dirección pública. Pega un enlace, o hasta 10 con Multiple, y el servicio de captura renderiza cada página en un navegador aislado tal como la ve cualquier visitante, ocultando los avisos de cookies y las ventanas emergentes si lo pides. Los archivos HTML locales, las carpetas de sitios y los .zip de hasta 30 MB siguen el mismo camino y se borran en cuanto termina la importación.

Plugin + extensión de Chrome

Ideal para las páginas a las que el servicio no llega: paneles que requieren iniciar sesión, localhost, entornos de staging dentro de una red privada o una página en un estado concreto, como un menú abierto o un formulario rellenado. La extensión de Chrome, gratuita, captura lo que muestra tu navegador y lo envía directamente al plugin abierto con Send to Figma.

Plugin + herramientas de IA

Ideal cuando el HTML todavía no existe. Conecta Claude Code, Claude Desktop, Cursor o cualquier cliente MCP desde la pestaña AI del plugin y pídele que diseñe una página; el resultado llega a tu plugin y se importa con tu propio plan. La configuración está en De la IA a Figma.

Antes de comprometer a un equipo con una herramienta, importa las mismas tres páginas con cada candidata: una página de marketing, una pantalla de producto con mucha información y una página con tema oscuro. Luego revisa cinco cosas.

1. ¿Puedes editar el texto? Haz clic en un titular y escribe. Si forma parte de una imagen, la importación es una referencia, no un diseño.
2. ¿El Auto Layout aguanta un cambio de tamaño? Ensancha el frame. Las filas deberían estirarse, el contenido centrado debería seguir centrado y nada debería solaparse.
3. ¿Los anchos son correctos? Un sitio diseñado a 1200 px no debería llegar apretado en 1440 px. HTML to Frames mide el ancho de diseño real y lo llama Site width.
4. ¿Los estilos son reutilizables? Busca variables de color y estilos de texto en lugar de cientos de valores hexadecimales sueltos, y comprueba si se reutiliza un sistema de diseño existente.
5. ¿Adónde van tus datos? Lee la política de privacidad. Nuestro servicio de captura entrega cada resultado una sola vez, no guarda nada en disco y borra los archivos subidos justo después de la importación; tienes los detalles en la página de seguridad.

Si una herramienta supera las cinco pruebas, te ahorrará tiempo en proyectos reales, no solo en una demo.

El plan Free incluye 10 importaciones al mes, una pantalla por importación, importación múltiple de hasta 10 enlaces, Auto Layout y sustitución de fuentes. Pro cuesta $7 al mes en el lanzamiento (precio normal: $9) y añade importaciones ilimitadas con un límite de uso razonable de 1.000 al mes, hasta cuatro pantallas por importación, anchos personalizados, estilos y variables, Snap, componentes y estados hover, modo claro y oscuro, capas detalladas, captura de referencia y espera adicional. Team cubre 5 puestos por $22 al mes en el lanzamiento con una clave de licencia compartida.

Una importación es una página con todas sus pantallas, así que Desktop, Tablet y Mobile de la misma página cuentan una sola vez. Una captura desde la extensión de Chrome también cuenta como una importación. Los contadores se reinician cada mes en UTC. Tienes todos los detalles en la página de precios.