Alle Elemente, die du über das Emailify-Plugin zu Figma hinzufügst, werden automatisch als native Figma-Komponenten angelegt, deren Stil und Inhalt du anpassen kannst. Auf alle Emailify-Komponenten in deiner aktuellen Figma-Datei greifst du direkt im Plugin zu, indem du in der Tab-Leiste im Header auf den Icon-Button Library klickst.

Lädt Emailify nur Komponenten aus der aktuellen Figma-Datei?

Ja. Der Tab Library lädt Emailify-Komponenten aus der Figma-Datei, die du gerade in Figma geöffnet hast.

Öffnet jemand aus deinem Team eine andere Datei, zeigt Emailify nur die Emailify-Komponenten, die in dieser Datei bereits vorhanden sind. Hast du in der aktuellen Datei Komponenten hinzugefügt oder aktualisiert, klick auf Load all Emailify Components from this Figma file oder nutze Refresh, um die Datei erneut zu durchsuchen.

Komponenten aus dem Tab „Component Library“ hinzufügen

Video-Tutorial: Eine Komponentenbibliothek für HTML-E-Mail-Designs in Figma erstellen

Dieses Video zeigt, wie du mit dem Figma-Plugin Emailify eine Komponentenbibliothek für HTML-E-Mails in Figma gestaltest.

Ein Klick auf Load all Emailify Components from this Figma file findet alle Emailify-Komponenten in deiner Datei und lädt Vorschauen davon. Klickst du im Plugin auf eine Komponente, wird sie automatisch zum ausgewählten Emailify-Frame hinzugefügt – genau wie bei jeder anderen Kategorie.

Hast du seit dem ersten Laden neue Komponenten zu deiner Figma-Datei hinzugefügt, klick im Plugin auf den Icon-Button Refresh. Die Figma-Datei wird dann erneut nach Emailify-Komponenten durchsucht, und diese werden in die Liste aufgenommen.

Deine Komponentenbibliothek mit eigenen Kategorien organisieren

Video-Tutorial: Eigene Kategorien für E-Mail-Komponenten in Figma hinzufügen

Dieses Video zeigt, wie du mit dem Figma-Plugin Emailify eigene Kategorien für E-Mail-Komponenten in Figma hinzufügst.

Standardmäßig sind alle deine Figma-Komponenten Uncategorized. Du kannst aber eigene Kategorien anlegen, indem du in der Tab-Leiste unter dem Header der Komponentenbibliothek auf den Icon-Button Pencil klickst.

Dort erstellst du neue eigene Kategorien und verschiebst Komponenten aus bestehenden Kategorien in jede andere Kategorie, die du angelegt hast.

Du kannst eine eigene Kategorie auch jederzeit entfernen. Deine Figma-Komponenten werden dabei nicht gelöscht, sondern automatisch zurück in die Kategorie Uncategorized verschoben.

Deine Komponentenbibliothek durchsuchen und sortieren

Um eine eigene Figma-Komponente im Tab der Komponentenbibliothek schnell zu finden, filterst du die Liste über das Eingabefeld Search nach dem Ebenennamen der Figma-Komponente.

Du kannst die Liste der Komponenten auch nach einer dieser Optionen sortieren:

Sort by Figma Layer Age

• Newest to Oldest ↓
• Oldest to Newest ↑

Sort by Figma Layer Name

• Figma Layer Name ↓
• Figma Layer Name ↑

Sort by Figma Layer Order

• Figma Layer Order ↓
• Figma Layer Order ↑

Sort Visually (Rows)

• Visually Top to Bottom ↓
• Visually Bottom to Top ↑

Sort Visually (Columns)

• Visually Left to Right →
• Visually Right to Left ←

Die visuelle Sortierung fasst leicht versetzte Komponenten in derselben Zeile oder Spalte zusammen. Die Sortierung nach Ebenennamen berücksichtigt Zahlen, sodass Namen wie Hero 2 vor Hero 10 erscheinen.

Metadaten zu deinen Figma-Komponenten hinzufügen

Um deinen Figma-Komponenten Metadaten hinzuzufügen, klick in Figma auf deine Komponentenebene und dann in der rechten Seitenleiste von Figma neben dem Komponentennamen auf den Icon-Button Component configuration. Dort gibst du einen Text für How to use this component und eine URL als Link to documentation ein.

Sind diese Angaben bei einer deiner Emailify-Komponenten vorhanden, wird ihre Beschriftung im Tab der Komponentenbibliothek automatisch mit deiner Dokumentations-URL verlinkt, und die Beschreibung zur Verwendung erscheint im Tooltip, wenn du mit der Maus über das Vorschaubild fährst.