La première fois que vous lancez le plugin Emailify sur une page Figma qui ne contient aucun frame conteneur Emailify, le plugin ouvre automatiquement la fenêtre New Email pour que vous choisissiez comment commencer.
La fenêtre New Email s’ouvre sur l’onglet Blank, suivi de Templates, Layouts et AI Designer. Les versions de développement activées en local affichent aussi, à la fin, l’onglet Import expérimental.
Dans l’onglet Blank, donnez un nom à votre email (par exemple « My Email Template »), puis cliquez sur le bouton Add New Emailify Container pour ajouter votre frame d’email vide à votre page Figma.
Ce nouveau frame Figma spécial créé par le plugin est automatiquement reconnu comme un email par le plugin Figma Emailify, et vous pouvez commencer à y ajouter des mises en page et des composants avec les fonctionnalités de design du plugin.
Si vous découvrez le plugin ou cherchez l’inspiration, vous pouvez utiliser les Layouts, essayer la sous-catégorie Randomize, dupliquer des modèles Figma ou utiliser AI Designer (BETA) depuis la fenêtre New Email.
Ajouter d’autres conteneurs Emailify
Ajoutez autant de frames conteneurs Emailify que nécessaire. Le plugin traite chaque conteneur comme un email distinct.
Si vous avez déjà ajouté un frame Emailify à votre page, vous pouvez ajouter à tout moment un nouveau frame Emailify vierge en cliquant sur le bouton d’icône + (Plus) à côté du sélecteur d’email dans le plugin Emailify : vous serez invité à nommer et créer un nouveau frame Figma d’email vierge.
Vous pouvez aussi copier-coller un frame Emailify existant si vous ne voulez pas partir de zéro. Copier-coller des composants d’un frame Emailify à un autre fonctionne également.
Sélectionner un frame Emailify
Pour sélectionner un email et commencer à y ajouter des composants, utilisez la liste déroulante du sélecteur d’email dans le plugin Emailify ou cliquez sur le frame parent dans le canevas Figma.
Lorsque vous choisissez un email dans cette liste, la vue de votre page Figma se centre aussi automatiquement sur l’email sélectionné.
Vérifier quel frame d’email est actif. Le nom d’email affiché comme sélectionné dans la liste déroulante du sélecteur d’email d’Emailify indique toujours l’email actuellement sélectionné.
Point de rupture mobile des emails
Les emails HTML exportés depuis Emailify ont un seul « point de rupture » (breakpoint), défini automatiquement par la largeur du frame desktop dans Figma. Par exemple, si votre frame Emailify mesure 600px, les styles et ajustements mobiles s’appliquent à partir de 599px et en dessous.
Largeur d’email recommandée : de 600px à 640px
Une largeur d’email comprise entre 600px et 640px est généralement recommandée, car le volet de lecture de certains clients ou apps de messagerie peut faire moins de 700px de large. Un volet de lecture plus étroit peut afficher les styles mobiles au lieu de la mise en page desktop. Garder votre frame Emailify entre 600px et 640px de large aide la mise en page desktop à s’afficher de façon homogène dans les clients de messagerie desktop et tablette.