Ich habe mehrere Stunden damit verbracht, ein Figma-Design einer 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. Mal sehen, wie ich Dualite verwendet habe, um meine Zielseite 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, lassen Sie mich eine Zusammenfassung darüber geben:

• 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 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 zum Beispiel 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 wechseln können

Grundsätzlich dient der Seitenmodus der Konvertierung des gesamten Designs im Handumdrehen und der Komponentenmodus dient der Erstellung separater Komponenten, 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
• Javascript verwenden: Dualite unterstützt Typescript derzeit 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:

1. Ankündigungsleistenkomponente: Überprüfen Sie den generierten Code hier
    

2. Navigationsleistenkomponente: Überprüfen Sie den generierten Code hier
    

3. Kategoriefilterkomponente: Überprüfen Sie den generierten Code hier
    

4. Kartenkomponentenkomponente: Überprüfen Sie den generierten Code hier
    

5. Paginierungskomponente: Überprüfen Sie den generierten Code hier
    

6. Fußzeilenkomponente: Überprüfen Sie den generierten Code hier
    

Anpassungen

1. 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 alle Komponentennamen 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
2. Alle Komponenten rendern:
   • Jetzt importieren Sie alle Komponenten gemäß 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
3. 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:
     • Layout ist ungenau, daher muss der Stil korrigiert werden
   • Kartenkomponente:
     • 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:
     • Card Component 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 zuzuordnen 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 getan

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.