← Back to Emailify Video Tutorials

What this video covers

This video shows how to install and use the Emailify Figma plugin to build and customize HTML email designs in Figma. It focuses on adding elements contextually to selected layers, previewing the email, and exporting the finished design to HTML.

Things you'll need

• Figma
• Emailify Figma plugin

Steps

1. Install Emailify from the Figma Community by searching for "Emailify" under the Plugins tab and clicking Install.
2. Open your Figma file, right-click, go to Plugins, and launch Emailify.
3. Create a new email frame with the plus icon, then add preset elements or modules to the email.
4. Select an existing layer such as a row, social layer, or email frame, then use "Quick add element to selected layer" to add content columns, social networks, hero backgrounds, content rows, row wrappers, or navigation links.
5. Customize added elements in Figma, including text, buttons, images, spacing, alignment, colors, borders, overlays, and mobile-specific settings through "HTML and Mobile Settings".
6. Use the "Preview" button to view the rendered HTML in desktop and mobile layouts, and override mobile text settings if needed.
7. Click "Export HTML", then download the .zip file containing the HTML, images, and preview page.

Useful links

• Watch the full video on YouTube
• Read the full video transcript
• Read: Understanding how the Emailify plugin works
• Next: Create custom components for HTML email exports
• Open Emailify in the Figma Community