How to add UTM tracking code to HTML email links from Figma using Emailify

Video Transcript

Today, I’m going to be showing you how to add UTM codes to any links in your emails that are exported from Figma using the Emailify Figma plugin.

To get started, all we need to do is click on this 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. If you just go ahead and click on that result, you can run the Figma plugin by either clicking on this “Run” button here, or I’d recommend clicking on this “More options” icon here and clicking “Save Figma Plugin.” That’s just going to save it to your Figma plugins list for easy access later.

I’ve already gone ahead and done that, so I’m going to go to my canvas, right-click anywhere, and go down to “Plugins”, then I’m going to go down to “Saved Plugins” and click on the “Emailify” Figma plugin. 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 that it works is it basically allows you to design and customize emails in Figma that can then be exported out to HTML automatically. I’m not going to go through the whole process of how to design and customize the emails in this tutorial. If you want to jump into that, I’d recommend checking out a couple of other in-depth tutorials on the YouTube channel. If you just go to the Emailify playlist, you’ll be able to find those pretty easily.

Today, I’m just going to be assuming that you’ve already got the email design the way that you want and you just want to add some UTM parameters to your links throughout the email. I’m just going to go through a handful of different scenarios that you might use to add some UTM parameters to your links in your email, and I’m just going to run through those with you now.

For example, if you know that you want to add a certain UTM code (a UTM code basically looks like this: it’s a little question mark with a bunch of parameters that you can add to a link), let’s take this one from this campaign monitor vehicle as an example and add that to one of our CTAs. Let’s just click on this button layer here, and we can add a link to that by clicking on the HTML and mobile settings button in the Figma plugin. I’m going to click on that, and with my button layer selected, I’m just going to paste that into the clickable link URL field here. That’s basically just going to automatically add the UTM parameters to my button.

So if I were to click on this here and click on my button URL, it’s going to open up a link in the browser. You can see here that we’ve got this UTM parameter up in our link here. That’s automatically added. That’s the simplest way of adding UTM links into your links in your HTML emails from Figma. You can basically just include it in your link and paste it into the clickable URL field here, and that’s going to be a really simple way of going about it.

But the trouble comes if you’ve got a dozen or more links that you want to add these parameters to, and you don’t want to go through everyone separately and add those in. What you can do is also add this as a global tag. So, if we take out that UTM parameter here, I’m just going to remove that, leave the link in there, and close that for a second. I’m also just going to add a link to this other CTA here, so I’m just going to add another link here. We’ll do another example link, so we’ll just do example.com and drop that in there. In this case, I basically want to make sure that both of those links automatically contain a UTM query parameter string. In that case, what I can do is go back to my HTML and mobile settings. I’m just going to click on this little settings icon here and select my Emailify frame, which is the email frame layer at the very top of the file. That’s where the Emailify components get added. If you click on that with the HTML and mobile settings panel open, you can see that we’ve got this option called “Append global URL query string.” You can see here that it’s got a little example showing a UTM parameter that looks very similar to the one that we just copied.

What we can do is paste in a global string or a global query string that we can paste in here, and that’s basically going to automatically append this to any links that are detected in the email. We can have this in one place, so we can just add it to this global query string input here with our Emailify frame selected, and that’s automatically going to add whatever’s in this query string to every link.

Now, if we close off that settings panel and go back to our links, if we now click on the “learn more” link here, for example, you can see that it’s automatically including that query string into that button, even though we didn’t include it to the button itself. We can confirm that by just jumping back to this button layer, and you can see it’s still set to example.com without a query string or the UTM parameters, but when we preview it and click on it, it’s automatically getting that global UTM string added in.

That’s pretty cool because it saves us a bit of work applying that to every single button in our design. We can set that from here. The other cool thing we can do is actually add overrides to each of those buttons. For example, if we want to get the item Source, or the UTM content, we can take out the UTM content from the global string. We’ll remove that, take that out of the global setting, and instead, we’re going to apply that to the other CTAs.

If we click on this button here, open up the settings panel, and add that back onto this clickable link URL, I’m just going to add a question mark, paste in my UTM parameter, and change the UTM content value to “hero” because it’s in our hero block. I’m going to copy that again and add it to my other button down here. In this case, I’m going to paste that in there and change the UTM content value to “split” because it’s in this split block component and close that off.

Now, if we go ahead and click on that button again and open it up in the browser, you can see that we’ve got all of the global UTM parameters, along with our UTM content override, which is this UTM content equals “split” and also the UTM content equals “hero” automatically getting added into the string along with all of the other ones.

That’s a really nice way of pre-populating globally all of these UTM parameters, but then, if you know that you need to add a UTM content parameter per block, you can add that in there per link, and that’s automatically going to get included along with the global one. You can have the overriding ones globally, which you can easily do over here, as we just saw, and then if you need to change those at any time, you can do so.

That’s a really easy way of managing your UTM parameters in your email links. You can basically just go ahead and set that globally, override them locally if you need to, and that’s going to be a really quick way of managing them for your different emails.

The other thing you can do is also just add normal links. If you wanted to add a link to some text, we can grab, for example, one of the links that we just added. I’m just going to grab this one here and add this to my link text. If we highlight some text layer content and then click on the little link icon in Figma and click “create link,” we can then paste that in there and again change this to be “paragraph,” for example. We’ll just change the UTM content at the end of that to “paragraph,” and now you can see here that we’ve got a link added to that text layer. If we refresh the preview, you can see that it’s now converted into a link, and again, if we click on that now, it opens up with the parameters included.

This applies to any links that are inside your content; it’s automatically going to append that into the URL. I just wanted to cover that use case as well in case you’re wondering if it worked for normal Figma links – it’ll do that as well.

So, we’ll leave it there for today. I just wanted to go through that really quickly to show you how to add UTM parameters into links using Emailify. This is a really quick way of going about it, especially using that Global setting. That’s going to be very helpful if you need to do that for different newsletters or different campaigns. You can basically just add that one time, and it’s going to automatically populate those links in one go to all the links in your email.

And of course, if you need to then export that out to HTML when you’re done, you can just click on this “export HTML” button here, export that out to HTML or whatever platform you need to integrate it with. You can jump into those options, export it to HTML, and then, in this case, I’m just exporting it to an HTML zip file. I’m going to download the zip file to my computer, save that to my desktop, and open up the zip file. If we open up that folder now, you can see that we’ve got our email with all of our images and HTML.

If we drop that into our browser, you can open up the preview, and that’s what it’s going to look like there, with our links included and our UTM tags working as expected. So that’s basically just the final step if you do want to export it to HTML – you can do that really easily.

Let’s leave it there for today, and I hope that helps if you’ve been wondering how to add UTM parameters or query strings into your HTML emails from Figma. This is a really nice way of going about it. Thank you, as always, for watching, and we’ll be back soon with more Figma tutorials like this one very soon.