Skip to main content

​
Bevor du aus Figma importierst

Wenn du deine Figma-Datei korrekt vorbereitest, hilft es Base44, dein Design zu lesen und es als funktionierendes Layout neu zu erstellen.
  • Stelle sicher, dass du in einer Figma Design-Datei arbeitest. FigJam, Slides und andere Dateitypen werden nicht unterstützt.
    Figma-Auswahl des Dateityps mit hervorgehobenem Design neben FigJam, Slides, Buzz, Site und Make

    Dateityp Figma Design

  • 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.
Import from Figma konzentriert sich auf den ausgewählten Frame oder Bereich. Andere Teile der Figma-Datei werden nicht in Base44 importiert, es sei denn, du importierst sie separat.

​
Dein Figma-Layout strukturieren

Eine klare Struktur in Figma macht es Base44 leichter, ein responsives Layout zu bauen, das deiner Absicht entspricht.
Eine gut strukturierte Startseite mit klaren Bereichen und konsistenten Komponenten gibt die besten Ergebnisse, wenn du das Design zu einer vollständigen App erweiterst.
  • 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.
    Figma-Canvas mit zwei ausgewählten Ebenen und hervorgehobenem Add auto layout im Rechtsklickmenü

    Auto Layout zu zwei ausgewählten Elementen hinzufügen

  • 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.
    Figma-Ebenenliste mit Frame 12, das Paragraph und Frame 11 umschließt, mit aktivem Auto-Layout-Panel

    Die Frame-Gruppe nach dem Anwenden von Auto Layout

  • 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

Das Bereinigen von Vektorelementen vor dem Import macht Positionierung und Rendering genauer. Das Abflachen und Vereinfachen von Vektoren reduziert Überraschungen darin, wie Elemente ausgerichtet, skaliert und gerendert werden, sobald sie in Base44 sind.
  • 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.
    Ein Stern-Symbol aus sechs einzelnen Vektorebenen mit hervorgehobenem Flatten im Rechtsklickmenü

    Ein Symbol aus mehreren Pfaden zu einem Vektor abflachen

  • 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.
    Figma-Ebenenliste mit einer unten ausgewählten Bildebene und Symbolen für Sperren und Sichtbarkeit

    Eine ausgewählte Bildebene in Figma

  • 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.
    Figma-Fill-Panel mit fünf Füllungen auf einem Element: drei Bilder, eine rote Füllung und ein linearer Verlauf

    Ein Element mit fünf gestapelten Füllungen

​
Schriftarten, Effekte und andere Einschränkungen

Einige Teile deines Figma-Designs werden während des Imports angepasst, damit das resultierende Layout zuverlässig in Base44 funktioniert.
  • 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 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.
Wenn dein Design stark auf nicht unterstützte Effekte oder komplexe Variablen-Setups angewiesen ist, erwarte visuelle Unterschiede nach dem Import und plane, das Ergebnis innerhalb von Base44 zu verfeinern.

​
Eine Seite aus Figma hinzufügen

Sobald deine App im App-Editor ist, kannst du weitere Figma-Frames als neue Seiten hinzufügen. Du bist nicht auf den ersten Import beschränkt: Jeder Frame, den du hinzufügst, wird zu einer neuen Seite in deiner App. So fügst du eine Seite aus Figma hinzu:
  1. Öffne deine App im App-Editor.
  2. Klicke im Chat-Eingabefeld auf das Symbol +.
  3. Wähle Add page from Figma.
  4. Füge einen Link zu dem Figma-Frame ein, den du importieren möchtest.
  5. Klicke auf Add page.
Base44 erstellt aus deinem Design eine neue Seite und fügt sie deiner App hinzu. Es gelten dieselben Anforderungen an die Datei: Stelle sicher, dass dein Frame-Link auf Anyone with the link – Can view gesetzt ist, bevor du ihn hinzufügst.
Zum Hinzufügen von Seiten aus Figma brauchst du Editor-Zugriff. Viewer können keine Seiten hinzufügen. Die App darf außerdem nicht gleichzeitig einen anderen Prompt verarbeiten. Warte, bis eine laufende Generierung abgeschlossen ist, bevor du eine Seite hinzufügst.
Wenn du Frames aus derselben Figma-Datei importierst, bleiben Schriftarten, Farben und Abstände über alle Seiten hinweg einheitlich. Bitte den KI-Chat nach dem Hinzufügen einer Seite, die Navigation zwischen deinen bestehenden Seiten und der neuen Seite zu verbinden.

​
Den Rest deiner App bauen

Sobald dein Figma-Frame importiert ist, kannst du die neue Seite als Grundlage für eine vollständige App oder Website behandeln.
  • 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.
Du kannst einen Prompt wie diesen verwenden:
Ü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.
Wenn du wiederholte Muster in deinem importierten Design siehst (wie Karten, Feature-Reihen oder Call-to-Action-Blöcke), erwähne sie in deinem Prompt, damit die KI diese Muster auf den neuen Seiten wiederverwenden kann.
Diese Seite wurde mit KI übersetzt. Die genauesten und aktuellsten Informationen findest du in der englischen Version.