Wie exportiere ich Figma design nach Webflow?

24/1/2023

Das liegt daran, dass die Benutzeroberfläche von Figma für die Zusammenarbeit konzipiert ist und es Designern leicht macht, an einem Projekt zusammenzuarbeiten.

Und wenn es darum geht, diese Designs in Code zu exportieren, deckt Figma Sie auch dort ab – Sie können Ihr Figma-Design als HTML, CSS und sogar JavaScript exportieren.

Aber was ist, wenn Sie Ihr Figma-Design nehmen und es auf eine andere Plattform exportieren möchten? Hier kommt Webflow ins Spiel.

Webflow ist ein visueller Drag-and-Drop-Website-Builder, mit dem Sie responsive Websites erstellen können, ohne eine Zeile Code schreiben zu müssen. Und mit der neuen Figma-Integration von Webflow können Sie Ihre Figma-Designs jetzt direkt in Webflow exportieren.

Um Ihr Figma-Design in Webflow zu exportieren, stellen Sie zunächst sicher, dass Sie die neueste Version der Webflow-App installiert haben. Öffnen Sie dann Ihr Figma-Design in der Webflow-App. Sobald Ihr Design geöffnet ist, klicken Sie auf die Schaltfläche „Exportieren“ in der oberen rechten Ecke.

‍

Muamer Ceman

Webdesign & Entwicklung

Muamer Ceman

Webdesign & Entwicklung

PRO TIP

Beachten Sie beim Exportieren von Figma nach Webflow, dass alle in Figma vorgenommenen Änderungen nicht automatisch in Webflow aktualisiert werden. Wenn Sie Änderungen an Ihrem Design vornehmen müssen, aktualisieren Sie unbedingt sowohl die Figma-Datei als auch das Webflow-Projekt entsprechend.
Wählen Sie im angezeigten Exportfenster „Webflow“ aus dem Dropdown-Menü „Format“. Wählen Sie dann aus, in welches Format Sie Ihr Design exportieren möchten: HTML, CSS oder JavaScript. Sie können auch Ihre Bilder in Ihren Export einbeziehen.

Nachdem Sie Ihre Auswahl getroffen haben, klicken Sie auf die Schaltfläche „Exportieren“ und warten Sie, bis Ihr Design nach Webflow exportiert wurde. Sobald der Export abgeschlossen ist, können Sie Ihr Design im Webflow-Designer sehen.

‍

Wie exportiere ich Figma Datei nach Webflow?

Der Prozess zum Exportieren eines Figma-Designs in Webflow ist einfach:

Stellen Sie sicher, dass Sie die neueste Version der Webflow-App installiert haben.
Öffnen Sie Ihr Figma-Design in der Webflow-App.
Klicken Sie oben rechts auf die Schaltfläche „Exportieren“.
Wählen Sie im angezeigten Exportfenster „Webflow“ aus dem Dropdown-Menü „Format“.
Wählen Sie, in welches Format Sie Ihr Design exportieren möchten: HTML, CSS oder JavaScript.
Sie können auch Bilder in Ihren Export einbeziehen.
Nachdem Sie Ihre Auswahl getroffen haben, klicken Sie auf die Schaltfläche „Exportieren“ und warten Sie, bis Ihr Design nach Webflow exportiert wurde.
Sobald der Export abgeschlossen ist, können Sie Ihr Design im Webflow-Designer sehen.

Nehmen Sie Kontakt mit uns auf, wir helfen Ihnen gerne weiter.

‍