Kostenlos starten
Dokumentationsmenü

Aus Figma konvertieren

Schritt für Schritt: Verwandle eine Figma-Datei oder einen Frame mit Link und persönlichem Zugriffstoken oder einem exportierten JSON in WordPress-Inhalt.

Figma steht in allen Tarifen zur Verfügung, auch in Free. Du kannst dich mit einem Link und einem persönlichen Zugriffstoken verbinden oder das aus Figma exportierte JSON hochladen.

Eine Seite oder ein Frame pro Projekt

Tapeto konvertiert die erste Seite der Figma-Datei – oder nur den einzelnen Frame, wenn dein Link auf einen verweist. Um eine Website mit mehreren Seiten zu konvertieren, lege ein Projekt pro Frame an (kopiere den Link jedes Frames). Jedes Projekt zählt auf dein Monatslimit.

Bevor du beginnst

  • Eine Figma-Datei, die du öffnen kannst (mindestens Leserechte).
  • Ein persönliches Zugriffstoken von Figma (nur für die Link-Methode).
  • Deine WordPress-Website, falls du veröffentlichst: siehe die ZIP- / HTML-Anleitung.

Schritt 1 — Design in Figma vorbereiten

Tapeto liest die Ebenenstruktur, ein aufgeräumtes File ergibt also einen besseren Fidelity Score.

  1. Baue jede Seite als Frame in Desktop-Breite.
  2. Nutze wo möglich Auto Layout: Horizontales und vertikales Auto Layout wird zu Zeilen und Spalten mit ihren Abständen und Innenabständen.
  3. Benenne deine Ebenen nach ihrer Funktion – Header, Hero, Nav, Card, Button, Footer, H1, H2 … Die Namen helfen Tapeto zu entscheiden, was ein Abschnitt, ein Menü oder ein Button ist.
  4. Schreibe Text als echte Textebenen (nicht als Konturen) und verwende Schriften, die bei Google Fonts verfügbar sind.
  5. Lösche Ebenen, die du nicht brauchst, oder lass sie weg: Ausgeblendete Ebenen werden übersprungen.

Schritt 2 — Projekt erstellen

Methode A — Link und Token

  1. Klicke in Figma mit rechts auf den Frame → Copy/Paste as → Copy link to selection (oder kopiere die Datei-URL, um die erste Seite zu konvertieren).
  2. Erstelle ein Token: Figma → Profilmenü → Settings → Security → Personal access tokens → Generate new token. Lesezugriff auf den Dateiinhalt genügt. Kopiere es (es beginnt mit figd_).
  3. Klicke in Tapeto auf Neues Projekt, gib einen Namen ein und öffne den Tab Figma.
  4. Füge den Link bei URL der Figma-Datei oder des Frames und das Token bei Persönliches Zugriffstoken von Figma ein.
  5. Klicke auf Projekt erstellen.

Das Token wird einmal zum Herunterladen der Datei verwendet und nie gespeichert. Der Link muss wie https://www.figma.com/design/… aussehen.

Methode B — JSON hochladen

  1. Exportiere das JSON der Datei über die Figma-REST-API (GET /v1/files/:file_key mit deinem Token) und speichere es als .json-Datei mit bis zu 5–200 MB (je nach Tarif).
  2. Klicke in Tapeto auf Neues Projekt, öffne den Tab Figma und ziehe die .json in den Bereich unten.
  3. Klicke auf Projekt erstellen.

Warte, bis das Projekt „verarbeitet“ ist. Endet es mit „Fehler“, nennt dir die Meldung den Grund (siehe Tabelle unten).

Schritt 3 — Builder wählen und konvertieren

  1. Öffne das Projekt und wähle Gutenberg (alle Tarife) oder Elementor (ab Starter).
  2. Klicke auf Konvertieren und warte, bis die Konvertierung abgeschlossen ist.
  3. Prüfe die Vorschau und den Fidelity Score. Kontrolliere die Bilder: Fehlt eines, ersetze es nach dem Import über die Mediathek.

Schritt 4 — Das Ergebnis in WordPress übernehmen

Free-Konto

  1. Öffne den Tab Inhalt und klicke auf Dateien herunterladen (oder Kopieren).
  2. In WordPress: Seiten → Neu hinzufügen, Drei-Punkte-Menü → Code-Editor, Inhalt einfügen, dann zurück zum visuellen Editor.
  3. Hat das Design Header oder Footer, lade sie im Tab Header / Footer / Sidebar herunter und füge sie in die passenden Template-Teile ein.
  4. Der Tab Anleitung listet die genauen Schritte auf. WXR exportieren und In WordPress veröffentlichen sind in Free gesperrt.

Bezahl-Konto (Starter, Pro, Agency, Studio)

  1. Wähle Elementor, wenn du es bevorzugst (ab Starter).
  2. Klicke auf WXR exportieren und importiere es über Werkzeuge → Daten importieren → WordPress, oder verbinde deine Website und klicke auf In WordPress veröffentlichen. Beide Optionen sind in der ZIP- / HTML-Anleitung Schritt für Schritt erklärt.
  3. Beim Veröffentlichen wird die Seite als Entwurf zur Prüfung angelegt.
  4. Bei Agency und Studio kann das WXR zusätzlich im Design erkannte Custom Post Types und Loops enthalten.

Wenn etwas fehlschlägt

Meldung Ursache Was zu tun ist
Figma hat das Token abgelehnt oder du hast keinen Zugriff Falsches Token, oder die Datei ist nicht mit dir geteilt Erzeuge ein neues Token und prüfe, ob du die Datei öffnen kannst
Datei nicht gefunden Der Link ist falsch Kopiere den Link erneut aus Figma
Figma hat die Anfragen begrenzt Zu viele Anfragen in kurzer Zeit Warte eine Minute und versuche es erneut
Die URL muss wie figma.com/design/… aussehen Der Link gehört nicht zu einer Figma-Datei Nutze einen Link, der mit https://www.figma.com/design/ beginnt
JSON nicht erkannt Die Datei ist kein Figma-Export Exportiere sie erneut über die REST-API

Nächster Schritt

Lies Ergebnisse exportieren für alle Wege, die Ausgabe nach WordPress zu bringen.