A design system in the Email Love Figma plugin is a collection of your brand's reusable email components — headers, footers, hero sections, body content blocks, wrappers, and more. Once saved, your design system can be synced to Composa for non-designers to build emails, or used with AI Studio to automatically generate complete email templates from campaign briefs.
This guide covers how to create, populate, and manage design systems within the plugin.
What is a Design System?
A design system organizes your email components into the plugin's predefined component categories so the plugin knows which components are headers, which are footers, which are body sections, and so on. The predefined categories are: Header, Heroes, Single Column, Two Column, Three Column, Four Column, Buttons, Reviews, Images, Lists, Order Tables, Footer, and Code. This structure is what allows AI Studio to intelligently assemble complete emails from your brand's building blocks, and what enables Composa to offer your team a curated component library.
Each design system is scoped to your Figma user account but shared across the same license key — so team members on the same license can access the same design systems.
Creating a New Design System
- In the plugin, navigate to the AI Studio tab in the sidebar
- Click Sync Template Design from the home page
- On the Sync Template Design page, click Create New Design System
- Give your design system a descriptive name (e.g., "Acme Brand Emails" or "Q1 Campaign System")
- Click Create
Your new design system is now ready to be populated with components.
Note: A default design system is also available out of the box if you want to get started quickly.
Uploading Components to Your Design System
Once you've created a design system, you need to upload your email components from the Figma canvas.
Prepare Your Components in Figma
Before uploading, make sure your components are organized on the Figma canvas:
- Each component should be a clearly defined element — a header, footer, hero section, content block, CTA section, etc.
- Components can be single wrappers, multiple wrappers, or entire mainframes
- Name your Figma layers descriptively, as these names will carry over into the design system
Upload Components
- Go to Sync Template Design in AI Studio
- Select your design system from the dropdown
- Select a predefined component category to upload to (e.g., Header, Heroes, Single Column, Footer)
- On the Figma canvas, select the email components you want to upload
- Click Upload
- The plugin will show an upload summary with success and failure counts for each component
Repeat this process for each category that's relevant to your email type. You don't need to populate every category — AI Studio will only use the categories that have components saved to them.
Predefined Component Categories
The plugin provides 13 predefined component categories that you save your components into:
- 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
You cannot create custom categories — use the predefined ones provided by the plugin. Choose the category that best matches each component's purpose.
Managing Your Design Systems
The Sync Template Design page gives you a full overview of all your design systems and their contents.
Viewing Design Systems
- See all your design systems listed with their component categories
- Each category shows a file count so you know how many components are stored
- Click into any design system to browse its categories and components
Removing Components from a Category
If you need to remove components from a category:
- Navigate to the category within your design system
- Select the component you want to remove
- Click the Delete button
- Confirm the deletion in the confirmation modal
Note: Deleting components cannot be undone. You would need to re-upload from your Figma canvas.
Deleting a Design System
To remove an entire design system:
- Navigate to the design system you want to delete
- Click Delete Design System
- Confirm the deletion in the confirmation modal
Warning: This permanently removes the design system and all its asset folders and components.
Syncing Your Design System
After uploading components, your design system needs to be synced before it can be used for AI generation or shared with other tools.
- Go to Sync Template Design from the AI Studio home page
- Select the design system you want to sync from the dropdown
- Click Sync Template Design
- A loading indicator will show the sync progress
You don't need to have components in every predefined category. AI Studio will only use the categories that have components saved — empty categories are simply skipped during generation.
Once synced, your design system is ready to use with AI Studio to generate email templates.
Best Practices
- Be consistent with naming — Use clear, descriptive names for your design systems and the components within them. This makes it easier for your team to find and use the right components, and helps AI Studio match components to the right sections of your campaign brief.
- Keep components modular — Each component should be self-contained and work independently. This gives AI Studio and Composa maximum flexibility when assembling emails.
- Update and re-sync regularly — When you update component designs in Figma, re-upload and re-sync your design system to keep everything current.
- Use multiple design systems for different brands — If you manage emails for multiple brands or product lines, create separate design systems for each one.
- Only populate the categories you need — You don't have to fill every predefined category. AI Studio skips empty categories, so only save components for the sections relevant to that email type.
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 is blocked: Check that all asset folders in your design system contain at least one component. The plugin will warn you about any empty folders.
Components look different after syncing: The design system captures the current state of your components at the time of upload. If you've made 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