A Figma component is a reusable design element that serves as a master template. When you update the master component, all instances of that component update automatically across your files.
How components work:
Components have a parent-child relationship. The main component (purple border with four-diamond icon) is the source of truth. When you drag a component from the Assets panel into your design, you create an instance (purple border with hollow diamond icon). Changes to the main component automatically update all instances.
Benefits for email design:
- Update brand elements once and apply everywhere
- Maintain consistency across all campaigns
- Speed up email production
- Enable non-designers to build emails without breaking layouts
Creating Your First Component
Design your email section
Start by designing a complete email section. Make sure to:
- Use Auto Layout on all frames for responsive behavior
- Name all layers clearly
- Use consistent spacing and styles
Convert to a component
- Select the entire section frame
- Click the diamond icon in the top toolbar (or press
Cmd/Ctrl + Option/Alt + K)
- The frame border turns purple with a four-diamond icon
Name your component
Use forward slashes to create automatic categorization in the Assets panel:
Section / Product Card / 2 Column
Hero / Image Left / Dark
Button / Primary / Large
Why Auto Layout Matters
Auto Layout is essential for email components because it allows content to adjust dynamically when elements are hidden or shown.
Best practices:
- Use vertical direction for stacking content
- Add consistent spacing between elements (16-24px)
- Set appropriate padding (20-40px for mobile, 40-60px for desktop)
When you toggle properties on/off, Auto Layout automatically adjusts spacing and removes gaps. Without it, you'll have awkward empty spaces.
Adding Properties to Components
Properties are toggles that control visibility without detaching from the component. They give your team simple on/off switches for optional content.
Step-by-step:
- Select your main component (four-diamond icon)
- Click into the component and select a specific layer
- In the right sidebar under "Layer", click the property icon next to "Visible"
- Click "+ Create boolean property"
- Name it clearly (e.g., "Show image", "Show price", "Show CTA")
Which elements should have properties:
- Optional images or graphics
- Supporting headlines
- Price labels or badges
- Secondary CTAs
- Decorative elements
Keep it simple:
Limit properties to 5-8 per component maximum. Too many toggles become overwhelming.
Creating Component Variants
Variants are meaningfully different versions of the same component grouped under one parent. Users can switch between them using a dropdown menu.
When to use variants:
- Different layouts (1 column vs 2 column vs 3 column)
- Different visual styles (light theme vs dark theme)
- Different content structures (image left vs image right)
Step-by-step:
- Select your main component
- Click the diamond icon and select "Add variant"
- A new version appears next to your original, grouped in a dashed border
- Modify the new variant as needed
- Select the component set (dashed border)
- In the right sidebar, rename "Variant" to something meaningful (e.g., "Layout")
- Click each variant name to rename them (e.g., "2 Column", "3 Column")
Common variant structures for email:
- Headers: Logo Position (Left, Center), Navigation (Show, Hide)
- Heroes: Layout (Image Left, Image Right, No Image)
- Product Cards: Columns (1, 2, 3), Style (Bordered, Borderless)
- Buttons: Style (Primary, Secondary), Size (Small, Medium, Large)
Using Properties and Variants Together
The most powerful components combine both properties and variants.
Example: Product Card
Variants control layout:
- 2 Column
- 3 Column
- Full Width
Properties control content:
- Show product image (toggle)
- Show price (toggle)
- Show "Sale" badge (toggle)
- Show secondary CTA (toggle)
This gives your team 3 layout options with flexible content options, without creating dozens of separate components.
Organizing Your Asset Library
Create separate pages for component categories:
- Headers
- Heroes
- Content Sections
- Product Components
- Buttons & CTAs
- Footers
When you open the Assets panel, your page names appear as category headers.
Add component descriptions:
- Select your component
- Click the three dots menu in the right sidebar
- Select "Add description"
- Write clear usage guidelines
Example: "Use this 2-column product card for featuring multiple products in promotional campaigns. Best for 2-4 products maximum."
Creating Full Template Components
Template components are complete email layouts that prevent structural changes while allowing content updates.
When to use them:
- Recurring campaigns (weekly newsletter)
- Highly regulated emails (legal, transactional)
- Templates for less experienced team members
What users can do:
- Update text content
- Swap images
- Change links
- Toggle properties
What they cannot do:
- Add new sections
- Remove existing sections
- Rearrange components
- Change structural spacing
Step-by-step:
- Create a new frame at 600px width
- Add your component instances (header, hero, content, footer)
- Ensure proper spacing with Auto Layout
- Select the entire template frame
- Click the diamond icon to create a component
- Name it:
Template / Promotional / Product Launch
Publishing Components to Your Team
Publish to a team library:
- Click the Assets panel
- Click the book icon
- Select "Publish library"
- Write a clear description of changes
- Click "Publish"
Enable the library in other files:
- Open any Figma file
- Click the Assets panel
- Click the book icon
- Find your library and toggle it on
Update workflow:
When you update and republish components:
- Users see a blue notification dot
- They can review changes
- They can accept updates individually or all at once
- Content overrides are preserved
Component Best Practices for Email
Mobile responsiveness:
- Design components at 600px width
- Use appropriate touch targets (minimum 44x44px for buttons)
- Keep text readable (minimum 14px for body)
Dark mode:
- Create Light and Dark variants for key components
- Or use Figma variables for automatic color mode switching
Accessibility:
- Use sufficient color contrast (minimum 4.5:1)
- Make buttons large enough for easy tapping
- Ensure links are distinguishable from body text
Email client compatibility:
- Avoid complex overlapping elements
- Keep layouts simple and table-based
- Use web-safe fonts with proper fallbacks
Using the Ultimate Email Design System
The fastest way to get started:
- Visit the Figma Community
- Search for "Email Love Ultimate Design System"
- Click "Duplicate" to copy it to your files
- Customize colors, fonts, and spacing for your brand
- Publish as a team library
What's included:
- 40+ pre-built components with properties and variants
- Complete template examples
- Organized page structure
- Ready to export with the Email Love Figma Plugin
Common Questions
What's the difference between hiding a layer and using a property?
Hiding a layer with the eye icon is manual and doesn't sync across instances. Properties create consistent, reusable toggles that work the same way everywhere.
Can I edit a component instance without affecting the master?
Yes. You can change text, swap images, adjust colors, and toggle properties. Structural changes require detaching, which breaks the connection to the main component.
How many variants should I create?
Start with 2-4 variants per component. Only create variants for meaningfully different versions. Too many variants make it hard to choose.
Can I nest components inside other components?
Yes. You can place button components inside product cards, for example. Keep nesting to 2-3 levels for easier maintenance.
Powered by