Deinen ersten E-Mail-Frame von Emailify in Figma erstellen

Jedes E-Mail-Design in Emailify beginnt mit einem speziellen leeren E-Mail-Frame in Figma, den du mit Layouts und Inhalten von Emailify füllst.

Wenn du das Emailify-Plugin zum ersten Mal auf einer Figma-Seite ausführst, die noch keine Container-Frames von Emailify enthält, öffnet das Plugin automatisch das Modal New Email, damit du wählen kannst, wie du beginnen willst.

Das Modal New Email öffnet sich auf dem Tab Blank, gefolgt von Templates, Layouts und AI Designer. Lokal aktivierte Entwicklungs-Builds zeigen am Ende außerdem den experimentellen Tab „Import“.

Gib deiner E-Mail im Tab Blank einen Namen (zum Beispiel „My Email Template“) und klick dann auf den Button Add New Emailify Container, um deinen leeren E-Mail-Frame zu deiner Figma-Seite hinzuzufügen.

Das Figma-Plugin Emailify erkennt diesen neuen, speziellen Frame automatisch als E-Mail. Du kannst ihm dann mit den Design-Funktionen des Plugins Layouts und Komponenten hinzufügen.

Bist du neu im Plugin oder suchst Inspiration, kannst du im Modal New Email Layouts verwenden, die Unterkategorie Randomize ausprobieren, Figma-Vorlagen duplizieren oder den AI Designer (BETA) nutzen.

Weitere Emailify-Container hinzufügen ​

Füge so viele Container-Frames von Emailify hinzu, wie du brauchst. Das Plugin behandelt jeden Container als eigene E-Mail.

Hast du deiner Seite schon einen Emailify-Frame hinzugefügt, kannst du jederzeit einen neuen leeren Frame anlegen: Klick im Emailify-Plugin neben der E-Mail-Auswahl auf den Icon-Button + (Plus). Du wirst dann aufgefordert, einen neuen leeren E-Mail-Frame zu benennen und zu erstellen.

Wenn du nicht bei null anfangen willst, kannst du einen vorhandenen Emailify-Frame auch kopieren und einfügen. Komponenten lassen sich ebenfalls aus einem Emailify-Frame kopieren und in einen anderen einfügen.

Einen Emailify-Frame auswählen ​

Um eine E-Mail auszuwählen und Komponenten hinzuzufügen, nutze das Dropdown der E-Mail-Auswahl im Emailify-Plugin oder klick auf dem Figma-Canvas auf den übergeordneten Frame.

Wählst du eine E-Mail im Auswahlfeld aus, springt die Ansicht deiner Figma-Seite automatisch zur ausgewählten E-Mail.

Prüfen, welcher E-Mail-Frame aktiv ist Der Name, der im Dropdown der E-Mail-Auswahl von Emailify als ausgewählt angezeigt wird, zeigt immer an, welche E-Mail gerade ausgewählt ist.

Mobiler Breakpoint der E-Mails ​

Die aus Emailify exportierten HTML-E-Mails haben einen einzigen „Breakpoint“, der automatisch aus der Breite des Desktop-Frames in Figma übernommen wird. Ist dein Emailify-Frame zum Beispiel 600px breit, greifen die mobilen Stile bzw. Anpassungen ab 599px und darunter.

Eine E-Mail-Breite zwischen 600px und 640px wird in der Regel empfohlen, weil die Lesebereiche mancher E-Mail-Clients oder Apps schmaler als 700px sein können. In einem schmaleren Lesebereich werden womöglich die mobilen Stile statt des Desktop-Layouts angezeigt. Ist dein Emailify-Frame zwischen 600px und 640px breit, wird das Desktop-Layout in E-Mail-Clients auf Desktop und Tablet einheitlich dargestellt.