Wenn du mit deinem Design und den gewünschten Einstellungen zufrieden bist, kannst du deine E-Mail(s) aus Figma als HTML exportieren: Klick im Kopfbereich des Plugins Emailify auf den Button Export HTML, wähl die E-Mail(s) aus, die du exportieren willst, und füg optional eine Betreffzeile und einen Preheader-Text hinzu.
HTML-E-Mail aus Figma als .zip-Datei exportieren und herunterladen
Standardmäßig ist die Option HTML Email ausgewählt. Damit werden deine E-Mails als kompilierte, produktionsreife E-Mails exportiert (mit vorab inline gesetztem CSS und minifiziertem HTML).
Wenn du so weit bist, klick auf den Button Export To HTML, um die in Figma ausgewählten E-Mails als HTML zu exportieren.
Sobald Emailify deine E-Mail(s) verarbeitet hat, siehst du eine Bestätigung. Deine .zip-Datei lädst du dann mit einem Klick auf den Button Download your .zip file herunter.
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).
Wenn der Export fertig ist, die ZIP-Datei aber nicht heruntergeladen wurde
Wenn du den Abschlussbildschirm des Exports in Emailify erreicht hast, ist der E-Mail-Export selbst bereits erstellt. Klick zuerst auf diesem Abschlussbildschirm noch einmal auf Download your .zip file.
Prüf dann den Download-Weg, der dazu passt, wie du Figma nutzt:
- In der Figma-Desktop-App: Achte auf den nativen Speichern-Dialog von Figma und stell sicher, dass er nicht hinter einem anderen Fenster oder auf einem anderen Desktop versteckt ist.
- Bei Figma im Webbrowser: Sieh in der Download-Liste deines Browsers und im Standardordner Downloads deines Computers nach.
Wenn die ZIP-Datei immer noch nicht auftaucht:
- Führ den Export noch einmal aus, nachdem du den richtigen Download-Speicherort geprüft hast.
- Wenn du in einem Firmennetzwerk bist, versuch es mit einem anderen WLAN oder einem anderen Browser bzw. privaten Fenster, falls die Übergabe des Downloads lokal unterbrochen wird.
- Wenn ein Versuch einen kostenlosen Pro-Testlauf verbraucht hat, aber keine Datei angekommen ist, hör mit weiteren Versuchen auf und schreib an [email protected]. Gib dabei den Produktnamen an, ob du die Figma-Desktop-App oder den Browser genutzt hast, und füg einen Screenshot des Abschlussbildschirms oder des fehlenden Download-Dialogs bei.
Wenn der Export mit deinem letzten kostenlosen Pro-Testlauf abgeschlossen wurde, sollte sich die ZIP-Datei über den Abschlussbildschirm weiterhin herunterladen lassen. Allgemeine Regeln für Testläufe findest du unter Kostenlose Pro-Testläufe von Hypermatic nutzen. Für persönliche Hilfe bei Fragen zu Testläufen oder zu deinem Konto siehe Den richtigen Support-Kanal bei Hypermatic wählen.
Emailify erkennt automatisch, ob Textebenen in deinem Design eine RTL-Formatierung (von rechts nach links) brauchen, und setzt in deinen exportierten E-Mails bei allen betroffenen Textbereichen automatisch das HTML-Attribut dir="rtl".
Versteckte Zeichen in eingefügtem Text
Emailify entfernt in Vorschau und Export versehentliche Zero-Width-Joiner und -Non-Joiner zwischen normalen englischen Buchstaben oder Ziffern in Texten, Buttons und Navigationsbeschriftungen. Außerdem entfernt es nicht druckbare Steuerzeichen und eine führende Byte-Order-Mark, ohne deine ursprünglichen Textebenen in Figma zu ändern.
Zeichen für andere Sprachen, Emojis, die Textrichtung und beabsichtigte Abstände bleiben erhalten. Wenn eine versendete E-Mail trotzdem unerwartete Zeichen zeigt, tipp das betroffene Wort in Figma neu, exportiere erneut und prüf, ob deine E-Mail-Plattform die E-Mail mit UTF-8-Codierung versendet. Teste die fertige E-Mail über deine Versandplattform, bevor du eine Kampagne verschickst.
Exportiertes .zip-Paket der HTML-E-Mail entpacken und ansehen
Wenn du deine .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 ihren Inhalt.
Die .zip-Datei enthält für jede E-Mail eine index.html-Datei und die Bilder in einem eigenen Ordner. Über eine erzeugte index.html-Datei im Hauptverzeichnis kannst du alle exportierten E-Mails auf einer Vorschauseite prüfen. Du kannst sie auch als Netlify-Vorschaulink hochladen, um sie mit Kunden oder Teammitgliedern zu teilen.
Ein Doppelklick auf die index.html-Datei der Vorschauseite oder auf eine beliebige index.html-Datei in den Ordnern der einzelnen E-Mails öffnet die Datei in deinem Webbrowser, wo du dir das exportierte HTML ansehen kannst.
Bei jedem E-Mail-Export aus dem Plugin ist automatisch eine Nur-Text-Version deiner HTML-E-Mail in der .zip-Datei enthalten. Wenn du die exportierte .zip-Datei entpackst und den Ordner deiner E-Mail öffnest, findest du neben der index.html-Datei eine Datei plain-text-version.txt.