Emailify unterstützt keine E-Mail-Designs in Figma, die außerhalb des Plugins erstellt wurden.

Emailify im Überblick

Emailify hilft dir, E-Mails in Figma zu gestalten. Dazu bietet es eine Reihe gängiger Starter-Komponenten, deren Inhalte, Stile und Branding du mit den normalen Design-Werkzeugen von Figma anpasst. Anschließend legst du responsive Stile fest und exportierst die E-Mails als produktionsreifes HTML.

Emailify kann …

• dir Starter-Komponenten und Design-Werkzeuge für E-Mail-Layouts bereitstellen.
• beliebige Text- und Bildinhalte, visuelle Stile und Links mit Figma anpassen lassen.
• deine (mit dem Emailify-Plugin gestalteten) E-Mails als produktionsreifes HTML exportieren.
• HTML-Vorlagen per API auf E-Mail-Marketing-Plattformen hochladen.

Emailify kann nicht …

• E-Mail-Designs automatisch umwandeln, die von Hand in Figma ohne das Emailify-Plugin gestaltet wurden. (Hast du ein solches Design, musst du es mit den Design-Werkzeugen des Emailify-Plugins nachbauen, um es als HTML zu exportieren.)
• fehlende Unterstützung von E-Mail-Clients für bestimmte HTML-/CSS-Eigenschaften umgehen, die nur in einigen Clients funktionieren (zum Beispiel Dark-Mode-Stile überschreiben in Gmail oder Outlook oder eigene Schriften anzeigen in anderen Clients als Apple Mail).

Wie unterscheidet sich Emailify von anderen E-Mail-Plugins für Figma?

Anders als andere Figma-Plugins, die dir beim Export von E-Mails aus Figma nach HTML helfen wollen, versucht Emailify nicht, eine beliebige, von Hand gestaltete Figma-Datei automatisch und wie von Zauberhand in HTML-Code zu verwandeln, den du per E-Mail versenden kannst.

Das Problem anderer Figma-Plugins für „E-Mail-Design zu HTML“

Das grundlegende Problem bei der Umwandlung beliebiger von Hand gestalteter E-Mail-Mockups aus Figma in HTML ist: Es gibt kein Konzept von Absicht.

Das einfachste Beispiel: Überleg dir, was eine „Frame“-Ebene in Figma mit einer „Rectangle“-Ebene und einer „Text“-Ebene darin (nach der Absicht des Designers) sein soll:

• ein klickbarer Button?
• ein einzelnes statisches Bild (mit eingebettetem Text)?
• ein Hero-Block mit Hintergrundbild und darüberliegendem Rich Text?
• ein Link mit Social-Icon?

Selbst wenn ein Figma-Plugin die Absicht dieser 3 Ebenen richtig erkennen könnte, wüsste es immer noch nicht, wie das Element auf Mobilgeräten aussehen soll, ob es beim Klicken irgendwohin verlinkt oder ob es weitere Attribute hat (etwa alt-Text).

Schon dieses Beispiel ist knifflig, und dabei ist es noch großzügig gewählt: Es geht nur darum, die Absicht von 3 Figma-Ebenen zu verstehen. Danach wird es nur komplexer.

Ein echtes E-Mail-Mockup in Figma kann Tausende Ebenen enthalten, die womöglich in Dutzenden (oder Hunderten) weiterer „Frame“- oder „Group“-Ebenen verschachtelt sind, die ebenfalls nichts darüber verraten, wie sie als HTML dargestellt werden sollen. Damit wird es schnell fast unmöglich, aus deinem Design in Figma (Hunderte unstrukturierte Rechtecke, Frames, Gruppen und Textebenen) das HTML zu erzeugen, das du brauchst.

HTML-E-Mails sind ohnehin sehr schwer in allen E-Mail-Clients einheitlich darzustellen. Deshalb halten wir es für viel zu riskant, die Absicht des Designers aus unendlich vielen möglichen Ebenenstrukturen in Figma abzuleiten, zumal jeder Designer anders arbeitet.

So löst Emailify das Problem der „Absicht“

