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 Composa to generate complete email templates from your components.
This guide walks you through setting one up from scratch.
How it works in 4 steps
- Create a design system inside the plugin and give it a name.
- Upload your Figma components into the predefined sections (Header, Hero, Single Column, etc.).
- Sync the design system so AI Studio and the Email Love MCP can use it.
- Use it — build emails by hand in Figma, generate from a campaign brief, or hand it to your team via Composa.
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
- In the plugin, click the design system dropdown in the top left — it shows Default out of the box.
- Select Manage your design systems.
- Click Create a Design System.
- Give it a descriptive name like Acme Brand Emails or Transactional Emails.
- Click Create Design System.
Your new design system now appears in the top-left dropdown with empty predefined sections, ready to populate.
Heads up: 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
- In the plugin, select your design system from the top-left dropdown.
- Open the predefined section you want to upload to (e.g. Header, Single Column, Footer) — it'll be empty if this is a new design system.
- On the Figma canvas, select the component(s) you want to save.
- Click the Upload button inside that section.
- The plugin will show an upload summary with success and failure counts.
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.
- In the plugin, go to AI Studio → Generate from Brief.
- Select the design system you want to sync from the dropdown.
- Click Sync Template Design.
- Wait for the loading indicator to finish.
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.
- Composa — sync your design system to Composa 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
- Navigate to the section within your design system.
- Select the component you want to remove.
- Click Delete.
- Confirm in the modal.
Deleting a component can't be undone — you'd need to re-upload from Figma.
Delete a design system
- Navigate to the design system you want to delete.
- Click Delete Design System.
- 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 Composa vs. AI Studio?
Composa 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 Composa 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.
Related Articles
- Pre-Built Email Components — Browse the available pre-built components in the plugin
- Saving Custom Components in the Plugin — How to save individual custom components
- Sync your emails to Composa — Use your design system with the Composa drag-and-drop builder
Powered by