← Back to Emailify Video Tutorials

What this video covers

This video shows how to add dark mode style overrides to HTML email designs in Figma using the Emailify Figma plugin. It covers applying overrides to sections, columns, text, buttons, and images, then testing the result in Emailify’s Preview with dark mode enabled.

Things you'll need

• Emailify must be installed from the Figma Community.
• An HTML email design must already exist in the Figma file.

Steps

1. Install Emailify from the Figma Community if it is not already installed.
2. Open your Figma file, right-click, go to Plugins, and launch Emailify.
3. Select a layer such as a section, column, text layer, button layer, or image layer, then use the Settings panel to find Dark Mode Overrides.
4. Set dark mode-specific values such as Override Text Color and Override Background Color for the selected layer.
5. Open Preview in the header, then turn on Show Dark Mode Overrides to see the dark mode version.
6. For text, apply more granular overrides on individual text layers to fine-tune contrast.
7. For images, use Only Hide on Dark Mode or Only Show in Dark Mode to swap image versions between regular and dark mode.

Useful links

• Watch the full video on YouTube
• Read the full video transcript
• Browse Emailify tutorial docs