Ajouter des liens aux boutons à icône de vos emails

Ajoutez à vos designs d’email des boutons cliquables en texte enrichi, avec une icône personnalisable, liés à n’importe quelle URL.

Notez que les boutons à icône ne sont pas pris en charge dans Outlook : les icônes de vos boutons sont automatiquement masquées uniquement pour les clients Outlook sous Windows, mais s’affichent normalement dans tous les autres clients de messagerie.

Pour ajouter un nouveau calque bouton à icône à votre design d’email, cliquez sur n’importe quel calque Column ou Hero, choisissez l’option Icon Button dans le menu déroulant Quick Add, puis cliquez sur le bouton Add + pour insérer le nouveau calque bouton dans votre mise en page.

Vous pouvez aussi choisir l’un des composants prédéfinis de l’onglet CTA du plugin : cliquez sur l’onglet de sous-catégorie Icon Buttons, puis sur l’un des composants prédéfinis de bouton à icône pour l’ajouter à votre design comme nouveau calque « Row ».

Une fois le bouton stylé à votre goût, indiquez l’URL cliquable : cliquez sur votre calque Button dans Figma, puis sur le bouton Settings, et collez votre URL dans le champ Clickable Link URL. Votre bouton ouvrira ainsi cette URL dans le navigateur lorsqu’on clique dessus.

Pour obtenir des boutons pleine largeur avec texte et icône séparés, ajoutez l’un des préréglages pleine largeur du plugin, ou réglez sur Fill l’option Auto Layout Horizontal de l’un de vos boutons à icône existants dans Figma, puis réglez aussi l’option Auto Layout Item Spacing de Figma sur Auto : le bouton devient automatiquement un bouton justifié, avec texte et icône séparés.

Pour personnaliser le calque d’icône de votre bouton à icône, glissez n’importe quel frame d’icône ou calque vectoriel Figma dans votre calque Icon Button, puis supprimez le calque d’icône d’origine pour qu’il n’y ait qu’une seule icône dans votre calque Button (avec l’unique autre calque, le calque de texte du bouton).

Pour les liens ajoutés via les champs de lien d’Emailify ou les hyperliens de texte Figma, l’export HTML omet les destinations exécutables javascript: et vbscript:. Les liens de modèles dynamiques et les URL sources des images conservent leur comportement actuel.

Vous pouvez appliquer des réglages en masse : ouvrez Settings, puis sélectionnez dans Figma plusieurs calques Emailify du même type. Chaque réglage que vous modifiez s’applique alors à tous les calques sélectionnés.