Video-Tutorial: Figma in Adobe XD konvertieren
Dieses Video zeigt, wie du deine Designs mit dem Plugin Convertify direkt in Figma automatisch (mit einem Klick) in Adobe-XD-Dateien konvertierst.
Um deine Designs aus Figma für Adobe XD zu exportieren, folgst du den Schritten zum Konvertieren, Herunterladen und Öffnen deiner .xd-Datei.
Adobe XD installieren Wenn du Mac oder Windows nutzt und ein kostenpflichtiges Adobe-CC-Konto hast, kannst du Adobe XD über Creative Cloud installieren (oder den .dmg-Installer direkt hier herunterladen) und es dann auf deinem Computer ausführen. Den eigenständigen Installer für Windows findest du ebenfalls online.
Eine einzelne Figma-Seite für Adobe XD auswählen
Sobald das Plugin Convertify läuft, klick auf den Tab Export from Figma, wähle in der Workflow-Auswahl Export Figma to Adobe XD und wähle dann die Figma-Seite aus, die du in Adobe XD konvertieren möchtest.
Das Plugin exportiert automatisch die Figma-Seite, die du gerade ansiehst. Um eine andere Seite zu exportieren, klick in Figma in der linken Spalte unter der Überschrift Pages auf eine beliebige Seite deiner Figma-Datei.
Wenn du deine Figma-Seite ausgewählt hast, konvertierst du dein Design in Adobe XD, indem du im Plugin Convertify auf Export This Page klickst. Damit startet die automatische Konvertierung.
Zeitschätzungen. Die Zeitschätzung (zum Beispiel ~14 seconds to convert 555 layers) basiert auf der Anzahl der Ebenen auf deiner Figma-Seite und zeigt dir ungefähr, wie lange die Konvertierung dauert. Beachte, dass Figma-Seiten mit großen Bildern wahrscheinlich mehr Zeit brauchen, bis die Konvertierung in deine Adobe-XD-Datei abgeschlossen ist.
Adobe XD unterstützt keine Dokumente mit mehreren Seiten. Hinweis: Die Auswahl mehrerer Seiten gilt nur für Sketch-Exporte, weil die App Adobe XD derzeit nur Dateien mit einer einzigen Seite unterstützt.
Ausgewählte Figma-Frames deiner Seite nach XD exportieren
Wenn du nicht die ganze Figma-Seite in Adobe XD konvertieren möchtest, kannst du auch nur bestimmte Frame-Ebenen deines Figma-Designs konvertieren: Wähle die Figma-Frames aus, die du konvertieren möchtest, und klick dann im Plugin Convertify auf Export Selected Frames. Damit startet die automatische Konvertierung.
Zeitschätzungen. Die Zeitschätzung (zum Beispiel ~14 seconds to convert 555 layers) basiert auf der Anzahl der Ebenen auf deiner Figma-Seite und zeigt dir ungefähr, wie lange die Konvertierung dauert. Beachte, dass Figma-Seiten mit großen Bildern wahrscheinlich mehr Zeit brauchen, bis die Konvertierung in deine Adobe-XD-Datei abgeschlossen ist.
Deine .xd-Datei herunterladen
Wenn Convertify deine Figma-Seite fertig verarbeitet hat, siehst du eine Bestätigung. Klick auf Download .xd, um deine .xd-Datei herunterzuladen.
Downloads aus Figma speichern Wenn du die Desktop-App von Figma nutzt, erscheint eine Aufforderung zum Herunterladen deiner Datei. Wenn du Figma dagegen im Webbrowser nutzt, wird deine Datei standardmäßig automatisch auf deinen Computer heruntergeladen (meist in den Ordner Downloads).
Deine .xd-Datei öffnen
Wenn du deine .xd-Datei aus Figma auf deinen Computer heruntergeladen hast, öffne im Dateimanager den Ordner, in dem sie gespeichert wurde. Ein Doppelklick auf die exportierte .xd-Datei öffnet sie in der Version von Adobe XD, die auf deinem Computer installiert ist.
Exportoptionen für Adobe XD einstellen
Bevor du deine Designs aus Figma nach Adobe XD exportierst, kannst du einige optionale Einstellungen vornehmen, die nützlich sein können.
Ebenen mit dem Präfix * als Bilder rendern
Wenn du den Schalter Render layers with * prefix (eg. "* Frame") as images aktivierst, werden alle Figma-Ebenen, deren Name mit „*“ beginnt (zum Beispiel „*Frame 1“), automatisch als Bildebenen statt mit ihrem normalen Ebenentyp exportiert.
Referenzbilder als Overlay über Artboards einfügen
Wenn du den Schalter Include reference image overlays for artboards aktivierst, wird über jedes Artboard in deiner exportierten Datei automatisch ein Referenzbild mit einer Ebenendeckkraft von 50 % gelegt. Das kann bei manuellen Korrekturen oder beim Feinjustieren der Ebenenpositionen helfen.
Alle untergeordneten Ebenen von Figma-Artboards entgruppieren
Wenn du den Schalter Ungroup all Figma artboard child layers aktivierst, werden alle „Group“-Ebenen in deiner Figma-Datei automatisch entgruppiert.
Genauere Positionierung für installierte Schriften
Adobe XD unterstützt Texteigenschaften wie die vertikale Textausrichtung nicht und berechnet Zeilenhöhen anders als Figma.
Wenn du den Schalter More accurate positioning for installed fonts (slower) aktivierst, werden deine Figma-Textwerte genauer für XD exportiert (für alle Schriften im Design, die auf deinem Rechner installiert sind).
Längere Konvertierungszeiten. Hinweis: Mit der Option More accurate positioning for installed fonts (slower) kann die Konvertierung deutlich langsamer sein als sonst (je nach Anzahl der Textebenen).
Unterschiede zwischen Figma und Adobe XD
Convertify versucht, alle deine Ebenen und Attribute möglichst vollständig von Figma nach Adobe XD zu übertragen. Weil Adobe XD aber weniger native Funktionen unterstützt als Figma, gibt es natürliche Grenzen.
Figma-Funktionen, die in Adobe XD fehlen
Diese Funktionen gibt es in Figma, aber nicht nativ in Adobe XD. Deshalb übernimmt das Plugin Convertify sie nicht.
- Ausblenden übergeordneter Artboards
- Gedrehte übergeordnete Artboards
- Ellipsen mit „Arc“-Eigenschaften
- Mehrere Füllungen oder Konturen auf einer Ebene
- Vektorebenen mit Eckenradius
- Konturen oder Füllungen auf Gruppen
- Vertikale Ausrichtung von Textebenen
- Verschachtelte Ebenenmasken
Unterstützte Prototyp-Links in Adobe XD
Beachte, dass Prototypen in Adobe XD nur die Interaktionen On Click, On Drag und Key/Gamepad unterstützen.
Außerdem unterstützt Adobe XD die Navigationsarten Navigate To, Open Overlay, Scroll To und Back.
Convertify überträgt nur die Prototyp-Links aus Figma, die diesen in Adobe XD unterstützten Prototyp-Attributen entsprechen.
Weitere Anleitungen zu Convertify
- Folge dem Schritt-für-Schritt-Tutorial von Figma zu Adobe XD.
- Setz den Workflow fort und exportiere Figma-Designs nach Adobe After Effects.
- Entdecke das Figma-Plugin Convertify für weitere Import- und Exportformate.