← Back to Emailify Video Tutorials

What this video covers

This tutorial shows how to install and use the Emailify Figma plugin to build HTML emails directly in Figma. It also demonstrates customizing modules, applying responsive overrides and links, and exporting the finished email as HTML or HTML and MJML.

Things you'll need

• A Figma file
• The Emailify Figma plugin installed from Figma Community

Steps

1. Install the Emailify HTML Email Builder plugin from Figma Community and run it from Plugins in a blank Figma file.
2. Create a new Emailify container, name it, and add modules from categories like Header, Images, Content, CTAs, Footer, and Favorites.
3. Customize the email by editing text, buttons, images, spacing, padding, alignment, and component order directly in Figma.
4. Use the Settings icon to set mobile overrides, hide elements on mobile, reverse column display order on desktop, or render a block as an image.
5. Add clickable URLs to link layers, button elements, and image layers, and set alt text and image width or height overrides where needed.
6. Click Export, choose HTML or HTML and MJML, select one or more email containers, enter subject line and preheader text, then export to code.
7. Download the zip file, open the generated index.html preview and index.mjml source file, and review the exported assets and responsive output.

Useful links

• Watch the full video on YouTube
• Read the full video transcript
• Read: Understanding how the Emailify plugin works
• Next: Create a component library for HTML email designs in Figma
• Open Emailify in the Figma Community