Figma nach Adobe After Effects exportieren

Exportiere Figma-Designs als Adobe-XD-Datei für Workflows in After Effects und lege die Exportoptionen fest.

Video-Tutorial: Figma in Adobe After Effects konvertieren

Dieses Video zeigt, wie du deine Designs mit dem Convertify-Plugin direkt aus Figma mit einem Klick automatisch für After Effects konvertierst.

Um deine Designs aus Figma für Adobe After Effects zu exportieren, konvertierst du sie in eine .xd-Datei, lädst sie herunter und öffnest sie. Anschließend kannst du sie aus Adobe XD nach Adobe After Effects exportieren.

Eine einzelne Figma-Seite für Adobe After Effects konvertieren ​

Sobald das Convertify-Plugin läuft, klick auf den Tab Export from Figma, wähl in der Workflow-Auswahl Export Figma to Adobe After Effects und wähl dann die Figma-Seite aus, die du für Adobe After Effects 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 die gewünschte Seite deiner Figma-Datei.

Nachdem du deine Figma-Seite ausgewählt hast, klick im Convertify-Plugin auf Export This Page, um dein Design in eine Adobe-XD-Datei zu konvertieren (die du dann nach After Effects exportierst). Damit startet die automatische Konvertierung.

Geschätzte Dauer Die geschätzte Dauer (zum Beispiel ~14 seconds to convert 555 layers) richtet sich nach der Anzahl der Ebenen auf deiner Figma-Seite und gibt dir einen Anhaltspunkt, wie lange die Konvertierung dauert. Beachte, dass Figma-Seiten mit großen Bildern die Konvertierung in eine Adobe-XD-Datei wahrscheinlich verlängern.

Adobe XD unterstützt keine Dokumente mit mehreren Seiten. Die Auswahl mehrerer Seiten gilt nur für Exporte nach Sketch, da die Adobe-XD-App 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 eine Adobe-XD-Datei konvertieren möchtest (um sie dann nach After Effects zu exportieren), kannst du stattdessen einzelne Frame-Ebenen deines Figma-Designs nach Adobe XD konvertieren. Wähl dazu die gewünschten Figma-Frames aus und klick im Convertify-Plugin auf Export Selected Frames. Damit startet die automatische Konvertierung.

Adobe XD unterstützt keine Dokumente mit mehreren Seiten. Die Auswahl mehrerer Seiten gilt nur für Exporte nach Sketch, da die Adobe-XD-App derzeit nur Dateien mit einer einzigen Seite unterstützt.

Deine .xd-Datei für den Export nach After Effects herunterladen ​

Wenn Convertify deine Figma-Seite verarbeitet hat, erscheint eine Bestätigung. Mit einem Klick auf Download .xd (for exporting to AE) lädst du deine .xd-Datei herunter.

Nachdem du deine .xd-Datei aus Figma auf deinen Computer heruntergeladen hast, öffne im Dateimanager den Ordner, in dem sie gespeichert wurde. Mit einem Doppelklick auf die exportierte .xd-Datei öffnest du sie in der Version von Adobe XD, die auf deinem Computer installiert ist.

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).

Dein Zeichenbrett aus Adobe XD nach After Effects exportieren ​

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.

Nachdem du deine .xd-Datei in Adobe XD geöffnet hast, kannst du Zeichenbretter nativ nach After Effects exportieren: Klick auf ein Zeichenbrett deiner Seite (das du in After Effects verwenden möchtest) und dann auf File → Export → After Effects.

Wenn XD dein Zeichenbrett nicht nach After Effects exportiert, aktiviere zuerst das Kontrollkästchen Mark for Export im rechten Seitenbereich.

Deine exportierten Ebenen in After Effects ansehen ​

Nachdem du in Adobe XD für dein ausgewähltes Zeichenbrett auf File → Export → After Effects geklickt hast, öffnet sich auf deinem Computer automatisch die App Adobe After Effects (stell sicher, dass sie installiert ist) und exportiert das ausgewählte Zeichenbrett mit allen Ebenen nativ aus Adobe XD in deine After-Effects-Zeitleiste.

Sobald der Export abgeschlossen ist, kannst du deine neue After-Effects-Datei speichern, Adobe XD schließen und an deinem Motion Design weiterarbeiten. Alle Ebenen aus deiner ursprünglichen Figma-Datei stehen dir jetzt in After Effects zum Animieren zur Verfügung.

Exportoptionen für Adobe After Effects festlegen ​

Bevor du deine Designs aus Figma nach Adobe After Effects exportierst (über den Import einer .xd-Datei), 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 als ihr normaler Ebenentyp exportiert.

Referenzbilder als Overlay über Zeichenbrettern einfügen ​

Wenn du den Schalter Include reference image overlays for artboards aktivierst, wird in deiner exportierten Datei über jedem Zeichenbrett automatisch ein Referenzbild davon mit einer Deckkraft von 50 % eingefügt. Das hilft dir bei manuellen Anpassungen oder beim Feinjustieren der Ebenenpositionen.

Alle untergeordneten Ebenen von Figma-Zeichenbrettern entgruppieren ​

Wenn du den Schalter Ungroup all Figma artboard child layers aktivierst, werden alle Ebenen vom Typ „Group“ in deiner Figma-Datei automatisch entgruppiert.

After-Effects-Kompositionen skalieren ​

Wenn du eine Option unter Scale Comps wählst, werden deine vorhandenen Figma-Zeichenbretter automatisch auf einen Faktor von @0.25x - @4x skaliert (Standard ist @1x, damit bleibt die Größe deiner Designs unverändert). So werden deine Kompositionen hoch- oder herunterskaliert, wenn du die konvertierte .xd-Datei nach After Effects exportierst.

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 Textwerte aus Figma genauer für XD exportiert (für alle Schriften im Design, die auf deinem Rechner installiert sind).

Längere Konvertierungszeiten. Beachte, dass die Option More accurate positioning for installed fonts (slower) die Konvertierung deutlich verlangsamen kann (je nach Anzahl der Textebenen).

Unterschiede zwischen Figma und After Effects verstehen ​

Convertify konvertiert so gut wie möglich alle deine Ebenen und Attribute aus Figma nach Adobe XD, damit du sie nach After Effects exportieren kannst. Es gibt jedoch einige natürliche Einschränkungen, weil Adobe XD weniger native Funktionen unterstützt als Figma.

Figma-Funktionen, die in Adobe XD fehlen (und daher nicht aus XD nach After Effects exportiert werden) ​

Diese Funktionen gibt es in Figma, aber nicht nativ in Adobe XD. Deshalb werden sie beim Export nicht nach After Effects übernommen.

  • Ausgeblendete übergeordnete Zeichenbretter
  • Gedrehte übergeordnete Zeichenbretter
  • Ellipsen mit „Arc“-Eigenschaften
  • Mehrere Füllungen/Konturen auf einer Ebene
  • Vektorebenen mit Eckenradius
  • Konturen/Füllungen auf Gruppen
  • Vertikale Ausrichtung von Textebenen
  • Verschachtelte Ebenenmasken