Video-Tutorial: Animierte GIFs erstellen
Dieses Video zeigt, wie du mit dem TinyImage-Plugin GIFs aus deinen eigenen Designs direkt in Figma animierst und exportierst.
Video-Tutorial: Übergangseffekte zu animierten GIF-Exporten in Figma hinzufügen
Dieses Video zeigt, wie du mit dem TinyImage-Plugin Übergangseffekte wie Überblenden, Schieben und Wischen zu animierten GIF-Exporten in Figma hinzufügst.
Öffne den Tab GIF und wähle Create a GIF/MP4, um aus ausgewählten Figma-Ebenen GIF- oder MP4-Dateien zu animieren und zu exportieren.
Figma-Motion-Animation exportieren
Öffne den Tab GIF und wähle Figma Motion Export, um Animationen zu exportieren, die mit Figma Motion erstellt wurden. TinyImage listet die Motion-Frames aus der aktuellen Auswahl oder Seite mit einem statischen Vorschaubild neben jedem Kontrollkästchen auf. Wähle einen oder mehrere aus und lege dann gemeinsam Ausgabeformat, Bildrate, Größe, Schleife, GIF-Komprimierung, Farbpalette oder Videoqualität fest.
TinyImage nutzt für GIF-, MP4- und WebM-Ausgaben den nativen Motion-Renderer von Figma. Außerdem kann es das native GIF-Rendering in APNG oder Animated WebP umwandeln, ohne einen weiteren verlustbehafteten Komprimierungsdurchgang hinzuzufügen.
Wähle Export, um die angehakten Animationen zu rendern. Eine einzelne angehakte Animation wird direkt heruntergeladen, mehrere Animationen gemeinsam in einem ZIP.
So prüfst und exportierst du Figma-Motion-Animationen
Vorhandenes GIF oder MP4 bearbeiten
Öffne den Tab GIF und wähle GIF Editor. Wähle eine Figma-Ebene mit einer animierten GIF-Füllung aus, um Use selected Figma GIF layer zu aktivieren, oder wähle Choose from computer, um ein GIF oder MP4 von deinem Gerät zu laden. Du kannst die Frames bearbeiten und das Ergebnis als GIF, APNG, Animated WebP, MP4 oder WebM herunterladen.
Bildexporte im GIF Editor setzen auf Originaltreue: APNG und Animated WebP verwenden verlustfreie Kodierung, und unveränderte GIF-Downloads oder Einfügungen in Figma verwenden die ursprünglichen GIF-Daten ohne erneute Komprimierung.
Vorhandenes GIF zuschneiden
Wähle nach dem Laden eines GIFs Crop. Zieh den Zuschnittbereich in der Vorschau auf oder ändere seine Größe, oder gib exakte Werte für X, Y, Breite und Höhe ein. Für feinere Anpassungen verschiebst du den ausgewählten Bereich mit den Pfeiltasten.
Wähle Apply crop, um jeden Frame der Animation zuzuschneiden. Prüf die aktualisierte Vorschau, bevor du das bearbeitete GIF exportierst.
GIFs in Figma erstellen: erste Schritte
Mit den folgenden Seiten richtest du die einzelnen Teile deines GIF-Workflows ein: