The text component (mj-text) is the most commonly used element in any email. It holds all your written content—paragraphs, headlines, lists, links, and formatted text. Here's how to get the most out of it in the Email Love Figma Plugin.
Adding Text to Your Email
- Select a column in your Figma design
- Open the Email Love plugin and go to the Build Your Own tab
- Click Text to add a text component into the selected column
- Double-click the text layer in Figma to edit the content
- Style it using Figma's text controls (font, size, color, weight, alignment)
⚠️ Important: Text must always be placed inside a column (mj-column). Placing text directly in a section or wrapper will cause export errors.
Formatting Options
The Email Love plugin supports these text formatting options:
Formatting | How to Apply in Figma | Email Support |
Bold | Select text, press Cmd/Ctrl+B | All clients |
Italic | Select text, press Cmd/Ctrl+I | All clients |
Underline | Select text, press Cmd/Ctrl+U | All clients |
Strikethrough | Via Figma text options | Most clients |
Font size | Set in Figma's right panel | All clients |
Font color | Set in Figma's fill options | All clients |
Text alignment | Left, center, right, justify | All clients |
Line height | Set in Figma's text options | All clients |
Links | Add URL in the plugin properties | All clients |
Styling Tips
Font Sizes
Stick to reasonable font sizes for email. Body text should be 14–18px, with headlines typically ranging from 20–36px. See the Typography guide for detailed recommendations.
Line Height
Use a line-height ratio of 1.5x to 2x your font size. Tight line heights cause text overlap in email clients, particularly Outlook.
Text Color
Set text color using Figma's fill property. The plugin converts this to inline CSS color. Dark text on light backgrounds is safest; be aware that dark mode may invert your colors on most clients.
Links Within Text
To add a hyperlink to text, select the text run you want to link, then add the URL in the Email Love plugin's properties panel. The plugin generates a proper anchor tag in the HTML output. See the Adding Links to an Email article for the full walkthrough.
Mobile Overrides
Use the Mobile Styles tab to adjust text properties specifically for mobile devices:
- Font size: Bump body text to 16–18px if your desktop size is smaller
- Alignment: Center-align text that's left-aligned on desktop, if it reads better on mobile
- Padding: Reduce side padding to give text more room on narrow screens
Common Issues
- Text looks different in Outlook: Outlook ignores custom fonts. Set a web-safe fallback in Configure Fonts.
- Text is getting clipped: Change your Figma text box from "Fixed Size" to "Auto Height."
- HTML tags showing as text: Don't type HTML tags in Figma text layers. Use Figma's formatting tools instead.
- Weird spacing: Check your line height and paragraph spacing in Figma. These translate directly to CSS.
Need help? Reach out at support@emaillove.com or join our Discord community.
Powered by