Supported by

Ever spent an entire afternoon wrestling with nested tables just to get a two-column email layout working in Outlook? Yeah, me too. It’s painful.

Here’s what usually happens: You start with a simple design concept. Maybe it’s just a header, some text, and a button. Should take 30 minutes, right? Three hours later, you’re deep in a rabbit hole of conditional comments, testing nineteen different combinations of valign attributes, and wondering why you didn’t just become a carpenter instead.

The numbers are pretty depressing. A basic responsive email template can easily balloon to 800+ lines of HTML once you add all the necessary fallbacks, inline styles, and client-specific hacks. And that’s just for something simple. Want to add an image gallery or multi-column layout? Good luck with that.

But here’s the thing, there’s actually a much better way to build emails. It’s called MJML, and it’s the framework we use in the Email Love Figma Plugin.

What is MJML?

MJML (Mailjet Markup Language) is an open-source framework that transforms the complex world of responsive email development into something simple and accessible. Instead of wrestling with hundreds of lines of complicated code, MJML lets you create emails using simple, readable components.

Originally developed by the team at Mailjet (now part of Sinch), MJML has become the go-to solution for email developers who value their sanity. The concept is straightforward: you write clean, component-based code that automatically compiles into all the gnarly table-based HTML that email clients actually need.

Here’s a quick example of what I mean:

MJML Code:
<mj-wrapper>
<mj-section>
<mj-column>
<mj-text>Hello there!</mj-text>
<mj-button href="https://example.com">Click Me</mj-button>
</mj-column>
</mj-section>
</mj-wrapper>

What it generates: About 50 lines of table-based HTML with inline styles, conditional comments, and responsive breakpoints. All the stuff you don’t want to write by hand.

The beauty is in the abstraction. You focus on the content and structure, and MJML handles all the technical complexity behind the scenes.

The 5 Big Benefits of MJML

1. Massive Time Savings

I’m not exaggerating when I say MJML can cut your email development time by 70-80%. That newsletter template that used to take you all day? You can knock it out in a couple of hours.

We’ve rebuilt complex email campaigns in fewer than 240 lines of MJML that originally required 800+ lines of hand-coded HTML. That’s not just faster to write – it’s faster to debug, easier to maintain, and way less likely to break when you need to make changes.

2. Built-in Responsiveness

Every MJML component is responsive by default. Multi-column layouts automatically stack on mobile. Images resize appropriately. Text scales correctly. You don’t need to write a single media query or worry about mobile optimization – it just works.

This alone is worth the price of admission. How many times have you finished building an email, only to check it on mobile and realize you need to rewrite half the layout? With MJML, that problem disappears.

3. Cross-Client Compatibility

The dirty secret of email development is that every client renders HTML differently. Outlook uses Word’s rendering engine (I know, right?). Gmail strips out certain CSS properties. Apple Mail handles images differently than Yahoo Mail.

MJML solves this by generating the specific code each client needs. It combines the best practices from mobile-first and hybrid coding approaches, includes the necessary fallbacks, and handles all the edge cases you’ve never even heard of.

The result? Your emails look consistent across Outlook 2016, Gmail mobile, Apple Mail, Yahoo, and dozens of other clients without any extra effort on your part.

4. Easy to Learn

If you’ve ever written HTML, you can learn MJML in about an hour. The component names are intuitive – mj-text for text, mj-button for buttons, mj-image for images. There’s a logical hierarchy to how things work, and the documentation is actually readable (rare for developer tools).

The learning curve isn’t steep, and you don’t need to become an email development expert to use it effectively. That’s kind of the point.

5. Future-Proof

MJML is actively maintained, widely adopted, and backed by a company that has skin in the game. When email clients change their rendering behavior (looking at you, Gmail), the MJML team updates the framework to handle it.

You’re not betting on some random open-source project that might disappear next year. This is a mature, stable solution that thousands of companies rely on for their email infrastructure.

How MJML Actually Works

Understanding MJML’s structure will make everything else click into place. Think of it like building blocks:

The Hierarchy:

• Sections (mj-section) are horizontal rows in your email
• Columns (mj-column) divide sections vertically
• Content (mj-text, mj-button, etc.) lives inside columns

So a basic two-column layout might look like this:
<mj-section>
<mj-column>
<mj-text>Left column content</mj-text>
</mj-column>
<mj-column>
<mj-text>Right column content</mj-text>
</mj-column>
</mj-section>

When MJML compiles this, it generates nested tables with proper width calculations, fallback fonts, responsive behavior, and all the inline styles needed for cross-client compatibility. The output isn’t pretty to look at (it’s old-school table-based HTML), but it works everywhere.

The key insight is that while the final HTML output uses outdated techniques (because that’s what email clients support), the authoring experience feels modern and clean.

