Verwenden Sie Emailify, ein Figma-Plugin von Hypermatic, um responsive E-Mails zu gestalten und sie zu Ihren Omnisend-E-Mails hinzuzufügen.

🔱 Suchen Sie nach der nativen Figma-Integration von Omnisend? Erfahren Sie, wie Sie Figma mit Omnisend integrieren

So funktioniert's

Emailify ist ein Figma-Plugin, das Ihr Figma-Design in produktionsbereiten, responsiven HTML-E-Mail-Code umwandelt.Es enthält eine Omnisend-Exportvorlage, die HTML für die benutzerdefinierten HTML-Kampagnen von Omnisend generiert.

Der Ablauf hat zwei Phasen:

Design und exportiere in Figma. Erstelle die E-Mail mit den Komponenten von Emailify, wähleOmnisend im Exportbereich und exportiere das HTML.
Importiere in Omnisend. Füge das exportierte HTML in eine Kampagne mit der benutzerdefinierten HTML-Funktion von Omnisend ein.

Dies ist eine manuelle Export-und-Einfügen-Integration.Emailify lädt Vorlagen nicht automatisch in Omnisend hoch, daher gibt es keine API-Verbindung, keinen Authentifizierungsschritt und keine Daten, die zwischen den beiden Plattformen gesendet werden.

Bevor Sie beginnen

Stelle sicher, dass:

Du ein Figma-Konto mit Berechtigung zum Ausführen von Plugins hast.
Das Emailify-Plugin ist in Figma installiert.
Sie haben ein Omnisend-Konto mit Zugang zu E-Mail-Kampagnen.
Ihre E-Mail-Bilder sind unter öffentlichen URLs gehostet, oder Sie sind bereit, sie zu hosten.

Diese Integration umfasst drei Plattformen.Hier ist, was jede benötigt:

Plattform	Anforderung
Figma	Jeder Tarif, einschließlich Kostenlos.Sie benötigen einen Platz mit vollem Designzugang, da nur-Anzeige-Plätze keine Plugins ausführen können.
Emailify	Die kostenlose Version funktioniert für grundlegende Exporte.Das Plugin umfasst 10 kostenlose Pro-Nutzungen, nach denen einige Exportoptionen eine Pro-Lizenz erfordern.
Omnisend	Jeder Tarif, einschließlich kostenlos.Benutzerdefinierte HTML-Kampagnen sind in allen Tarifen verfügbar.

⚠️ Emailify funktioniert nur mit E-Mails, die im Plugin erstellt wurden.Sie können ein vorhandenes Figma-Design, das nicht mit Emailify-Komponenten erstellt wurde, nicht konvertieren.

Einrichtungsprozess

Schritt 1. Gehen Sie in Omnisend zu Apps → nach dem suchen Emailify-App und klicken Sie aufJetzt verbinden.

Schritt 2. Installieren Sie Emailify in Figma:

Öffnen Sie eine Figma-Design-Datei.
Gehen Sie zu Tools Plugins Emailify.

Das Plugin-Panel öffnet sich über Ihrer Leinwand.

Schritt 3. Erstellen Sie Ihre E-Mail. Öffnen Sie im Plugin-Panel dieNeue E-Mail-Sektion.

Wählen Sie Leeres Template oder wählen Sie einen Ausgangspunkt aus Layouts oder Figma-Vorlagen.

Schritt 4. Exportieren Sie das HTML für Omnisend:

Wählen Sie HTML exportieren im Plugin-Kopf.
Öffnen Sie im Export-Panel das Dropdown-Menü für den Exporttyp.
Wählen Sie unter der Liste der Plattformintegrationen Omnisend.
Wählen Sie Export für Omnisend.

Emailify generiert das HTML, und Sie können es auf Ihren Computer herunterladen.

Schritt 5. Hosten Sie Ihre Bilder

Der Export umfasst Ihre Bilder als lokale Dateien.E-Mail-Clients können lokale Bilder nicht anzeigen, daher benötigt jedes Bild eine öffentliche URL, bevor Sie das HTML importieren.

Sie haben zwei Optionen:

Verwenden Sie Emailifys Bildhosting. Aktivieren Sie die Option für gehostete Bilder in den Exporteinstellungen, damit das exportierte HTML auf öffentliche URLs verweist.
Hosten Sie die Bilder selbst. Laden Sie sie auf Ihr eigenes CDN oder Ihren Dateispeicher hoch und ersetzen Sie dann jedessrc-Wert im HTML mit der gehosteten URL.

4a1 Überprüfen Sie die Bild-URLs im exportierten HTML, bevor Sie importieren.Wenn irgendein src weiterhin auf einen lokalen Dateipfad zeigt, wird das Bild in der gelieferten Die E-Mail nicht geladen.

Schritt 6. Importieren Sie das HTML in Omnisend.

Siehe Fügen Sie ein benutzerdefiniertes HTML-Element hinzu und konfigurieren Sie es für Details zu den benutzerdefinierten HTML-Anforderungen von Omnisend.

Schritt 6. Fügen Sie Die Personalisierung und erforderliche Links hinzu.

Emailify generiert statisches HTML.Alles, was spezifisch für Omnisend ist, wird nach dem Import hinzugefügt:

