← 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 text and background colors for the selected layer. Button, Row, Column, and Wrapper layers also include a Border Color override that keeps the light mode border width and style.
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
• Read: Adding dark mode design overrides (only supported in Apple Mail on iOS/MacOS)
• Next: Design and export HTML Email Signatures from Figma
• Open Emailify in the Figma Community