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 named folders (called asset folders) so the plugin knows which components are headers, which are footers, which are body sections, and so on. 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 an asset folder to upload to (e.g., "Headers", "Footers", "Body Sections")
- 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 asset folder until your design system is fully populated.
Create New Asset Folders
If you need additional categories beyond the defaults:
- From the Sync Template Design page, click Create New Asset Folder
- Give the folder a name that describes the component type (e.g., "Hero Sections", "Testimonials", "Product Cards")
- Click Create
- You can now upload components to this new folder
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 asset folders
- Each asset folder shows a file count so you know how many components are stored
- Click into any design system to browse its folders and components
Deleting Asset Folders
If you need to remove an asset folder:
- Navigate to the asset folder within your design system
- Click the Delete button
- Confirm the deletion in the confirmation modal
Note: Deleting an asset folder removes all components inside it. This cannot be undone.
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
Important: If any asset folders in your design system are empty, the plugin will display a warning and block syncing until those folders are populated. Make sure every asset folder has at least one component before syncing.
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 both your design system and asset folders. This makes it easier for your team to find and use the right components.
- 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.
- Fill all asset folders before syncing — Empty folders will block the sync process. Only create folders you plan to populate.
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