How to export HTML emails from Figma to Marketo using Emailify

Video Transcript

Today I’m going to be showing you a full tutorial on how to export your HTML emails from Figma to the Adobe Marketo platform using the Emailify Figma plugin.

To get started, we need to go to our Figma file, click on the little “Resources” icon at the top here, and search for Emailify. Under the “Plugins” tab, if you click on the Emailify item, you can run that Figma plugin by either clicking on this run button here or clicking on this little save icon here. That’s going to let you run the Figma plugin from your saved Figma plugins list.

I’ve already clicked on the little “Save” icon, I’m just going to go to my canvas, right-click anywhere, go down to “Plugins”, then go down to “Saved plugins” and click on Emailify. That’s just going to run the Figma plugin we saved a second ago.

If you’re new to the Figma plugin, the way that it works is it helps you to design HTML emails that you can then automatically export to code directly from Figma. I’m just going to be creating a really simple blank email template today, but you can also check out some of the templates which will let you clone a Figma file that’s Emailify ready if you want to kind of reference the kind of designs you can create. I’d also recommend checking out the documentation site, and that’ll have all the resources you need for designing the emails in more detail as well.

I’ll let you check those out in your own time, but for today I’m just going to be creating a new Emailify frame. I’m just going to call this example Marketo template and I’m going to click on the add new Emailify container button. That’s going to add a special frame to our Figma file which we can then start adding components to from the Emailify Figma plugin. For example, we can start adding some of these blocks in here. I can add some headers, I can add some content blocks. You can add hero blocks, all these kinds of different components are instantly added by the Figma plugin and then you can basically go through and customize those in Figma.

As I said, I’m not going to be going through all of the design features in the Figma plugin today. If you’re new to the Figma plugin and you want to learn more about how to actually design the emails, we have a bunch of other tutorials on the YouTube channel that I’d recommend checking out along with the documentation site as I mentioned. This will help you do things like add elements and add links and basically go through all of the different features of the Figma plugin and how to design the emails.

For today, I’m going to be assuming that you’ve already designed your email and we’re just focusing on exporting it to Marketo. Once you’ve designed your email and you’re happy with it, you can basically go to the Footers Tab and the last step is just to make sure you’ve got a Marketo footer added. If you scroll all the way down under the Footers tab to the Marketo option and click on that, that’s going to automatically pre-populate the unsubscribe link required for the Marketo email. You can see here if I click on the link layer and then click on the settings button in the Figma plugin, that’s been prepopulated with the correct Marketo unsubscribe link.

Once that’s all set up, you can preview your email in the Figma plugin by just clicking on this preview button here. That’s going to let you load up a real HTML preview of what the email is going to look like. You can check it out on mobile, you can expand that out to desktop to see how the differences look there. As I mentioned, the design features in the Figma plugin help you to create mobile layouts, it automatically does most of the work for you, but if you want to adjust things like the font size or the padding on mobile, you can just go ahead and click on any of these layers in your email, click on the settings button in the Figma plugin, and that will allow you to do things like add font size overrides or padding overrides, all different kinds of overrides for mobile and HTML settings. Again, check all those out in detail in your own time, but for today I’m going to be assuming that you’re happy with your design and now we want to get it into Marketo.

I’m just going to close off my preview. We’re now just going to click on the export HTML button. I’m going to click on that now and this is going to open up the HTML export options in Emailify. By default, it’s just going to export a zip file with your HTML, but we want to click on this drop down and change it from HTML email and go down to platform Integrations, scroll all the way down to the letter M and you’re going to see two Marketo options.

I’m going to show you both of these options in the tutorial today. The first one I’m going to go through is just exporting the zip file locally and manually creating the template in Marketo, and then we’re going to come back to the Figma plugin and I’m going to show you how to optionally do this via the Marketo API. We’ll be able to automatically upload the templates directly from Figma.

The first one we’re just going to go through is the Marketo zip option. Go ahead and click on the Marketo zip item there and what we can then do is also enable this add Marketo editable content tags. That’s basically going to populate the template with an editable snippet to make your code editable in the Marketo code editor. I’m just going to click on the export for Marketo button in the Figma plugin and that’s going to automatically generate the HTML for me, upload all of the images, and it’s going to give me this message saying that my Marketo templates have been exported.

Now that we’ve got that message, we can go ahead and click on the download your zip file button and just save that to your computer. If you open up that zip file and unzip it, you’ll get this folder that looks like this. You can see here we’ve got our folder which is called example Marketo template and that contains our index.html file. This is the content that we just exported. If we open that up in a web browser and drag that in there, you can see that the content we just exported to HTML from Figma is all in there as expected.

What we want to now do is log into Marketo. Go to your Marketo account and just log in. What you want to do is go to the design studio option. You can either click on the menu item up here or click on this little Design Studio tile in your home screen. Once the design studio page loads, what you want to do is go up to this little new icon up here and just click on that and then click on the new email option. Just click on new email and that’s going to open up this new tab here. This is going to allow us to upload our custom HTML email that we just exported.