Um das Problem der Absicht zu lösen, verfolgt Emailify beim E-Mail-Design einen klar vorgegebenen Ansatz „auf Schienen“: Das Plugin hilft dir, spezielle Ebenen in Figma zu erstellen, die beim Export direkt echten HTML-Elementen entsprechen. So weiß das Plugin genau, was jedes Element deiner E-Mail sein soll (ein „Button“ ist zum Beispiel ein Button, eine „Column“ ist eine Spalte usw.).

Fügst du deinem E-Mail-Design in Figma zum Beispiel mit dem Emailify-Plugin eine Button-Ebene hinzu, entsteht eine neue Ebene mit speziellen Daten. Diese teilen Emailify mit, dass es sich um einen Button handelt und nicht bloß um eine Rechteck-Ebene, die vielleicht (oder vielleicht auch nicht) ein „Button“ sein soll.

Mit diesen Design-Werkzeugen erstellst du schnell Layouts und Inhaltselemente, die Emailify versteht und zuverlässig automatisch als HTML exportieren kann.

Welche Designs kannst du mit Emailify und Figma erstellen?

Emailify bietet eine ganze Reihe von Werkzeugen für Layouts, deren Inhalte und Stile du mit Figma anpasst und für die du außerdem ein responsives Design festlegen kannst.

Kombinierst du die Werkzeuge des Plugins mit Figma für Gestaltung und Inhalte, entsteht ein E-Mail-Design, das komplett individuell ist und zu deiner Marke passt.

Zur Inspiration für eigene E-Mails in deinem Branding kannst du dir gern diese kostenlosen, mit Emailify kompatiblen Figma-Vorlagen ansehen (die vollständig mit Emailify in Figma gestaltet wurden).

In der Beschreibung jeder Figma-Vorlage auf ihrer Figma-Seite findest du außerdem einen Link zu einem vollständigen Schritt-für-Schritt-Video-Tutorial, das zeigt, wie sie entstanden ist. Du kannst auch die vollständige YouTube-Playlist zu allen Figma-Vorlagen durchsehen.

Die Ebenenstruktur von Emailify-Designs in Figma verstehen

Erstellst du die Layouts deiner E-Mails mit den Design-Werkzeugen von Emailify, also den Starter-Komponenten und Quick Add Element (dem Dropdown unten im Plugin), legt das Plugin die nötigen Ebenenstrukturen automatisch für dich an.

Es ist sehr wichtig, dass du diese grundlegende Ebenenstruktur beibehältst. Verschachtle die erzeugten Figma-Ebenen zum Beispiel nicht in Frames oder Gruppen, die du selbst in Figma hinzugefügt hast. Sonst kommt das Plugin durcheinander und behandelt diese Blöcke als fremde Ebenen (die als statische Bilder statt als Rich Text bzw. HTML-Inhalt dargestellt werden).

Beispiel für die Ebenenstruktur von Emailify

Wie das aussieht, zeigt der Screenshot unten: Er enthält eine Reihe von Figma-Ebenen, die das Emailify-Plugin automatisch erstellt hat.

Du siehst eine sehr einheitliche Ebenenstruktur: Der übergeordnete E-Mail-Frame von Emailify kann direkt eine oder mehrere „Row“-Ebenen enthalten. Jede davon kann eine oder mehrere „Column“-Ebenen enthalten, und jede „Column“-Ebene wiederum eine oder mehrere „Content“-Ebenen (zum Beispiel Texte, Bilder, Buttons usw.).

Einfaches Beispiel für die Ebenenstruktur von Emailify

