Guide

Figma zu HTML: die Optionen und wie du dir die Konvertierung sparst

Plugins, KI-Generatoren oder Handarbeit: Alle verwandeln eine Zeichnung in eine Webseite. Hier siehst du, was dich jede Option kostet und was sich ändert, wenn das Design von Anfang an HTML ist.

Baurice Ley · 6 Min. Lesezeit

Warum Figma zu HTML nie nur ein Klick ist

Ein Figma-Frame ist eine Vektorzeichnung. Text, Abstände und Layout berechnet Figma, nicht ein Browser. Um eine Webseite zu bekommen, muss etwas diese Zeichnung in HTML-Elemente und CSS-Regeln übersetzen, und jede Übersetzung trifft Entscheidungen, die du nicht getroffen hast.

Auto Layout entspricht in vielem Flexbox, aber nicht eins zu eins. Constraints werden zu Positionierungsregeln. Schriften werden anders gerendert. Deshalb braucht das Ergebnis meist noch eine Runde Korrekturen, bevor es live gehen kann.

Option 1: ein Figma-Plugin

In der Figma Community gibt es mehrere Plugins für Figma zu HTML, und Tools wie Anima machen aus Frames HTML, React oder Tailwind. Framer bietet ein Plugin, mit dem du Figma-Frames in Framer einfügst und dort veröffentlichst.

  • Gut für: einen schnellen ersten Entwurf einer statischen Seite.
  • Achte auf: generierte Klassennamen, absolute Positionierung und Markup, das du umschreiben musst, damit es zu deiner Codebase passt.

Option 2: ein KI-Tool für Design to Code

Figma Make generiert aus Frames HTML, CSS und JavaScript, und immer mehr KI-Tools lesen ein Design und schreiben Komponenten für deinen Stack.

  • Gut für: schnell Komponenten in deinem Framework zu bekommen.
  • Achte auf: Design und Code laufen auseinander, sobald sich eins von beiden ändert.

Option 3: von Hand nachbauen

Immer noch die häufigste Antwort. Ein Entwickler liest das Design, misst es aus und schreibt HTML und CSS. Das Ergebnis ist sauber, aber es ist ein zweites Projekt, und jede Designänderung bedeutet, einen Teil davon noch einmal zu machen.

Option 4: von Anfang an in HTML designen

Das Konvertierungsproblem verschwindet, wenn der Canvas schon eine Webseite ist. In Kalka ist jeder Frame ein HTML-Element und jede Eigenschaft, die du im Design-Panel setzt, eine CSS-Deklaration. Es gibt nichts zu exportieren, weil es nichts zu übersetzen gibt.

Auto Layoutdisplay: flex
Füllungbackground
Schlagschattenbox-shadow
Inhalt beschneidenoverflow: hidden

Was du bekommst, ist ein Ordner: pages/home.html, styles.css, deine Design Tokens in design-system/tokens.json. Ein Entwickler kann ihn in jedem Editor öffnen, in Git reviewen und in die echte Website einbinden.

Welche Option zu dir passt

  • Eine Landingpage, einmalig: Ein Plugin reicht.
  • Ein Produkt mit Komponenten in React oder Vue: ein KI-Tool für Design to Code, plus Review.
  • Websites, die du immer wieder designst und auslieferst: Designe in HTML und lass den Konvertierungsschritt ganz weg.

Kalka ist in Entwicklung und Open Source. Wenn die vierte Option nach deinem Workflow klingt, bekommst du über die Warteliste die ersten Builds.