Personalisierungs-Tags. Fügen Sie Omnisend-Tags wie ein.[[ contact.firstName ]] direkt im HTML ein, wo Sie dynamische Werte möchten.
Abmeldelink. Jede Die Kampagne benötigt einen Abmeldelink. Fügen Sie die Abmelde-URL von Omnisend in Ihre Fußzeile ein, wenn das Design noch keinen enthält.
Link im Browser anzeigen. Die Preheader-Komponenten von Emailify enthalten einen Platzhalter für "im Browser anzeigen". Ersetzen Sie den Platzhalter durch den Link von Omnisend.

Überprüfen Sie die Die Integration

Senden Sie eine Test-E-Mail, bevor Sie die Die Kampagne planen.

Öffnen Sie die importierte Die Kampagne in Omnisend.
Senden Sie eine Test-E-Mail an Ihre eigene Adresse.
Bestätigen Sie, dass alle Bilder geladen werden.
Bestätigen Sie, dass das Layout sowohl auf Desktop als auch auf Mobilgeräten korrekt dargestellt wird.
Überprüfen Sie die Die E-Mail in mehr als einem Client, wie Gmail und Outlook.
Bestätigen Sie, dass der Abmeldelink funktioniert.
Bestätigen Sie, dass alle Personalisierungs-Tags aufgelöst werden.

4a1 Die Omnisend-Vorschau und eine gelieferte Test-E-Mail können unterschiedliche Ergebnisse liefern.Verwenden Sie eine gelieferte Test-E-Mail als Ihre letzte Überprüfung.

Fehlerbehebung

Das HTML wird beim Import abgelehnt.

Der benutzerdefinierte HTML-Import von Omnisend hat Formatierungsanforderungen.Überprüfen Sie, ob der Code diese erfüllt, und entfernen Sie alle nicht unterstützten Elemente, bevor Sie einfügen.

Bilder werden nicht geladen.

Überprüfen Sie Folgendes:

Jedes src zeigt auf eine öffentliche URL und nicht auf einen lokalen Dateipfad.
Die gehosteten Bild-URLs öffnen sich korrekt in einem Browser.
Die Bilddateien wurden hochgeladen, bevor die Die Kampagne gesendet wurde.

Das Layout bricht in Outlook.

Outlook verwendet eine andere Rendering-Engine als die meisten Clients.In Emailify:

Erneut exportieren mit konfigurierten web-sicheren Schriftarten.
Überprüfen Sie die mobilen Überschreibungseinstellungen für die betroffenen Komponenten.
Testen Sie nach jeder Änderung erneut, da das Rendering in Outlook nicht aus der Figma-Vorschau überprüft werden kann.

Das Plugin lässt sich nicht in Figma öffnen.

Wenn Figma eine Nachricht "Figma-Design anfordern, um Plugins auszuführen" anzeigt, hat Ihr Sitzplatz keinen vollständigen Designzugang.Plugins können auf Sichtplatz-Sitzen nicht ausgeführt werden.Fordern Sie Designzugang von Ihrem Figma-Administrator an.

Änderungen in Figma erscheinen nicht in Omnisend.

Es gibt keine Live-Verbindung zwischen den beiden Plattformen.Nach der Bearbeitung des Designs exportieren Sie das HTML erneut und importieren es in eine neue Die Kampagne.

Häufig gestellte Fragen

Lädt Emailify automatisch Vorlagen in Omnisend hoch?

Nein. Der Omnisend-Export erzeugt eine HTML-Datei, die Sie manuell in Omnisend einfügen.

Brauche ich einen Omnisend-API-Schlüssel?

Nein. Diese Die Integration verwendet nicht die Omnisend-API.

Brauche ich eine kostenpflichtige Emailify-Lizenz?

Nicht unbedingt. Das Plugin enthält 10 kostenlose Pro-Nutzungen, und die kostenlose Version bleibt danach verfügbar.Überprüfen Sie das Emailify-Plugin-Panel, um zu sehen, welche Exportoptionen Ihre aktuelle Version enthält.

Brauche ich einen kostenpflichtigen Omnisend-Tarif?

Nein. Benutzerdefinierte HTML-Diagramme sind in allen Tarifen verfügbar, einschließlich kostenlos.

Kann ich das Design nach dem Import in Omnisend bearbeiten?

Das importierte HTML wird als Code bearbeitet und nicht im Drag-and-Drop-Editor von Omnisend.Ändern Sie das Design in Figma und exportieren Sie erneut.

Kann ich dasselbe Design für mehrere Die Kampagne wiederverwenden?

Ja. Speichern Sie die exportierte HTML-Datei und fügen Sie sie in jede neue Die Kampagne ein.

Kann ich ein vorhandenes Figma-E-Mail-Design in Emailify importieren?

Nein. Emailify exportiert nur E-Mails, die mit seinen eigenen Komponenten im Plugin erstellt wurden.

Funktioniert das für automatisierte Workflow-E-Mails?

Das exportierte HTML kann überall verwendet werden, wo Omnisend benutzerdefiniertes HTML akzeptiert.Überprüfen Sie die verfügbaren benutzerdefinierten HTML-Optionen in Ihrer Workflow-E-Mail.

Haben Sie die Antwort auf Ihre Frage nicht gefunden? Wenden Sie sich über den In-App-Chat oder unter an unser Support-Team [email protected] – wir sind 24/7 verfügbar.

Verwandte Artikel

Integrieren Sie Emailify mit Omnisend