How to export emails from Figma to MJML code using Emailify

Video Transcript

Today, I'm going to be showing you a quick tutorial on how to export your email designs from Figma to MJML code automatically using the Emailify Figma plugin.

To get started, all we need to do is go to our Figma file, click on the resources icon at the top here, and search for Emailify. Under the "Plugins" tab, if you click on the Emailify result, you can run the Figma plugin by either clicking on this "Run" button here, or you can click on this little "Save" icon here to add it to your saved Figma plugins list. I've already clicked on that icon, so I'm just going to go to my canvas, right-click anywhere, go down to "Plugins," go down to "Saved plugins," and then click on Emailify. That's just going to run the Figma plugin we saved a second ago.

If you're brand new to the Figma plugin, the way that it works is it helps you to design emails in Figma, which you can then automatically export to code or various email marketing platforms automatically using the built-in Figma plugin export features. For today, I'm just going to be creating a really simple example, so I'm just going to call this example "Template Test" and click on "Add New Emailify Container." That's going to add a special frame to our Figma file that we can now add components to. You'll notice that there's a bunch of different starter components in the Figma plugin that you can automatically add. This just helps make it easy to create common blocks, but there are a variety of ways to create new content. You can use some of the other features down here to add rows and columns and things like that. There's also some templates. If you want to check out some of the pre-built templates, just click on the new button again, go to "Browse Figma Email Templates," and you can see there's a whole bunch here that you can duplicate for free from the Figma community. For example, this Airbnb template—we can open that up here and see what that looks like. I'll just bring that over to my Figma file here to show you what that looks like.

The important thing to notice, especially if you're focusing on MJML, is that these layers map one-to-one with the MJML structure. What I mean by that is if we go to the MJML site, go to mjml.io, and then go to the documentation part of the website, and go down to some of the components, you can see that the components in MJML are one-to-one with the components in your Emailify designs. What that means is you can see here we've got rows, we've got columns, we've got elements, we've got button elements. You can see down here we've got a button, we've got a spacer, we've got a divider, we've got a text layer, and all of these are mapping up to the MJML components in here. You can see we've got our columns, we've got our divider, we've got our spacer, we've got our text layer—all of these are basically mapped to MJML. This is really important because it's going to show what that's going to look like when it exports to code in a moment.

As I said, you can see here we've got the same structure. We've got a section, which is basically a row. We've got a column, and then inside that column are our content layers. Same in here; we've got our rows, we've got our columns, and we've got our content layers directly inside the columns. The same thing applies for multiple columns. We've got a row, column, column, and content inside of those columns. You can see here when I click on a column, this gives you the option to add these elements to any of those column layers. I can add these navigation links in here, and that's going to map to these navbar links over here. Again, this is a really direct mapping to MJML, and that's going to be important to know once we export this out.

Now that we've got our template, you can preview it by clicking on the preview button in the Figma plugin at any time. This is going to automatically render a real preview of the code in your plugin window before we export it. You can see what it looks like on desktop, and then we can go down to mobile and check that out as well. You can also override some of the styles on mobile too. If you click on any of your layers and click on the settings button, that's going to automatically give you a bunch of different options to apply mobile overrides. For example, text sizes, overriding image styles, padding, border radius—all these different overrides that you can do. I'd encourage you to check those out.

I'm not going to be going into all of the details about how to design the emails in this video, but if you're interested in that, I'd highly recommend checking out some of the other videos on the YouTube channel or going to our documentation site. If you click on the "Start Here" button, this will let you go through all of the documentation. You can see exactly how to create all of the elements and style them, add things like links, dynamic content—everything you'd basically want to know is all found in the documentation site. Again, I'd highly recommend checking that out and also checking out some of the other video tutorials for more of the design content.

Basically, once you've got your design ready to go in Figma and you're happy with how it looks in the Emailify preview, to export it to MJML, all we need to do is click on the "Export HTML" button in the Figma plugin. I'm going to click on that now. You can see by default it's set to export an HTML email, but we're going to change this to MJML source code. Just go ahead and click on the MJML source code under the "Download To Your Computer" subcategory. Click on that, and you can see the little logos change to be the MJML logo. That's looking really good. We only want to export this one template today, so I'm just going to click on this one here.

