← Back to Emailify Video Tutorials

What this video covers

The video shows how to use the Emailify Figma plugin to build a reusable component library for HTML emails inside Figma. It covers creating an Emailify frame, turning customized layouts into library components, reusing them across new email designs, and exporting the final emails to production-ready HTML.

Things you'll need

• A Figma file
• The Emailify Figma plugin

Emailify loads the component library from the current Figma file. If teammates need the same reusable Emailify components, make sure those components already exist in the file they open before loading the library in the plugin.

Steps

1. Open Emailify from Figma plugins and create a new Emailify container with a name.
2. Use the starter components and replace the default content with your own images, text, button labels, and styling.
3. Break customized layouts out into separate components, then click the component library icon and load all Emailify components into the plugin.
4. Reuse those saved components in new Emailify frames, and override instance content such as images and text when needed.
5. Adjust spacing and sizing with Auto layout padding and item spacing, and keep rows and columns set to hug contents.
6. Use HTML and mobile settings to add links, alt text, visibility options, and other layer-specific settings.
7. When ready, click export HTML, choose the emails to export, and download the zip file with the HTML and preview files.

Useful links

• Watch the full video on YouTube
• Read the full video transcript
• Read: Creating a reusable component library
• Next: Use 500+ free HTML email components in your Figma designs
• Open Emailify in the Figma Community