---
url: "/fr/emailify/design/library.md"
description: "Chargez, organisez et recherchez les composants Emailify de votre bibliothèque Figma."
---

# Créer une bibliothèque de composants réutilisables

> Chargez, organisez et recherchez les composants Emailify de votre bibliothèque Figma.

Tous les éléments que vous ajoutez à Figma depuis le plugin Emailify deviennent automatiquement des composants Figma natifs, dont vous pouvez personnaliser le style et le contenu. Tous les composants Emailify de votre fichier Figma actuel sont accessibles directement depuis le plugin, en cliquant sur le bouton d’icône **Library** dans la rangée d’onglets de l’en-tête.

## Emailify charge-t-il uniquement les composants du fichier Figma actuel ? {#does-emailify-load-components-from-the-current-figma-file-only}

Oui. L’onglet **Library** charge les composants Emailify du fichier Figma actuellement ouvert.

Si un collègue ouvre un autre fichier, Emailify n’affiche que les composants Emailify déjà présents dans ce fichier. Après avoir ajouté ou modifié des composants dans le fichier actuel, cliquez sur **Load all Emailify Components from this Figma file** ou utilisez **Refresh** pour analyser de nouveau le fichier.

## Ajouter des composants depuis l’onglet de votre bibliothèque de composants {#adding-components-from-your-component-library-tab}

### Tutoriel vidéo : créer une bibliothèque de composants pour vos designs d’emails HTML dans Figma

Cette vidéo montre comment concevoir une bibliothèque de composants Figma pour vos emails HTML avec le plugin Figma Emailify.
[Embedded media](https://www.youtube-nocookie.com/embed/lQb9-_9maxs)

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

Le bouton **Load all Emailify Components from this Figma file** recherche les composants Figma Emailify de votre fichier et charge leurs aperçus. Cliquer sur un composant dans le plugin l’ajoute automatiquement au frame Emailify sélectionné, comme pour n’importe quelle autre catégorie.

Si vous avez ajouté de nouveaux composants à votre fichier Figma depuis le premier chargement, cliquez sur le bouton d’icône **Refresh** dans le plugin : il analyse de nouveau le fichier Figma à la recherche de composants Emailify et les ajoute à la liste.

## Organiser votre bibliothèque de composants avec des catégories personnalisées {#organizing-your-component-library-with-custom-categories}

### Tutoriel vidéo : ajouter des catégories personnalisées pour vos composants d’email Figma

Cette vidéo montre comment ajouter des catégories personnalisées pour vos composants d’email Figma avec le plugin Figma Emailify.
[Embedded media](https://www.youtube-nocookie.com/embed/M6p5AY2-g54)

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

Par défaut, tous vos composants Figma sont _Uncategorized_, mais vous pouvez créer vos propres catégories personnalisées en cliquant sur le bouton d’icône **Pencil** dans la rangée d’onglets du sous-en-tête de la bibliothèque de composants.

Vous pouvez ainsi créer de nouvelles catégories personnalisées, puis déplacer des composants de n’importe quelle catégorie existante vers une autre catégorie que vous avez ajoutée.

Vous pouvez aussi supprimer une catégorie personnalisée à tout moment : aucun de vos composants Figma n’est supprimé, et les composants de cette catégorie sont automatiquement replacés dans la catégorie _Uncategorized_.

### Rechercher et trier votre bibliothèque de composants {#searching-and-sorting-your-component-library}

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

Pour retrouver rapidement un composant Figma personnalisé dans l’onglet de la bibliothèque de composants, utilisez le champ **Search** pour filtrer la liste par nom de calque des composants Figma.

Vous pouvez aussi trier la liste des composants selon l’une des options suivantes :

**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 ←

Le tri visuel regroupe dans une même rangée ou colonne les composants légèrement désalignés. Le tri par nom de calque tient compte des nombres : un nom comme `Hero 2` apparaît donc avant `Hero 10`.

### Ajouter des métadonnées à vos composants Figma {#adding-metadata-to-your-figma-components}

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

Pour ajouter des métadonnées à vos composants Figma, cliquez sur votre calque de composant dans Figma, puis sur le bouton d’icône **Component configuration** dans la colonne de droite de Figma, à côté du nom du composant. Vous pouvez y saisir un texte dans _How to use this component_ et une URL dans _Link to documentation_.

Si ces informations sont renseignées sur vos composants Emailify, le libellé du composant dans l’onglet de la bibliothèque de composants renvoie automatiquement vers l’URL de votre documentation, et la description de son utilisation apparaît dans l’infobulle du composant au survol de sa miniature.