Import aus Figma in Base44

​

Bevor du aus Figma importierst

• Stelle sicher, dass du in einer Figma Design-Datei arbeitest. FigJam, Slides und andere Dateitypen werden nicht unterstützt.
  
• Wähle einen einzelnen Frame oder Bereich aus, den du importieren möchtest. Verwende keinen vollständigen Dokument- oder Seitenlink.
• Klicke in Figma auf Share und setze den Link unter Who has access auf Anyone with the link – Can view. Kopiere den Link für den ausgewählten Frame oder Bereich und füge ihn in Import from Figma in Base44 ein. Nachdem der Import abgeschlossen ist, kannst du die Figma-Dateiberechtigungen wieder auf privat setzen, wenn du möchtest.

​

Dein Figma-Layout strukturieren

• Teile die Seite in logische Bereiche: Wickle zugehörige Inhalte (zum Beispiel ein Hero, eine Feature-Reihe oder einen Footer) in Frames oder Gruppen ein, sodass jeder Bereich der Seite klar definiert ist.
• Verwende Auto Layout für Hierarchie: Wende Auto Layout auf Komponenten wie Karten, Navigationsleisten und wiederholende Inhaltsblöcke an. Zum Beispiel sollte eine Infokarte mit Bild, Titel und Beschreibung als Frame oder Group, oder vorzugsweise Auto Layout gruppiert werden. Dies hilft Base44 zu verstehen, wie Elemente zueinander in Beziehung stehen und wie sie in der Größe geändert werden sollen.
  
• Halte die Verschachtelung sinnvoll: Gruppiere Elemente, die zusammengehören (zum Beispiel Bild + Titel + Beschreibung in einer Karte), und vermeide tiefe, unnötige Verschachtelung, die nicht die visuelle Struktur widerspiegelt.
  
• Richte aus und setze konsistente Abstände: Verwende konsistentes Padding, Gaps und Ausrichtung innerhalb deiner Frames, damit Base44 deine Abstände und Hierarchie bewahren kann.

​

Mit Vektoren und Formen arbeiten

• Flache komplexe Vektoren ab: Wenn ein Vektor aus vielen separaten Pfaden besteht (zum Beispiel ein Icon aus mehreren Formen), flache ihn zu einem einzigen Vektor ab, wann immer du kannst.
  
• Outlinen Striche vor dem Abflachen: Für Linien, Kreise, Sterne und ähnliche Formen:
  • Verwende Outline Stroke und flache das Ergebnis dann zu einem einzigen Vektorelement ab.
• Entferne versteckte Elemente: Lösche Ebenen, die komplett versteckt oder weit außerhalb der Leinwand verschoben sind, damit sie das importierte Layout nicht beeinträchtigen.
  
• Vereinfache Füllungen: Wenn ein Element mehrere Füllungen hat, behalte nur das, was du wirklich brauchst. Base44 importiert nur die letzte Füllung eines Elements.
  

​

Schriftarten, Effekte und andere Einschränkungen

• Schriftarten:
  • Nur Google Fonts werden vollständig unterstützt.
  • Benutzerdefinierte Schriftarten werden beim Import durch eine Standardschriftart ersetzt. Du kannst die Typografie später in Base44 aktualisieren.
• Design-Effekte, die möglicherweise nicht exakt erhalten bleiben:
  • Bildfilter
  • Mehrere Hintergrundebenen auf einem einzelnen Element
  • Variablen und variablengesteuerte Stile
• Layout-Verfeinerungen:
  • Stimme Abstand, Responsivität und Interaktionen nach dem Import mit dem KI-Chat oder dem Visual-Edit-Modus ab.
  • Wenn etwas nicht richtig aussieht, passe die Struktur direkt in Base44 an oder aktualisiere deine Figma-Datei und importiere erneut von einem saubereren Frame.

​

Den Rest deiner App bauen

• Verwende die importierte Seite als deine Startseite und Hauptreferenz für Struktur, Layout und visuelle Sprache.
• Bitte den KI-Chat:
  • Zu identifizieren, welche zusätzlichen Seiten fehlen (zum Beispiel About, Pricing, Blog oder Contact).
  • Neue Seiten zu erstellen, die der gleichen Designsprache und den gleichen Layout-Prinzipien folgen.
  • Buttons, Menüs und Links auf der Startseite mit den neuen internen Seiten zu verbinden.

Überprüfe die Startseite sorgfältig, einschließlich sowohl ihres Inhalts als auch ihres Designstils. Verwende die Startseite als Hauptreferenz, um die Struktur und Designsprache der Website zu verstehen. Identifiziere, welche zusätzlichen Seiten benötigt werden, um eine vollständige Website zu erstellen. Erstelle die fehlenden Seiten unter Beibehaltung der gleichen Designsprache, Layout-Prinzipien und des visuellen Stils wie die Startseite, sodass sie sich als direkte Fortsetzung und nicht als unzusammenhängend anfühlen. Wenn du fertig bist, kehre zur Startseite zurück und verbinde alle relevanten Buttons und Links so, dass jeder zu der entsprechenden internen Seite navigiert.