Studio Editor: Deine Designs aus Figma exportieren
9 Min. Lesezeit
Verwendest du Figma, um Abschnitte und Elemente zu gestalten? Mit dem Wix-Studio-Plug-in kannst du deine statischen Designs mit einem optimierten Prozess in eine responsive Live-Website verwandeln. Du kannst ganze Figma-Frames, bestimmte Komponenten und Abschnitte importieren oder unsere Wireframes (UI-Kits) verwenden.
In Studio kannst du deine Designs mit Animationen ohne Code, benutzerdefiniertem CSS, der Verknüpfung zu Unternehmenslösungen wie Wix Stores und vielem mehr verbessern.
- Wir empfehlen, Figma und den Studio Editor in separaten Browser-Tabs geöffnet zu lassen, da du beide für diesen Prozess benötigst.
- Du bist mitten im Prozess und benötigst Hilfe? Lies unsere FAQs und unsere Schritte zur Fehlerbehebung unten.
Schritt 1 | Den Export vorbereiten
Bevor du versuchst, Designs aus Figma zu importieren, solltest du einige Dinge überprüfen. Dadurch wird ein nahtloser Übergang von Figma zu Wix Studio gewährleistet.
a | Benutzerdefinierte Schriftarten in Wix Studio hochladen
Stelle sicher, dass alle Schriftarten, die du auf Figma verwendest, auch in deinem Konto bei Wix verfügbar sind. Es ist besser, vorher die Schriftarten hochzuladen. Andernfalls ersetzen Systemschriftarten die Schriftarten, die du anzeigen wolltest.
b | Die Rahmenbreite mit der Bearbeitungsgröße vergleichen
Die Rahmenbreite von Figma sollte mit der Bearbeitungsgröße der entsprechenden Seite der Website deines Kunden übereinstimmen. Wenn es eine Nichtübereinstimmung gibt, wird dein Design nicht im gleichen Verhältnis exportiert, das bedeutet, dass es in Wix Studio nicht in den richtigen Proportionen angezeigt wird.
Du möchtest Elemente exportieren?
Du solltest trotzdem die Breite des Rahmens prüfen, der sie enthält, um ein 1:1-Ergebnis zu gewährleisten.
Schritt 2 | Das Plugin installieren und die Figma-Datei verknüpfen
Wenn du es noch nicht getan hast, öffne die Figma-Community-Seite und installiere das Wix-Studio-Plug-in. Nach der Installation kannst du von jedem Design, an dem du arbeitest, mit der rechten Maustaste klicken.
Kopiere als Nächstes den Link der Figma-Datei und kehre zurück zum Editor, wo du ihn mit der Website deines Kunden verknüpfen kannst.
a | Das Plug-in auf Figma installieren
- Öffne die Seite mit dem „Figma to Wix Studio“-Plug-in.
- Füge das Plugin zu deinem Figma-Konto hinzu.
- Öffne die Figma-Datei, die den Rahmen enthält, den du exportieren möchtest.
- Kopiere die URL deiner Figma-Datei.
b | Die Figma-Datei mit der Website deines Kunden verknüpfen
- Öffne im Editor die Website deines Kunden.
- Klicke oben links auf das Symbol für Wix Studio
- Fahre mit der Maus über Tools.
- Klicke auf Aus Figma importieren.
Tipp: Dadurch wird auf der linken Seite des Editors ein neues Symbol
hinzugefügt. - Füge die URL deiner Figma-Datei ein und klicke auf Verknüpfen.
- (Nur beim ersten Mal) Klicke auf Allow Access (Zugriff erlauben), um die Verknüpfung der Datei abzuschließen.
Schritt 3 | Auswählen, was du von Figma exportieren möchtest
Nachdem du das Plug-in installiert hast, suche die entsprechende Designdatei in deinem Figma-Konto. Mit dem Plug-in kannst du auswählen, was du exportieren möchtest, einen Rahmen oder deine Stile.
Wir empfehlen, zuerst deine Stile zu exportieren (z. B. Typografie und Farben), sodass sie bereits im Studio Editor eingerichtet sind, wenn du mit dem Exportieren von Rahmen beginnst.
Welche Elemente erkennt das Plug-in automatisch?
Um aus Figma zu exportieren:
- Öffne die entsprechende Figma-Datei.
- Öffne das Studio-Plug-in:
- Klicke auf das Symbol für Figma
, um das Hauptmenü zu öffnen. - Fahre mit der Maus über Plug-ins und klicke auf Figma to Wix Studio.
- Klicke auf das Symbol für Figma
- Klicke auf Set up Export (Export einrichten.
- Aktiviere das Kontrollkästchen Ich habe meine Datei verknüpft und klicke auf Weiter.
- Überprüfe, ob die Bearbeitungsgröße in Wix Studio mit der Rahmenbreite von Figma übereinstimmt. Wenn du fertig bist, klicke auf Export starten.
- Wähle aus, was du exportieren möchtest, und folge den Schritten:
Stile
Rahmen
Schritt 4 | Den Import im Editor abschließen
Nachdem du die Stile und Rahmen ausgewählt hast, die du exportieren möchtest, kehre im Editor zur Website deines Kunden zurück. Du wirst feststellen, dass im Panel „Aus Figma importieren“ jetzt deine Auswahl angezeigt wird.
Achte darauf, dass keine Schriftarten fehlen und die Größe übereinstimmt, und wähle dann aus, ob der Rahmen als Container, Abschnitt usw. importiert werden soll.
Um den Import abzuschließen:
- Öffne im Editor die Website deines Kunden.
- (Falls noch nicht geöffnet) Klicke auf der linken Seite auf das Symbol für Aus Figma importieren .
- Führe die folgenden Schritte aus, je nachdem, was du importieren möchtest:
Stile
Rahmen
Häufig gestellte Fragen (FAQs)
Klicke unten auf eine Frage, um mehr über das Importieren von Designs aus Figma zu erfahren.
Kann ich Designs aus Figma in eine vorhandene Website importieren?
Kann ich mehrere Seiten gleichzeitig importieren?
Verknüpfen meine Figma-Designs automatisch über Apps von Wix (z. B. Wix Stores)?
Was passiert beim Importieren von Menüs, Formularen und Buttons? Funktionieren sie auf der Website meines Kunden?
Wie sieht mein importiertes Design über Breakpoints hinweg aus?
Wenn ich nach dem Import in Studio weitere Änderungen an meinem Figma-Design vornehme, werden diese dann automatisch synchronisiert?
Kann ich Designs andersherum exportieren, also von Wix Studio zu Figma?
Fehlerbehebung
Hast du Probleme beim Exportieren deiner Figma-Designs zu Wix Studio? Klicke unten auf ein Problem, um zu erfahren, was es verursacht hat und wie du es beheben kannst.
(Auf Figma) Beim Exportieren werden keine Stile im Panel angezeigt
(Im Editor) Die Option zum Hinzufügen eines Rahmens als Seite oder Abschnitt wird nicht angezeigt
(Im Editor) Das Design sieht nach dem Importieren nicht mehr proportional aus
Benötigst du weitere Hilfe?
Wenn das Problem weiterhin besteht, kontaktiere uns mit den untenstehenden Informationen:
- Figma-URL des entsprechenden Projekts
Hinweis: Achte darauf, dass das Projekt als öffentlich festgelegt ist, damit unser Team es sehen kann. - Video oder Screenshot des spezifischen Problems
- (Wenn sich das Problem auf einen bestimmten Rahmen bezieht) Name des Rahmens, wie er im Ebenen-Panel von Figma angezeigt wird
War das hilfreich?
|