Mit dem Tab Import in New Email startest du mit vorhandenem E-Mail-Code, statt jede Row und Column von Grund auf zu bauen. Füge HTML oder MJML ein oder wähle eine Datei und prüfe dann die Quelle, bevor du einen bearbeitbaren Emailify-Frame erstellst.

Der Import ist experimentell und derzeit in lokal aktivierten Entwicklungs-Builds verfügbar. Im Standard-Build des Plugins ist er ausgeblendet. Die folgenden Schritte gelten, wenn dein Modal New Email den Tab Import enthält.

Unterstützte Quellen

• HTML: Füge E-Mail-HTML ein oder wähle eine .html- oder .htm-Datei.
• MJML XML: Füge ein vollständiges <mjml>-Dokument ein oder wähle eine .mjml- oder .xml-Datei.
• MJML JSON: Füge einen standardmäßigen MJML-Komponentenbaum ein oder wähle eine .json-Datei.
• Kopierte E-Mail-Pakete: Füge ein Paket aus der experimentellen Erweiterung Copy to Emailify ein.

Die Eingabe muss kleiner als 2 MB sein. Auch MJML muss innerhalb dieser Grenze zu HTML kompiliert werden. .eml-Nachrichten, ZIP-Dateien und beliebiges JSON werden nicht unterstützt. Extrahiere bei einer .eml-Nachricht vor dem Import den HTML-Body und mach die zugehörigen Bilder zugänglich.

Verwende zugängliche Bild-URLs. Bilder, die eine Anmeldung erfordern, lokale Dateien und Anhangsverweise wie cid: musst du womöglich durch gehostete Dateien ersetzen.

Suchst du eine E-Mail zum Ausprobieren? Besuche Really Good Emails, öffne eine E-Mail und wähle Code, um ihren HTML-Quellcode zu sehen. Kopiere das HTML, füge es im Tab Import in das Feld Email code von Emailify ein und klick dann auf Preview Import, um es vor dem Erstellen der E-Mail zu prüfen.

Eine E-Mail importieren

1. Öffne Emailify in Figma.
2. Klick neben der E-Mail-Auswahl auf das Icon +, um New Email zu öffnen.
3. Wähle Import am Ende der Tab-Leiste.
4. Füge deinen E-Mail-Code in Email code ein und klick dann auf Preview Import. Alternativ klickst du auf Choose file, um eine unterstützte Datei zu laden und zu analysieren.
5. Prüfe Preview und eventuelle Notes. Kontrolliere, ob die Quelle die erwarteten Texte, Bilder und Hintergründe enthält.
6. Gib einen Email name ein und klick dann auf Create Email.
7. Prüfe den erstellten Emailify-Frame und seine bearbeitbaren Ebenen.
8. Prüfe vor dem Export mit der HTML-Vorschau von Emailify die erzeugte Ausgabe für Desktop und Mobilgeräte.

Das Import-Panel zeigt eine Vorschau der Quell-E-Mail. Es zeigt nicht das endgültige HTML, das aus den nachgebauten Emailify-Ebenen exportiert wird. Prüfe den erstellten Frame und die erzeugte Vorschau von Emailify immer separat.

Bearbeitest du die Quelle, wird die vorherige Importvorbereitung verworfen. Klick dann erneut auf Preview Import, bevor du die aktualisierte E-Mail erstellst.

MJML importieren

Stelle ein vollständiges MJML-Dokument mit genau einem mj-body bereit. Zum Beispiel:

<mjml>
  <mj-body width="600px">
    <mj-section>
      <mj-column>
        <mj-text>Hello from Emailify</mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Das entsprechende JSON verwendet tagName, attributes, children und content:

{
  "tagName": "mjml",
  "children": [{
    "tagName": "mj-body",
    "attributes": { "width": "600px" },
    "children": [{
      "tagName": "mj-section",
      "children": [{
        "tagName": "mj-column",
        "children": [{ "tagName": "mj-text", "content": "Hello from Emailify" }]
      }]
    }]
  }]
}

Emailify validiert MJML mit MJML4, rendert es zu HTML und baut aus diesem HTML dann bearbeitbare Ebenen nach. Der ursprüngliche MJML-Komponentenbaum wird dabei nicht direkt wiederhergestellt. Prüfe nach dem Import eigenes CSS, Schriften, Abstände und das responsive Verhalten.

• Füge mj-include-Inhalte vor dem Import direkt ein; eingebundene Dateien werden nicht geladen.
• Ersetze mj-raw durch bearbeitbare MJML-Komponenten oder importiere das gerenderte HTML zur Prüfung.
• Verwende eine statische Version von MJML-Akkordeons und -Karussells; interaktive Komponenten werden als bearbeitbarer Import nicht unterstützt.
• Entferne XML-DOCTYPE- und Entity-Deklarationen. Korrigiere ungültige Komponentenstrukturen oder Attribute, bevor du es erneut versuchst.

Das Ergebnis prüfen

Vergleiche die erstellte E-Mail mit der Quelle auf dem Desktop und in einer schmalen mobilen Breite wie 375px. Prüfe alle Texte, Bilder, Hintergrundbilder, Buttons und Linkziele und kontrolliere dann das Stapeln der Spalten, die Umbrüche und den Innenabstand.

Der Import versucht, die Quelle auf die unterstützte Layoutstruktur von Emailify abzubilden. Komplexe Verschachtelungen, eigenes CSS und nicht verfügbare Dateien können manuelle Anpassungen erfordern. Eine erfolgreiche Vorbereitung der Quelle garantiert weder eine exakte visuelle Übereinstimmung noch das Verhalten beim Versand in jedem E-Mail-Client.

Schlägt die Vorbereitung fehl, öffne Notes, um das gemeldete Problem zu sehen. Korrigiere die Quelle oder ersetze nicht zugängliche Dateien und sieh dir die Vorschau dann erneut an. Muss das erstellte Layout angepasst werden, nutze Rows, Columns und die responsiven Einstellungen und folge dann der Anleitung zum Testen von E-Mails.