Video-Tutorial: Banner aus Figma als animierte WebP-Bilder exportieren
Dieses Video zeigt, wie du mit dem Plugin Bannerify produktionsreife animierte Banner aus Figma als animierte WebP-Bilder exportierst.
Nachdem du auf Export to GIF/Video geklickt und deine Exporteinstellungen festgelegt hast, klick unten im Exportpanel auf den Button Export WebP (n Banners), um deine Banner aus Figma als animierte WebP-Bilder zu exportieren. Damit werden deine animierten Banner als animierte WebP-Dateien exportiert.
Browser-Unterstützung. Wegen Kompatibilitätsproblemen der Browser lassen sich Animated WebP-Videos nur in Chrome oder der Figma-Desktop-App exportieren.
Banner in den Export ein- oder ausschließen. Standardmäßig werden alle Ebenen auf oberster Ebene deiner Figma-Datei, die als Banner in Bannerify geladen sind, in den Export aufgenommen. Wenn du Banner ausschließen willst (ohne die ausgewählten Banner neu zu laden), stell den Schalter Include In Export im Zeitleisten-Header des jeweiligen Banners auf „aus“. Dadurch wird die Zeitleiste dieses Banners ausgeblendet und das Banner aus 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.
Die finale WebP-.zip-Datei herunterladen
Nachdem Bannerify deine Banner verarbeitet hat, erscheint eine Bestätigung. Klick auf den Button Download your .zip file, um die .zip-Datei mit deinen exportierten Bannern 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).
Die WebP-.zip-Datei öffnen
Nachdem du die .zip-Datei aus Figma auf deinen Computer heruntergeladen hast, öffne 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.