---
url: "/de/emailify/design/library.md"
description: "Lade, organisiere und durchsuche Emailify-Komponenten aus deiner Figma-Bibliothek."
---

# Eine wiederverwendbare Komponentenbibliothek erstellen

> Lade, organisiere und durchsuche Emailify-Komponenten aus deiner Figma-Bibliothek.

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? {#does-emailify-load-components-from-the-current-figma-file-only}

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 {#adding-components-from-your-component-library-tab}

### 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.
[Embedded media](https://www.youtube-nocookie.com/embed/lQb9-_9maxs)

[Video](/assets/videos/emailify/load-component-library.mp4)

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 {#organizing-your-component-library-with-custom-categories}

### 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.
[Embedded media](https://www.youtube-nocookie.com/embed/M6p5AY2-g54)

[Video](/assets/videos/emailify/create-custom-categories.mp4)

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 {#searching-and-sorting-your-component-library}

[Video](/assets/videos/emailify/search-and-sort-components.mp4)

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 {#adding-metadata-to-your-figma-components}

[Video](/assets/videos/emailify/figma-component-metadata.mp4)

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.