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 ?

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

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.

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

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.

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

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

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.