Injecting global custom HTML/CSS code into your email

For advanced users who need to inject small snippets of custom HTML or CSS code into your exported emails, you can do this via the Settings panel in the plugin.

For any reason, if you needed to add some very specific custom CSS into your email, or some HTML into the <head></head> tag, you can do this via the Emailify plugin by selecting your parent email container Figma frame, then clicking the Settings button and adding your code to be injected as needed.

The Add Mobile CSS Rules field will add these CSS rules inside of the @media tag for mobile styles, where any screen sizes below the width of your Figma frame will have these styles applied (you will need to use !important for any CSS rules applied to this area).

The Add Inline CSS Rules field will automatically inline any CSS properties onto the HTML selector that you specify (for example, adding p { color: blue } would inline style="color: blue;" on any <p> tags in your exported HTML email code).

The Add Head Tag HTML field will automatically inject any HTML you write here into the <head></head> tag of your exported HTML email, which may be useful if your email marketing platform gives you the option of adding special tracking tags or any other HTML tags that need to be added to the <head></head> tag of your HTML.

Emailify will automatically minify HTML exports to reduce the file size as much as possible, but įf you're adding custom code where it's important for CSS classes not be modified due to interactivity via pseudo-classes, you can skip minification by ensuring that your custom CSS contains at least one #interactive:checked style rule (for example, #interactive:checked ~ .content { display: block; }), and the plugin will automatically turn off minification for that email.

You can apply settings in bulk by opening Settings, then selecting multiple Emailify layers of the same type in Figma. Any setting you change will be applied to all selected layers.