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

1

Select a column

Select a column in your Figma design.
2

Open Build Your Own

Open the Email Love plugin and go to the Build Your Own tab.
3

Add a text component

Click Text to add a text component into the selected column.
4

Edit the content

Double-click the text layer in Figma to edit the content.
5

Style it

Style it using Figma’s text controls (font, size, color, weight, alignment).
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:

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