What you want to do is go to the my templates tab up here, click on that, and then click on the blank template. We’re just going to create a blank template and we’re going to give this the same name. I’m just going to call this example Marketo template and in the description I’ll just say from the zip export option just we know which one it is. Then click on the create button in the top right up here.

Once that loads up, you’ll see that we’ll be able to open up the code editor. You can click on this edit code button up the top here. I’m going to click on that and then what we want to do is copy all of the HTML that we just exported. Just go to your HTML file and the easiest way to do this is just right click anywhere, go down to view page source and you want to select all of that HTML content, copy it to your clipboard. Just copy that with command C or control C and then jump back into Marketo, delete all of the existing HTML in the blank template code editor. Just clear all that out and then we’re just going to paste in all of that code we just copied from our exported Emailify template.

Once you’ve pasted all that in, you can go ahead and click on the save option up the top here. Just click on Save in the top right and that’s going to save our custom HTML template. Once this reloads, you can see that we’ve got our email in here as we expected. That’s looking really good and you’ll see up in the top right here there’s a little snippet under content that says edit email. This means we can basically jump in and edit that content because we enabled that editable content toggle in Emailify.

If I basically just go ahead and click on this area here and just double click on that, you can see that when we load that up we’ve got this edit email option which actually allows us to edit the content if we want in Marketo. This can be handy if you want to make some small copy tweaks or swap out some links and things like that. You can basically do that through this editor here and you can see if I highlight my button link, this will basically let me add a new link. I can change that URL, click apply and basically just add that in there and that’s going to automatically save that to my HTML. You can see that added in there now.

Once you’re happy with that, just go ahead and click on Save if you wanted to make any edits and yeah, that’s basically it. Now you can add things like your subject line, you can populate that here and you can obviously populate the rest as you normally would in Marketo, but that’s the way you can export your HTML to a zip file and manually create a template.

That’s basically method one. As I mentioned, I’m going to go through the API method in a moment, but if you just want to export your HTML from Emailify to a zip file locally and manually copy paste that into your Marketo instance as a new email template, that’s a really good option just to do a quick import, copy paste it wherever you need, and that’s the way you can do that using the zip export function. Now I’m going to go back to the Figma plugin and we’re going to try the API export method instead. What we can do is go back into our export HTML menu. Just click on export HTML again and this time we’re going to change it from the Marketo zip option and we’re going to use the other option which is the Marketo API option. Go ahead and click on the Marketo API option and this option you can see reveals a few extra Fields. We’ve got these three Fields: we’ve got a Marketo client ID, secret, and the rest API endpoint.

If you’re wondering where to find these, I’m going to show you that in a moment, but what you want to do for some reference is click on this little find API Keys link and that’s going to open up the documentation site with the Marketo instructions. You can see here it’s got the step-by-step screenshots and instructions which we’re going to go through in a moment showing you how to get those details and populate the Emailify Figma plugin with those credentials. We’re basically just going to follow this now. I’m going to walk you through it step by step.

The first step is you want to go to Marketo and go to the admin page. I’m just going to go through these steps with you just we can follow along in the documentation and you can see what each step looks like in there. Okay, I’ve just gone back to my Marketo homepage and we’re basically going to follow along with this documentation here.

What we’re going to do is first click on the admin page. We’re going to go up to the top here, click on admin, and then once that page loads, you basically want to go down to the web services navigation item. On the left here, if you scroll down you’ll see that there’s an option called web services. Go ahead and click on web services and once that loads, what we’re looking for is the content underneath this rest API section down here.

You’ll see that under the rest API it says the endpoint option. You can see here we’ve got this endpoint option that ends in SLR. Highlight all of that and copy it to clipboard and then go back to Emailify and we’re going to paste that into this rest API endpoint section here. Just go ahead and paste that in there and once you’ve pasted that in there, we’re going to go back to the Marketo instance and now we’re going to go to the second section which is how to get our Marketo client ID and client secret details.

If you’ve already gone through these steps which I’ll show you in a second, you might actually just be able to skip down to the section at the bottom. You can skip to step 6 if you’ve already set up these roles and accounts that I’m going to show you now, but if not I’ll run through that with you now.

Okay, next I’m just going to go back to the admin page. I’m in the admin page now and this time we’re going to click on the users and roles item. If we click on users and roles over here, you can see in the documentation we’re going to go to the roles Tab and click on new role. If you go ahead and click on the new role option up here and what we can do is just call this Emailify role API permissions. You can call that whatever you like, I’ve just named it that for ease of use.

What we want to do is underneath the access API dropdown item which is this one here, you basically want to open that up and scroll all the way down until you see read write assets. Go ahead and click on read write assets then click on Create and that’s going to create the new Role for us. You can see here that we’ve got this new role called Emailify role API permissions. That’s the one we just created a moment ago. Now that we’ve got that created, what we want to do is go down to the LaunchPoint nav item. If you go to the left hand side here, go down to LaunchPoint and I’m just going to click on that. Once that loads up, you can see in the documentation over here we want to create a new service underneath this new item under installed services.

