Figma zu HTML über den PNG-Export

IMG2HTML verbindet sich nicht mit deinem Figma-Konto und hat kein Plugin. Was es macht, ist Bilder umwandeln, und Figma kann jeden Frame mit ein paar Klicks als PNG exportieren. Frame exportieren, PNG hochladen, und du bekommst HTML mit Tailwind CSS, das das Design nachbaut.

Figma-Export umwandeln So exportierst du das PNG

Schritt 1: Frame aus Figma als PNG exportieren

Wähl den Frame auf dem Canvas aus. Exportiere einen Screen oder einen Abschnitt pro Frame.
Such in der rechten Seitenleiste den Bereich Export (unten im Design-Panel, oder im Tab Properties, wenn du nur Lesezugriff hast) und klick auf das +.
Stell das Format auf PNG und die Skalierung auf 2x, wenn das Design kleine Schrift hat.
Klick auf Export. Sind mehrere Frames ausgewählt, öffnet Shift+Cmd+E auf dem Mac oder Shift+Ctrl+E unter Windows den Exportdialog für alle.

Diese Schritte folgen Figmas eigener Anleitung Aus Figma exportieren (geprüft am 23. September 2026).

Schritt 2: PNG in HTML umwandeln

Lade das PNG bei IMG2HTML hoch. Der Frame unten, ein Hero-Bereich mit 1536 x 864 für eine fiktive Rechnungs-App, kam nach 23 Sekunden als HTML-Datei mit 320 Zeilen zurück. Er wurde für diese Seite mit einem Bildmodell erzeugt und nicht aus einer echten Figma-Datei exportiert, ist aber dieselbe Art flaches, pixelgenaues PNG, wie Figma es erzeugt. Das Ergebnis siehst du genau so, wie IMG2HTML es geliefert hat.

Ein Desktop-Design-Frame, als PNG exportiert

Design-Frame einer Landingpage für eine Rechnungs-App namens Ledgerly: Navigation, die Überschrift „Send invoices in two clicks“, zwei Buttons und eine Dashboard-Karte mit offenem Betrag, einem Balkendiagramm und drei Rechnungen mit den Status „Paid“, „Due“ und „Overdue“, darunter eine Reihe Kundenlogos — **Eingabe:** Design-Frame einer Landingpage (PNG, 1536 x 864)

Das generierte HTML im Browser: Navigation, die zweifarbige Überschrift, die Buttons „Start free“ und „Book a demo“, die Dashboard-Karte mit Seitenleiste, Balkendiagramm und Rechnungsliste mit farbigen Status-Badges sowie die Reihe der Kundenlogos — **Ergebnis:** das generierte HTML, unverändert in Chrome bei 1280px Breite gerendert. 320 Zeilen HTML mit Tailwind CSS, geliefert in 23 Sekunden.

Was gut geklappt hat

Der komplette Hero-Bereich: Pill-Label, zweifarbige Überschrift, Absatz und die gefüllten und umrandeten Buttons, im Violett des Designs.
Die Dashboard-Karte als echtes HTML: Seitenmenü mit aktivem Eintrag, der offene Betrag, ein Balkendiagramm aus divs und drei Rechnungszeilen mit den Badges „Paid“, „Due“ und „Overdue“ in Grün, Orange und Rot.
Die Reihe der Kundenlogos, jeder Name als Text.

Was du von Hand korrigieren musst

Die Logos sind Platzhalter: Das Ledgerly-Zeichen ist ein generisches SVG mit gestapelten Ebenen, Globex und Northwind nutzen Font-Awesome-Icons, und die Kachel von Stark Industries verwendet eine Klasse bg-dark, die auf der Seite nirgends definiert ist, sodass sie unsichtbar bleibt. Ersetze sie durch deine SVGs.
Das Funkel-Icon im Pill-Label ist fa-sparkles, das im kostenlosen Set von Font Awesome 5 fehlt, deshalb wird dort nichts angezeigt.
Bei 1280 Pixeln sind die Rechnungszeilen eng, und INV-0042 bricht auf zwei Zeilen um. Gib der rechten Spalte mehr Platz oder kürze die Datumsspalte.

ledgerly-frame.html (erste Zeilen des 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="#">

Komplette generierte Seite öffnen (320 Zeilen)

Schritt 3: wieder ans Design angleichen

Das Modell liest den Frame, nicht deine Datei. Im letzten Schritt ergänzt du also, was nur Figma weiß:

Exakte Farben. In diesem Beispiel hat es #5a4cf5 für das Violett und #f8f7ff für den Hintergrund gewählt. Vergleich sie mit deinen Farbstilen oder nimm die Werte mit der kostenlosen Farbpipette für Bilder aus dem Export auf und ersetze sie an einer Stelle.
Assets. Exportiere Logos und Icons aus Figma als SVG und tausch sie gegen die Platzhalter aus.
Breakpoints. Ein Desktop-Frame ergibt eine Desktop-first-Seite. Wenn du einen mobilen Frame desselben Screens hast, wandle ihn auch um und führ die responsiven Klassen zusammen, oder pass sie im Editor an.

Wann das schneller ist als von Hand coden und wann nicht

Am meisten Zeit spart es bei Screens mit viel Text und wiederkehrenden Elementen: Landingpages, Dashboards, Einstellungsseiten, Preistabellen. Layout und jede Beschriftung sind schon getippt. Am wenigsten spart es bei Screens, die hauptsächlich aus eigenen Illustrationen bestehen, oder wenn dein Team eine Komponentenbibliothek hat, die das Markup verwenden muss. Dann ist das Ergebnis eine Vorlage für Struktur und Texte, kein Code zum Ausliefern.

Du arbeitest nicht mit Figma? Derselbe Ablauf gilt für Screenshots echter Seiten und für App-Mockups. Alle Beispiele findest du gesammelt auf der Seite Bild zu HTML.

Fragen zu Figma zu HTML

Gibt es ein Figma-Plugin oder einen direkten Import?

Nein. IMG2HTML arbeitet mit Bildern, die Verbindung zu Figma ist also der PNG-Export. Das heißt auch, dass es genauso mit Designs aus Sketch, Penpot, Adobe XD, Canva oder einem Screenshot davon funktioniert.

Werden meine Figma-Ebenen, Auto Layout oder Variablen genutzt?

Nein. Es sieht nur die Pixel des exportierten Frames, Ebenennamen, Komponenten, Auto-Layout-Einstellungen und Design Tokens werden also nicht übernommen. Abstände und Farben werden aus dem Bild gelesen, deshalb lohnt es sich, die exakten Markenwerte danach zu prüfen.

Soll ich in 1x oder 2x exportieren?

2x hält kleine Beschriftungen scharf, dadurch kommt der Text genauer zurück. 1x reicht für große, einfache Frames. Sehr große Exporte langer Seiten teilst du besser in einen Frame pro Abschnitt auf.

Was passiert mit Bildern und Icons im Design?

Fotos und Illustrationen werden zu Platzhaltern von placehold.co mit einer Beschreibung dessen, was dort war. Interface-Icons werden auf Font Awesome abgebildet, wenn es ein ähnliches gibt. Logos und eigene Icons musst du durch deine eigenen SVGs ersetzen, wie im Beispiel auf dieser Seite.