How to export HTML emails from Figma to Pardot (Marketing Cloud Account Engagement) using Emailify

Video Transcript

Today I’m going to be showing you how to automatically upload HTML email templates from Figma into the Salesforce Pardot platform using the Emailify Figma plugin.

To get started, all we need to do is go to your Figma file and click on the “Resources” icon at the top. If you search for “Emailify”, under the “Plugins” tab click on the Emailify item, you’ll see this little window pop up. To run the Figma plugin, all you need to do is click on the “Run” button here, or you can click on this “More options” icon and click “Save Figma plugin.” That will save it to your Figma plugins list for easy access later. I’ve already done that, so I’m going 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 that we just saved a second ago.

If you’re new to the Figma plugin, the way it works is it basically helps you design emails in Figma that can then be exported automatically to production-ready HTML from the Figma plugin. Let me show you an example. I’m just going to create a new frame called “Test Pardot Template” and click on “Add new Emailify container.” I’m not going to go through all the design features of the Figma plugin in this tutorial. I’ll just create a really simple template just so we can get a sense of how it looks in Pardot. I’m going to add a Pardot footer as well. If you go to the Footers tab in the Figma plugin and scroll down, you’ll see the Pardot icon. Just go ahead and click on that, and that will automatically populate things like the unsubscribe link and the view in browser link. So you can see here I’ve got my unsubscribe link and view in browser link pre-populated. You can obviously style all these components to be on brand. As I mentioned, there are some other tutorials on the channel that go into way more detail about how to do that. But for today, I’m just going to be assuming that you’ve already got your template designed and customized the way that you want in Figma, and you now just want to upload it to the Pardot platform automatically.

Before you upload it, you can preview it by clicking on this little preview icon here. That’s just going to preview the email in Figma so you can see what it’s going to look like. If you’re happy with the design, you can basically start the process of uploading it into Pardot by clicking on this “Export HTML” button in the Figma plugin. So click on “Export HTML.” By default, it will automatically export it to a zip file on your computer, but we can change that by clicking on this little drop-down here. If you scroll down the list to the platform integration section, you’ll see the Pardot option pop up. You’ll notice that there are two Pardot options. The first one is the API upload, which is the one we’re going to be focusing on for now. But there’s also an option with a local zip export. If you just wanted to download the template directly to your computer and manually upload it, you can definitely do that as well. Just select the local zip export option, and it will export the template for Pardot with all of the template tags and things like that included. But for today, we’re going to be using the API upload. So I’m just going to click on “Pardot API upload.” This is going to prompt us to put in a few details.

I’ll walk you through where to find these details in Pardot and how we can then upload this automatically to our Pardot account. So the other thing I should just briefly mention is that Pardot was actually renamed, so Pardot is now technically called “Marketing Cloud Account Engagement” in Salesforce. I think most people still just call it Pardot, so that’s the reason why that’s the label in the Figma plugin. But I just want to clarify in case you’re wondering why “Pardot” and “Marketing Cloud Account Engagement” basically the same thing, they just got different names in Salesforce; I just wanted to really quickly touch on that before we moved on.

The first thing we need to get is our Business Unit ID. So let’s go ahead and find that Business Unit ID by going into our Pardot account. If you log into Pardot and open that up in the browser, you can basically find this page called the business unit setup page by going into your settings icon. So in the top right of Pardot, click on this little settings icon, then click on “Marketing setup,” and that should take you to this page here where you can then click on this “Business Unit Setup” item on the left-hand side. So I’ve just clicked on “Business Unit Setup,” and it should let you find this Business Unit ID. So it should start with “0uv” and have a bunch of other letters and numbers there. So I’m just going to copy that Business Unit ID to the clipboard. I’m going to highlight it, copy it, and paste that into Emailify. I’m going to paste that into the Business Unit ID field.

The other thing we need is our email address and password that we use to actually log into Pardot. So I’m just going to paste those in now. I’m going to copy and paste the email address, paste that in there, and then I’m also going to paste the password. I’m just going to paste the password in the password field and drop those in there.

And then we just need two more bits of information. So we basically need a “Consumer Key” and a “Consumer Secret”. So I’ll show you where to find those now. And to get those, we just need to go to a different page in Pardot called the App Manager. So you can get to the App Manager by going to the setup page. So you can get to the setup page by clicking on the little settings icon here, clicking on “Setup,” and that should bring you to this setup page here. And then what you need to do in the left-hand column is scroll down to the platform tools section, expand the apps accordion, and then click on the “App Manager” menu item. So on the left-hand side, click on “App Manager,” and that should bring up this lightning experience App Manager page that you can see here.