Up at the top under installed Services, we want to click on new and then we want to click on new service. Underneath new service, you basically want to give this a name that’s related to Emailify. In this case, I’m just going to call this Emailify API my service for Figma. What you want to do is change the service option to just be custom. Go ahead and click on custom and once you’ve done that, you can just give this a description. We can just say this is a service for Emailify.

What you want to then do is select the API only user. This is going to allow you to select a user in your Marketo instance and you need to make sure that their account is an API only user account. You’ll know how to do that if you’ve got your user permissions set up. I’ve just selected my user which has API permissions and I’m just now going to click create. That’s basically going to assign that user to this new service that we just created and that’s going to allow us to get our secret and ID.

Now that we’ve got that new service set up, you can see in the documentation here under the installed Services we want to click on The View details link. You can see our new service here is the Emailify API service that we just created and you want to go ahead and click on this view details link. Go ahead and click on view details and you can see here that underneath the details tab we’ve got this client ID and client secret. That’s exactly the information that we want.

What you want to do is highlight the client ID and copy that to your clipboard and then go back to Figma, paste that into the Marketo client ID field here and then go back to your Marketo page and do the same thing for the client secret. Just highlight that whole client secret, copy that to your clipboard and we’re going to paste that into the Marketo client secret field here. Just hit paste and that’s going to automatically authenticate with Marketo and you can see here that it’s now connected.

You can see that it’s found our upload folder. The templates folder for our emails has been found and this is basically going to automatically upload the HTML into that template folder. If you need to change this at all, if you wanted to switch accounts or you entered something in wrong, you can click on this little disconnect icon here and that’ll let you change any of these details. If you want to swap out a different user, you can definitely do that, but for now I’m just going to leave that as is. I’m going to paste in that secret again, reconnect it to Marketo, and that’s good to go.

Now that we’ve finished those steps, as you can see in the rest of the documentation which I’m going to walk through now, we’re already at the step where we’ve added our keys and we’ve added our Authentication. All we need to do now is basically click on this upload to Marketo button. I’m going to click on upload to Marketo and that’s going to automatically do the same thing as before. It’s going to generate the HTML code, automatically upload all the images, and this time you can see it’s giving us a link to our templates folder. Our templates have been uploaded into the Marketo platform.

Go ahead and click on this little templates folder link and that’s going to automatically open up the templates folder where the HTML’s just been uploaded to. You can see here at the top of the list of our email templates, the example Marketo template has just been uploaded which is the template we just uploaded from Figma. If you click into that, that should load up our template and you can preview it just by clicking on this little preview draft button here and that should load up the HTML that we just created.

There we go, you can see that all of the HTML has been automatically uploaded from Figma into our Marketo templates and that’s basically ready to go. You can use that email template however you like. You’ve got your email actions up here if you need to approve it. I’m just going to click on this approved draft button and I’m going to approve that marketing template. That’s just approved that now.

Now if we go into our emails and click on new email and then swap over to the my template section, you can see under here that we’ve now got our template added in. That’s the template that we just uploaded via the Marketo API. We can basically click on that and we can call this new email test. Then with that selected, the template we just uploaded, you can now click on the create button and that’s going to automatically create a new email using that template that we just uploaded through Marketo.

As you can see when we double click on this, same sort of thing, we can edit this content as you’d expect. I can save that content and that’s looking really good. Because we’ve got our toggle enabled here where it’s adding the Marketo editable content tags as before, this is an editable template.

You’ll notice that this screen is exactly the same screen we’ve landed on using the previous manual upload option where we copy-pasted the zip file contents into Marketo into this little template area here. You’ll remember we went into the edit code section up the top here and pasted that in, but this time it’s automatically gone ahead and created all of that HTML based on the Marketo template that we just created. We didn’t need to manually copy-paste that in and create a new template, we can just select it from the templates that have been uploaded via the API.

Those are basically the two methods I just wanted to run through both of them with you. Some people might find the API method a bit too cumbersome if you don’t have those admin permissions to create those roles and accounts. Maybe the zip file option is going to be more seamless for you. But in this case, I just wanted to go through both options in case you do want to be using the API option to make that a little bit more seamless for subsequent uploads directly from the Figma plugin.

I’ll leave it there for today. I hope that’s been helpful if you’re a user of the Adobe Marketo email marketing platform and you’ve been wondering how to get your HTML emails out of Figma into the Marketo platform, either through the zip method we went through or the API method. These are both different options you can use.

As I mentioned, if you’re new to the Figma plugin, you’ll need to design the emails in Emailify first. It won’t work if you’re already creating your emails outside of Emailify. You will need to design them using the tools in the Figma plugin, which again you can find more video tutorials and documentation for on our website. You can go to the start here page and just start really digging into all the documentation. There’s also a few dozen full video walkthroughs like this one for doing all sorts of different design tasks and upload tasks and mobile optimizations and everything like that, please do check that out. I’ll leave it there for today. Thank you as always for watching and we’ll be back with more Figma tutorials like this one very soon.