Webflow DevLink — Funktionen und Vorteile

Beim ersten Produktupdate, das Ende Mai dieses Jahres stattfand, war Webflow unter einer Reihe von andere Aktualisierungen führte eine innovative Funktion namens DevLink ein. ‍

DevLink zielt darauf ab, die Kluft zwischen Designern und Entwicklern zu überbrücken, den Webentwicklungsprozess zu rationalisieren und die Zusammenarbeit zu verbessern.

Obwohl es sich noch in der Betaversion befindet und wir sein volles Potenzial noch nicht ausgeschöpft haben, werden wir uns in diesem Artikel mit der Funktionalität von DevLink befassen und die zahlreichen Vorteile für Designer, Entwickler und den gesamten Webentwicklungsablauf untersuchen.

DevLink verstehen

Im Kern ist DevLink eine Funktion, die eine reibungslose Zusammenarbeit zwischen Designern und Entwicklern ermöglicht. Es fungiert als Kommunikationsbrücke, sodass diese beiden wichtigen Rollen effizienter zusammenarbeiten können.

DevLink ermöglicht es Designern, die Komponenten, die sie mit dem leistungsstarken visuellen Editor von Webflow erstellt haben, in eine React-Anwendung zu exportieren, sodass Entwickler diese Komponenten im Wesentlichen in einer separaten Codierungsumgebung von Webflow verwenden können, sodass sie auf die Vorteile der Plattform React.js zugreifen können, um diese Designs zum Leben zu erwecken.

Wie funktioniert DevLink in Webflow?

Das Erste, was Sie wissen sollten, ist, dass sich die Webflow Devlink-Funktion derzeit in der offenen Beta befindet. Um Zugriff zu erhalten, müssen Sie melde dich an dafür mit einer Webflow-Konto-E-Mail-Adresse. Die zweite Sache ist, dass DevLink derzeit nur im Next.js React-Framework unterstützt wird.

Wenn Sie mit React nicht vertraut sind, klicken Sie auf diesen Webflow Leitfaden um zu erfahren, wie Sie Ihr neues Next.js Projekt einrichten.

Stellen Sie anschließend sicher, dass Sie „npm run dev“ ausführen, um sicherzustellen, dass Ihr Projekt erfolgreich ausgeführt wird, und fahren Sie dann mit den folgenden Schritten fort, um Ihr Webflow-Projekt mit Ihrer lokalen Entwicklerumgebung zu verbinden:

1. Starte ein Webflow-Projekt
2. Klicken Sie mit der rechten Maustaste auf ein Element und wählen Sie Komponente erstellen

3. Gehen Sie zum Komponentenmenü und klicken Sie auf Komponenten exportieren Knopf

4. Kopieren Sie anschließend die Datei .webflowrc.js, die Sie im sich öffnenden DevLink-Fenster sehen, und fügen Sie sie in eine neue Datei im Stammverzeichnis Ihres Projekts Next.js ein.

Außerdem müssen Sie den Platzhalter „[YOUR API TOKEN]“ durch ein API-Zugriffstoken von Ihrer Site ersetzen. Sie können hier klicken, um zu erfahren, wie generieren Sie eine API Taste oder Sie können auch auf den Button bei der Config-Artikelbeschreibung klicken, wie im Bild oben zu sehen ist.

Alternativ gibt es eine andere Methode, die Sie verwenden können, ohne das Token im Klartext zu speichern. Überprüfen Sie den Webflow Leitfaden dafür und für andere detailliertere Webflow DevLink-Details.

5. Speichern Sie die Datei

Nachdem Sie dies abgeschlossen haben, müssen Sie zwei weitere Hauptschritte ausführen:

• Installieren Sie das NPM-Modul - führen Sie einfach den folgenden Befehl im Stammverzeichnis des Terminals Ihres Projekts next.js aus.

• Synchronisieren Sie Ihre Komponenten mit Ihrem Projekt next.js (jedes Mal, wenn Sie eine Änderung auf Ihrer Webflow-Canvas vornehmen)

Kopieren Sie dazu den NPX-Webflow-Devlink-Synchronisierungstext, den Sie oben im Exportfenster finden, und geben Sie ihn in das Stammverzeichnis des Terminals ein. Das führt dazu, dass Ihre Komponenten mit Ihrem Projekt next.js synchronisiert und in Ihre App importiert werden.

Beachten Sie, dass nicht alle Webflow-Elemente mit DevLink exportiert werden können.

Elemente wie: Sammlungsliste, E-Commerce-Elemente (Warenkorb, In den Warenkorb legen, Web Payments, PayPal), Lottie Animations und Lightbox werden nicht unterstützt.

Vorteile von DevLink in Webflow

DevLink ist die Brücke, mit der wir zwei verschiedene Codeumgebungen einfach „zusammenfügen“ können. Es bietet mehr Interaktivität beim Design und bessere dynamische Erlebnisse.

Nicht nur das, sondern wenn zwei Plattformen zusammenkommen, gibt es viele weitere Vorteile:

1. Verbesserte Zusammenarbeit zwischen Designern und Entwicklern

DevLink verbessert die Kommunikation und Zusammenarbeit zwischen Designern und Entwicklern. Es ermöglicht Ihnen, produktionsreife Webflow React-Komponenten visuell auf der Leinwand zu erstellen. Dies optimiert den Prozess der Übersetzung von Designs in funktionalen Code und macht die Zusammenarbeit zwischen Design- und Entwicklungsteams effizienter.

