Video-Tutorial: Banner aus Figma als MP4-Videos exportieren
Dieses Video zeigt, wie du mit dem Plugin Bannerify produktionsreife animierte Banner aus Figma als MP4-Videos exportierst.
Nachdem du auf Export to GIF/Video geklickt und deine Exporteinstellungen festgelegt hast, klickst du unten im Export-Panel auf Export MP4 (n Banners), um den Export deiner Banner aus Figma als MP4 zu starten. Deine animierten Banner werden dabei als h264-codierte MP4-Videos exportiert.
Browser-Unterstützung. Wegen Kompatibilitätsproblemen der Browser lassen sich MP4-Videos nur mit Chrome oder der Figma-Desktop-App exportieren.
MP4s werden automatisch optimiert. MP4-Videoexporte werden automatisch so optimiert, dass du die beste Qualität bei möglichst kleiner Dateigröße erhältst.
Banner in den Export aufnehmen oder davon ausschließen. Standardmäßig werden alle Ebenen der obersten Ebene in deiner Figma-Datei, die als Banner in Bannerify geladen sind, in den Export aufgenommen. Wenn du Banner vom Export ausschließen willst (ohne die ausgewählten Banner neu zu laden), stellst du den Schalter Include In Export im Zeitleisten-Header des jeweiligen Banners auf „aus“. Dadurch wird die Zeitleiste dieses Banners ausgeblendet und das Banner von allen Exporten ausgeschlossen.
Bildrate (Frames Per Second)
Mit den Optionen im Auswahlfeld Frames Per Second kannst du die Bildrate deiner GIF-Exporte ändern. Du kannst aus diesen FPS-Optionen wählen:
- 60 FPS (Ludicrous Mode)
- 30 FPS (Ultra Smooth)
- 24 FPS (Smooth)
- 18 FPS (Less Smooth)
- 12 FPS (Least Smooth)
- 6 FPS (Jittery)
Höhere FPS brauchen länger zum Rendern. Mehr Frames verlängern den Export und erzeugen größere Dateien. Ein Export einer Zeitleiste von 5 Sekunden mit 24 FPS rendert zum Beispiel 120 Frames pro Banner.
Eine Audiospur zu MP4-Videoexporten hinzufügen
Video-Tutorial: Audio zu Video-Banner-Exporten aus Figma hinzufügen
Dieses Video zeigt, wie du mit dem Plugin Bannerify Audiodateien zu deinen MP4-Video-Banner-Exporten in Figma hinzufügst.
Bevor du dein MP4-Video exportierst, kannst du optional eine .mp3-Audiodatei hinzufügen: Zieh dazu eine .mp3-Datei von deinem Computer in die Exporteinstellungen von Bannerify (.mp3-Musikdateien kannst du zum Beispiel bei Pixabay herunterladen). Klick dann unten im Export-Panel auf Export MP4 (n Banners), um den Export deiner Banner aus Figma als MP4 zu starten. Die Audiospur wird dabei automatisch eingebunden.
Wenn du bereits eine Video-URL in eine deiner Ebenen eingebettet hast und lieber deren Ton verwenden möchtest, kannst du alternativ den Schalter Use audio from embedded video aktivieren. Dann wird der Ton des Videos aus der Zeitleisten-Ebene deines Banners automatisch übernommen.
Browser-Unterstützung. Wegen Kompatibilitätsproblemen der Browser lassen sich MP4-Videos nur mit Chrome oder der Figma-Desktop-App exportieren.
Die fertige MP4-Video-.zip herunterladen
Sobald Bannerify deine Banner verarbeitet hat, erscheint eine Bestätigung. Über den Button Download your .zip file lädst du die .zip-Datei mit deinen exportierten Bannern herunter.
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).
Die MP4-Video-.zip öffnen
Nachdem du die .zip-Datei aus Figma auf deinen Computer heruntergeladen hast, öffnest du im Datei-Explorer den Ordner, in dem sie gespeichert wurde. Mit einem Doppelklick auf die exportierte .zip-Datei entpackst du den Inhalt und kannst deine Banner nach Belieben verwenden.