Ein Figma-Design importieren
So importieren Sie ein Figma-Design Zero Block in Zero Block
Mit dem Tilda „Figma to Tilda können Sie voll funktionsfähige Designs und Ebenen Zero Block nur einem Klick direkt aus Figma in Zero Block importieren. Lesen Sie die ausführliche Anleitung zur Verwendung des Plugins.
On the Figma Community page for the "Figma to Tilda" plugin: the "Open in Figma" button on the left.
Mehr lesen
Mehr lesen
Mehr lesen
Lesen Sie den Leitfaden
Das Tilda in Figma hinzufügen
Klicken Sie in Ihrem Figma-Konto in der unteren Symbolleiste auf „Aktionen“ und wählen Sie die Registerkarte „Plugins & Widgets“ aus. Geben Sie in das Suchfeld den Namen des Tilda „Figma to Tilda ein und klicken Sie darauf oder fügen Sie das Plugin über den Link hinzu.
In Figma: the "Resources" icon in the bottom toolbar, the "Search" field in the pop-up window, and the "Figma to Tilda" plugin in the list.
Klicken Sie auf die Schaltfläche „Ausführen“, um das Plugin zu aktivieren.
In the Figma interface: the "Run" button in the "Figma to Tilda" plugin pop-up window.
Es ist soweit! Jetzt kannst du Ebenen und Elemente in Tilda importieren.
In Figma: the "Figma to Tilda" plugin window on the canvas.
Empfehlungen zum Importieren eines Figma-Layouts in Tilda.

  • Der Frame muss eine Größe von 1200 Pixel haben, damit er korrekt importiert werden kann.
  • Teile einen großen Rahmen in mehrere einzelne Rahmen auf.
  • Um eine Schaltfläche korrekt zu importieren, benennen Sie die Elementgruppe „button“.
Wichtig: Es können maximal 6 verschachtelte Gruppenebenen importiert werden (sind mehr Ebenen verschachtelt, werden diese nicht importiert).
Ebenen aus Figma in Zero Block importieren
Nachdem Sie das Plugin hinzugefügt haben, wählen Sie die gewünschte Ebene im Layout aus. Die ausgewählte Ebene wird im Feld „Ausgewählte Ebenen“ des Plugin-Fensters angezeigt.
In Figma: the selected "TE1000" frame on the canvas and in the Layers panel, and the "Selected layers: TE1000" line in the "Figma to Tilda" plugin window.
Hinweis: Beim Kopieren können Sie sowohl eine einzelne Ebene als auch mehrere Ebenen auswählen. Dabei kann es sich um den gesamten Stamm-Frame oder um ein einzelnes Element handeln – beispielsweise ein Bild, eine Schaltfläche oder einen Text.
Klicken Sie im Plugin-Fenster auf die Schaltfläche „Zum Kopieren vorbereiten“, um die Ebenen für den Import vorzubereiten.
In the Figma plugin "Figma to Tilda": the "Prepare to copy" button with the selected layer TE1000.
Wenn der Frame zum Importieren bereit ist, klicken Sie auf die Schaltfläche „In die Zwischenablage kopieren “.
In Figma, the "Copy to clipboard" button in the "Figma to Tilda" plugin window with selected frame TE1000.
Gehen Sie zu Tilda → öffnen Sie Zero Block und drücken Sie die Tastenkombination: Strg+V unter Windows oder Befehl+V auf dem Mac.
Zero Block editor: layout with imported text, images, and a button inside the grid container.
Besonderheiten beim Importieren von Ebenen in Zero Block
Sie können den Rahmen als separate Gruppe importieren oder so, dass die Einstellungen auf die Zeichenfläche angewendet und alle aktuellen Elemente ersetzt werden.

Wenn die Zeichenfläche bereits Elemente enthält, können Sie den Rahmen auch als Gruppe einfügen, wobei diese Option jedoch alle Elemente von der Zeichenfläche löscht.

Wenn die Option „Einstellungen auf Zeichenfläche anwenden“ ausgewählt ist, werden die Einstellungen der obersten Ebene des Rahmens in Zero Block übernommen: Die Hintergrundfarbe oder das Hintergrundbild, das automatische Layout und andere von Tilda unterstützte Einstellungen Tilda geändert.
In the "How do you want to import frame from Figma?" pop-up in Zero Block: the "Add as a new group" option.
Wenn mehrere Frames eingefügt werden, wird das Popup-Fenster mit den Importoptionen nicht angezeigt.
Du kannst Elemente sowohl als separate Ebenen als auch innerhalb einer Gruppe in die Arbeitsfläche einfügen. Beim Importieren mehrerer Elemente bleiben die Abstände unverändert.

