Skip to main content
Want to build your own library of reusable email assets? Email Love’s Figma plugin makes it super easy to save your customized components and templates for future use. This feature is perfect for maintaining brand consistency and speeding up your design workflow.

​
First, work out which of the two you’re saving

Everything you save is one of two shapes, and the shape decides which route you use. Getting this wrong is the most common reason a saved block doesn’t behave the way people expect. A module is one Wrapper. A Wrapper is the outermost band of an email: a header, a hero, a product block, a testimonial, a footer. Everything inside it (Sections, Columns, text, images, buttons) rides along. In the underlying markup a Wrapper is an mj-wrapper, which is why its Figma layer name carries (mjml:mj-wrapper). A module is a piece of an email, never the email. An email template is the whole email frame. That’s the outer frame the plugin made for you. It holds every Wrapper inside it, plus the settings that belong to the email itself: subject line, preview text, UTM parameter, fonts, and the theme colours. Rule of thumb: if your team will drop it into lots of different emails, it’s a module. If it’s a finished send you want to start the next one from, it’s an email template.

​
Each shape has its own save route

​
What each route turns away

Upload won’t take anything smaller than a Wrapper. The Upload button only becomes clickable when your selection is a Wrapper, a whole email frame, or several of those at once. Select a Section inside a Wrapper, a Column, a hero frame, a button or a text layer and the button stays greyed out. There’s no error message to read, so a dead Upload button almost always means you’ve selected one level too deep. Click the Wrapper that contains it and the button comes alive. Add New Template won’t take anything that isn’t a whole email. Try to save a Wrapper this way and Figma shows a red “Please select valid email template” notification, with “Select an Email Template” in the plugin. Customs only accepts the outer frame.

​
Why a module saved as a one-block email costs you later

When Upload is greyed out, the tempting fix is to drop the module into an empty email frame on its own and save that to Customs instead. It works. It’s also the wrong shape, and you find out weeks later. It isn’t part of your design system. It sits in Customs, which is a shelf of finished emails. It won’t show up in the Header or Hero or Footer section where your team goes looking for it, and because it isn’t in a design system it isn’t included when you sync. Generate from Brief, the Email Love MCP and the Builder never see it. It stops tracking Figma. Only components uploaded into a design system section keep a link back to their source component, shown by the blue chain icon. A Customs template is a snapshot. Update the master component in Figma and the saved copy stays exactly as it was until someone deletes it and saves it again. It repaints whatever email you put it in. This is the one that hurts. An email template carries the email’s own settings, and inserting it applies them to the frame you insert it into. Anything the saved email had set overwrites what’s already there: background, content, text, link and button colours, their light theme counterparts, subject line, preview text, UTM parameter and fallback font. So a one-block “template” saved out of a dark email will flip a light email dark the moment a teammate inserts it. A module saved the right way is appended and reflowed to the frame width, and nothing else moves.

​
Theme colours belong to the email, not the module

Select the email frame and the Colors panel gives you Background Color alongside content, text, link and button colours. Select a Wrapper and Background Color isn’t there. That’s on purpose. The page background is a property of the email, so there’s exactly one of it per send. A Wrapper can set its own content colour and the colours of the text, links and buttons inside it, and those do travel with the module when you save it. The page background doesn’t, because it was never the module’s to carry. In practice: set the theme once on the email frame, then let modules override only what genuinely differs, like a dark band inside a light email. Modules that don’t fight the email theme drop cleanly into any email built on the same design system.

​
Saving Custom Components

Custom components are your go-to email building blocks - think branded headers, styled CTAs, or perfectly crafted content sections that you’ll want to use again and again. Each one is a module, so what you select is a single Wrapper.
1

Design your component

Get it looking exactly how you want.
2

Select the Wrapper

Click the Wrapper on the Figma canvas, not a Section or Column inside it. If the Upload button stays greyed out, you’re a level too deep.
3

Open the plugin

Navigate to the appropriate section (Two Column, Buttons, Reviews, etc.).
4

Click Upload

The button sits at the top of the section. Confirm in the dialog that names the design system and section you’re uploading to.
5

Voila!

Your component now appears at the top of that section.

​
Component Linking: Stay in Sync with Figma