Assuming that you’ve already got an app, a connected app created, it should show up in this list down here. If you don’t, you can go ahead and click on the “New Connected app” button and just set up a new connected app that you want to use with Emailify and fill in all the details and make sure that it can generate a Consumer Key and secret. So I’ve already gone ahead and done that, so I’m going to go down to my Pardot tests integration down here, and I’m just going to click on this little arrow on the right-hand side. So click on that little arrow, and that should let you click on the “View” item. So click on “View.” And once you click on “View,” that should bring you to another page just showing you the connected app that you’ve just clicked on. So you can see here I’ve got my Pardot test connected app. And what you want to do is basically go down here where it says “API Enabled OAuth Settings,” and you want to click on the “Manage Consumer Details” button. So this should reveal your Consumer Key and secret, and you’ll be able to copy-paste those to the clipboard.

I’ve already got those saved in a separate file, so I’m just going to grab them now and copy and paste them into my Emailify plugin. So first of all, I’m going to grab the Consumer Key. So I’m going to copy and paste that into the Consumer Key field, paste that in. Then I’m going to grab the Consumer Secret and paste that into the Consumer Secret field. And once we paste that in, it should automatically load the Pardot API, and it’ll tell you that it’s connected with Pardot if you entered the details successfully. So that’s how you can connect to Pardot. So those details are now added and saved, so they’ll automatically connect to this screen that you can see.

You can see that now that we’re authenticated, it’s basically showing us some different fields that we can now select for uploading our HTML to Pardot. So I’m mindful that there are a few steps here just due to how complicated the Pardot API process is, but we’ve only got a few more things to get through, and then we’ll be able to upload these to Pardot from Figma.

You can see here that we’ve basically got a few different fields. So we’ve got this dropdown over here, and this dropdown allows us to select the campaign that we want to add the email to. So you can basically scroll down and pick the campaign that you want to select. So I’m just going to select this “Email Figma Plugin” campaign that I’ve got in Pardot.

Then in the middle column here, this will allow you to select the folder name that you want to save the email into. So I’m just going to select the “Email Templates” folder.

Then you want to select the tracking ID. So you want to select the tracker domain. So you’ll have a bunch of different options here. Just select the one that you want, and that’ll be the tracking domain that any links and all that sort of stuff gets tracked against.

The last thing we need to populate is just the sender name and email. This isn’t going to send out any emails at the moment, but it just needs to pre-populate those fields. So I’m just going to add my name and email into there. And then we should be ready to go.

Once you’ve populated those, the button should become available to upload this to Pardot. You also have the option of making the template editable. So if you want to add the Pardot editable region tags and things like that, you can select that option. Today, I’m just going to leave that turned off. And then I’m just going to click on the “Upload to Pardot” button.

We can also add the subject line. So I’m just going to do “Test Subject” and “Test Pre-header.” And then I’m going to click on the “Upload to Pardot” button to upload the template. So I’m just going to click “Upload to Pardot.” This will automatically generate the HTML, upload any images, and then upload the template to Pardot.

You can see that it’s telling us that the Pardot templates have been uploaded, and we can view them in our email accounts under the Pardot account. So to view the Pardot template that’s been uploaded, you can go back to your browser and find this page here, which is the email templates page. A quick way to get there that I’ve found is to go to the top left corner here and click on this little menu icon, and that’ll allow you to search for things in Pardot. So if you search for “Engagement” and go down to the items down here and click on “In-account Engagement Email,” and if you click on “Account Engagement Email,” that’ll bring up this email templates page.

Under your email templates list, under the published templates, you basically want to find the name of the email that you just uploaded. So in this case, I’m just going to click on the “Test Pardot Template,” and that should load up the template that we just set up a second ago.

You can see here that we’ve got our content, we’ve got our HTML that we just uploaded from Figma, and we can see that it’s added the tracker domain that we specified and the test subject that we specified, including the sender as well. So it’s got our general sender that we added, which is currently just my email address, and it’s been uploaded to the folder that we selected in the Figma plugin, the “Email Templates” folder, along with the name of the template, which is just being taken from the Figma frame name. So if you want to change the name of the template, you can basically just update the name of the frame here in Figma, and that will automatically change the name when it gets uploaded into Pardot, as we just saw.

That’s basically it. As I mentioned, there are a few different steps involved in getting those initial details, but once you’ve got those added into the Figma plugin, you can basically just keep uploading templates from this Figma file. If you start up a new Figma file with new templates, you’ll just have to drop in those credentials again. But that should hopefully be in there for this particular file. So you can continue uploading templates into your Pardot account from Figma.

Thanks for following along with this Figma tutorial, and I hope that’s helpful if you’ve been wondering how to automate uploading HTML emails from Figma into your Pardot account. This should hopefully make that process a little less painful. So thank you, as always, for watching, and we’ll be back with more Figma tutorials like this one very soon.