← Back to Emailify Video Tutorials

What this video covers

The video shows how to use the Emailify Figma plugin to build an email layout in Figma and export it as MJML source code. It also demonstrates previewing the design in the plugin and checking the exported MJML file in the MJML online editor.

Things you'll need

• Figma
• The Emailify Figma plugin
• An existing email design built with Emailify layout tools

Steps

1. Open a Figma file, search for Emailify in the Resources icon, and run or save the Emailify plugin.
2. Create a new email container by naming it and clicking Add New Emailify Container.
3. Build the email using Emailify components, rows, columns, and layers that map to MJML structure, then preview desktop and mobile in the plugin.
4. Click Export HTML, change the export type to MJML source code under Download To Your Computer, and choose the template to export.
5. Enable Upload image URLs, optionally turn off HTML minification for readability, and click Export to MJML.
6. Download the .zip file, then open the MJML file and inspect the generated MJML, index.html, and images folder.
7. Paste the MJML into the MJML Try it live editor to confirm it compiles to HTML correctly.

Useful links

• Watch the full video on YouTube
• Read the full video transcript
• Read: Exporting your emails to MJML
• Next: Export HTML emails from Figma to Plain Text format
• Open Emailify in the Figma Community