Verwende Figma Motion Export im Tab GIF von TinyImage, wenn deine Animation bereits mit Figma Motion erstellt ist. Dieser Workflow nutzt den nativen Animations-Renderer von Figma, statt die Animation aus einzelnen Standbildern neu aufzubauen.
Video-Tutorial: Figma-Motion-Ebenen gebündelt als GIF und MP4-Video exportieren
Dieses Video zeigt, wie du Figma-Motion-Animationen mit TinyImage gebündelt als komprimierte GIFs oder MP4-Videos exportierst.
Motion-Animation auswählen
Wähle in einer Figma-Design-Datei entweder:
- den Frame der obersten Ebene, der die Motion-Animation enthält, oder
- eine beliebige animierte Ebene innerhalb dieses Frames der obersten Ebene.
Öffne TinyImage, wähle GIF und dann Figma Motion Export. TinyImage ordnet verschachtelte Auswahlen den Motion-Frames der obersten Ebene zu, die sie enthalten, und hakt jede erkannte Animation in der Exportliste an.
Motion-Animationen auf der Seite finden
Enthält die aktuelle Auswahl keine Motion-Animation, prüft TinyImage automatisch die aktuelle Seite und listet alle Motion-Animationen auf, die es in Frames der obersten Ebene findet. Wähle mit den Kontrollkästchen eine oder mehrere Animationen für den Export aus. Standardmäßig sind alle Animationen angehakt, und das Kontrollkästchen über der Liste wählt alle Frames aus oder ab.
TinyImage speichert diese Liste zwischen, solange das Plugin auf derselben Seite bleibt. Wähle Rescan this page, nachdem du eine Motion-Animation hinzugefügt oder geändert hast, welche Frames animierte Ebenen enthalten. Um eine Animation auf einer anderen Seite zu finden, wechsle zuerst zu dieser Figma-Seite; TinyImage durchsucht nicht alle Seiten der Datei.
Ausgewählte Frames prüfen
TinyImage zeigt neben jedem Motion-Frame in der Exportliste ein statisches Vorschaubild. Über das Frame-Symbol springst du zu dieser Animation auf dem Figma-Canvas, ohne zu ändern, welche Animationen für den Export angehakt sind.
Mit diesen Vorschaubildern kannst du die Exportliste prüfen, ohne eine Animation zu rendern, den Tab Video Export von Figma zu öffnen oder eine Vorschaudatei herunterzuladen.
Export einrichten
Wähle im Menü neben dem Export-Button ein Ausgabeformat:
- Animated GIF
- Animated PNG (APNG)
- Animated WebP
- MP4 Video
- WebM Video
Lege Bildrate und Ausgabegröße fest. Dieselben Einstellungen gelten für jede angehakte Animation. Der Wert Size ist ein Skalierungsfaktor, sodass Frames im selben Stapelexport unterschiedliche Pixelmaße behalten können. Bei GIF, APNG und Animated WebP wählst du außerdem zwischen Endlosschleife und einmaliger Wiedergabe. MP4 und WebM bieten stattdessen die Qualitätsstufen Low, Medium und High.
Wähle bei GIF-Exporten die Komprimierung, die zu deinen Anforderungen passt:
- No compression lässt das GIF von Figma unverändert, sofern du die Farbanzahl nicht reduzierst.
- Lossless compression optimiert GIF-Frames und Dateistruktur ohne verlustbehaftete Pixelkomprimierung.
- Balanced compression nutzt eine leichte verlustbehaftete Komprimierung (Stufe 40) für moderate Einsparungen bei geringem Risiko sichtbarer Artefakte.
- Strong compression nutzt eine stärkere verlustbehaftete Komprimierung (Stufe 80), die die Größe weiter verringern, aber sichtbare Artefakte verursachen kann.
- Maximum compression nutzt die stärkste verlustbehaftete Komprimierung (Stufe 140) für die voraussichtlich kleinste Datei, mit dem höchsten Risiko für Farbabstufungen und Artefakte.
Wähle 256 colors, um das ursprüngliche Farblimit von Figma beizubehalten, oder reduziere es auf 128 colors, 64 colors oder 32 colors. Die Reduzierung der Palette ist unabhängig von der Komprimierungsstufe; eine kleinere Palette kann also auch bei Lossless compression Farben verändern oder Farbabstufungen erzeugen.
Aktiviere Size Target und gib eine maximale Größe in KB ein, wenn das exportierte GIF in ein festes Upload-Limit passen muss. TinyImage testet automatisch verschiedene Verluststufen sowie Paletten mit 256, 128, 64 und 32 Farben und behält das am wenigsten aggressive getestete Ergebnis, das passt. Solange ein Ziel aktiv ist, ersetzt das Feld für die Zielgröße die manuellen Regler für Komprimierung und Farbanzahl.
Erreicht keine der getesteten Einstellungen das Ziel, bereitet TinyImage das kleinste gültige Ergebnis vor, das es gefunden hat, und zeigt vor dem Download dessen Größe an. Eine kleinere Motion-Exportgröße, eine niedrigere Bildrate oder eine kürzere Animationsdauer können sie weiter verringern.
Mit den Standardeinstellungen wird das native GIF von Figma unverändert exportiert. Ist eine zusätzliche Komprimierung aktiviert, verwendet TinyImage das optimierte Ergebnis nur, wenn es kleiner ist als die Originaldatei von Figma. Schlägt die Optimierung fehl oder vergrößert sie die Datei, exportiert TinyImage sicherheitshalber stattdessen das ursprüngliche GIF.
Figma begrenzt Motion-Exporte im Starter-Plan auf 1920 × 1080 und 30 FPS. TinyImage versucht zuerst den angeforderten Export, damit die Ausgabe bei kostenpflichtigen Plänen nicht reduziert wird. Lehnt Figma eine Anfrage über diesem Limit ab, versucht TinyImage es automatisch erneut mit einer temporären Kopie, die in 1920 × 1080 passt, und begrenzt den neuen Versuch auf 30 FPS. Die temporäre Kopie wird nach dem Rendern entfernt, und der ursprüngliche Frame bleibt unverändert. Eine blaue Benachrichtigung zeigt die exportierten Maße und die Bildrate.
Figma rendert GIF-, MP4- und WebM-Dateien direkt. Für APNG und Animated WebP startet TinyImage mit dem nativen GIF-Rendering von Figma und wandelt es ohne einen weiteren verlustbehafteten Komprimierungsdurchgang um. Diese umgewandelten Formate behalten Aussehen, Timing, Transparenz und Farbpalette des nativen GIF-Renderings bei.
Animationen exportieren
Wähle Export GIF, Export APNG, Export WebP, Export MP4 oder Export WebM. Figma öffnet oder aktualisiert unter Umständen seinen Tab Video Export, während es die einzelnen Animationen rendert.
Ist eine Animation angehakt, lädt TinyImage diese Datei direkt herunter. Sind mehrere Animationen angehakt, rendert TinyImage sie in der Reihenfolge der Liste und lädt ein Archiv Figma Motion animations.zip herunter. Jede Datei trägt den Namen ihres Figma-Frames, und TinyImage ergänzt eine Nummer, wenn angehakte Frames sonst doppelte Dateinamen erzeugen würden.
Figma Motion und seine Plugin-Export-API befinden sich derzeit in der Beta. Lehnt Figma ein Rendering ab, das bereits innerhalb der Limits des Starter-Plans liegt, öffne den Frame in Figma Motion, prüf, ob er noch animierte Ebenen enthält, und versuch den Export dann erneut.
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).