Video-Tutorial: Banner aus Figma als GIFs exportieren
Dieses Video zeigt, wie du mit dem Plugin Bannerify produktionsreife animierte Banner aus Figma als GIFs exportierst.
Wenn du mit deinen Bannern zufrieden bist und sie als GIF, WebM, MP4 oder animiertes WebP exportieren möchtest, klick im Header von Bannerify auf den Button Export to GIF/Video. Damit öffnen sich die Exporteinstellungen für GIF und Video.
Banner in den Export ein- oder ausschließen. Standardmäßig werden alle Frames deiner Figma-Datei, die als Banner in Bannerify geladen sind, in den Export aufgenommen. Wenn du Banner ausschließen willst, 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.
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 Frame-Verzögerungen in GIFs werden in Schritten von 10 Millisekunden angegeben. Bannerify wechselt die Verzögerungen bei Bedarf ab, damit die Gesamtgeschwindigkeit der Wiedergabe erhalten bleibt. Einzelne Frames können daher leicht unterschiedlich lang sein. Wenn du für ein GIF 60 FPS wählst, tastet Bannerify es mit 50 FPS ab und exportiert es so, damit Browser es mit der richtigen Geschwindigkeit abspielen. Das Exportpanel und der Name der ZIP-Datei zeigen die tatsächliche Rate von 50 FPS. Für MP4 und andere Formate bleibt die gewählte Bildrate erhalten.
Verlustfreie oder verlustbehaftete Komprimierung
Standardmäßig werden GIFs mit verlustfreier Komprimierung exportiert. Die Dateigröße bleibt also gering, ohne sichtbaren Qualitätsverlust. Brauchst du noch kleinere GIFs (auf Kosten einer gewissen Qualität), schalte stattdessen den Schalter Lossless Compression aus und stell den Regler für die Komprimierungsqualität nach Bedarf ein.
Erweiterte Dithering-Optionen festlegen. Wenn du dich damit auskennst, kannst du die Art des Ditherings für deinen GIF-Export anpassen, indem du im Panel mit den GIF-Exporteinstellungen eine andere Option im Dropdown für das Bild-Dithering wählst.
Globale Farbpalette nutzen
Wenn du ein GIF exportierst, bei dem die Farbpalette in jedem Frame gleich ist (nur mit kleinen Bewegungen, Textänderungen usw. dazwischen) und du Farbartefakte siehst, kannst du die Option All GIF frames have the same color palette aktivieren. Sie verwendet die Farbpalette des ersten Frames deines GIFs auch für alle anderen Frames.
Globale Farbpaletten können fehleranfällig sein. Nutze diese Option nur als letzten Ausweg, wenn dein GIF unerwünschte Farbartefakte oder Streifenbildung zeigt. Sie kann andere Probleme verursachen, wenn einige Farben aus anderen Frames im ersten Frame nicht vorkommen.
Endlos wiederholte Wiedergabe
Wenn du die Option Infinite Loop aktivierst, werden GIFs exportiert, die ihre Animation endlos in einer Schleife abspielen. Deaktivierst du diese Einstellung, spielen deine GIFs die Zeitleiste einmal ab und bleiben dann auf dem letzten Frame der Animation stehen. Diese Option gilt nur für GIF-Exporte.
Transparente Hintergründe für GIFs festlegen
Standardmäßig enthalten deine GIF-Exporte keine transparenten Hintergründe. Braucht dein GIF Transparenz, aktiviere in den GIF-Exporteinstellungen den Schalter Has Transparent Background.
Die finale GIF-.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 GIF-.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.