Wenn beispielsweise der Abstand zwischen einer Schaltfläche und Text in Figma 40 px betrug, werden diese Elemente Tilda denselben Abständen und derselben Position zueinander in Tilda importiert.
Einfügen von Ebenen aus Figma über die API
Mehr lesen
Mehr lesen
Mehr lesen
Wie man ein Figma API-Zugangs-Token erhält
Gehen Sie zur Figma-Hauptseite und klicken Sie unter Ihrem Profilbild auf Profil anzeigen → Einstellungen.
In Figma: "Settings" in the account menu in the top-left corner.
Gehen Sie dann auf die Registerkarte Sicherheit, gehen Sie zum Block Persönliche Zugangstoken und klicken Sie auf Neues Token generieren.
In Figma settings: the "Security" tab and the "Generate new token" link in the "Personal access tokens" section.
Geben Sie im neuen Fenster den Namen des Tilda an und wählen Sie dessen Gültigkeitsdauer aus. Zum Beispiel 1 Tag, 7 Tage, 30 Tage und 90 Tage.

Aktivieren Sie im Bereich „Scopes“ die Kontrollkästchen „Aktueller Benutzer“, „Entwicklerressourcen“, „Dateiinhalte“, „Dateiversionen“, „Bibliotheksressourcen“, „Bibliotheksinhalte“ und „Projekte“. Klicken Sie nun auf „Token generieren“.
In Figma, the "Token name" field, "Expiration" dropdown, "Scopes" checkboxes, and the "Generate token" button in the "Generate new token" pop-up window.
Kopiere diesen Schlüssel, nachdem du ihn erstellt hast, um ihn in den Importeinstellungen in Tilda anzugeben. Du kannst den Schlüssel nicht erneut anzeigen; erstelle einfach einen neuen Schlüssel.
In Figma settings under the "Security" tab: the generated personal access token in the "Personal access tokens" section.
Wie importiert man ein Layout in Zero Block
Klicken Sie in Zero Block auf das Menü mit den drei Punkten Zero Block wählen Sie die Option „Aus Figma importieren“.
Zero Block: the "Import from Figma" option in the three dots drop-down menu in the top-right corner.
Gehe zu Figma. Öffne das Layout, wähle den gewünschten Frame aus und kopiere den Frame-Link aus der Adressleiste des Browsers.
In Figma: "Copy link to selection" in the "Copy/Paste as" context menu for the selected frame.
Damit der Import korrekt funktioniert, müssen Sie einen Figma-Frame zu einem Zero Block hinzufügen
Fügen Sie in dem sich öffnenden Fenster den Link zum Frame sowie den API-Token hinzu, den Sie in den Figma-Einstellungen erhalten haben.
In the Figma import modal window, the "Learn more" drop-down link under "Import via API token".
The "LAYOUT URL" and "API TOKEN" fields in the modal window for importing layouts from Figma.
Warten Sie, bis das Layout importiert ist.
Zero Block: the "Importing..." button in the Figma import pop-up window with filled "LAYOUT URL" and "API TOKEN" fields.
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.
In Zero Block: an imported layout on the canvas with the "Artboard Settings (Flex)" panel on the right.
Beachte, dass Bilder standardmäßig von den Figma-Servern geladen werden. Wenn du sie also auf Tilda hochladen möchtest, musst du in den Einstellungen der Elemente, die Bilder enthalten, auf „Auf Tilda hochladen“ klicken.
In the Zero Block editor: the "Upload to Tilda" button under "BACKGROUND IMAGE" in the element settings panel on the right.
Layoutanforderungen und Importfunktionen
Layout
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 einem einzigen Block hinzuzufügen.
Elementgruppen
Jede Gruppe kann als Bild importiert werden. Dazu musst du im Namen „image“ angeben. Wenn du „svg“ angibst, wird sie als SVG-Datei importiert.

Du kannst auch Gruppen importieren. Wenn sich darin weitere Gruppen befinden, werden alle Elemente in die Gruppe der ersten Ebene verschoben.
Formen und Schaltflächen
Um eine Schaltfläche zu importieren, müssen Sie die Form und den Text zu einer Gruppe zusammenfassen und „Schaltfläche“ in den Namen einfügen. Da auch die Eigenschaft zur Textausrichtung importiert wird, empfehlen wir Ihnen, die Breite des Textelements an die der Form anzupassen.

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