Ich habe mehrere Stunden damit verbracht, ein Figma-Design für eine Landingpage zu erstellen. Jede Farbe stimmt, jedes Pixel ist vorhanden und sorgt für einen nahtlosen Benutzerfluss, aber jetzt kommt der entmutigende Teil der eigentlichen Codierung dieser Landingpage.
Das Erstellen eines Figma-Designs ist eine riesige Aufgabe. Dort lernte ich Dualite kennen, das Figma-Designs mithilfe von KI in tatsächlichen Code übersetzt und Entwicklern wie mir dabei hilft, den Aufwand für das eigentliche Codieren zu minimieren. Sehen wir uns an, wie ich Dualite verwendet habe, um meine Landingpage in tatsächlichen Code umzuwandeln
Was ist Dualit?
Dualite ist ein innovatives, KI-gestütztes Figma-Plugin, das die Lücke zwischen Design und Entwicklung schließen soll. Der Schwerpunkt liegt auf der Konvertierung von Figma-Designs in hochwertigen, wiederverwendbaren Code mit Unterstützung beliebter Technologien wie Reactjs, TailwindCSS und mehr.
Mit Dualite können Sie jedes Figma-Design oder jede Figma-Animation mit einem einzigen Klick in effizienten Code umwandeln, den Sie entsprechend Ihrem Projekt anpassen können. Es verfügt über aufregende Funktionen, die ich kurz zusammenfassen möchte:
-
Modi: Dualite bietet zwei Modi, Komponentenmodus und Seitenmodus, ideal für Entwickler und Designer, um ihr Design in generierten Code umzuwandeln. Diese Modi stellen sicher, dass Layout, Interaktivität, Animationen und mehr genau vom Design in den Code übersetzt werden.
-
Komponentenmodus: Konzentriert sich auf einzelne Designelemente und ermöglicht die Erstellung wiederverwendbarer Komponenten.
-
Seitenmodus: Konvertiert ganze Seiten und behält dabei das Gesamtlayout und die Struktur bei.
- Erfahren Sie mehr über Modi in diesem Blog
-
Erweiterte Funktionen:
- Dualite bietet erweiterte Einstellungen, in denen Benutzer weitere technische Informationen zu ihrem Design bereitstellen können. Dadurch wird sichergestellt, dass der generierte Code reaktionsschnell und genau ist.
- Diese erweiterten Einstellungen geben Designern und Entwicklern mehr Möglichkeiten und ermöglichen es ihnen, die Ausgabe an spezifische Projektanforderungen anzupassen. Diese Funktion ist besonders nützlich für komplexe Designs, die eine präzise Kontrolle über den endgültigen Code erfordern, wie z. B. responsive Layouts oder komplexe Animationen.
Um schnell mit Dualite zu beginnen, können Sie deren Dokumentation folgen
Figma-Design
Beginnen wir mit einem Figma-Design einer Landingpage, siehe unten:
Dualite verfügt also über eine Modusfunktion, mit der Sie zwischen Seitenmodus und Komponentenmodus umschalten können
Grundsätzlich dient der Seitenmodus dazu, das komplette Design im Handumdrehen zu konvertieren, und der Komponentenmodus dient dazu, separate Komponenten zu erstellen, die wir in unser Projekt integrieren können. Weitere Informationen zu Komponenten finden Sie in den Dokumenten
Wir werden den Komponentenmodus verwenden, um Code für alle im Design vorhandenen Komponenten zu generieren und sie dann in ein einziges Projekt zu integrieren
Beginnen wir mit der Aufteilung der Zielseite in Komponenten, siehe unten:
Ersteinrichtung des Projekts
Ich werde Reactjs und Tailwind in Dualite verwenden, um Code zu generieren, also richten wir zuerst das Projekt ein:
-
Reactjs-App: Erstellen Sie eine React-App mit Vite oder einem anderen Tool. Vite ist eine beliebte Wahl zum Erstellen von Javascript-Apps
-
Tailwind einrichten: Befolgen Sie die Tailwind-Dokumente, um Tailwind in einer Reactjs-App ohne unnötige Fehler einzurichten. Stellen Sie sicher, dass Sie auch die Abhängigkeiten wie PostCSS und Autoprefixer hinzufügen, um ein reibungsloses Tailwind-Setup zu gewährleisten.
-
Konfigurationsdateien: Erstellen Sie tailwind.config.js und postcss.config.css im Stammverzeichnis des Projekts. tailwind.config.js ist möglicherweise vorhanden, wenn Sie alle Schritte aus den Tailwind-Dokumenten befolgt haben. Wenn es bereits vorhanden ist, aktualisieren Sie es entsprechend
-
Verwenden Sie Javascript: Derzeit unterstützt Dualite Typescript nicht. Stellen Sie daher sicher, dass Sie die Reactjs-App nur mit Javascript erstellen
Beginnen Sie mit der Konvertierung von Komponenten in Dualite
Ersteinrichtung:
-
Modus: Wir werden den Komponentenmodus verwenden. Verwenden Sie die Umschalttaste in der oberen rechten Ecke, um zwischen Seitenmodus und Komponentenmodus zu wechseln
-
Frameworks: Wenn Sie ein Design zum Konvertieren in Code auswählen, werden Ihnen mehrere Sprach- und Framework-Optionen angezeigt. Ich werde Reactjs und Tailwind verwenden, um Code zu generieren.
- Um schnell mit der Verwendung von Dualite zu beginnen, lesen Sie dies
Jetzt beginnen wir mit der Konvertierung des Designs in eine Komponente:
Ankündigungsleistenkomponente: Überprüfen Sie den generierten Code hier
Navigationsleistenkomponente: Überprüfen Sie den generierten Code hier
Kategoriefilterkomponente: Überprüfen Sie den generierten Code hier
Kartenkomponentenkomponente: Überprüfen Sie hier den generierten Code
Paginierungskomponente: Überprüfen Sie den generierten Code hier
Fußzeilenkomponente: Überprüfen Sie hier den generierten Code
Anpassungen
- Komponenten kopieren:
- Kopieren Sie nun den Komponentenordner aus dem gesamten oben generierten Code und fügen Sie ihn in einem Komponentenordner in das Projekt ein
- Vielleicht ist Ihnen aufgefallen, dass die Namen aller Komponenten nur „Komponente“ lauten. Benennen wir also alle Komponenten entsprechend. Beispiel: Die Ankündigungsleistenkomponente erhält den Namen „AnnouncementBar“. Sehen Sie hier, wie ich es gemacht habe
- Alle Komponenten rendern:
- Jetzt importieren Sie alle Komponenten entsprechend dem Design in der App.jsx-Datei
- Führen Sie das Projekt aus und Sie sehen die Ausgabe. Überprüfen Sie die App.jsx-Datei hier
- Sie haben vielleicht bemerkt, dass einige Komponenten repariert werden müssen. Beginnen wir mit den Anpassungen
- Komponentenstile korrigieren:
-
Schriftarten:
- Wie Sie am Design sehen können, haben wir unsere eigenen Schriftarten. Ich füge sie in den Assets-Ordnern hinzu, damit ich die Schriftart überall im Projekt verwenden kann.
- Außerdem muss @font-face für alle Schriftarten erstellt werden, die wir in der Datei index.css verwenden, in der Tailwind-Anweisungen vorhanden sind
-
Navigationsleistenkomponente:
- Das Layout ist ungenau, daher muss der Stil korrigiert werden
-
Kartenbestandteil:
-
Sternsymbol: Sternsymbole im Grafikordner
hinzugefügt
-
Text.js: Text.js-Datei aktualisiert, um die Schaltflächenbeschriftung und anderen Text der Komponente zu korrigieren
-
Stile: Aktualisierte Stile, um die Schriftstärke zu bestimmten Textelementen und Schaltflächenbeschriftungen hinzuzufügen
-
Kartenkomponentenlogik:
- Kartenkomponente rendert nur eine einzelne Komponente, da es sich nur um eine einzelne Komponente handelt.
- Um mehrere Kartenkomponenten zu rendern, muss ich einige Demodaten hinzufügen, um sie abzubilden und mehrere Karten zu rendern
Hinweis: Alle Änderungen und der Code können hier auf CodeSandBox eingesehen werden
Ausgabe
Sobald ich alle diese Anpassungen und Änderungen im Projekt vorgenommen habe, kann ich eine bessere Version meines Designs sehen, den Code und die Ausgabe hier überprüfen
War Dualite hilfreich?
Lassen Sie es uns richtig verstehen: Alle Komponenten, die wir mit Dualite generiert haben, waren gebrauchsfertig. Ja, wir haben einige Anpassungen am Code vorgenommen, um ihn so nah wie möglich an das Design anzupassen, trotzdem alle Stile der Komponenten, alle Die Hierarchie der Komponenten mit den Daten in separaten Dateien wird von Dualite generiert.
Anstatt zu viel Zeit mit dem Erstellen der Benutzeroberfläche zu verbringen, kann ich dafür Dualite verwenden.
Im Vergleich zur manuellen Codierung hätte dies lange genug gedauert. Die Ausgabe aller Komponenten war wirklich gut, nichts kann 100 % korrekt sein, jeder Code braucht einen letzten Schliff durch den Entwickler und das haben wir hier gemacht
Ja, Dualite war sehr hilfreich und schnell bei der Codegenerierung für meine Komponenten.
Abschluss
Da haben Sie es, eine effiziente Möglichkeit, Code Ihrer Figma-Designs mit sehr wenig manuellem Codieren zu generieren. Der eigentliche Prozess des Codierens der Designs ist eine Achterbahnfahrt, die weniger kompliziert sein kann, wenn Sie Dualite verwenden und den Code an Ihre Bedürfnisse und das Projekt anpassen.
Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine Landing Page mit Dualite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
