Kurze Antwort: So kommt ein Figma-Design in Webflow
Das Plugin erzeugt keine fertige Website, sondern einen sauberen Ausgangspunkt. Was danach noch fehlt, entscheidet über den eigentlichen Aufwand.
- Der offizielle Weg: Installieren Sie das kostenlose Figma-Plugin „Figma to Webflow“ und die zugehörige Webflow-App. Ebenen mit Auto Layout lassen sich dann per Sync als Komponenten oder per Copy/Paste als Elemente übertragen.
- Was übertragen wird: Layout, Klassen, Variablen sowie Bilder und Vektor-Icons, die im Assets-Panel der gewählten Webflow-Site landen.
- Was nicht automatisch kommt: Varianten, CMS-Anbindung, Formular-Logik, Interaktionen und die Feinarbeit an Tablet- und Mobil-Ansichten.
- Wann sich ein Entwickler lohnt: Wenn die Datei kein Auto Layout nutzt, das responsive Verhalten komplex ist oder CMS und Integrationen dazukommen. Dann ist eine professionelle Figma-zu-Webflow-Umsetzung oft schneller als Nacharbeit.
Figma in Webflow importieren: 4 Wege im Vergleich
Das offizielle Plugin ist der Standardweg, aber nicht der einzige. Wählen Sie die Methode danach, was Sie in Webflow brauchen. Neu seit 2026: Webflows MCP-Anleitung zeigt einen KI-Agenten, der Tokens, Klassen, Komponenten und Assets in rund zehn Minuten importiert.
| Methode | Ergebnis in Webflow | Geeignet für | Worauf achten |
|---|---|---|---|
| Plugin-Sync + Webflow-App | Komponenten, Variablen und Styles, importiert über die Webflow-App. | Designsysteme und Sektionen, die Sie auf mehreren Seiten wiederverwenden. | Auto Layout ist Pflicht; pro Sync nur eine Variablen-Collection und ein Mode. |
| Plugin-Copy/Paste | Elemente und Klassen, direkt auf den Canvas eingefügt. | Einzelne Sektionen und einen schnellen Layout-Start. | Die Einfügeoption entscheidet, ob bestehende Klassen dupliziert, beibehalten oder aktualisiert werden. |
| Webflow MCP + KI-Agent | Variablen, Klassen, Komponenten und Assets, angelegt von einem Agenten über die MCP-Server von Figma und Webflow. | Schnelle erste Entwürfe ganzer Seiten oder Templates. | Auch Webflows eigene Anleitung endet mit einer QA-Runde: Struktur, Responsivität und Benennung prüfen. |
| Manueller Aufbau durch einen Entwickler | Eine nach dem Design gebaute Website mit abgestimmten Klassen, CMS und Interaktionen. | Produktive Websites, Dateien ohne Auto Layout, komplexes responsives Verhalten. | Teurer als selbst machen; siehe Figma-zu-Webflow-Entwicklung. |
Figma-Datei für den Webflow-Import vorbereiten
Die meisten Probleme nach dem Import entstehen in der Figma-Datei, nicht im Plugin. Diese sechs Punkte sparen später die meiste Nacharbeit.
Auto Layout überall
Nur Ebenen mit Auto Layout lassen sich synchronisieren oder kopieren. Legen Sie bewusst fest, was den Platz füllt (Fill), sich dem Inhalt anpasst (Hug), umbricht (Wrap) oder fest bleibt (Fixed).
Ebenen sinnvoll benennen
Jeder Ebenenname wird zur Klasse in Webflow. Namen wie button, paragraph oder heading bestimmen zusätzlich das HTML-Tag. Aus „Frame 427“ wird sonst eine Klasse, die niemand wiederfindet.
Zustände ohne Varianten planen
Responsive-, Zustands- und Stil-Varianten werden nicht übertragen. Getrennte Frames werden zu getrennten Komponenten oder Elementen; Hover- und Mobil-Zustände bauen Sie in Webflow.
Variablen aufräumen
Pro Sync geht genau eine Variablen-Collection mit einem Mode. Erlaubt sind px, em oder rem; die Basis-Schriftgröße stellen Sie in den Plugin-Einstellungen ein.
Schriften und Assets bereitstellen
Laden Sie eigene Schriften vor dem Transfer in die Webflow-Site hoch. Bereiten Sie SVG-Icons und komprimierte Rasterbilder vor.
Eine Sektion mit echtem Inhalt
Starten Sie mit einer repräsentativen Sektion: echte Überschrift, Bild, Link und eine wiederholte Karte. Testen Sie eine längere Überschrift, bevor Sie die ganze Seite übertragen.
Figma zu Webflow Schritt für Schritt: das Plugin-Tutorial
Sieben Schritte vom vorbereiteten Frame bis zur veröffentlichten Seite. Die Bedienoberfläche von Plugin und App ist englisch, deshalb stehen die Original-Bezeichnungen in Anführungszeichen. Grundlage ist der Help-Center-Artikel von Webflow.
1. Repräsentative Sektion wählen
Nehmen Sie eine Sektion mit echten Inhalten und entscheiden Sie, was sich streckt, umbricht oder stapelt. Wiederkehrende Muster werden Komponenten; veröffentlichbare Inhalte planen Sie getrennt als CMS-Daten.
2. Ziel-Site vorbereiten
Wählen Sie die Webflow-Site und prüfen Sie ihr bestehendes Designsystem. Laden Sie eigene Schriften hoch und legen Sie Klassennamen und Variablen fest, damit neue Sektionen zum Bestand passen.
3. Verbinden und übertragen
Öffnen Sie das Plugin in Chrome oder der Figma-Desktop-App und autorisieren Sie die Ziel-Site. Im Tab „Layers“ wählen Sie einen Frame oder eine Komponente, dann „Continue“ → „Sync to Webflow“. In der Webflow-App öffnen Sie den letzten Sync, markieren die Elemente und klicken „Import selected items“. Für Copy/Paste wählen Sie „Continue“ → „Copy“ und fügen in Webflow ein.
4. Komponenten und Klassen prüfen
Sync liefert Webflow-Komponenten, Copy/Paste liefert Elemente. Prüfen Sie Konflikte mit bestehenden Klassen, bevor Sie Änderungen übernehmen. Behalten Sie, was funktioniert, und passen Sie nur an, was die Seite braucht.
5. Layout mit echten Inhalten testen
Prüfen Sie nicht nur die gelieferten Designbreiten, sondern auch Zwischenbreiten. Testen Sie längere Titel und zusätzliche Karten; beheben Sie Überlauf, abgeschnittenen Text und unschöne Umbrüche.
6. Inhalte und Verhalten anbinden
Verknüpfen Sie CMS-Collections, richten Sie Formulare mit Erfolgs- und Fehlermeldung ein und ergänzen Sie Interaktionen, wo das Briefing sie verlangt. Wiederholte Karten allein sind noch keine CMS-Collection.
7. Launch-QA und Übergabe
Prüfen Sie Seitentitel, Beschreibungen, Überschriften, Links, Formularzustellung, Tastaturbedienung, Weiterleitungen, Sitemap und Veröffentlichungseinstellungen. Klären Sie, wem die Site gehört und wer sie künftig pflegt.
Grenzen des Figma-to-Webflow-Plugins
Geprüft anhand des Webflow-Help-Center-Artikels zum Plugin, Stand 21. Oktober 2026. Diese Grenzen entscheiden, wie viel sauber übertragen wird und wie viel Handarbeit bleibt.
- Browser: Safari wird nicht unterstützt. Nutzen Sie Chrome oder die Figma-Desktop-App.
- Auto Layout: Nur Ebenen mit Auto Layout lassen sich synchronisieren oder kopieren.
- Varianten: Responsive-, Zustands- und Stil-Varianten werden nicht unterstützt.
- Variablen und Einheiten: Eine Variablen-Collection und ein Mode pro Sync; Einheiten px, em oder rem.
- Klassen und Tags: Ebenennamen werden zu Klassen; das HTML-Tag können Sie auch manuell wählen.
- Große Seiten: Übertragen Sie lange Seiten in mehreren Abschnitten statt auf einmal.
- Responsives Stapeln: Sie wählen, ab wann eine Ebene untereinander stapelt: Tablet (991–767 px), Mobile landscape (767–478 px) oder Mobile portrait (478–0 px).
- Mindestbreite: Unter 250 px Breite oder bei bereits vertikal gestapelten Ebenen lässt sich das responsive Verhalten nicht einstellen.
Figma to Webflow Plugin funktioniert nicht? Fehler gezielt beheben
Bevor Sie eine Sektion komplett neu bauen, prüfen Sie die passende Einstellung. Die Tabelle folgt der offiziellen Dokumentation von Plugin und App.
| Symptom | Prüfen | Lösung |
|---|---|---|
| Übertragung nicht möglich | Browser und Auto Layout | Chrome oder Figma-Desktop-App verwenden; Auto Layout auf die betroffenen Ebenen anwenden. |
| Bilder oder Schriften fehlen | Ziel-Site und Schriften | Richtige Webflow-Site wählen; eigene Schriften vor dem Sync hochladen. |
| Komponente kam als normale Elemente an | Copy/Paste statt Sync | Für wiederverwendbare Webflow-Komponenten „Sync to Webflow“ nutzen. |
| Doppelte oder veränderte Styles | Konflikt mit bestehender Klasse | Normales Einfügen legt bei Konflikten eine neue Klasse an; alternative Einfügebefehle behalten oder aktualisieren bestehende Klassen. Bewusst wählen. |
| Responsive-Option ausgegraut | Ebenenbreite und Ausrichtung | Nicht verfügbar unter 250 px oder bei bereits vertikal gestapelten Ebenen. |
| Varianten fehlen | Unterstützte Funktionen | Varianten werden nicht übertragen; benötigte Zustände in Webflow anlegen. |
| Falsche Überschriften-Ebene | Ebenenname und HTML-Tag | Erzeugte Tags prüfen und das gewünschte Tag manuell setzen. |
Responsive QA und Launch-Checkliste
Ein erfolgreicher Import ist erst der Anfang. Gehen Sie diese Punkte mit Ihrer echten Datei und der veröffentlichten Seite durch.
- Responsivität: Zwischen den Design-Breiten verkleinern, lange Texte testen, Navigation und Bilder auf Tablet und Smartphone prüfen.
- Visueller Abgleich: Typografie, Farben, Abstände und Bildverhalten mit dem freigegebenen Design vergleichen.
- Struktur: Prüfen, ob Änderungen an geteilten Klassen, Komponenten und Variablen die gewünschte Wirkung haben.
- Inhalte und Formulare: CMS-Inhalte, Links, Interaktionen und Integrationen anbinden; testen, ob Formulare beim richtigen Empfänger ankommen.
- SEO: Titel, Beschreibungen, Canonicals, Überschriften-Reihenfolge, Alt-Texte, Weiterleitungen, Sitemap und Indexierung prüfen.
- Pflichtseiten und Cookies: Prüfen, ob Impressum und Datenschutzerklärung erreichbar sind und ob ein Cookie-Consent für eingesetzte Dienste nötig ist. Inhalt und Bewertung klären Sie mit Ihrer Rechtsberatung.
- Barrierefreiheit und Übergabe: Tastaturfokus und Kontraste prüfen, Eigentümer des Webflow-Workspace und Pflege-Zuständigkeit festhalten.
Wann Sie einen Webflow-Entwickler beauftragen sollten
Das Plugin spart Zeit, wenn die Datei sauber aufgebaut ist. In diesen Fällen ist ein manueller Aufbau meist günstiger als die Nacharbeit.
- Datei ohne Auto Layout: viele absolut positionierte Ebenen müssen ohnehin neu aufgebaut werden.
- Viele einzigartige Layouts: komplexes responsives Verhalten, das im Design nur für Desktop gezeichnet ist.
- CMS, Formulare und Integrationen: Blog, Referenzen, CRM- oder Newsletter-Anbindung und mehrere Sprachen brauchen Planung und Tests.
- Relaunch einer bestehenden Website: ohne Weiterleitungen und saubere Metadaten gehen Suchmaschinen-Rankings leicht verloren.
- Kosten: Meine Festpreis-Umsetzungen eines fertigen Figma-Designs in Webflow beginnen bei 2.400 US-Dollar; der endgültige Preis steht nach Sichtung der Datei fest. Marktpreise und Kostentreiber finden Sie im Kostenleitfaden Figma zu Webflow (auf Englisch).
- Wer die Umsetzung macht: Ich bin Tomáš Marek, Webflow-Entwickler und UX/UI-Designer aus Tschechien, Webflow Certified Partner mit über 300 Projekten. Die Zusammenarbeit läuft auf Englisch oder Tschechisch.
Häufige Fragen zu Figma und Webflow
Wie importiere ich ein Figma-Design in Webflow?
Mit dem offiziellen Figma-Plugin „Figma to Webflow“ und der zugehörigen Webflow-App. Ebenen mit Auto Layout übertragen Sie per „Sync to Webflow“ als Komponenten oder per „Copy“ als Elemente. Danach prüfen Sie Klassen, Responsivität und Inhalte in Webflow.
Ist das Figma-to-Webflow-Plugin kostenlos?
Ja, Plugin und Webflow-App sind kostenlos. Um die Website auf Ihrer eigenen Domain zu veröffentlichen, brauchen Sie trotzdem einen kostenpflichtigen Webflow-Site-Plan.
Warum funktioniert das Figma-to-Webflow-Plugin nicht?
Meist liegt es am Browser oder an fehlendem Auto Layout. Safari wird nicht unterstützt; nutzen Sie Chrome oder die Figma-Desktop-App. Übertragen werden nur Ebenen mit Auto Layout. Fehlen Schriften, laden Sie sie vorher in die Webflow-Site hoch.
Übernimmt das Plugin Varianten und mobile Ansichten?
Nein. Responsive-, Zustands- und Stil-Varianten werden nicht unterstützt. Sie können pro Ebene festlegen, ab welchem Breakpoint sie untereinander stapelt; Hover-Zustände und die mobile Feinarbeit bauen Sie in Webflow.
Kann KI oder Webflow MCP ein Figma-Design importieren?
Ja. Webflow hat gezeigt, wie ein KI-Agent über die MCP-Server von Figma und Webflow Variablen, Klassen, Komponenten und Assets aus einem Figma-Design anlegt. Behandeln Sie das Ergebnis als Entwurf und prüfen Sie Struktur, Benennung und Responsivität.
Was kostet es, Figma zu Webflow umsetzen zu lassen?
Das hängt vom Umfang ab: einzigartige Layouts, CMS-Collections, Interaktionen und Content-Stand. Meine Festpreis-Umsetzungen eines fertigen Figma-Designs beginnen bei 2.400 US-Dollar; der endgültige Preis steht nach Sichtung der Datei fest.
In welcher Sprache läuft die Zusammenarbeit?
Auf Englisch oder Tschechisch. Diese Anleitung ist auf Deutsch, Projektabstimmung und Übergabe erfolgen auf Englisch oder Tschechisch.
Weitere Anleitungen zu Figma und Webflow
Die folgenden Seiten sind auf Englisch verfügbar.
Converter vergleichen
Figma-to-Webflow-Converter und Alternativen: kostenlose Tools, Tarife und was sie übertragen.
Der umgekehrte Weg
Webflow zu Figma: eine bestehende Webflow-Website zurück in Figma holen.
Plattform wählen
Figma vs. Webflow und Figma Sites: wo Ihre Website am besten läuft.
Umsetzen lassen
Figma-zu-Webflow-Entwicklung mit ausgewählten Projekten, Ablauf und Übergabe.
Figma-Design in Webflow umsetzen lassen
Senden Sie den Figma-Link, die Seitenliste und die benötigten Funktionen. Sie erhalten einen Festpreis für den vereinbarten Umfang, ab 2.400 US-Dollar. Die Kommunikation läuft auf Englisch oder Tschechisch.
