Um die Komponenten im Emailify-Plugin zu durchsuchen, klick auf einen der Kategorie-Tabs unter der Header-Leiste des Plugins. Jeder Tab zeigt die Komponenten seiner Kategorie. Scrolle nach oben und unten, um die Unterkategorien im ausgewählten Tab visuell zu durchstöbern.

Um eine aus den Presets hinzugefügte Row neu anzuordnen, klick sie an und zieh sie im Emailify-Container-Frame (in dem Auto Layout aktiviert ist) nach oben oder unten, um ihre Position zu ändern.

Die externe Komponentenbibliothek durchsuchen

Video-Tutorial: Über 500 kostenlose HTML-E-Mail-Komponenten in Figma-Designs nutzen

Dieses Video zeigt, wie du mit dem Figma-Plugin Emailify über 500 kostenlose HTML-E-Mail-Komponenten in deinen Figma-Designs nutzt.

Neben den integrierten Komponenten im Emailify-Plugin kannst du über die Emailify-Web-App auch Komponenten aus externen Komponentenbibliotheken durchsuchen und verwenden. So hast du Zugriff auf eine größere Auswahl vorgefertigter E-Mail-Komponenten, die du direkt in deine Figma-Designs kopieren kannst.

So verwendest du Komponenten aus der externen Bibliothek:

1. Besuche die Emailify-Web-App, um den vollständigen Katalog der verfügbaren E-Mail-Komponenten zu durchsuchen.
2. Filtere Komponenten nach Kategorie oder Verwendung in Vorlagen oder suche nach bestimmten Elementen.
3. Klick bei einer Komponente auf den Button Copy Figma Component, um ihr HTML-Snippet in deine Zwischenablage zu kopieren.
4. Wähle in Figma den Emailify-Frame aus, in den du die Komponente einfügen willst.
5. Füge die Komponente mit Cmd+V (Mac) oder Ctrl+V (Windows) direkt in den Emailify-Frame ein.

Die eingefügte Komponente fügt sich automatisch in dein E-Mail-Design ein und lässt sich wie jede andere Emailify-Komponente anpassen.

Externe Komponenten nutzen die Auto-Layout-Struktur von Emailify. Zieh eine Komponente im Emailify-Container-Frame nach oben oder unten, um sie neu anzuordnen.

Kategorien der Starter-Komponenten

Emailify ordnet die Komponenten in einige Kategorien (und Unterkategorien) ein, damit du leichter findest, was du für dein E-Mail-Design brauchst.

Headers

Werden meist oben in der E-Mail verwendet. Das können Komponenten wie ein Markenlogo, Links zur Online-Ansicht („View online“), ein Navigationsmenü, Social-Icons usw. sein.

Images

Komponenten zur Darstellung von Bildinhalten, etwa ein Bild in voller Breite, ein Hintergrundbild (um Text darüberzulegen), ein Logo-Raster, Bildkarten, Raster und Bildunterschriften.

Content

Enthält textbasierte Komponenten wie Absätze, Zitate, Testimonials, Autoren-Avatare, Artikelkarten, Feature-Icons, Kennzahlen, Promo-Codes und Produktkarten.

Ecomm (E-Commerce)

Bietet gängige Komponenten zur Darstellung von Produkten oder Elementen einer E-Mail nach dem Kauf sowie einige Klaviyo-spezifische Komponenten für dynamische Produktraster auf dieser Plattform.

CTAs (Call To Action)

Diese Komponenten fordern Leser vor allem auf, etwas anzuklicken oder eine Aktion auszuführen. Das können Buttons, Links, Hero-Bereiche mit Hintergrundbild, Video-Vorschaubilder, Feature-Kacheln, App-Store-Buttons, Social-Media-Icons und Produkt-Heros sein.

Footer

Werden meist unten in der E-Mail verwendet. Das können Komponenten für dein Markenlogo und deine Adressdaten, Social-Media-Links, Abmeldelinks oder Buttons zum Herunterladen von Apps sein.

Komponenten, die du aus einer anderen Kategorie hinzufügst, werden automatisch in der Kategorie „Favourites“ gespeichert, damit du sie später schnell wiederfindest. Du kannst Komponenten auch aus deinen Favoriten entfernen, indem du auf das Icon Trash klickst. Die Komponente wird dann aus deiner Favoritenliste entfernt, aber nicht aus den anderen Kategorien „gelöscht“.