Wenn du im Kopfbereich des Emailify-Plugins auf den Button Preview klickst, erzeugt das Plugin automatisch eine echte HTML-Vorschau deiner E-Mail direkt im Figma-Plugin.

Solange das Vorschaufenster geöffnet ist, erscheinen Änderungen an deinen Emailify-Ebenen in Figma in Echtzeit in der HTML-Vorschau.

Die Tabs im Vorschaupanel nutzen

Das Vorschaupanel hat vier Tabs:

• HTML Preview zeigt das aktuelle responsive HTML, aktualisiert sich, während du die Figma-Ebenen bearbeitest, und enthält einen einfachen Schalter für die Dark-Mode-Vorschau.
• Preflight prüft das Produktions-HTML auf praktische Probleme bei Betreff, Preheader, Barrierefreiheit, Links, Bildern, Zustellung und dem Kürzen durch Gmail.
• Test Send bereitet das Produktions-HTML so vor, dass du es für einen manuellen Posteingangstest in htmltest.email kopieren kannst.
• Email Previews fordert direkt in Emailify Screenshots aus E-Mail-Clients an. Siehe Email Previews im Plugin nutzen.

Preflight und Test Send nutzen den Zugriff von Emailify auf das Produktions-HTML. Sie stehen daher mit einer aktiven Pro-Lizenz zur Verfügung oder solange du noch kostenlose Pro-Testläufe übrig hast. Optionen zum Testen in E-Mail-Clients findest du unter HTML-E-Mails vor dem Versand testen.

GIFs werden im Vorschaumodus als statische Bilder angezeigt, damit die Vorschau schneller lädt (GIFs brauchen länger zum Rendern). In deinen finalen HTML-Exporten aus dem Plugin sind sie aber animiert.

Du kannst alle Anpassungen für Mobilgeräte bearbeiten, während das Vorschaufenster geöffnet ist. Klick dazu im Kopfbereich des Vorschaupanels auf den Button Settings.

Vorschau deiner E-Mail in verschiedenen Gerätebreiten

Um zu sehen, wie deine E-Mail in verschiedenen Gerätebreiten aussieht, klick im Kopfbereich des Vorschaupanels auf das Auswahlfeld und wähl eine der folgenden Optionen:

• Desktop & Mobile (Hybridansicht)
• Desktop (726px breit)
• iPhone 17 Pro Max (440px breit)
• iPhone 16 Pro Max (430px breit)
• iPhone Air (420px breit)
• Google Pixel (412px breit)
• iPhone 17 (402px breit)
• iPhone 16 (393px breit)
• iPhone 13 Mini (375px breit)
• iPhone 12 Mini (360px breit)
• iPhone SE (320px breit)

Mobiler Breakpoint der E-Mails. Die aus Emailify exportierten HTML-E-Mails haben einen einzigen „Breakpoint“, der automatisch über die Breite des Desktop-Frames in Figma festgelegt wird. Ist dein Emailify-Frame zum Beispiel 600px breit, greifen die mobilen Stile bzw. Anpassungen ab 599px und darunter.

Empfohlen wird meist eine E-Mail-Breite zwischen 600px und 640px, weil die Lesebereiche mancher E-Mail-Clients oder Apps schmaler als 700px sein können und dann die mobilen Stile statt des Desktop-Layouts anzeigen.

Änderungen aus Figma live im HTML-Vorschaufenster sehen

Bei geöffneter HTML-Vorschau kannst du deine Figma-Ebenen weiter bearbeiten und siehst die Änderungen sofort im Vorschaufenster, ohne jedes Mal auf Refresh klicken zu müssen.

Vorschau im Dark Mode

Aktiviere Dark Mode in der Werkzeugleiste von HTML Preview, um die aktuelle E-Mail mit der ungefähren lokalen Dark-Mode-Vorschau von Emailify zu vergleichen. Die Vorschau nutzt eine allgemeine automatische Farbbehandlung statt der Farben eines bestimmten E-Mail-Clients. Mit der Auswahl der Vorschaubreite kannst du dasselbe Dark-Mode-Design weiterhin in Desktop- oder Mobilbreite prüfen. Dark Mode ist nicht verfügbar, solange die kombinierte Hybridansicht Desktop & Mobile ausgewählt ist.