The last thing we're going to do is upload the image URLs as well. This means that it's going to automatically host the images, so we can just copy-paste the code, and those images are already going to be hosted for us. I'm going to check that. For this example, I'm just going to turn off the minification of the HTML just to make it a bit more readable. Normally, I would leave that on because I want the code to be as small as possible, but this is basically just going to nest the code in a nicer way, so we can read it more easily. I'm going to turn that off for now. Now, again, I'd normally leave that on, but just to show you what it looks like, I'm going to turn that off and then click on "Export to MJML." I've just clicked that button. That's going to now generate all of the MJML code for us. It's going to export all the images, upload those, and then give us a zip file we can download. The code's now ready. I'm going to click on the "Download your .zip file" button, save that to my computer, and if you unzip your zip file and then open up the folder, you'll see this content here.

You can see that we've got our Emailify template, and that's looking really good. We've got our MJML file, we've got our index.html file, which is the compiled version of that MJML file, and we've got our images folder if we need those later as well. Just to show you what this looks like, if we go to the MJML website and click on the "Try it live" link, that will open up this editor over here. This basically lets us paste in or write MJML code, and that will automatically compile it to HTML. That's what MJML does: it takes this source code, transforms it, and compiles it into this production-ready HTML. We're going to have a look at that now for our own code.

I'm just going to paste this in here. If we go back to our folder, find your MJML file, and just drag and drop that in here, we can copy all of that MJML source code, paste it into the MJML code editor, paste that in, and you can see here on the right we've got our email as we'd expect. That's looking really good. You can see all the codes being rendered as HTML, and you can see on the left-hand side here all of the MJML code has been exported. We've got our sections, we've got our columns, we've got our text, and these are all correlating to what we had a look at in the documentation a moment ago. You can see here we've got our section, column, text, and that's exactly what we can see in our code over here. We've got sections, columns, and text, and all of the properties are automatically being populated from our style that we set in Figma. This is all automatic. You don't need to code anything. It's automatically going to generate the MJML for you, and with that one click, you've basically got all of that code written for you. That's looking really good.

Again, we can check out the compiled HTML. MJML is going to compile all this for us, and again, this is basically just an example of what it looks like. You wouldn't necessarily use this email editor in the MJML website to compile your code. There are a bunch of different ways to do that. If you go to the usage panel in the documentation site, the quickest way is to use the online editor, which we were just in a moment ago over here, but what you really want to do is check out some of these other methods. You might use the Visual Studio Code Figma plugin, one of these other text editor Figma plugins, or using a command line tool like Node.js or just a command line prompt. You can basically create a command line interface that you can run commands in to compile the code.

But again, it's really up to you. There are also some other platforms like Loops. Loops.so uses MJML natively, so if you are creating your emails on Loops, you can just upload your MJML file, and that will automatically work. There are a bunch of other platforms that use MJML too. Really, the point of MJML is it's a developer-friendly markup or syntax that can then be edited really easily, and you can then make those changes without having to tweak all of the actual compiled HTML. For example, if we go into here and we wanted to change this heading up here, where we've got "Level up your checkout", we could easily change that text. We could call this, you know, "New heading here", and that's going to automatically update the compiled HTML.

Again, if you're using MJML, you probably know why you're using it, so I'm not going to go through all of the ins and outs of what MJML is and how to use it. But if you are needing the MJML format for your development team or the platform you're working with, this is a really easy way to export it from Figma if you've designed your emails using the Emailify Figma plugin. Again, this won't work if you've already pre-designed your emails before using the plugin. You will need to use the Figma plugin's design tools to help you create that layout again to match the expected MJML formatting. But once you've done that, you can see here there are a bunch of different options. The design flexibility is really high. You can basically create whatever you want. Whatever you could design with MJML itself, you can create using Emailify, and that's going to generate the production-ready MJML code for you to use however you like.

I hope that's helpful. If you're wanting to generate MJML code from Figma, this is going to be a really easy way to go about it with a one-click export. Thank you, as always, for watching, and we'll be back with more Figma tutorials like this one very soon.