Dynamische und personalisierte Inhalte mit Emailify

Füge deinen E-Mails dynamische Inhalte hinzu – mit Merge-Tags deiner E-Mail-Marketing-Plattform und eigenen Codeblöcken in ihrer Syntax.

Video-Tutorial: Dynamische Inhalte zu HTML-E-Mails in Figma hinzufügen

Dieses Video zeigt dir, wie du mit dem Plugin Emailify dynamische Inhalte zu HTML-E-Mails in Figma hinzufügst.

Video-Tutorial: Einen dynamischen Produkt-Feed zu deinen Klaviyo-E-Mails in Figma hinzufügen

Dieses Video zeigt dir, wie du mit dem Figma-Plugin Emailify eigene Klaviyo-Produkt-Feeds in eigene HTML-Vorlagen einbaust.

Video-Tutorial: E-Mail-Vorlage für einen Klaviyo-Flow zu abgebrochenen Warenkörben in Figma erstellen

Dieses Video zeigt dir, wie du mit dem Figma-Plugin Emailify eigene Klaviyo-Flows zu abgebrochenen Warenkörben in eigene HTML-Vorlagen einbaust.

Plattformspezifische personalisierte Inhalte hinzufügen ​

Personalisierte Texte, etwa für die Namen der Empfänger, fügst du mit den Merge-Tags deines E-Mail-Dienstleisters hinzu (zum Beispiel MailChimp, Klaviyo usw.). Trag dazu dein Merge-Tag in deine Emailify-Textebenen ein.

Fügst du zum Beispiel Hello, %FIRSTNAME% oder Hello, *|FNAME|* (je nach Syntax und Werten deiner Plattform) in den Inhalt deiner Figma-Textebene ein, wird das Merge-Tag beim Versand der E-Mail automatisch durch die echten Daten ersetzt.

Da sich diese Tags je nach Plattform unterscheiden, über die du deine E-Mails verschickst, sieh in der Vorlagendokumentation deines E-Mail-Dienstleisters nach, welche Tags du verwenden kannst.

Dokumentation zu Vorlagenvariablen einiger Plattformen ​

Hier findest du Links zu einigen (aber nicht allen) beliebten Plattformen:

If/else-Logik zwischen Row-, Wrapper- oder Hero-Ebenen einfügen ​

Mit dem Ebenentyp 🧑‍💻 Custom Code fügst du eigene Vorlagenlogik zwischen den Zeilen deiner Designs ein. Achte darauf, dass die Syntax zu deiner E-Mail-Marketing-Plattform passt; ungefähr sieht das so aus:

{% if customer_type == 'premium' %}

Hier eine Emailify-Row

{% else %}

Hier eine andere Emailify-Row

{% endif %}

Personalisierte bzw. dynamische Bilder hinzufügen ​

