Figma-Anforderungen
- Figma-Seat: Du musst einen Editor-Seat haben. Figma blockiert API-Zugriff für View- und Collaborator-Konten.
- Design-Datei: Du musst eine Figma-Design-Datei nutzen. FigJam, Slides und andere Dateitypen werden nicht unterstützt.
- Öffentlicher Frame-Link: Dein Frame-Link muss auf Anyone with the link – Can view gesetzt sein. Klicke in Figma auf Share, um das zu ändern. Du kannst ihn nach dem Import wieder auf privat setzen.
Du kannst pro Workspace ein Figma-Konto verbinden.
Eine neue App aus Figma starten
Verwende Import from Figma auf dem Startbildschirm, um einen Figma-Frame in eine neue Base44-App umzuwandeln. Base44 rekonstruiert Layout, Struktur und visuellen Stil deines Designs als Startpunkt.
- Gehe zu Base44.
- Klicke im Prompt-Feld auf das +-Symbol.
- Klicke auf Import from Figma.
- Klicke auf Connect to Figma.
- Folge den Anweisungen auf dem Bildschirm, um Base44 Zugriff auf Figma zu gewähren.
- Füge deinen Figma-Link ein und klicke auf Generate.
Eine Seite aus Figma hinzufügen
Sobald deine App im App-Editor ist, kannst du zu jedem Zeitpunkt Figma-Frames als neue Seiten hinzufügen. Du bist nicht auf den ursprünglichen Import beschränkt. Zum Hinzufügen von Seiten aus Figma ist Editor-Zugriff erforderlich. Viewer können keine Seiten hinzufügen. Zudem musst du warten, bis eine aktive Generierung abgeschlossen ist, bevor du eine Seite hinzufügst.
- Öffne deine App im App-Editor.
- Klicke im AI-Chat auf das +-Symbol und wähle Add page from Figma.
- Klicke in Figma mit der rechten Maustaste auf den Frame oder Bereich, den du importieren möchtest.
- Wähle “Copy/Paste as” und dann “Copy link to selection”.
- Füge den Link in den Dialog ein und klicke auf Add page.
Richtlinien für den Figma-Import
Wenn du deine Figma-Datei vor dem Import vorbereitest, kann Base44 dein Design besser lesen und als sauberes, genaues Layout rekonstruieren. Folge diesen Richtlinien für die besten Ergebnisse.Dein Figma-Layout strukturieren
Eine klare Struktur in Figma erleichtert es Base44, ein responsives Layout zu bauen, das deiner Absicht entspricht.- Teile die Seite in logische Sektionen: Umschließe zusammengehörige Inhalte (z. B. Hero, Feature-Reihe oder Footer) in Frames oder Gruppen, damit jeder Bereich der Seite klar definiert ist.
- Verwende Auto Layout für Hierarchie: Wende
Auto Layoutauf Komponenten wie Karten, Navigationsleisten und wiederkehrende Content-Blöcke an. Zum Beispiel sollte eine Info-Karte mit Bild, Titel und Beschreibung alsFrameoderGroup, vorzugsweise alsAuto Layout, gruppiert werden. Das hilft Base44 zu verstehen, wie Elemente zueinander stehen und wie sie sich anpassen sollen.
- Halte Verschachtelung sinnvoll: Gruppiere Elemente, die zusammengehören (z. B. Bild + Titel + Beschreibung in einer Karte) und vermeide tiefe, unnötige Verschachtelung, die nicht der visuellen Struktur entspricht.
- Konsistent ausrichten und abstände einhalten: Verwende einheitliche Innenabstände, Zwischenräume und Ausrichtungen in deinen Frames, damit Base44 deinen Abstand und deine Hierarchie erhalten kann.
Mit Vektoren und Formen arbeiten
Wenn du Vektorelemente vor dem Import aufräumst, werden Positionierung und Rendering genauer. Vektoren zu flatten und zu vereinfachen reduziert Überraschungen beim Ausrichten, Skalieren und Rendern in Base44.- Komplexe Vektoren flatten: Wenn ein Vektor aus vielen separaten Pfaden besteht (z. B. ein Icon aus mehreren Formen), flatte ihn möglichst zu einem einzigen Vektor.
- Konturen vor dem Flatten in Pfade umwandeln: Für Linien, Kreise, Sterne und ähnliche Formen:
- Verwende Outline Stroke und flatte dann das Ergebnis in ein einzelnes Vektorelement.
- Versteckte Elemente entfernen: Lösche Ebenen, die vollständig ausgeblendet oder weit außerhalb der Zeichenfläche sind, damit sie das importierte Layout nicht stören.
- Füllungen vereinfachen: Wenn ein Element mehrere Füllungen hat, behalte nur, was du wirklich brauchst. Base44 importiert nur die letzte Füllung eines Elements.
Schriftarten, Effekte und andere Einschränkungen
Manche Teile deines Figma-Designs werden während des Imports angepasst, damit das resultierende Layout in Base44 zuverlässig funktioniert.- Schriftarten:
- Nur Google Fonts werden voll unterstützt.
- Benutzerdefinierte Schriftarten werden beim Import durch eine Standard-Schriftart 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-Feinschliff:
- Feinjustiere Abstände, Responsivität und Interaktionen nach dem Import mit dem AI-Chat oder dem Visual-Edit-Modus.
- Wenn etwas nicht richtig aussieht, passe die Struktur direkt in Base44 an oder aktualisiere deine Figma-Datei und importiere erneut aus einem saubereren Frame.
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.- Nutze die importierte Seite als deine Startseite und Hauptreferenz für Struktur, Layout und visuelle Sprache.
- Bitte den AI-Chat:
- Zu identifizieren, welche zusätzlichen Seiten fehlen (z. B. About, Preise, Blog oder Kontakt).
- Neue Seiten zu erstellen, die derselben Designsprache und denselben Layout-Prinzipien folgen.
- Buttons, Menüs und Links auf der Startseite mit den neuen internen Seiten zu verbinden.
Prüfe die Startseite sorgfältig, sowohl Inhalt als auch Designstil. Verwende die Startseite als Hauptreferenz, um Struktur und Designsprache der Website zu verstehen. Identifiziere, welche zusätzlichen Seiten für eine vollständige Website nötig sind. Erstelle die fehlenden Seiten unter Beibehaltung der gleichen Designsprache, Layout-Prinzipien und des visuellen Stils der Startseite, sodass sie sich wie eine direkte Fortsetzung und nicht wie unverbundene Seiten anfühlen. Kehre am Ende zur Startseite zurück und verbinde alle relevanten Buttons und Links so, dass sie zur passenden internen Seite navigieren.
Diese Seite wurde mit KI übersetzt. Für die genauesten und aktuellsten Informationen siehe die englische Version.