Why We Built Our Plugin on MJML

When we started building the Email Love Figma Plugin, we had a choice: create our own email framework or build on something that already worked.

MJML was the obvious choice for several reasons:

Industry Adoption: Major ESPs, email agencies, and development teams already use MJML. We didn’t want to force our users to learn yet another proprietary system when there was already a widely-adopted standard.

Perfect Match for Figma: MJML’s component-based structure maps beautifully to Figma’s design system approach. Sections become frames, columns become auto-layout containers, and content becomes text and image layers.

Customer Requests: Our early beta users specifically asked for MJML support. They were already familiar with the framework and wanted to maintain their existing workflows.

Technical Advantages: Building on MJML meant we could focus on the design-to-code experience instead of reinventing email rendering. Why solve a problem that’s already been solved?

The decision has paid off. Our customers love that they can design in Figma and export clean, standards-based MJML that their developers can easily work with.

MJML + Email Love Figma Plugin in Action

Here’s where things get interesting. The Email Love Figma Plugin brings MJML’s component structure directly into Figma’s visual environment.

When you add a section from our plugin, Figma automatically creates the proper layer hierarchy:
Email Template (Frame)
└── MJ Wrapper
└── MJ Section
└── MJ Column
├── MJ Text
├── MJ Button
└── MJ Image

This isn’t just naming convention – it directly corresponds to the MJML structure that gets exported. You can see the framework’s logic represented visually in Figma’s layers panel.

The workflow is beautifully simple:

1. Design using our pre-built components or build your own sections
2. Preview your email directly in Figma to see how it renders
3. Export with one click to get clean MJML code
4. Deploy by copying the HTML into your ESP or email tool

The plugin handles image hosting, generates responsive previews, and produces code that’s ready to use immediately. No manual cleanup required.

What’s really powerful is that you can move components around in Figma, and the plugin maintains the proper MJML structure automatically. Want to reorder sections? Just drag them in the layers panel. Need to adjust spacing? Use Figma’s auto-layout padding controls – they map directly to MJML’s padding attributes.

Why Teams Love This Combination

The MJML + Figma Plugin combo solves different problems for different team members:

For Designers: You can design emails without worrying about technical limitations. Want a complex multi-column layout? Go for it. Need pixel-perfect spacing? Figma’s got you covered. The plugin ensures your designs will actually work when they’re built, so you spend less time going back and forth with developers about what’s “technically feasible.”

For Developers: You get clean, maintainable MJML code instead of a Photoshop mockup and a prayer. The code is properly structured, uses standard components, and includes all the responsive behavior built-in. No more translating designer intent into email-compatible HTML – the plugin does that translation automatically.

For Project Managers: Faster turnaround times, fewer revision cycles, and less debugging. When the handoff from design to development is seamless, everything else runs smoother. Plus, you’re using industry-standard tools instead of proprietary solutions that might lock you in.

Here’s what one of our customers told us: “We cut our email production time in half. Our designers can iterate quickly in Figma, and when they’re happy with the design, we know the code will work. No surprises, no ‘this won’t work in Outlook’ conversations. Just clean handoffs and emails that actually render correctly.”

That’s the kind of feedback that makes building tools worthwhile.

Getting Started

Ready to experience the difference? The Email Love Figma Plugin is available in the Figma Community, and we’ve included a starter template library to help you hit the ground running.

You don’t need to become an MJML expert overnight. Start with our pre-built components, experiment with the structure, and gradually build up your understanding of how the framework works. The beauty of MJML is that you can be productive immediately without needing to understand all the technical details.

We’ve also put together training resources, component libraries, and support documentation to help teams get up and running quickly. Because the faster you can start building better emails, the sooner you can get back to the creative work you actually enjoy.

The Future of Email Development

I’ve been working in email marketing for over 15 years, and I’ve never been more optimistic about where the industry is heading. Tools like MJML are making email development accessible to more people while raising the bar for what’s possible.

When you combine that with visual design tools like Figma and automation like our plugin provides, you get a workflow that’s actually enjoyable. Instead of fighting with code, you’re focused on creating experiences that connect with your audience.

That’s what we’re building toward – a world where creating beautiful, functional emails doesn’t require a computer science degree and a tolerance for pain.

The combination of MJML’s robust framework and Figma’s intuitive design environment gets us closer to that goal. Try it out and see what you think. I’m betting you’ll never want to go back to the old way of doing things.

Want to experience the future of email development? Download the Email Love Figma Plugin from the Figma Community and start building emails the modern way. Questions? Hit us up – we’re always happy to help teams streamline their email workflows.

Much love,
Andy

Email: [email protected]
Twitter: @emaillove