← Back to Emailify Video Tutorials

What this video covers

This tutorial shows how to use the Emailify HTML Builder Figma plugin to create custom HTML email components, including reusable native Figma components, custom HTML blocks, and code wrappers. It also demonstrates previewing the generated HTML in Figma and exporting the final email as HTML.

Things you'll need

• Figma
• Emailify installed from the Figma Community

Steps

1. Install Emailify from the Figma Community, then open a new Figma file and run Emailify HTML Builder from Plugins.
2. Name the email and click Add new Emailify Container to create a blank email frame.
3. Open the Custom tab, click Create New Component, and build a custom component by adding elements like titles, body copy, buttons, images, and column layouts.
4. Choose whether to update the saved component or create a new component from an existing one, then insert the component into the email design.
5. Use the settings button on components, rows, columns, text layers, and the email frame to edit alignment, mobile overrides, links, CSS rules, merge tags, templating tags, and custom HTML.
6. Add custom HTML blocks or code wrappers for raw code, then use Preview to check the real HTML output and mobile/desktop behavior.
7. Click Export, choose HTML if needed, enter subject line and pre-header text, and use Export to Code to download the zip file with the HTML and images.

Useful links

• Watch the full video on YouTube
• Read the full video transcript
• Read: Creating your own custom components
• Next: Add custom categories for Figma email components
• Open Emailify in the Figma Community