When you save a Figma Component or Instance, the plugin automatically links the saved version to its source component. You’ll see a small blue chain icon on the thumbnail, confirming the link is active. This means:
  • Native instances on the canvas. When you click a linked component to place it in your email, the plugin creates a real Figma instance (not a static copy). Changes to the parent component instantly propagate to every instance. That’s Figma’s native behavior, no extra steps needed.
  • Auto-syncing thumbnails. When you open an asset folder with linked components, the plugin automatically checks each one against its Figma source. If anything changed (colors, text, spacing, images), the thumbnail and JSON update silently in the background.
  • Cross-file support. If your source component is published to a Figma Team Library, the link works from any Figma file. For local (unpublished) components, the link only works within the same file. You’ll see a notification about this at save time.
  • Backward compatible. Components saved before this feature still work exactly as before. They just won’t have a link badge or auto-sync behavior.

​
Visual Badges

Look for these indicators on your saved component thumbnails:
  • Blue chain icon: Component is linked to a Figma source
  • Orange refresh icon: Update available (click to sync manually if auto-sync didn’t catch it)
  • Red warning icon: Source component was deleted or can’t be found
  • Spinning gray icon: Currently checking for updates
A small refresh icon next to the “Upload Component” button lets you manually trigger an update check for all linked components in that folder. Using your saved components is just as easy:
  • Create a new email frame
  • Navigate to the plugin section where you saved your component
  • Click on your custom component to instantly add it to your email
  • Linked components are placed as native Figma instances that stay connected to the source
Managing your component library:
  • Remove any component by clicking the small “X” icon next to it
  • Save as many components as you like - there’s no limit!
  • Custom components work across all plugin sections (Four Column, Buttons, Reviews, and more)

​
Saving Full Email Templates

Got a killer email design that you want to reuse? Save the entire template and create a personal library of email designs that perfectly match your brand. This route is for whole emails only. If what you have is a single Wrapper, it belongs in a design system section instead.
1

Complete your email design

Make sure everything looks perfect.
2

Select the whole email frame

Select the outer frame in Figma, not a Wrapper inside it.
3

Open the Customs tab

Open the plugin and click on the “Customs” tab in the top left.
4

Create a category

Click “Create Category” and give it a descriptive name (like “Newsletters,” “Sales,” or “Transactional”). Your new category is ready to go!
5

Save your template

Click “Add New Template”, select the right category, then click “Add Template”.
6

Done!

Your template is now saved and ready for future campaigns.
Using your saved templates:
  • Create a new email frame
  • Go to the Customs tab in the plugin
  • Browse your categories to find the perfect template
  • Click on it and watch as the plugin builds out each section automatically
  • Customize the images, text, and links for your new campaign

​
Organizing Your Template Library

Smart organization makes finding the right template a breeze. Here are some category ideas:
  • Newsletters - For your regular email communications
  • Promotions - Sales, discounts, and special offers
  • Transactional - Order confirmations, welcome emails, password resets
  • Seasonal - Holiday campaigns and event-specific designs
  • Product Updates - Feature announcements and company news

​
Pro Tips for Success

For Components:
  • Save your most-used elements like branded headers, footers, and signature CTAs
  • Test components in different email contexts to ensure they work perfectly
  • Keep your component names clear and descriptive
For Templates:
  • Use specific category names that make sense for your workflow
  • Save template variations for different campaign types
  • Regularly update your saved templates to reflect current brand guidelines

​
Troubleshooting

The Upload button is greyed out. Your selection is too deep. Upload only accepts a Wrapper, a whole email frame, or several of those at once. Selecting a Section, Column, hero frame, button or text layer leaves the button disabled with no error. Click the parent Wrapper and try again. “Please select valid email template” when saving to Customs. You had a Wrapper selected. Customs only takes the whole email frame. If the thing you’re saving is a Wrapper, upload it into a design system section rather than wrapping it in an email frame of its own. A saved block changed the colours of the email I put it in. It was saved as an email template, not a module. Email templates carry the email’s own theme, subject line and preview text, and inserting one applies them to the frame. Re-save it as a module: select its Wrapper and upload it into a design system section. Template not appearing? Double-check that you selected the entire email frame before saving and confirm you’re looking in the right category. Need to update a saved component? If it’s linked (blue chain icon), just update the source Figma component. The saved version in the plugin will auto-sync the next time you open that folder. No need to delete and re-save. For unlinked (legacy) components, you’ll still need to delete the old version and save the updated one. This custom save feature transforms the Email Love plugin into your personal design system, making it faster and easier to create beautiful, on-brand emails every time. Happy designing!