Skip to main content
Email Love ships with a library of pre-built components (headers, content blocks, CTAs, galleries, footers, and more) that are already structured with correct MJML hierarchy, tested across email clients, and optimized for responsive rendering. Instead of building every section from scratch, start with a component and customize it to match your brand. This guide covers how to find components, add them to your email, and customize them for your needs.

​
The Assets Panel

All pre-built components live in Figma’s Assets panel (left sidebar). Open it by clicking the Assets icon or pressing Option + 2 (Mac) / Alt + 2 (Windows). Inside, you’ll find components organized by category:
  • Headers: Logo placement, navigation bars, preheader text
  • Content Blocks: Text-heavy sections, feature highlights, article layouts
  • Featured Items: Product showcases, image-text combos, spotlight sections
  • Calls to Action (CTAs): Button blocks, multi-button layouts, promotional banners
  • Galleries: Image grids, product carousels, thumbnail layouts
  • Footers: Social links, legal text, unsubscribe blocks, contact info
You’ll also see two helpful sections at the top of the Assets panel:
  • Recently Used: Quick access to components you’ve used before, helping you stay consistent across emails
  • Customs: Any components you’ve saved from your own designs (see “Saving Custom Components” below)

​
Adding a Component to Your Email

1

Open the Assets panel

Open the Assets panel in the left sidebar.
2

Find the component you need

Browse by category or use the search bar.
3

Drag it onto your email frame

Drag the component from the Assets panel onto your email frame.
4

Position it in the hierarchy

The component should sit inside a wrapper or directly in the email frame.
5

Done

The plugin will recognize the component’s MJML structure automatically. No additional setup needed.
If you’re not sure which component to use, try a few. Dropping a component onto the canvas is non-destructive. You can always delete it and try another.

​
Customizing a Component

Pre-built components are designed to look polished out of the box, but you’ll want to adapt them to your brand. There are three ways to customize:

​
1. Figma Native Tools

You can edit text, swap images, and adjust colors directly in Figma, just like any other design element. Select the layer you want to change and use Figma’s built-in tools:
  • Double-click text layers to edit copy
  • Select image layers and use “Fill” to swap images
  • Change colors on any layer through Figma’s color picker
  • Resize frames by dragging handles (the plugin respects responsive constraints)

​
2. Plugin Properties Tab

Select any element inside the component and open the Properties tab in the Email Love plugin. Here you can configure email-specific settings that Figma doesn’t handle natively:
  • Links: Add URLs to buttons, images, and text
  • Alt text: Set image alt text for accessibility
  • Alignment: Control content alignment within columns
  • Spacing: Fine-tune padding that maps to the HTML output

​
3. Appearance & Mobile Styles

  • Appearance Tab: Set dark mode overrides, text style presets, and global color schemes
  • Mobile Styles Tab: Override font sizes, padding, and visibility for mobile devices
See the Appearance Tab guide and Mobile Optimization guide for detailed walkthroughs.

​
Saving Custom Components

Once you’ve customized a component to match your brand, you can save it to the Assets panel for reuse:
1

Select the component

Select the component or frame you want to save.
2

Open Assets in the plugin

Open the Assets section in the plugin.
3

Add your component

Click to add your customized component.
4

Name it clearly

Give it a clear, descriptive name (e.g., “Brand Header, Dark” or “CTA, Primary Blue”).
Saved components appear in the Customs section of the Assets panel. If the component you’re saving is a Figma Component or Instance, the plugin automatically links it to the source. You’ll see a blue chain icon on the thumbnail. Linked components stay in sync: when you update the source in Figma, the saved version updates automatically. And when you place a linked component into an email, it creates a native Figma instance that stays connected to the parent.
Create a naming convention for your custom components. Prefixing with the category (“Header”, “Footer”, “CTA”) keeps things organized as your library grows. For cross-file use, publish your components to a Figma Team Library so the link works from any file.

​
Best Practices

Start with components, customize from there. Building from pre-built components ensures your MJML structure is correct and your email will render properly across clients. Customizing an existing component is faster and safer than building one from scratch. Don’t break the hierarchy. Pre-built components come with the correct nesting (wrapper, then section, then column, then content). If you need to restructure a component, make sure you maintain this hierarchy or you’ll encounter errors during export. Test after significant changes. If you’ve heavily modified a component, use the Preview feature to check desktop, mobile, and dark mode rendering before exporting. Build a brand library. Save your most-used customized components to the Assets panel. A library of 10-15 branded components (header, footer, hero, CTA, text block, image block, spacer) covers most email needs and dramatically speeds up production.

​
Troubleshooting

Component doesn’t appear in the Assets panel Make sure you’re looking in the correct Figma file. Components are file-specific unless they’re part of a shared library. If you saved a custom component in a different file, you’ll need to publish it as a shared library or copy it over. Component looks different after export This is usually a CSS support issue with specific email clients. Check the Email Client Compatibility Matrix to see which CSS properties are supported where. Border radius, custom fonts, and background images are the most common culprits. Component breaks on mobile Open the Mobile Styles tab and check that the component has appropriate mobile overrides. Columns automatically stack on mobile, so verify the stacking order looks right in Preview. Copied component loses its link to the original When you copy-paste a component (rather than dragging from Assets), it becomes a detached instance. This means changes to the original component won’t update the copy. If you need linked instances, always drag from the Assets panel.

​
Next Steps

  • Want to build your own components? See the Build Your Own Components collection for guides on creating custom elements.
  • Need to customize further? Check the Styling Components guides for detailed control over backgrounds, padding, typography, and more.
  • Ready to export? Head to the Export Overview to learn how to send your email to your ESP.
Need help? Reach out at support@emaillove.com or join our Discord community.