Skip to main content
A design system is your brand’s reusable library of email building blocks (headers, heroes, CTA buttons, content blocks, footers) saved inside the Email Love Figma plugin. Set one up once and you (and your team) can build emails faster, keep every send on-brand, and hand the same library to AI Studio, the Email Love MCP, or Email Love Builder to generate complete email templates from your components. This guide walks you through setting one up from scratch.

​
How it works in 4 steps

  1. Create a design system inside the plugin and give it a name.
  2. Upload your Figma components into the predefined sections (Header, Hero, Single Column, etc.).
  3. Sync the design system so AI Studio and the Email Love MCP can use it.
  4. Use it: build emails by hand in Figma, generate from a campaign brief, or hand it to your team via the Builder.
The rest of this article walks through each step.

​
Before you start

Make sure you have:
  • The Email Love Figma plugin installed and you’re signed in with your license
  • A Figma file with your email components on the canvas, named clearly
  • An idea of which brand or email type this design system is for. Each brand usually deserves its own.

​
Step 1: Create your design system

1

Open the design system dropdown

In the plugin, click the design system dropdown in the top left. It shows Default out of the box.
2

Select Manage your design systems

Then click Create a Design System.
3

Name it

Give it a descriptive name like Acme Brand Emails or Transactional Emails.
4

Click Create Design System

Your new design system now appears in the top-left dropdown with empty predefined sections, ready to populate.
The plugin's design system manager showing the Create a Design System form
The Default design system is available out of the box. You can use it as-is to get started quickly, or skip it and create your own.

​
Step 2: Upload your components

Now you fill the design system by uploading components from your Figma canvas into the matching predefined sections.

​
Prep your components in Figma first

  • Each component should be a clearly defined element: a header, footer, hero, content block, CTA, etc.
  • Components can be single wrappers, multiple wrappers, or entire main frames.
  • Name your Figma layers descriptively. Those names carry over into the design system.

​
Then upload them

1

Select your design system

Pick it from the top-left dropdown in the plugin.
2

Open the predefined section you want to upload to

For example Header, Single Column, or Footer. It’ll be empty if this is a new design system.
3

Select the component(s) on the Figma canvas

Select the component(s) you want to save.
4

Click the Upload button inside that section

The plugin will show an upload summary with success and failure counts.
Uploading selected Figma components into a design system section Repeat for each section that matters for your email type. You don’t need to populate every section. Why this is useful: saved components stay linked to the parent component in Figma. Update the parent later (change a color, swap an image, adjust spacing) and the saved component updates automatically. You only need to re-upload if you’ve made structural changes.

​
Step 3: Sync for AI

After uploading, sync your design system so it’s available to Generate from Brief and the Email Love MCP.
1

Open Generate from Brief

In the plugin, go to AI Studio, then Generate from Brief.
2

Select the design system

Pick the one you want to sync from the dropdown.
3

Click Sync Template Design

Wait for the loading indicator to finish.
The Sync Template Design button in AI Studio's Generate from Brief screen Once synced, your design system is ready for AI generation.

​
Step 4: Use your design system

There are four ways to put it to work:
  • Build by hand in Figma: open any section, pick a component, and drop it into your email frame.
  • Generate from Brief: write a campaign brief in AI Studio and let it assemble the email using your synced components.
  • Email Love MCP: let any MCP-enabled AI tool generate emails using your design system.
  • Email Love Builder: sync your design system to the Builder for non-designers to build emails with a drag-and-drop interface.

​
The 13 predefined sections

You can’t create custom sections. Pick whichever predefined section best matches each component:
  • Header: Email headers and navigation bars
  • Heroes: Hero banners and featured image sections
  • Single Column: Single-column text and content blocks
  • Two Column: Two-column layouts
  • Three Column: Three-column layouts
  • Four Column: Four-column layouts
  • Buttons: CTA buttons and button groups
  • Reviews: Testimonials, quotes, and review sections
  • Images: Image-focused sections and galleries
  • Lists: List-style content blocks
  • Order Tables: Order summaries and table layouts
  • Footer: Email footers
  • Code: Raw code/HTML sections

​
Managing & editing

​
View what’s in a design system

  • See all your design systems listed with their sections.
  • Each section shows a file count so you know how many components are stored.
  • Click into any design system to browse its sections and components.

​
Remove a component from a section

  1. Navigate to the section within your design system.
  2. Select the component you want to remove.
  3. Click Delete.
  4. Confirm in the modal.
Deleting a component can’t be undone. You’d need to re-upload from Figma.

​
Delete a design system

  1. Navigate to the design system you want to delete.
  2. Click Delete Design System.
  3. Confirm in the modal.
This permanently removes the design system and every component saved inside its sections.

​
FAQ

Do I have to upload components into every section? No. AI Studio only uses sections that have components saved. Empty sections are skipped during generation. Only fill the sections that matter for your email type. What happens to my saved component if I edit the parent in Figma? The saved component updates automatically. Components stay linked to their Figma parent, so visual tweaks (color, image, spacing) flow through without a re-upload. Only structural changes need a re-upload. Can my teammates use the design systems I create? Yes. Design systems are shared across everyone on the same license key, so anyone on your team using the same license sees the same design systems. What’s the difference between using a design system with the Builder vs. AI Studio? Email Love Builder is for humans: your team picks and arranges components in a drag-and-drop builder. AI Studio is for automation: you give it a campaign brief and it assembles the email from your components. Same design system, two different ways to use it. Can I have more than one design system? Should I? Yes, and usually you should. Create one per brand, sub-brand, or distinct email type (e.g. marketing vs. transactional). It keeps your components clean and helps AI Studio pick the right look for each email. Can I create my own custom sections beyond the 13 predefined? No. The 13 predefined sections are fixed. They’re how the plugin and AI Studio know which component goes where. Pick the section that best matches each component’s purpose. Do I need to re-sync every time I add or update a component? For AI Studio and the Email Love MCP: yes. Re-sync after you upload new components or change existing ones, so the latest state is available for generation. For human-driven use inside the Figma plugin, no re-sync is needed. What’s the “Default” design system? Should I use it or create my own? Default is a starter design system that’s available out of the box. It’s fine for getting a feel for the plugin, but for real work most people create one per brand so each system reflects their own visual identity. How do I move a component from one section to another? There’s no direct move action. Delete it from the current section, then re-upload it to the right one from the Figma canvas. What happens if I delete a design system by mistake? Deletion is permanent. The design system and all its components are gone. You’d need to recreate the design system and re-upload your components from Figma. Be sure before you confirm.

​
Best practices

  • Name things clearly. Descriptive names on design systems and components help your team find the right pieces and help AI Studio match them to the right sections of a brief.
  • Keep components modular. Each component should work on its own. That gives AI Studio and the Builder maximum flexibility when assembling emails.
  • Re-sync when you change components. Update designs in Figma, then re-upload and re-sync so the latest state is available for AI generation.
  • One design system per brand. Managing multiple brands? Give each its own design system to keep the look consistent.

​
Troubleshooting

Upload fails for a component: Make sure the component is properly selected on the Figma canvas before clicking Upload. Try selecting it again and re-uploading. Sync stalls or fails: Refresh the plugin and try again. Empty sections are fine (they’re skipped during generation), but a fully empty design system can’t be synced. Make sure at least one section has components saved. Components look different after syncing: The design system captures the current state of components at the time of upload. If you’ve made structural changes in Figma since uploading, re-upload the updated components and sync again. Team members can’t see the design system: Design systems are shared across the same license key. Make sure your team members are logged in with a license under the same account.