Video-Tutorial: Animierte GIFs aus Figma in HTML-E-Mail-Exporte einfügen

Dieses Video zeigt, wie du animierte GIFs in deine E-Mail-Designs einfügst und mit dem Emailify-Plugin produktionsreife, responsive HTML-E-Mails aus Figma exportierst.

Zum Hochladen animierter GIF-Bilder brauchst du eine Emailify-Pro-Lizenz.

Wenn du die kostenlose Testversion des Plugins nutzt, werden GIFs stattdessen als statische Bilder hochgeladen. Alternativ kannst du die Option Export HTML mit dem Schalter Upload auf off verwenden, um die animierten .gif-Dateien zusammen mit deinen HTML-E-Mails lokal zu exportieren und herunterzuladen.

Animiertes GIF als Inhaltsbild in deine Column-Ebenen einfügen

Du kannst eine .gif-Datei von deinem Computer per Drag-and-drop in eine beliebige Column-Ebene ziehen. Sie wird dann als Figma-Bildinhaltsebene eingefügt.

Damit die Qualität deines GIFs hoch bleibt, skaliere die Ebene proportional (halte beim Ändern der Größe deiner Figma-Ebene die Shift-Taste gedrückt), sodass das ursprüngliche Seitenverhältnis erhalten bleibt. So kann Emailify die Originaldaten der GIF-Datei in deinen Exporten verwenden.

Wenn du das Seitenverhältnis deiner Figma-Ebene gegenüber dem Original-GIF änderst, muss Emailify die GIF-Frames in einer komplett neuen .gif-Datei neu erstellen, um den zugeschnittenen Bildbereich abzubilden (weil HTML-E-Mail-Clients kein Zuschneiden per CSS unterstützen). Das führt zu größeren GIF-Dateien und längeren Exportzeiten.

Warum ist mein exportiertes GIF größer als das Original-GIF?

Wenn du das Seitenverhältnis der GIF-Ebene in Figma änderst, muss Emailify die GIF-Frames in einer neuen .gif-Datei neu erstellen, damit die exportierte E-Mail dem zugeschnittenen Bildbereich entspricht. HTML-E-Mail-Clients unterstützen das Zuschneiden von GIFs per CSS nicht so, wie Figma sie in der Vorschau zeigt. Das Neuerstellen der Frames kann deshalb die endgültige Dateigröße erhöhen und den Export verlangsamen.

Damit das exportierte GIF näher an der ursprünglichen Dateigröße bleibt, skaliere das GIF proportional und behalte das ursprüngliche Seitenverhältnis bei.

Über den Settings-Button im Kopfbereich des Plugins kannst du das Alt-Text-Attribut festlegen oder deinen Bildern einen klickbaren URL-Link hinzufügen.

Emailify versucht automatisch zu erkennen, ob dein GIF einen transparenten Hintergrund hat. Wenn dein GIF Transparenz braucht und das Plugin sie nicht selbst erkennt, füge das Wort Transparent an beliebiger Stelle im Namen deiner Figma-Ebene ein (zum Beispiel My Layer Name - Transparent), damit es mit aktiviertem transparentem Hintergrund exportiert wird.

Das GIF-Format unterstützt entweder 0 % oder 100 % Deckkraft, aber nichts dazwischen. Ein animiertes GIF kann also einen vollständig transparenten Hintergrund hinter vollständig deckenden, sichtbaren Elementen haben. Ebenen müssen daher entweder vollständig transparent sein oder nicht: Ebenen mit weniger als 50 % Deckkraft werden transparent, Ebenen mit mehr als 50 % Deckkraft werden deckend.

Animiertes GIF als Hintergrundbild auf einer Row-, Hero- oder Wrapper-Ebene einfügen

Wenn du ein animiertes GIF als Hintergrundbild hinter echtem Rich-Text-Inhalt verwenden willst, kannst du eine .gif-Datei von deinem Computer auf die Figma-Füllung eines beliebigen Row-, Hero- oder Wrapper-Frames ziehen. Sie wird dann als Bildfüllung für den Hintergrund des Frames festgelegt. Alle weiteren Figma-Füllungen (z. B. Farb- oder Verlaufsüberlagerungen) auf diesem Frame werden ebenfalls in den fertigen .gif-Export übernommen.

Der Vorteil: Die Inhaltsebenen im Frame werden in deinem HTML-E-Mail-Export weiterhin als einzelne Rich-Content-Ebenen über dem animierten GIF-Hintergrund gerendert.

Emailify versucht automatisch zu erkennen, ob dein GIF einen transparenten Hintergrund hat. Wenn dein GIF Transparenz braucht und das Plugin sie nicht selbst erkennt, füge das Wort Transparent an beliebiger Stelle im Namen deiner Figma-Ebene ein (zum Beispiel My Layer Name - Transparent), damit es mit aktiviertem transparentem Hintergrund exportiert wird.

Das GIF-Format unterstützt entweder 0 % oder 100 % Deckkraft, aber nichts dazwischen. Ein animiertes GIF kann also einen vollständig transparenten Hintergrund hinter vollständig deckenden, sichtbaren Elementen haben. Ebenen müssen daher entweder vollständig transparent sein oder nicht: Ebenen mit weniger als 50 % Deckkraft werden transparent, Ebenen mit mehr als 50 % Deckkraft werden deckend.

Animierte GIFs in Outlook: Die meisten E-Mail-Clients unterstützen animierte GIFs, aber Outlook 2019 und älter zeigt nur den ersten Frame eines GIFs an, statt die Animation abzuspielen. Achte darauf, dass dieser Frame die wichtigsten Bilder oder Texte enthält, damit er auch als statischer Fallback funktioniert. In Outlook mit Office 365 werden GIFs automatisch dreimal abgespielt und pausieren dann mit einem Play-Button zum erneuten Abspielen.