So importieren Sie ein Figma-Design in Ihre Website

Gehen Sie zum Figma Dashboard und klicken Sie auf Ihr Profilbild → Einstellungen.

Blättern Sie auf der Registerkarte "Konto" zum Abschnitt "Persönliche Zugriffstoken" und geben Sie den Namen des Tokens ein, z. B. "Tilda".

Kopieren Sie den Token-Wert, um ihn für den Import zu verwenden.

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 richtigen Link eingegeben haben und keine Fehler auf der Figma-API-Seite vorliegen, 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.