Video Tutorial: Create custom components for HTML email exports

This video walks through how to add custom components to your email designs and export production-ready, responsive HTML emails from Figma using the Emailify plugin.

If the base components that come included with Emailify aren't what you're looking for, you can create your own custom components using the built-in component builder feature.

Clicking the Custom tab in the component categories header, then clicking the Create New Component button will open up the component builder, which will allow you to customise your own component layout and content elements.

When you're happy with the structure, you can click the Create & Insert New Component button, which will add the component to your email design in Figma, and also save it in your Custom category for future use.

Editing and forking your saved custom components

You can edit your saved custom components by clicking the Settings icon button next to any component listed under the Custom tab in your component categories.

You can either save the updated component back to the original, by clicking the Update Saved Component button, which will update your saved component, but will not affect or modify the component anywhere that it has already been used in your design.

Alternatively, you can fork your original component and "save as" a brand new custom component by clicking the Create & Insert New Component button, which will save it as a brand new custom component in your list, without overriding the original saved component.

Removing a saved custom component

You can also remove a saved custom component by clicking the Trash icon button. This will remove the saved component from the Custom and Favourites categories, but will not delete or modify the component anywhere that it has already been used in your design.