• ✉️ Email
  • 🦸 Hero
    • ✍️ Text
    • ✍️ Text
    • 🔗 Button
      • ✍️ Button Text
  • 🚣 Row
    • 🏛️ Column
      • 📷 Image
    • 🏛️ Column
      • ✍️ Text
      • ✍️ Text
  • 🚣 Row
    • 🏛️ Column
      • 📷 Image
    • 🏛️ Column
      • 🪑 Data Table
        • 🪑🚣 Data Table Row
          • 🪑🏛️ Data Table Cell (Content)
            • 📷 Vector Icon
          • 🪑🏛️ Data Table Cell (Content)
            • ✍️ Text
        • 🪑🚣 Data Table Row
          • 🪑🏛️ Data Table Cell (Content)
            • 📷 Vector Icon
          • 🪑🏛️ Data Table Cell (Content)
            • ✍️ Text
  • 🚣 Row
    • 🏛️ Column
      • 📷 Image
      • ✍️ Text
      • 🐦 Social
        • 🔗 Social Icon Link
          • 📷 SVG Vector Icon
        • 🔗 Social Icon Link
          • 📷 SVG Vector Icon
        • 🔗 Social Icon Link
          • 📷 SVG Vector Icon
        • 🔗 Social Icon Link
          • 📷 SVG Vector Icon
      • 🍔 Navigation
        • 🔗 Nav Link
          • ✍️ Nav Link Text
        • 🔗 Nav Link
          • ✍️ Nav Link Text
  • 🚣 Row
    • 🏛️ Column
      • 🪑 Data Table
        • 🪑🚣 Data Table Row
          • 🪑🏛️ Data Table Cell (Content)
            • ✍️ Text
          • 🪑🏛️ Data Table Cell (Content)
            • ✍️ Text
        • 🪑🚣 Data Table Row
          • 🪑🏛️ Data Table Cell (Content)
            • ✍️ Text
          • 🪑🏛️ Data Table Cell (Content)
            • ✍️ Text
  • 🎁 Wrapper (For Multiple Rows)
    • 🚣 Row
      • 🏛️ Column
        • 📷 Image
      • 🏛️ Column
        • ✍️ Text
    • 🚣 Row
      • 🏛️ Column
        • 📷 Image
      • 🏛️ Column
        • ✍️ Text

Ebenentypen in Emailify

Mehr über die einzelnen Ebenentypen erfährst du in der Emailify-Dokumentation zu den Layout-Elementen und Design-Elementen.

Noch einmal: Diese Struktur muss unbedingt erhalten bleiben. Verschiebst du die Ebenen in eine falsche Reihenfolge, wird das HTML nicht wie erwartet dargestellt. (Du kannst zum Beispiel keine „Row“ in eine andere „Row“ legen, keine „Text“-Ebene direkt in einen „Email“-Frame und keine „Row“ in eine „Column“ usw.)

Am einfachsten stellst du die richtige Struktur sicher, indem du Starter-Komponenten aus dem Emailify-Plugin hinzufügst und Inhalte und Stile nach Bedarf anpasst, ohne die Struktur deiner Layout-Ebenen grundlegend zu verändern.

Deine Ebenen in Figma anpassen

Video-Tutorial: E-Mails in Figma gestalten und als HTML exportieren

Dieses Video zeigt, wie du mit dem Emailify-Plugin produktionsreife, responsive HTML-E-Mails in Figma gestaltest und exportierst.

Fügst du deiner E-Mail eine Emailify-Komponente hinzu, wird sie auf deinem Figma-Canvas dargestellt. Dort arbeitest du mit den Ebenen wie gewohnt (so, als hättest du sie selbst von Hand hinzugefügt).

Bei einer Textebene kannst du also zum Beispiel über das normale Einstellungs-Panel von Figma den Inhalt, die Schriftgröße, die Zeilenhöhe, die Laufweite, den Absatzabstand und die horizontale Ausrichtung ändern.

Emailify erstellt bewusst sehr einfache Elemente, damit du Bilder, Texte und Layoutwerte an dein Branding und deinen Styleguide anpassen kannst.

Komponenten als Figma-Instanzen wiederverwenden Hast du eine Komponente angepasst, kannst du sie mehrfach als Figma-Instanz wiederverwenden, auch später in anderen E-Mail-Designs.

Die Inhaltskomponenten von Emailify nutzen Auto Layout von Figma. Die mitgelieferten Komponenten von Emailify verwenden Auto Layout. So kannst du Layoutwerte wie den Innenabstand und den Abstand zwischen Spalten oder Elementen ganz einfach anpassen.

Nächste Schritte

• Folge der Schnellstartanleitung für Emailify, um deine erste E-Mail zu erstellen.
• Erfahre, wie du Inhalte in Emailify-Layouts ausrichtest, und füge dann responsive E-Mail-Stile hinzu.
• Entdecke das Figma-Plugin Emailify für produktionsreife HTML-Exporte und Plattform-Integrationen.