De Figma a HTML exportando a PNG

IMG2HTML no se conecta a tu cuenta de Figma y no tiene plugin. Lo que hace es convertir imágenes, y Figma puede exportar cualquier marco (frame) como PNG en un par de clics. Exporta el marco, sube el PNG y obtienes HTML con Tailwind CSS que reconstruye el diseño.

Convertir una exportación de Figma Cómo exportar el PNG

Paso 1: exporta el marco de Figma como PNG

Selecciona el marco en el lienzo. Exporta una pantalla o una sección por marco.
En la barra lateral derecha, busca la sección Exportar (abajo del todo en el panel de diseño, o en la pestaña Propiedades si solo tienes acceso de visualización) y haz clic en el icono +.
Pon el formato en PNG y la escala en 2x si el diseño tiene texto pequeño.
Haz clic en Exportar. Con varios marcos seleccionados, Shift+Cmd+E en Mac o Shift+Ctrl+E en Windows abre el diálogo de exportación para todos.

Estos pasos siguen la guía oficial de Figma, Exportar desde Figma Design (consultada el 23 de septiembre de 2026).

Paso 2: convierte el PNG a HTML

Sube el PNG a IMG2HTML. El marco de abajo, la cabecera de una landing de 1536 x 864 para una app de facturación ficticia, volvió en 23 segundos como un archivo HTML de 320 líneas. Se generó con un modelo de imagen para esta página en lugar de exportarse de un archivo real de Figma, pero es el mismo tipo de PNG plano y exacto al píxel que produce Figma, y el resultado se muestra tal cual lo devolvió IMG2HTML.

Un diseño de escritorio exportado como PNG

Diseño de una landing page para una app de facturación llamada Ledgerly: navegación, el titular «Send invoices in two clicks», dos botones y una tarjeta de panel con un importe pendiente, un gráfico de barras y tres facturas marcadas «Paid», «Due» y «Overdue», sobre una fila de logos de clientes — **Entrada:** Diseño de una landing page (PNG, 1536 x 864)

El HTML generado abierto en un navegador: navegación, el titular a dos colores, los botones «Start free» y «Book a demo», la tarjeta de panel con barra lateral, gráfico de barras y lista de facturas con etiquetas de estado de colores, y la fila de logos de clientes — **Resultado:** el HTML generado, abierto en Chrome a 1280px de ancho y sin retocar. 320 líneas de HTML con Tailwind CSS, devueltas en 23 segundos.

Lo que hizo bien

Toda la cabecera: la etiqueta tipo píldora, el titular a dos colores, el párrafo y los botones relleno y con borde, en el violeta del diseño.
La tarjeta del panel como HTML real: menú lateral con el elemento activo, el importe pendiente, un gráfico de barras hecho con divs y tres filas de facturas con etiquetas «Paid», «Due» y «Overdue» en verde, naranja y rojo.
La fila de logos de clientes, con cada nombre como texto.

Lo que hay que corregir a mano

Los logos son provisionales: el de Ledgerly es un SVG genérico de capas apiladas, Globex y Northwind usan iconos de Font Awesome y el de Stark Industries usa una clase bg-dark que la página no define, así que no se ve. Sustitúyelos por tus SVG.
El icono de destellos de la etiqueta tipo píldora es fa-sparkles, que no está en el set gratuito de Font Awesome 5, así que no se muestra nada.
A 1280 píxeles las filas de facturas van justas e INV-0042 se parte en dos líneas. Dale más espacio a la columna derecha o acorta la de la fecha.

ledgerly-frame.html (primeras líneas del body)

 <body class="min-h-screen">
  <!-- Navigation -->
  <nav class="max-w-7xl mx-auto px-6 py-6 flex items-center justify-between">
   <div class="flex items-center space-x-12">
    <div class="flex items-center space-x-2">
     <div class="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
      <svg class="w-5 h-5" fill="white" viewbox="0 0 24 24">
       <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5">
       </path>
      </svg>
     </div>
     <span class="text-xl font-bold text-dark">
      Ledgerly
     </span>
    </div>
    <div class="hidden md:flex space-x-8 text-muted font-medium">
     <a class="hover:text-primary transition" href="#">
      Features
     </a>
     <a class="hover:text-primary transition" href="#">
      Pricing
     </a>
     <a class="hover:text-primary transition" href="#">
      Customers
     </a>
     <a class="hover:text-primary transition" href="#">

Abrir la página generada completa (320 líneas)

Paso 3: vuelve a ajustarlo al diseño

El modelo lee el marco, no tu archivo, así que el último paso es recuperar lo que solo sabe Figma:

Colores exactos. En este ejemplo eligió #5a4cf5 para el violeta y #f8f7ff para el fondo. Compáralos con tus estilos de color, o saca los valores de la exportación con la herramienta gratis para extraer colores de una imagen, y cámbialos en un solo sitio.
Recursos. Exporta los logos y los iconos desde Figma como SVG y pon los tuyos en lugar de los provisionales.
Breakpoints. Un marco de escritorio da una página pensada primero para escritorio. Si tienes un marco móvil de la misma pantalla, conviértelo también y combina las clases responsive, o ajústalas en el editor.

Cuándo compensa frente a maquetar a mano, y cuándo no

Donde más tiempo ahorra es en pantallas con mucho texto y elementos repetidos: landing pages, paneles de control, páginas de ajustes, tablas de precios. La maquetación y cada etiqueta llegan ya escritas. Donde menos ahorra es en pantallas que son sobre todo ilustración personalizada, o cuando tu equipo tiene una librería de componentes que el marcado debe usar; en ese caso el resultado sirve de referencia para la estructura y los textos, no como código para publicar.

¿No trabajas con Figma? El mismo proceso vale para capturas de páginas publicadas y para mockups de apps. Todos los ejemplos están reunidos en la página del conversor de imagen a HTML.

Preguntas sobre Figma a HTML

¿Hay un plugin de Figma o una importación directa?

No. IMG2HTML trabaja con imágenes, así que la conexión con Figma es la exportación a PNG. Eso también significa que funciona igual con diseños de Sketch, Penpot, Adobe XD, Canva o una captura de cualquiera de ellos.

¿Usa mis capas, el auto layout o las variables de Figma?

No. Solo ve los píxeles del marco exportado, así que no se trasladan los nombres de capa, los componentes, los ajustes de auto layout ni los design tokens. Los espaciados y los colores se leen de la imagen, por eso merece la pena revisar después los valores exactos de marca.

¿Exporto a 1x o a 2x?

2x mantiene nítidas las etiquetas pequeñas, lo que ayuda a que el texto salga exacto; 1x vale para marcos grandes y sencillos. Las exportaciones muy grandes de páginas largas es mejor dividirlas en un marco por sección.

¿Qué pasa con las imágenes y los iconos del diseño?

Las fotos y las ilustraciones se convierten en marcadores de placehold.co con una descripción de lo que había. Los iconos de interfaz se traducen a Font Awesome cuando hay uno parecido; los logos y los iconos personalizados hay que sustituirlos por tus propios SVG, como en el ejemplo de esta página.