Tutorials

Tutorial: Von Lovable AI zu Figma – So transferierst du deine Designs

Melden

Hier ist ein detailliertes Tutorial, wie du Designs, die du mit Lovable AI (ehemals GPT Engineer) erstellt hast, in Figma überführen kannst.

Lovable AI ist ein hervorragendes Tool, um funktionale Web-Apps in Lichtgeschwindigkeit zu erstellen. Doch für das Finetuning des UI-Designs oder die Zusammenarbeit in Design-Teams ist Figma weiterhin der Standard. Da Lovable aktuell keinen direkten „Export zu Figma“-Button hat, nutzen wir den Weg über das Browser-Rendering.

Methode: Der Weg über das Plugin „html.to.design“

Dies ist die effizienteste Methode, um ein originalgetreues, bearbeitbares Abbild deiner Lovable-App in Figma zu erhalten.

Schritt 1: Deine Lovable-App vorbereiten

  1. Öffne dein Projekt in Lovable.
  2. Klicke oben rechts auf "Preview" (Vorschau).
  3. Stelle sicher, dass die App genau so aussieht, wie du sie exportieren möchtest.
  4. Wichtig: Wenn du die App noch nicht veröffentlicht hast, klicke auf "Share" oder "Deploy", um eine Live-URL zu erhalten (z. B. eine lovable.app-Subdomain). Alternativ kannst du die lokale Vorschau-URL nutzen, wenn Figma auf deinen localhost zugreifen kann (oft kompliziert, daher ist die Live-URL besser).

Schritt 2: Figma öffnen und Plugin installieren

  1. Starte Figma und öffne ein neues oder bestehendes Design-File.
  2. Gehe zum Reiter "Resources" (das Symbol mit den vier Quadraten oben links) und klicke auf "Plugins".
  3. Suche nach dem Plugin "html.to.design".
  4. Klicke auf "Run".

Schritt 3: Die URL importieren

  1. Kopiere die URL deiner Live-App aus Lovable.
  2. Füge die URL in das Feld des Plugins html.to.design ein.
  3. Wähle die gewünschten Einstellungen:
    • Viewport: Wähle „Desktop“, „Tablet“ oder „Mobile“, je nachdem, welche Version du bearbeiten willst.
    • Theme: Falls deine App einen Dark Mode hat, stelle sicher, dass die richtige Version geladen wird.
  4. Klicke auf "Import".

Schritt 4: Nachbearbeitung in Figma

Das Plugin wandelt den HTML/CSS-Code von Lovable in Figma-Layer (Ebenen) um. Da Lovable meistens Tailwind CSS nutzt, ist die Struktur oft sehr sauber, aber:

  • Gruppierung: Überprüfe die Layer-Struktur. Manchmal werden Elemente in vielen verschachtelten Frames gruppiert.
  • Schriftarten: Falls du spezielle Fonts in Lovable nutzt, stelle sicher, dass du diese auch in Figma installiert hast, damit die Texte korrekt angezeigt werden.
  • Auto-Layout: Das Plugin versucht, Auto-Layout anzuwenden. Manchmal musst du manuell nachbessern, um die volle Flexibilität für Design-Änderungen zu erhalten.

Alternative Methode: Screenshot & AI (Schnell, aber weniger präzise)

Falls du nur eine visuelle Referenz brauchst und keine Lust auf Layer-Strukturen hast:

  1. Mache einen Screenshot deiner Lovable-App.
  2. Nutze das Figma-Plugin "magicul" oder "Builder.io", um Bilder in Design-Elemente umzuwandeln.
  3. Oder nutze die neue Figma AI (Make Design): Lade den Screenshot hoch und lasse Figma ein ähnliches Interface mit Standard-Komponenten nachbauen.

Profi-Tipp: Den Code als Brücke nutzen

Da Lovable echten React- und Tailwind-Code schreibt, kannst du den Code direkt in Lovable einsehen:

  1. Klicke in Lovable auf den "Code"-Tab.
  2. Kopiere spezifische Tailwind-Klassen für Farben oder Abstände.
  3. Nutze Plugins wie "Tailwind CSS DevTools" in Figma, um die exakten Werte (Padding, Spacing, Hex-Codes) eins zu eins zu übernehmen.

Fazit

Der Weg über das Plugin html.to.design ist aktuell die „Goldstandard“-Lösung. Er spart dir Stunden an Arbeit, da er Buttons, Texte und Layout-Container direkt aus dem gerenderten Code von Lovable übernimmt. So kannst du dich in Figma voll auf das Polishing konzentrieren!

0