How to export HTML emails from Figma to Salesforce Marketing Cloud using Emailify

Video Transcript

Today I’m going to be showing you how to automatically upload HTML emails from Figma to the Salesforce Marketing Cloud (SFMC) platform using the Emailify Figma plugin.

All we need to do to get started is go to the little “Resources” icon at the top of your Figma file. If you click on that and search for “Emailify”, and under the “Plugins” tab, you’ll see Emailify pop up. To run the Figma plugin, you can just click on the “Run” button here. Or, I’d recommend clicking on this “More options” icon and just clicking “Save Figma plugin”. That’s going to save it to your Figma plugins list for easy access later.

I’ve already gone ahead and done that. I’m going to go to my canvas, just 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 saved a second ago.

If you’re new to the Figma plugin, the way that it works is it basically helps you design emails in Figma that can then be exported to production-ready HTML automatically. So, just for example, I’m just going to create a new email here. I’m just going to call it “new MC email,” with “MC” being Marketing Cloud. I’m just going to be populating a few different fields here just to make a really quick design.

I’m not going to be going through all of the design elements and how to actually customize the designs. There are some other videos on the YouTube channel if you want to go through those. Today, I’m just going to be focusing on how to get the email up into Salesforce Marketing Cloud (SFMC) from Figma automatically, assuming that you’ve already finished your design.

The one thing I will show you is under the “Footers” tab. It’s easy to add a Salesforce Marketing Cloud (SFMC) footer just under the platform section here. If you click on the little “Salesforce Marketing Cloud” footer item, that’s basically going to automatically populate the required fields needed for your Salesforce Marketing Cloud (SFMC) template.

If we have a look at the settings here, you can see the unsubscribe links already in there, and we’ve got the automated address and view email URL link. You can obviously customize the design of this, but for today, we’re just going to be focusing on adding a really basic design to show you how the upload works. So, I’ll just add one more image, and then we’ll be ready to go.

I’m happy enough with that email for now. So, to export this to HTML and upload it to Salesforce Marketing Cloud (SFMC) automatically, all we need to do is click on the “Export HTML” button in the Figma plugin. Then, you can just change this HTML email option and scroll down to the platform integrations and just select the “Marketing Cloud” item. So, click on “Marketing Cloud,” and you’ll see the little Salesforce icon.

If you need help finding the keys, you click on this little link here, but I’ll show you how to do that in Salesforce Marketing Cloud (SFMC) as well. So, we need three things. We need a base URL, a client ID, and a client secret. The way that we can get those details is if you go to your Salesforce Marketing Cloud (SFMC) instance and just log in. Then, if you go to the setup page, if you click on your account name and go to setup as a menu option, you’ll see the setup page in your browser.

Then, what you want to do is go down to platform tools and expand the apps dropdown, and then just click on “Installed Packages.” Then, you should see a menu item or a button rather called “New.” So, if you click on the “New” button, it should give you this modal here which asks for your new package details. You can give that a name. So, in this case, I’m just going to give it a name of “Emailify” and pop in “Figma integration” into the description, just so we know what it is.

Then, you can go ahead and click on “Save,” and you’ll see that it’ll create a new package called “Emailify.” So, once it’s done that, you basically want to go down to this “Components” section here, click on “Add Component.” So, I’m going to click on the “Add Component” button. Then, we want to select the API integration option and click “Next.”

Then, we want to change this one to “Server to Server.” So, we’re going to change it from web app to server to server. And once you’ve got that selected, go ahead and click on “Next” again. And then, finally, we want to set the permissions for the component. So, what we need to do here is basically add some permissions.

Under channels, under the email channel, you just want to select “Read” and “Write,” so those two are selected. And then, the other ones you want to select are under this “Assets” heading here. So, we can just select “Read” and “Write” for the documents and images and saved content subsection. And that should be all that you need to give the API enough permission to add email templates automatically from Figma.

So, once you’ve got those permissions selected like this, go ahead and click on “Save.” And that should add the component to your package. So, now that we’ve got that saved, we want to now copy these details down here. So, we’re going to grab the “REST Base URL”. So, I’m going to click on this little copy icon, go back to Figma, and paste that into the REST Base URL field here.

Then, I’m going to grab the “Client ID”. So, I’m just going to copy the Client ID from Salesforce Marketing Cloud (SFMC), paste that into Figma, and do the same thing for the “Client Secret”. So, I’m going to grab that, copy that Client Secret into here, and then we’re basically ready to go.

You can add a subject line if you want. So, we can call this “test subject” and “test pre-header” to put something in there. And now, when you’re ready, just go ahead and click on the “Upload to Marketing Cloud” button. And that’s just going to export the HTML and images from Figma, and it’s going to automatically upload them into your Salesforce Marketing Cloud (SFMC) templates.

So, you can see here that it’s been successfully uploaded. So, we can view these by going to the Content Builder page once we’ve logged into the Salesforce Marketing Cloud (SFMC) account. So, I’m already logged into the Salesforce Marketing Cloud (SFMC) account. So, I’m just going to go ahead and click on this “Content Builder” page link. And that’s going to open up the Salesforce Marketing Cloud (SFMC) Content Builder link.

So, this is going to give us access to view the email template that we just uploaded from Figma into the Salesforce Marketing Cloud (SFMC) account. Now, we can see we’ve got our new MC email here. That’s the one we just uploaded from Figma. And you can see that if we click on it, we can now see exactly what was uploaded from Figma.

So, we’ve got our test subject and test pre-header, which we just added through the Figma plugin. And you can see that we’ve got our Emailify app user as the owner. So, it’s been uploaded via the API using the package that we just created. And you can see here, this is real HTML. This is exactly what you expect from the template from the design in Figma. And this is now ready to use as an email template in Salesforce Marketing Cloud (SFMC).

So, we’ve got our footer links in there. We’ve got our text, and we’ve got our content as we’d expect. So, you can now basically use this however you want in Salesforce Marketing Cloud (SFMC), and that’ll be your email template going forward for whatever you want to use it for.

So yeah, that’s basically it. And there were a few steps to get through for the first time. But now that you’ve created that package in the setup area under “Installed Packages,” you can basically now reuse these details in Emailify. So, if you spin up a new Figma file and you need to paste in credentials again, you can basically just copy and paste them again from this same page.

And you can reuse them as many times as you need from this API installed packages page in Salesforce. So yeah, I hope that’s helpful. And if you’re using Salesforce Marketing Cloud (SFMC), please feel free to give this integration a try from the Emailify Figma plugin. And hopefully, it’ll make your life a little bit easier, not having to manually create the templates in Salesforce each time.

So, we’ll leave it there for today. Thank you, as always, for watching. And we’ll be back soon with more Figma tutorials like this one.