2. Optimierter Webentwicklungsprozess

Mit Webflow DevLink können sich Designer auf das Entwerfen und Prototyping konzentrieren, ohne sich Gedanken über die technische Umsetzung machen zu müssen. Entwickler können auf die Designdateien zugreifen und auf einfache Weise CSS-Stile und -Assets extrahieren, wodurch der Zeitaufwand für manuelle Codierungsaufgaben reduziert wird. Dieser optimierte Prozess vermeidet unnötiges Hin- und Herwechseln und beschleunigt den Entwicklungszeitraum, sodass neue Produkte und Apps schneller auf den Markt gebracht werden.

3. Höhere Effizienz und Produktivität

Durch die Verwendung von DevLink können Designer Änderungen am Design in Echtzeit vornehmen, und Entwickler können diese Aktualisierungen sofort sehen. Diese unmittelbare Feedback-Schleife macht zeitraubende Designübergaben überflüssig. Dadurch wird die Produktivität gesteigert und die Projektzeitpläne können erheblich reduziert werden.

4. Geringere Abhängigkeit von Programmierkenntnissen

Devlink bringt die Leistungsfähigkeit der visuellen Entwicklungsplattform von Webflow in React-Projekte ein und ermöglicht es Benutzern, die Leistungsfähigkeit der visuellen Leinwand ohne Code von Webflow zu nutzen. Sie können UI-Komponenten erstellen, komplexe Interaktionen erstellen und Animationen ohne dass eine Codierung erforderlich ist, und übersetzen Sie diese visuellen Designs nahtlos in sauberen, semantischen Code, der für die Produktion bereit ist.

DevLink effektiv nutzen

Um die Vorteile von DevLink zu maximieren, ist es wichtig, einige bewährte Methoden anzuwenden.

Der Aufbau klarer Kommunikationskanäle ist sehr wichtig. Durch die Kommunikation mit den Entwicklern darüber, wie das Design aussehen sollte, wie es aus einer statischen oder einer implementierten Perspektive aussehen sollte, Feedback-Sitzungen usw. können Sie sicherstellen, dass während des gesamten Entwicklungsprozesses alle auf derselben Wellenlänge sind.

Eine weitere bewährte Methode besteht darin, sicherzustellen, dass Ihre Webflow-Komponenten; alle Designelemente und Designteile in Webflow verwaltet werden, bevor Sie beginnen, Dinge in Ihrer React-App zu ändern.

Mit DevLink wurden auch zwei neue Funktionen eingeführt: Slots und Runtime-Requisiten. Sie bieten erweiterte Funktionen für einige Funktionen, die in Webflow noch nicht nativ bereitgestellt oder unterstützt werden.

Runtime-Requisiten bieten Ihnen die Möglichkeit, Ihren Komponenten kompliziertere Eigenschaften hinzuzufügen, die Webflow derzeit nicht anbietet, z. B. einen benutzerdefinierten onClick-Handler. Slots hingegen ermöglichen es Ihnen, Komponenten innerhalb von Komponenten innerhalb Ihres React-Projekts zu verschachteln.

Was ist in Zukunft zu erwarten?

DevLink steht erst am Anfang und es gibt viele spannende Dinge, die für die Zukunft versprochen werden. Da DevLink jetzt nur auf der React-Plattform verfügbar ist, wird es Unterstützung für vue.js und weitere Frontend-Frameworks geben.

Die Storybook-Integration wird ebenfalls in Kürze angekündigt, und man wird in der Lage sein, React-Komponenten zurück auf die Webflow-Site zu bringen, da DevLink momentan unidirektional funktioniert und React-Updates nicht zurück an Webflow verschiebt.

Fazit

DevLink in Webflow revolutioniert die Art und Weise, wie Designer und Entwickler zusammenarbeiten, optimiert den Arbeitsablauf bei der Webentwicklung und steigert die Effizienz. Durch die Schaffung dieser Brücke zwischen zwei Codierungsumgebungen können Benutzer sowohl ihre Produkt- als auch die Arbeitszeiteffektivität verbessern.

Da es sich um eine neue Funktion handelt und es dort nicht viele Anleitungen gibt, die Sie finden können, um mehr über DevLink zu erfahren, besuchen Sie die Leitfaden auf Webflow Universität und schau dir auch diese an zwei sehr hilfreich Videos wo Sie die ausgeführten Schritte visuell sehen können und ein klareres Verständnis haben.

Wir ermutigen React-Designer, DevLink in ihren Projekten zu erforschen und einzusetzen, und wir freuen uns auf zukünftige Möglichkeiten und Weiterentwicklungen der DevLink-Funktion von Webflow.

Bei Wir tun es Wir sind darauf spezialisiert, atemberaubende Kreationen zu kreieren Webflow-Vorlagen für verschiedene Branchen. Nehmen Sie sich einen Moment Zeit, um unsere Sammlung zu erkunden und die perfekte Vorlage für Ihre Bedürfnisse zu finden. Vergessen Sie nicht, unsere zu besuchen Blog und folge uns auch auf unserem soziale Netzwerke für die neuesten Nachrichten und Einblicke in Webdesign und insbesondere Webflow.