Du kannst die Bild-URL einer bestimmten Bildebene in deinen E-Mail-Designs überschreiben, indem du einen Wert in das Feld Override Image Src einträgst. Das kann entweder die URL eines Bildes sein, das bereits irgendwo hochgeladen ist (zum Beispiel https://mycdn/img.jpg), oder eine dynamische Variable in der Vorlagensprache deiner E-Mail-Plattform (zum Beispiel { variable.my_image }). Der Wert wird beim HTML-Export automatisch in das src-Attribut des <img />-Tags übernommen.

Optional die Höhe (mit „auto“ als Breite) für ein dynamisches Bild festlegen ​

Bei dynamischen Bildern, deren Höhe du festlegen willst, während sich die Breite natürlich anpasst (weil die Abmessungen der Bilddatei hinter der dynamischen URL vorab oft nicht bekannt sind), gehst du in Figma so vor:

  1. Aktiviere in der Figma-Oberfläche Lock aspect ratio für die Bildebene.
  2. Leg in der Figma-Oberfläche einen Wert für Max height der Bildebene fest.

Danach wird das Bild mit fester Höhe (entsprechend deiner maximalen Höhe in Figma) und automatisch angepasster Breite dargestellt, statt wie standardmäßig mit fester Breite und automatischer Höhe. So nehmen deine dynamischen Bilder den richtigen vertikalen Platz ein und behalten ihr natürliches Seitenverhältnis.

Dieses Verhalten gilt nur für Bilder mit dynamischen URLs; statische, von Emailify exportierte Bilder und Bilder auf MJML-Plattformen sind nicht betroffen.

Lange eigene Textinhalte kürzen ​

Lange dynamische Text-Tags in deinen E-Mail-Designs können das Design verfälschen, weil sie bestimmte Elemente oder Hintergrundbilder künstlich in die Höhe ziehen, obwohl der endgültige Inhalt, der die dynamischen Platzhalter-Tags beim Versand ersetzt, kürzer sein kann als das Tag selbst.

Um das zu vermeiden, kannst du deine Figma-Textebene auf eine von dir festgelegte maximale Zeilenzahl kürzen. So gehst du vor:

  1. Klick auf deine Textebene im Emailify-Frame in Figma
  2. Setz die Textgrößen-Einstellung der Textebene auf Auto width
  3. Öffne das Fenster Type settings (über das Symbol ...)
  4. Setz die Option Truncate text auf Truncate enabled
  5. Setz die Eigenschaft Max lines (darunter) auf die maximale Zahl an Zeilen, auf die dein Text umbrechen darf
  6. Setz die Eigenschaft Horizontal resizing unter Auto layout der Textebene auf Fill container

Die Kürzung gilt nur auf deinem Figma-Canvas, damit der vollständige dynamische Textwert nicht mehr Höhe einnimmt als nötig. Der endgültige HTML-Export enthält keine Kürzung, da der dynamische Text automatisch durch echte Inhalte ersetzt wird, wenn die E-Mail über die E-Mail-Marketing-Plattform, für die du die dynamischen Tags verwendest, an deine Zielgruppe verschickt wird.

Buttons mit langem Platzhaltertext schmal halten ​

Enthält ein Button eine lange Variable oder einen Platzhalter, der später durch ein kürzeres Datum oder Label ersetzt wird, richte die Größe seiner Textebene nach dem endgültigen Label. Sonst kann der Platzhalter den exportierten Button zu breit machen, und Outlook behält diese Breite womöglich bei, auch nachdem deine E-Mail-Plattform den Platzhalter ersetzt hat.

  1. Wähle in Figma die Textebene im Button aus.
  2. Setz Horizontal resizing dieser Textebene auf Fixed width und wähle eine Breite, die zum erwarteten endgültigen Datum oder Label passt.
  3. Öffne Type settings, aktiviere Truncate text und setz Max lines auf 1.
  4. Lass die vollständige Variable bzw. den Platzhalter in der Textebene und exportiere die E-Mail erneut.
  5. Schick über deine E-Mail-Plattform einen Test, um den Button mit dem endgültigen Ersatztext zu prüfen, falls betroffen auch in Outlook.

Die Kürzung ändert nur, wie der Platzhalter auf dem Figma-Canvas erscheint. Der vollständige Platzhalter bleibt im exportierten HTML, damit deine E-Mail-Plattform ihn ersetzen kann. Plane genug Breite für das längste endgültige Label ein, das du voraussichtlich verschickst.

Dynamische Variablen für Farben und Schriftfamilien hinzufügen ​

Dynamische Farbvariablen ​

Soll eine Hintergrund-, Text- oder Konturfarbe in deinen E-Mail-Designs als dynamisches Code-Snippet (zum Beispiel {{ primary_color }}) statt als normaler Hex-Wert der Figma-Farbe (zum Beispiel #000000) ausgegeben werden, erstelle einen Figma-Farbstil und achte darauf, dass sein Name doppelte geschweifte Klammern enthält (zum Beispiel {{ my_color_var_name }}). Dieser Name deines Farbstils wird dann automatisch als CSS-Wert für color, background-color oder border-color verwendet, wenn das Plugin Emailify das HTML erzeugt.

Dynamische Variablen für Schriftfamilien ​

Ebenso kannst du einen font-family-CSS-Wert als dynamisches Code-Snippet (zum Beispiel {{ customer.font_family }}) statt als normalen Schriftwert aus Figma (zum Beispiel Arial, sans-serif) ausgeben lassen. Erstelle dazu einen Figma-Textstil und achte darauf, dass sein Name doppelte geschweifte Klammern enthält (zum Beispiel {{ my_font_var_name }}). Dieser Name deines Stils wird dann automatisch als CSS-Wert für font-family verwendet, wenn das Plugin Emailify das HTML erzeugt.

Eine Data Table Row mit dynamischen Daten in einer Schleife wiederholen ​

Um Daten aus deiner E-Mail-Plattform zu durchlaufen, wähle eine Data Table Row aus und öffne Settings. Trag die Schleifensyntax in Opening Code Wrapper (zum Beispiel {% for product in collection.products %}) und Closing Code Wrapper (zum Beispiel {% endfor %}) ein. Emailify setzt die Tags im exportierten HTML um das <tr></tr>-Element dieser Zeile.

Sobald du die Wrapper-Tags zur Data Table Row-Ebene hinzugefügt hast, kannst du die Ebenen deiner Zeile nach Bedarf mit dynamischen Inhalten füllen.

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.