Von Figma zu Webflow - jetzt möglich mit einem neuen Plugin!

Anfang 2023 gründete Webflow einen Inkubator namens Webflow Labs. Der Hauptzweck ist die Entwicklung interessanter und ausgefallener Lösungen, um die Grenzen der Webentwicklung und des No-Codes zu erweitern.

Das erste und ziemlich große Projekt, das Webflow Labs vor kurzem auf den Markt gebracht hat, ist ein großartiges neues Plugin, das Menschen dabei hilft, ihre Figma-Designs in funktionierende Webflow-Prototypen zu verwandeln.

Was ist das "Figma to Webflow"-Plugin?

Kurz gesagt, das Figma zu Webflow-Plugin hilft Ihnen, wie der Name schon sagt, Ihre Figma-Entwürfe in Webflow-Websites umzuwandeln (mit funktionierendem HTML- und CSS-Code!). Darauf haben viele Leute gewartet, denn viele Webdesigner, die Webflow zur Entwicklung von Seiten verwenden, nutzen auch Figma, um sie zu gestalten. Dieses Plugin verspricht, eine Menge Arbeit zu beschleunigen und die Arbeit von Webdesignern und -entwicklern viel effizienter zu machen, da es nicht nötig sein wird, Webdesigns in Webflow von Grund auf neu zu erstellen.

Natürlich ist es nur die erste Version des Plugins, so dass nicht alles möglich ist und es Dinge geben könnte, die nicht übertragen werden oder nicht unterstützt werden. Webflow wird das Plugin ständig weiterentwickeln und verbessern, so dass es in Zukunft ein wirklich leistungsfähiges Tool werden könnte, das die Erstellung von Websites in Webflow unterstützt.

Wie benutzt man das Figma zu Webflow Plugin?

Um dieses neue und aufregende Plugin zu nutzen, installieren Sie zunächst das Plugin in Ihrem Figma-Konto und autorisieren Sie Ihr Webflow-Konto damit.

Danach entwerfen Sie Ihre Website in Figma mit Hilfe von Autolayouts und fügen sie dann einfach per Copy-Paste in Webflow ein, indem Sie das Plugin in Figma verwenden.

Nachdem Sie Ihre Entwürfe erfolgreich in Webflow eingefügt haben, sehen Sie sich genauer an, ob alles gut aussieht - nehmen Sie bei Bedarf kleine Anpassungen vor, fügen Sie Interaktionen hinzu, um die Website noch fesselnder zu gestalten, und dann müssen Sie Ihre Website nur noch veröffentlichen.

Voilà! Vom Entwurf in Figma zur Website in Webflow.

Was ist zu beachten?

Hier sind einige Tipps, die Webflow mitgeteilt hat, um sicherzustellen, dass jeder die beste Benutzererfahrung mit diesem neuen Plugin machen kann:

• Das Plugin kann derzeit nicht mit dem Safari-Browser verwendet werden - es wird empfohlen, Chrome zu verwenden.
• Beim Kopieren von Figma nach Webflow werden nur Auto-Layout-Rahmen unterstützt.
• Die Rahmennamen aus Figma werden als Klassennamen in Webflow verwendet. Es ist also sinnvoll, Frames in Figma so zu benennen, wie Sie es in Weblow tun würden.
• Es kann zu Kompatibilitätsproblemen kommen und nicht alles kann nach Webflow übertragen werden. Überprüfen Sie Ihre Webflow-Projekte immer auf mögliche Probleme und deren Behebung.

➡️ Mehr darüber erfahren Sie auf der Webflow-Website (nur in EN)

➡️ Laden Sie das Plugin herunter

⭐ Lesen Sie hier mehr über Webflow!