Skip to main content
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
1

Select the section frame

Select the entire section frame.
2

Create the component

Click the diamond icon in the top toolbar (or press Cmd/Ctrl + Option/Alt + K).
3

Confirm

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.
1

Select the main component

Select your main component (four-diamond icon).
2

Select a layer

Click into the component and select a specific layer.
3

Open the property option

In the right sidebar under “Layer”, click the property icon next to “Visible”.
4

Create the property

Click ”+ Create boolean property”.
5

Name it clearly

For example: “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)
1

Select your main component

Select the main component on the canvas.
2

Add a variant

Click the diamond icon and select “Add variant”. A new version appears next to your original, grouped in a dashed border.
3

Modify the new variant

Make the changes that set this variant apart.
4

Rename the variant property

Select the component set (dashed border). In the right sidebar, rename “Variant” to something meaningful (e.g., “Layout”).
5

Rename each variant

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:
  1. Select your component
  2. Click the three dots menu in the right sidebar
  3. Select “Add description”
  4. 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
1

Create a frame

Create a new frame at 640px width.
2

Add component instances

Add your header, hero, content, and footer instances.
3

Check spacing

Ensure proper spacing with Auto Layout.
4

Create the component

Select the entire template frame and click the diamond icon.
5

Name it

For example: Template / Promotional / Product Launch.

​
Publishing Components to Your Team

Publish to a team library:
  1. Click the Assets panel
  2. Click the book icon
  3. Select “Publish library”
  4. Write a clear description of changes
  5. Click “Publish”
Enable the library in other files:
  1. Open any Figma file
  2. Click the Assets panel
  3. Click the book icon
  4. 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:
  1. Visit the Figma Community
  2. Search for “Email Love Ultimate Design System”
  3. Click “Duplicate” to copy it to your files
  4. Customize colors, fonts, and spacing for your brand
  5. Publish as a team library
What’s included:
  • Hundreds of templates and 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.