Adding Buttons
Select a column in your design, then open the Build Your Own tab in the Email Love plugin. Click Button to add a button component into the selected column. The component includes the button text, background color, and link properties.Button Properties
Configure your button using the Email Love plugin’s properties panel:| Property | Description | Example |
|---|---|---|
| Button text | The label displayed on the button | Shop Now |
| Link URL | Where the button links to | https://example.com/shop |
| Background color | Set via Figma’s fill on the button frame | #E94560 |
| Text color | Set via Figma’s text fill | #FFFFFF |
| Border radius | Set via Figma’s corner radius | 4px |
| Padding | Set via Figma’s auto layout padding | 12px 24px |
| Font size | Set via Figma’s text settings | 16px |
| Width | Full width or auto (content-fit) | auto |
Design Best Practices
- Make it obvious: Use a contrasting color that stands out from surrounding content. If your email is mostly white and blue, an orange or red button pops.
- Action-oriented text: Use verbs: “Shop Now,” “Get Started,” “Download Free Guide.” Avoid vague labels like “Click Here” or “Learn More” (unless your audience knows exactly what they’re learning about).
- Size for tapping: Minimum height of 44px with at least 16px padding on all sides. Fingers are imprecise. Make the target generous.
- One primary CTA per email: You can have multiple buttons, but make one clearly dominant with size, color, or placement.
- Limit to 2-3 buttons total: Too many CTAs dilute the impact of each one.
Outlook Rendering
Outlook on Windows doesn’t support CSS-based buttons reliably. The Email Love plugin generates VML (Vector Markup Language) fallback code that renders bulletproof buttons in Outlook. A few things to know:- Border radius is ignored in Outlook on Windows. Buttons render as rectangles
- Gradients on buttons won’t render in Outlook. Use solid background colors
- The VML button matches your solid background color and text styling exactly
Mobile Overrides
The plugin automatically syncs button mobile width based on how you’ve sized the button in Figma:- Fill (button stretches to fill the column) → The plugin automatically enables full-width on mobile (width: 100%). This means your button will span the full column width on both desktop and mobile.
- Hug or Fixed width → The plugin automatically keeps the button at its fixed width on mobile.
- Font size: Keep button text at 16px minimum on mobile
- Padding: Increase vertical padding for a larger tap target
Common Issues
- Button text wraps unexpectedly: Your button text is too long or padding is too large. Shorten the text or reduce horizontal padding.
- Button isn’t clickable: Check that the link URL is set in the plugin’s properties panel, not in Figma’s prototype settings.
- Button color looks wrong in dark mode: Dark mode may invert your button colors. Test in dark mode preview and consider setting custom dark mode colors for iOS.