Wenn die E-Mail Dark-Mode-Anpassungen von Emailify enthält, kannst du mit dem Schalter Overrides daneben die expliziten Stile für Hintergrund, Text, Rahmen und Bildwechsel ein- oder ausblenden.

Der Schalter ist eine Designhilfe, kein Client- oder Geräte-Emulator. E-Mail-Clients wenden ihre eigenen Dark-Mode-Umwandlungen an, und die lokale Vorschau bildet weder authentifizierte Sanitizer, native Rendering-Engines und Schriften, die Oberfläche der Apps und die Verarbeitung bei der Zustellung noch alle Unterschiede zwischen Clients und Versionen nach.

Die Unterstützung für Dark-Mode-Anpassungen in E-Mail-Clients ist begrenzt. Die expliziten Anpassungen von Emailify sind für die unterstützten Versionen von Apple Mail gedacht. Gmail, Outlook, Windows Mail, Yahoo und andere Clients können Farben auf andere Weise automatisch ändern.

Dateigröße deiner HTML-E-Mail in Kilobyte (kb) prüfen

Im Kopfbereich des Vorschaupanels siehst du eine Zahl, die für die gesamte Dateigröße des HTML deiner E-Mail steht (also nur die .html-Datei selbst, ohne Bild-Assets). So erkennst du, ob du das Gmail-Limit von 102kb, ab dem gekürzt wird, überschritten hast.

Wenn dein HTML größer als 102kb ist, wird die Dateigröße im Vorschaufenster gelb hervorgehoben. So siehst du auf einen Blick, dass deine E-Mail dieses Limit überschreitet.

Die Anzahl der „Row“-Ebenen in deiner E-Mail zu verringern oder sie zusammenzufassen, ist der beste Weg, die Dateigröße deines HTML zu verkleinern.

Vorschau websicherer Ersatzschriften in deiner E-Mail

Wenn du für eigene Webfonts in deiner E-Mail websichere Ersatzschriften festgelegt hast, kannst du dir ansehen, wie sie aussehen. Aktiviere dazu unten im Vorschaufenster von Emailify den Schalter Show Fallback Fonts.

Auto-Layout-Prüfung (und automatische Korrektur) für Emailify-Ebenen

Wenn du dein HTML mit der Funktion Preview des Plugins ansiehst, erkennt das Plugin automatisch, ob die über Emailify hinzugefügten Ebenen noch die richtigen Auto-Layout-Eigenschaften von Figma haben. So bleibt der HTML-Export optisch einheitlich.

Es zeigt dir eine Liste der Ebenen, deren Auto-Layout-Eigenschaften angepasst werden müssen (zum Beispiel eine Höhe von „Fixed“ auf „Hug“ ändern). Optional kannst du diese Änderungen mit einem Klick auf den Button Apply Fixes automatisch übernehmen. Dann werden die markierten Figma-Ebenen mit den nötigen Auto-Layout-Anpassungen aktualisiert.

Emailify-Ebenen an der falschen Stelle manuell verschieben und korrigieren

Wenn du dein HTML mit der Funktion Preview des Plugins ansiehst, erkennt das Plugin automatisch, ob die über Emailify hinzugefügten Ebenen noch in der Struktur liegen, in der sie erstellt wurden (zum Beispiel Row-Ebene -> Column-Ebene(n) -> Inhaltsebenen). So bleibt der HTML-Export optisch einheitlich.

Es zeigt dir eine Liste der Ebenen, die du manuell verschieben musst, mit einer Anleitung für jeden Eintrag (zum Beispiel „Verschieb diese Row-Ebene zurück in den Haupt-Frame der E-Mail“) und einem Button, mit dem du sofort zur Ebene auf deiner Seite und in der Ebenenliste von Figma springst. So findest und verschiebst du sie leichter.

Du kannst Einstellungen auf mehrere Ebenen anwenden, indem du Settings öffnest und dann in Figma mehrere Emailify-Ebenen desselben Typs auswählst. Jede Einstellung, die du änderst, wird auf alle ausgewählten Ebenen angewendet.