Wenn du aus irgendeinem Grund sehr spezifisches eigenes CSS in deine E-Mail oder HTML in das <head></head>-Tag einfügen musst, geht das über das Emailify-Plugin: Wähl den übergeordneten Container-Frame deiner E-Mail in Figma aus, klick auf den Button Settings und füg deinen Code nach Bedarf ein.

Das Feld Add Mobile CSS Rules fügt diese CSS-Regeln in das @media-Tag für mobile Stile ein. Sie gelten dann für alle Bildschirmgrößen unterhalb der Breite deines Figma-Frames (für CSS-Regeln in diesem Bereich musst du !important verwenden).

Das Feld Add Inline CSS Rules schreibt alle CSS-Eigenschaften automatisch inline in den HTML-Selektor, den du angibst (mit p { color: blue } wird zum Beispiel style="color: blue;" inline in alle <p>-Tags im Code deiner exportierten HTML-E-Mail geschrieben).

Das Feld Add Head Tag HTML fügt das HTML, das du hier schreibst, automatisch in das <head></head>-Tag deiner exportierten HTML-E-Mail ein. Das ist praktisch, wenn deine E-Mail-Marketing-Plattform dir die Möglichkeit gibt, spezielle Tracking-Tags oder andere HTML-Tags hinzuzufügen, die in das <head></head>-Tag deines HTML gehören.

Emailify minimiert HTML-Exporte automatisch, um die Dateigröße so weit wie möglich zu verringern. Wenn du aber eigenen Code hinzufügst, bei dem CSS-Klassen wegen Interaktivität über Pseudoklassen nicht verändert werden dürfen, kannst du die Minimierung überspringen: Achte darauf, dass dein eigenes CSS mindestens eine #interactive:checked-Stilregel enthält (zum Beispiel #interactive:checked ~ .content { display: block; }). Dann schaltet das Plugin die Minimierung für diese E-Mail automatisch ab.

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.