So importierst du ein Figma-Design in Framer

Um ein Figma-Design in Framer zu importieren, installierst du das kostenlose Plugin Figma to HTML with Framer, wählst die Frames aus, die du brauchst, und fügst sie in dein Framer-Projekt ein. Framer behält deine Ebenen, Gruppen und die Struktur, du landest also auf einer echten Web-Canvas statt in einem statischen Code-Export. Alles nach dem Einfügen ist Aufräumen, und genau vor diesem Teil warnt dich niemand.

Figma-Design in Framer importieren, Schritt für Schritt

Hol dir Figma to HTML with Framer aus der Figma Community. Es ist kostenlos, und Framer nennt dafür über 600.000 Nutzer. Das ist also der offizielle Weg und keine Brücke von einem Drittanbieter. Markier die Ebenen oder Frames, die du rüberholen willst, und starte das Plugin. Eine Meldung sagt dir, wie viele Ebenen kopiert wurden. Wechsel in dein Framer-Projekt, klick auf die Canvas und füg ein. Framers eigene Figma-to-HTML-Seite geht dieselben acht Schritte durch: Plugin installieren, Figma-Designs kopieren, in Framer einfügen, weiter bearbeiten, responsiv machen, Effekte und Animationen ergänzen, Seiten und Links anlegen, veröffentlichen.

Füg immer nur eine Sektion ein

Markier nicht den kompletten Seiten-Frame und schieb ihn in einem Rutsch rüber. Eine Landing Page hat hunderte Ebenen, und wenn etwas schief landet, findest du nie heraus, welcher Teil daran schuld war. Füg den Hero ein, korrigier den Hero. Füg die Logo-Leiste ein, korrigier die Logo-Leiste. Arbeite dich von oben nach unten durch, in der Reihenfolge, in der auch ein Besucher scrollt. Framer sagt selbst, dass manche komplexen Figma-Strukturen fürs Web nachgearbeitet werden müssen. Gib dir also kleine Häppchen zum Nacharbeiten.

Als Erstes kommen die Fonts dran

Framers Hilfe-Doku ist da sehr deutlich. Beim Import aus Figma wird ein eigener Font, den Framer nicht kennt, durch Framers Standard ersetzt. Dein Hero steht plötzlich in einer System-Sans, jede Zeilenlänge verschiebt sich und die Abstände gleich mit. Klär die Schrift, bevor du das Layout anfasst. Leg eine Text-Ebene an, öffne den Font-Picker im rechten Panel, geh auf den Tab Custom, klick auf Upload Fonts und lad deine Datei hoch. Framer empfiehlt .woff2 für kurze Ladezeiten. Danach markierst du die importierten Text-Ebenen und weist den Font neu zu. Schau vorher in die eingebaute Bibliothek, denn Framer bringt Google Fonts und Fontshare mit, und eine davon hat deine Schrift vielleicht schon.

Was ankommt und was nicht

Ebenen, Gruppen und Hierarchie kommen an. Layout-Einstellungen auch, und Framers Academy-Lektion bestätigt, dass Auto Layout, Hierarchie und Fill-Eigenschaften automatisch übernommen werden. Alles, was Figma nie hatte, bleibt logischerweise auf der Strecke: Breakpoints, Hover-States, Scroll-Effekte oder Komponenten im Framer-Sinn. Framers FAQ sagt dir selbst, dass du statische Teile nach dem Import durch echte Komponenten ersetzen sollst. Nimm das ernst. Bau Navigation, Button und Card als Framer-Komponenten neu, statt vierzig eingefügte Kopien zu behalten, die du dann vierzig Mal einzeln änderst.

Mach aus eingefügten Frames Stacks, die mitwachsen

Eine eingefügte Sektion mit festen Pixelbreiten läuft auf dem Handy über. Framers Troubleshooting-Artikel nennt genau das als häufigsten Grund, warum eine Seite im Phone-Breakpoint den Bildschirm nicht ausfüllt: ein Element, das breiter ist als der mobile Viewport, meistens eine feste Breite wie 321px oder eine zu groß gesetzte Max Width. Geh Sektion für Sektion durch, markier die Container und stell im Bereich Size im rechten Panel die Width von einer festen Zahl auf 100% oder 1fr um. Die Max Width bleibt nur auf dem Content-Wrapper, damit deine Textspalte auf einem breiten Monitor lesbar bleibt. Mach das zuerst auf Desktop, weil die Desktop-Werte nach unten auf die kleineren Breakpoints durchlaufen.

Und dann kommt das, wofür Framer eigentlich da ist

Dafür nimmst du Framer und keinen Code-Export. Setz deine drei Breakpoints. Gib Buttons Hover- und Tap-States. Leg Scroll-Effekte auf die Sektionen. Mach aus wiederkehrenden Blöcken Komponenten, dann ändert eine Bearbeitung jede Instanz. Bau deine Text-Styles im Assets-Panel unter Styles, mit eigenen Größen für Desktop, Tablet und Mobile, damit die Schrift skaliert, ohne dass du einzelne Ebenen anfasst. In der Figma-Datei gab es davon nichts. Genau das macht aus einem Mockup eine Seite.

Die Reihenfolge, in der wir arbeiten

Zuerst die Fonts, dann Farben und Text-Styles. Danach Sektion für Sektion von oben nach unten, und feste Breiten wandern dabei auf Fill. Bau Komponenten für alles, was sich wiederholt. Dann die Breakpoints, von Desktop über Tablet zu Phone, und danach die Interaktionen. Metadaten und Links kommen zum Schluss, wenn sich an der Struktur nichts mehr bewegt. In dieser Reihenfolge steht eine Landing Page an einem Tag. Durcheinander brauchst du drei Tage, weil jede Korrektur die vorherige wieder kaputt macht.