Si, pour une raison quelconque, vous devez ajouter du CSS personnalisé très spécifique à votre email, ou du HTML dans la balise <head></head>, vous pouvez le faire avec le plugin Emailify : sélectionnez le frame Figma conteneur parent de votre email, cliquez sur le bouton Settings, puis ajoutez le code à injecter.

Le champ Add Mobile CSS Rules ajoute ces règles CSS dans la balise @media des styles mobiles : elles s’appliquent à toutes les tailles d’écran inférieures à la largeur de votre frame Figma (vous devrez utiliser !important pour toutes les règles CSS ajoutées ici).

Le champ Add Inline CSS Rules applique automatiquement en ligne les propriétés CSS au sélecteur HTML que vous indiquez (par exemple, ajouter p { color: blue } ajoutera style="color: blue;" à toutes les balises <p> du code HTML de votre email exporté).

Le champ Add Head Tag HTML injecte automatiquement le HTML que vous y saisissez dans la balise <head></head> de votre email HTML exporté. C’est utile si votre plateforme d’emailing vous permet d’ajouter des balises de suivi spéciales ou d’autres balises HTML qui doivent figurer dans la balise <head></head> de votre HTML.

Emailify minifie automatiquement les exports HTML pour réduire au maximum le poids du fichier. Mais si vous ajoutez du code personnalisé dont les classes CSS ne doivent pas être modifiées, par exemple pour une interactivité basée sur des pseudo-classes, vous pouvez désactiver la minification : il suffit que votre CSS personnalisé contienne au moins une règle de style #interactive:checked (par exemple #interactive:checked ~ .content { display: block; }), et le plugin désactivera automatiquement la minification pour cet email.

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.