Create a scalable set of Button components for your Email Design System

Why Turn Your Button into a Component?

• Update button styles in one place and see changes across all templates

• Maintain brand consistency across your email program

• Create multiple button variants (colors, sizes, styles) within a single component

• Speed up email production by reusing pre-built buttons

Step 1: Create Your First Button

1. Open the Email Love Figma Plugin in your design system file

2. Create a new frame in Figma

3. In the plugin, navigate to the Buttons section

4. Select the default button option to generate a basic button

• The outer frame is the button wrapper (you can add padding around it)

• The button itself is set to "hug" by default, meaning it scales based on text length

• Padding inside the button stays consistent regardless of text length

Step 2: Customize Your Button

1. Remove the button from the Email Love frame so you have it as a standalone element

2. Customize the styling:
• Corner radius: Adjust for rounded or square corners
• Fill color: Change the button background
• Padding: Increase or decrease width/height spacing
• Text properties: Update font, size, and color

3. Give your button a descriptive name (e.g., "Purple Button")

Step 3: Convert to a Figma Component

1. Select your customized button

2. Click the Create Component icon in the toolbar (or use Cmd/Ctrl + Option/Alt + K)

3. Your button now appears with a purple diamond icon, indicating it's a component

Step 4: Create Button Variants

1. With your button component selected, click the diamond icon in the properties panel

2. Click the + icon to add a variant

3. Customize each variant:
• Red Button: Change fill to red
• White Button: Change fill to white, add colored stroke
• Black Button: Change fill to black, update text color to white

4. Name each variant clearly in the properties panel

Step 5: Add Buttons to Your Asset Library

1. Open the Assets panel on the left sidebar

2. Find your button component (it will show the number of variants in the corner)

3. Click on the component to see all available variants

4. Drag any variant into your design

Step 6: Apply to Your Design System

1. Navigate to your email design system templates

2. Locate existing buttons in your component library

3. Drag your new button component into the button frame

4. Verify structure: Make sure your button sits inside the correct frame

5. Delete the old placeholder button

6. Repeat for all templates and components in your design system

Step 7: Save in the Email Love Plugin

1. Create a new frame in Figma

2. Generate a button using the plugin

3. Replace it with your custom button component

4. Move your button into the frame

5. Select the wrapper frame

6. Click Add Custom Component in the Email Love plugin

7. Your button now appears at the top of the plugin component list

Making Global Updates

1. Navigate to your master button component

2. Make any styling changes (color, padding, corner radius, etc.)

3. All instances of that button across your design system update automatically

Best Practices

• Name variants clearly: Use descriptive names like "Primary Red," "Secondary White," "Outline Purple"

• Maintain consistent padding: Keep internal padding the same across variants for visual consistency

• Test responsiveness: Ensure buttons scale properly with different text lengths

• Document your variants: Keep a reference guide showing when to use each button style

• Regular audits: Periodically review your button usage across templates

Troubleshooting

• Verify you're editing the master component (purple diamond icon), not an instance

• Check that instances aren't detached from the component

• Ensure width and height are set to "hug contents"

• Verify auto layout is enabled on the button

• Make sure the button is converted to a component

• Check that you're looking in the correct Figma file

Need Help?

• Join our Discord community for live support

• Email us at support@emaillove.com