Das Figma Webflow Plugin: Meinung aus der Praxis

Analyse: Warum das Figma zu Webflow Plugin nur wenig Mehrwert liefert. Webflow hat mit einem neuen Figma Plugin für Aufregung und Freude bei der Webflow Community gesorgt. Das Plugin erlaubt dir, per copy und paste einfach Elemente aus deinem Figma Layout zu kopieren und in dein Webflow Projekt einzufügen. Das ganze hört sich aber schöner an als es ist. Deshalb sind hier zusammengefasst meine 7 Argumente, warum ich glaube, dass dieses Plugin weniger Nutzen findet, als es erstmal verspricht.

Kurz und knapp zusammengefasst

• Das Programm Framer hat schon seit Anfang 2022 ein Figma to Framer Plugin. Webflow zieht hier lediglich gleich.
• Problem 1: Chaos der Benennungen von Selektoren. Viel Arbeit danach in Webflow.
• Problem 2: Eigene Designs müssen mit Auto Layout aufgebaut werden. Zeitaufwand, hohe Lernkurve.
• Problem 3: Nur für Basic Layouts anwendbar
• Problem 4: Das Plugin importiert nur in eine Richtung. Änderungen aus dem Design können nicht synchronisiert werden.
• Problem 5: HTML Tags müssen (von Designern) ordentlich vergeben werden
• Problem 6: Autorisierung eines Webflow Accounts erforderlich
• Problem 7: Es werden nur Pixel und REM unterstützt

Das Figma zu Webflow Plugin – ein Game Changer oder nur kurzer Hype?

Webflow hat mit einem neuen Figma Plugin für Aufregung und Freude bei der Webflow Community gesorgt. Das Plugin erlaubt dir, per copy und paste einfach Elemente aus deinem Figma Layout zu kopieren und in dein Webflow Projekt einzufügen. Das ganze hört sich aber schöner an als es ist. Deshalb sind hier zusammengefasst meine 7 Argumente, warum ich glaube, dass dieses Plugin weniger Nutzen findet, als es erstmal verspricht.

Wichtig zu beachten, ich beurteile das Plugin in Version 1. Es muss also schon gesagt werden, dass es noch ein ziemlich frühes Stadium ist und vieles von meinen angemerkten Punkten in Zukunft vielleicht verbessert werden.

Gründung von Webflow Labs

Ich bin positiv überrascht und finde es erstmal gut, was hier für ein Plugin erarbeitet wurde. Ich habe mich schon immer gefragt, warum eigentlich Figma, das komplett im Browser läuft und funktioniert, dein Artboard nicht einfach als eine Website exportieren kann. Es ist ja schon im Browser… Aber scheinbar ist das komplizierter als gedacht. Deshalb hat sich Webflow unter der Gruppierung „Webflow Labs” diesem Thema angenommen.

Warum das Figma zu Webflow Plugin zu wenig Mehrwert liefert

Autorisierung eines Webflow Accounts erforderlich

Warum man explizit eine Seite in Webflow auswählen muss, macht für mich keinen Sinn und reduziert die Beschleunigung des Arbeitsablaufs. Sie geben an, damit Inhalte zwischen diesem Webflow Projekt und Figma ausgetauscht werden können aber eigentlich ist es doch nur ein Copy und Paste?!

Mit der Figma Auto Layout Funktion zu arbeiten ist zu langsam

Nur Gruppen, die in Figma die Auto Layout Funktion aktiviert haben, können vom Plugin verarbeitet werden. Wenn du eigene Designs in Figma gruppierst und dann diese Funktion aktivierst, zerhaut es dir erstmal deinen ganzen Aufbau. Vorhandene Designs und auch neue Layouts mit der Auto Layout Funktion aufzubauen stellt sich daher als erstmal sehr zeitaufwendig dar.

Es werden nur Pixel und REM als Einheit unterstützt

Einheiten werden standardmäßig in PX importiert. IN den Plugin Einstellungen kann man diese Option aber von Pixel in REM umstellen. Andere Einheiten werden aber nicht unterstützt. Warum Pixel als Einheit im modernen Web nicht mehr verwendet werden sollte, kannst du in diesem Beitrag anschauen: Warum EM besser als REM und besser als Pixel ist.

HTML Tags müssen vergeben werden

Um es sinnvoll einzusetzen, musst du viele Einstellungen schon in Figma richtig machen. Zum Beispiel die h1 Hierarchien richtig vergeben usw.

Ein Chaos der Benennungen von Selektoren

Benennungen der Ebenen werden in Webflow übertragen. Wenn man sie nicht ordentlich benennt, werde sie mit Frame1, Frame2, Frame3 usw. in Webflow aufgebaut, was keine Grundlage für einen sinnvollen Aufbau in Webflow ist.

Das Plugin ist eine Einbahnstraße

Wenn du dein Layout einmal kopierst und Änderungen in Webflow machst, werden sie nicht zurück zu Figma synchronisiert. Auf dieses Problem wirst du sehr schnell kommen, da du definitiv Einstellungen in Webflow korrigieren werden musst und sobald aber dein Designer ein Kunden-Update in Figma bereitstellt, dieses deine Einstellungen in Webflow wieder überschreiben würde.

Vergleich zu anderen vorgefertigten Components und Libraries

Mein Problem mit vielen solchen Lösungen und auch vielen vorgefertigten Templates: Sie sind alles sehr Basic und bieten nur Vorlagen für unkomplizierte Layouts. Aber genau da wird es doch erst interessant. Mit so einem Plugin lassen sich schwer wirklich individuelle Designs aufbauen und dann rüber zu Webflow transferieren.

Angebote wie die Relume Library gehen hier einen anderen Schritt, da sie den logischen Aufbau mit ordentlichen Benennungen der Klassen schon beinhalten.

Wo der Vorteil und Hauptnutzen des Plugins liegt

Für was das Plugin sich aber sehr gut eignet, ist, um schnell Texte, Bildmaterial und Grafiken zu Webflow zu importieren. Dann würde ich aber her gehen und das ganze nochmal selbst ordentlich aufbauen.

Auch um Text Styles und Farben in dein Webflow Projekt zu bekommen, eignet es sich sehr gut. Zum Beispiel könnte man damit gut einen Styleguide von Figma kopieren und anschließend in Webflow die Einheiten etc nach belieben anpassen und hat dadurch definitiv einen Geschwindigkeitsboost.

Fazit

Ich denke Webflow wollte hier einfach mal wieder einen Innovativen Schritt in eine Richtung mach und zeigen, was möglich ist. Das Programm Framer macht immer weiter Schlagzeilen und Webflow muss hier einfach auch immer weiter zeigen, dass sie es drauf haben.

Abschließend lässt sich sagen, dass aus meiner Sicht das Figma zu Webflow Plugin wirklich nur von den Designern verwendet werden kann, die sich schon sehr gut im Web Development auskennen und wissen, wie eine Website aufgebaut werden sollte. Zudem müssen sie ihre Layouts mit Auto-Layout sehr gut und ordentlich aufbauen, dass es überhaupt verwendet werden kann. Das ist sehr zeitintensiv. Deshalb stellt sich hier natürlich die Frage, ob man die ganzen Layout Programme wie Figma, Sketch, Adobe XD etc. nicht einfach nur weiterhin als ein Tool für schnelles ausprobieren verwenden sollte und um eine Designsprache für ein Website Layout zu definieren. Aber wir werden sehen ob sich das Plugin in Zukunft weiter entwickelt oder ob es einfach nur ein Hype-Maker war um bisschen Publicity zu bekommen.