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
- Open the Assets panel in the left sidebar
- Browse by category or use the search bar to find the component you need
- Drag the component from the Assets panel onto your email frame
- Position it within the correct hierarchy: the component should sit inside a wrapper or directly in the email frame
- The plugin will recognize the component's MJML structure automatically—no additional setup needed
Tip: 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:
- Select the component or frame you want to save
- Open the Assets section in the plugin
- Click to add your customized component
- 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. This is especially valuable for building a consistent design system across campaigns.
Pro tip: Create a naming convention for your custom components. Prefixing with the category ("Header —", "Footer —", "CTA —") keeps things organized as your library grows.
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 → section → column → 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.
Powered by