Hilfe von Wix
Start
Artikelbibliothek
Deine Website erstellen
Using Wix Headless

Wix Headless: Eine Website aus Figma veröffentlichen

6 Min.

Veröffentliche deine Figma-Designs mit dem Plug-in Figma to Wix Headless als Live-Website. Wähle deine Frames aus, veröffentliche sie und erhalte eine Adresse von Wix. Du kannst sie auf jedem Gerät öffnen und mit Kunden oder Teammitgliedern teilen.

Bevor du loslegst:

Du benötigst die Desktop-App von Figma oder Figma in deinem Browser. Außerdem muss eine Figma-Design-Datei geöffnet sein.

Schritt 1 | Das Plug-in in Figma öffnen

Öffne das Plug-in Figma to Wix Headless in der Figma-Datei, die du veröffentlichen möchtest.

Um das Plug-in zu öffnen:

  1. Öffne die entsprechende Design-Datei in Figma.

  2. Öffne den Bereich Plug-ins und klicke auf Plug-ins verwalten.

  3. Suche nach „Figma to Wix Headless“ und wähle das Plug-in aus.

  4. Klicke auf Ausführen.

Ein Screenshot einer Arbeitsfläche in Figma mit ausgewählter Option „Plug-ins verwalten“.
Tipp:

Du kannst das Plug-in auch über die Figma-Community-Seite öffnen:

  1. Klicke auf Öffnen in.

  2. Wähle deine Datei aus.

Schritt 2 | Deine Seiten auswählen

Wähle die Frames aus, die du veröffentlichen möchtest. Jeder ausgewählte Frame auf der obersten Ebene wird zu einer Seite deiner Website.

Um deine Seiten auszuwählen:

  1. Wähle auf der Arbeitsfläche die Frames der obersten Ebene aus, die du veröffentlichen möchtest. Wähle einen Abschnitt aus, um alle darin enthaltenen Frames einzuschließen.

  2. (Optional) Deine Website-Seiten ordnen:

    • Um deine Startseite festzulegen: Fahre mit der Maus über eine Seite in der Liste Seiten und klicke auf Startseite. Wenn ein Frame bereits „Home“ heißt, wählt das Plug-in ihn automatisch aus.

    • Um die Adresse einer Seite zu ändern: Bearbeite die URL im Feld unter dem Seitennamen. Damit legst du den Pfad der Seite innerhalb deiner Website-Adresse fest, zum Beispiel „/ueber-uns.html“.

Tipp:

Benenne deine Ebenen in Figma mit „h1“ bis „h6“, „header“, „nav“, „footer“ oder „section“. Suchmaschinen und Screenreader nutzen diese Namen, um deine Website zu verstehen. Wenn du das nicht tust, dient der größte Text auf jeder Seite als Hauptüberschrift.

Ein Screenshot des Bereichs „Seiten“ im Plug-in mit ausgewählter Startseite.

Schritt 3 | Deine Website veröffentlichen und in der Vorschau ansehen

Veröffentliche deine Seiten, um eine Live-Adresse zu erhalten. Du kannst sie auf jedem Gerät öffnen und teilen. Deine Website bleibt eine Stunde lang live. Im Plug-in-Panel siehst du, wie viele Minuten dir noch bleiben.

Wichtig:

Die veröffentlichte Website ist nur vorübergehend verfügbar. Prüfe damit, wie deine Website auf verschiedenen Geräten aussieht und funktioniert. Um sie dauerhaft zu speichern, folge der Anleitung in Schritt 4 und speichere sie in deinem Konto von Wix.

Um deine Website zu veröffentlichen:

  1. Klicke Auf Wix veröffentlichen im Figma-Plug-in.

  2. Sobald deine Website live ist, kannst du Folgendes tun:

    • Website öffnen: Sieh dir deine Website in einem neuen Browser-Tab an.

    • Link kopieren: Kopiere die Adresse deiner Website, um sie zu teilen.

    • ZIP-Datei herunterladen: Lade die HTML-Dateien deiner Website als ZIP-Datei herunter.

  3. (Optional) Aktualisiere deine Website weiter in Figma, bevor du sie in einem Konto von Wix speicherst.

    1. Bearbeite dein Design in Figma.

    2. Wähle die Rahmen (Frames) erneut aus.

    3. Klicke auf Website aktualisieren.

Ein Screenshot des Plug-ins Figma to Wix Headless mit der ausgewählten Option „Seiten auf Wix veröffentlichen“.

Schritt 4 | Deine Website in deinem Konto von Wix speichern

Speichere deine Website in deinem Konto von Wix. So bleibt sie live und du kannst sie über deine Website-Verwaltung verwalten.

Um deine Website zu speichern:

  1. Klicke im Figma-Plug-in auf Diese Website behalten.

  2. Melde dich in deinem Konto von Wix an. Wenn du noch kein Konto hast, registriere dich für ein kostenloses Konto von Wix.

  3. (Optional) Verwalte deine neue Website über deine Website-Verwaltung weiter:

    • Domain verbinden: Verbinde deine eigene Domain anstelle der kostenlosen Adresse von Wix.

    • Live-Website ansehen: Öffne deine Live-Website.

    • Mit KI bearbeiten: Ändere deine Website und füge Funktionen für dein Unternehmen hinzu.

Ein Screenshot des Plug-ins Figma to Wix Headless mit der ausgewählten Option „Diese Website behalten“.

Schritt 5 | (Optional) Funktionen für dein Unternehmen mit KI hinzufügen

Verwende ein KI-Tool wie ChatGPT, Claude, Claude Code, Cursor oder Codex, um dein Design zu aktualisieren. Du kannst auch Business-Lösungen von Wix wie Wix Stores, Wix Bookings und Wix Payments hinzufügen.

Um Funktionen mit KI hinzuzufügen:

  1. Klicke in deiner Website-Verwaltung von Wix auf Frontend bearbeiten.

  2. Klicke auf Prompt kopieren.

  3. Füge den Prompt in dein KI-Tool ein.

  4. Teile dem KI-Tool mit, was du an deiner Website ändern oder hinzufügen möchtest. Erfahre hier mehr darüber, wie du mit KI-Tools eine Headless-Website erstellst.

Ein Screenshot der Optionen zum Bearbeiten einer Headless-Website mit KI in der Website-Verwaltung von Wix.

Häufig gestellte Fragen (FAQs)

Klicke unten auf eine Frage, um mehr darüber zu erfahren, wie du eine Website aus Figma veröffentlichst.