> ## Documentation Index
> Fetch the complete documentation index at: https://help.emaillove.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Understanding Figma Components, Variants, and Properties
> How to create reusable Figma components with variants and properties for your email design system
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.
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".
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)
Select the main component on the canvas.
Click the diamond icon and select "Add variant". A new version appears next to your original, grouped in a dashed border.
Make the changes that set this variant apart.
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:**
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
Create a new frame at 640px width.
Add your header, hero, content, and footer instances.
Ensure proper spacing with Auto Layout.
Select the entire template frame and click the diamond icon.
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](https://figma.com/@emaillove)
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.