So importieren Sie ein Figma-Design in Ihre Website

Gehen Sie zur Figma-Hauptseite und klicken Sie unter Ihrem Profilbild auf Profil anzeigen → Einstellungen.

Gehen Sie dann auf die Registerkarte Sicherheit, gehen Sie zum Block Persönliche Zugangstoken und klicken Sie auf Neues Token generieren.

Geben Sie in dem neuen Fenster den Namen des Tilda an und wählen Sie seine Gültigkeitsdauer aus. Zum Beispiel: Kein Ablauf - Unbefristet. Sie können auch die Verfallszeit des Tokens von 1 Tag, 7 Tagen, 30 Tagen und 90 Tagen wählen.

Im Bereich "Geltungsbereich" müssen Sie nun die Zugriffsrechte für den Schlüssel auswählen.

Wählen Sie für die Optionen Aktueller Benutzer, Entwicklungsressourcen, Dateiinhalt, Dateiversionen, Bibliotheksbestand, Bibliotheksinhalt und Projekte den Wert Schreibgeschützter Zugriff. Klicken Sie dann auf Token generieren, um ein Token zu erstellen.

Kopieren Sie diesen Schlüssel, nachdem Sie ihn erstellt haben, um ihn in den Einstellungen für den Import in Tilda anzugeben. Sie können den Schlüssel nicht erneut anzeigen, sondern nur einen neuen Schlüssel erstellen.

Klicken Sie auf das Drei-Punkte-Menü in der oberen rechten Ecke von Zero Block und wählen Sie die Option "Import aus Figma" aus dem Dropdown-Menü.

Wählen Sie in Figma im Ebenenbedienfeld das gewünschte Layout und den gewünschten Rahmen aus, und kopieren Sie den Link zum Rahmen aus der Adressleiste des Browsers.

Damit der Import korrekt ist, müssen Sie einen Figma-Rahmen zu einem Zero Block

Fügen Sie diesen Link in das Feld Layout URL ein und fügen Sie das in den Figma-Einstellungen erhaltene API-Token in das Feld API Token ein.

Warten Sie, bis das Layout importiert ist.

Wenn Sie den korrekten Link hinzugefügt haben und es keine Fehler auf der Figma API Seite gibt, wird das Layout in Zero Block importiert.

Hinweis: Standardmäßig werden die Bilder von den Figma-Servern geladen. Wenn Sie sie also auf Tilda hochladen möchten, müssen Sie zu den Einstellungen der Elemente, die Bilder enthalten, gehen und auf Upload to Tilda klicken.

Layouts müssen auf einem Rahmen mit einer Breite von 1200px erstellt werden.

Wir empfehlen, das Layout in mehrere Blöcke zu importieren, anstatt das gesamte Layout nur in einen Block einzufügen.

Jede Gruppe kann als Bild importiert werden. Dazu müssen Sie im Gruppennamen in Figma "image" angeben. Wenn Sie "svg" angeben, wird die Gruppe als SVG-Datei importiert.

Sie können auch Gruppen importieren. Wenn darin andere Gruppen enthalten sind, befinden sich alle Elemente in der Gruppe der ersten Ebene.

Um eine Schaltfläche zu importieren, müssen Sie die Form und den Text in einer Gruppe zusammenfassen und diese als "Schaltfläche" benennen.

Die Eigenschaft der Textausrichtung wird ebenfalls importiert, daher empfehlen wir Ihnen, die Breite des Textelements mit der der Form abzustimmen.

Wenn die Form einen Effekt hat, der in Zero Block nicht reproduziert werden kann, wird sie mit dem Effektbild im Hintergrund importiert.