How to add dynamic personalized content to HTML emails in Figma using Emailify

Video Transcript

Today I’m going to be showing you how to add personalized content or dynamic content into your HTML emails using the Emailify Figma plugin.

To get started, all you need to do is click on the little “Resources” icon up here, click on that and search for “Emailify”, and under the “Plugins” tab you’ll see Emailify pop up. All you need to do to run it is either click on this “Run” button here, or you can click on the “More options” icon here and click on “Save to Figma plugins”. I’ve already saved the Figma plugin to my list, so I’m just going to go to my Figma file, right-click anywhere, go down to “Plugins”, then go down to “Figma Plugins” and click on the Emailify item and that’s just going to run the Figma plugin we installed a second ago.

If you’re new to the Figma plugin, all you need to do is basically create a new email. I’m just going to create a blank email, add that to the page, and then all you need to do is basically go through and add the content that you want. You can do this by either adding content via the components up here, so you can click on these and add them in, or you can actually just click on the email itself and start adding layers using this little quick add feature. You can add content rows, you can add elements to those rows; so you can add text layers, image layers, things like that.

For today I’m just going to keep it really simple; if you want to deep dive into how to design and customize your designs in Figma using Emailify, there’s a separate Figma tutorial on the YouTube channel, just go to the playlist for Emailify and you’ll see a really detailed video about designing emails there. For today, I’m just going to keep it really simple because I want to show you how to make some of this text content dynamic depending on what email platform you’re using; you might be using MailChimp, or Klaviyo, or a different provider.

If you go to the documentation for Emailify, and if you go down to this section called “Adding Platform Specific Personalization Content”, this is what we’re going to be going through today. There’s a list of different platforms in here with direct links to the cheat sheets or the documentation for each of the platforms in terms of what their own specific personalization tags or syntax looks like. For example, if we go to the MailChimp one that’s going to open up the MailChimp documentation and it’s going to give us a list of all the merge tags or personalization tags that you can add to your email. For example, first name, last name, things like that.

The same goes for Klaviyo, so if you want to use Klaviyo, they’ve also got personalization variables that look a little bit different. For today, we’re going to be focusing on Klaviyo just to keep it simple. We’ll be using the variables for Klaviyo, but bear in mind the process is exactly the same for any of these other email marketing platforms or whatever email marketing platform you’re using, as long as they support personalization tags.

Let’s get started, we’re going to keep this really simple today; I’m just going to add a Klaviyo footer, just so we’ve got that in there. I’m also just going to include an image, just so we’ve got an image block in there as well. I’m just going to include that and I’m going to drag that up here. What we want to do is basically personalize this welcome message here, so instead of just saying “Welcome to Jiro”, we want to actually change that to be personalized to the recipient of the email. As we saw if we go to the Klaviyo documentation, you can find that by Googling it or clicking on the link in the docs here, and if you go down to here, you can see that we’ve got a bunch of personalization variables.

All these are really just platform specific template tags that you can use to personalize your content, so this can be pasted anywhere; I’m just going to copy paste this first name tag for Klaviyo, I’m going to jump back into my Figma file and it’s basically as simple as pasting it into your text layer wherever you want to use it. I’m just going to add that here, and I’m going to add a little exclaimation mark, and basically what’s going to happen is this tag here, the curly brackets and the variable inside of it, that’s going to get replaced in Klaviyo with the first name of the person who’s on that list.

We’ll see what that looks like in a moment; I’m just going to keep it really simple for now and upload that to Klaviyo. To upload the email from Figma to Klaviyo or whatever email marketing platform you’re using, just click on the “Export HTML” button, and I’ve already got Klaviyo selected, yours might be selected to “HTML Email”, but you can just change the platform to whatever platform you’re using. I’ve got Klaviyo in there, I’ve already got my API key in there; if you don’t have it, you just click on this little link and copy your API key from Klaviyo.

I’m going to upload that now, I’m going to click on “Upload to Klaviyo” and upload that, it’s going to generate all the HTML for me, upload all the images for me and it’s telling me that the template has been uploaded. If we open up the Klaviyo templates link, that will take us to our email templates list. You can see here we’ve got our sushi email uploaded that was created just now.

To actually use that template, you can go to “Campaigns”, then go to “Create Campaign”, make it an “Email Campaign”, and we’re just going to leave that as “Default”. You can change what list you want to send it to, I’ve just got a test list for today. I’m just going to check that, check the preview list that I’ve got set up and then go to “Continue to Content”. I’m going to click on the “Drag and Drop” option here and go to my templates, and then click on the “Sushi Email” template. You can see here, this is our HTML that we just designed in Figma and uploaded to Klaviyo. What I’m going to do is I’m going to click on “Use Template”, so I’ve just clicked that and that’s going to use this template for our current campaign.

You can see it’s got all the HTML there, you don’t need to worry about that; all you need to do is basically preview this email and we’re going to do that by clicking on the “Preview Email” button, and and then we’re going to click “Show directly in Klaviyo”. We’re going to preview the email in Klaviyo and click “Preview Now”, and you can see that it’s previewing the template as “Adam”, which is me, that’s taking it from my list or taking it from my account. I’m going to click on “Preview Now”, and you can see here that when we preview the email using that feature and loading in the data, or the customer attributes, or user attributes from that list or that account, you can see that the template we added in Figma; so we’ve got this first name variable here, and all we did was add that as a bit of text to our Figma text layer. Because that’s getting exported as HTML using the Emailify Figma plugin in Klaviyo, we can see here that it’s being dynamically swapped out with the name of that person, which in this case, is me.

There we go, we’ve basically got our name swapped out dynamically, so it’s loading in my name instead of the template tag that we added in Figma. That dynamic tag is being swapped out in Klaviyo. Again, you have to use whatever the variable or whatever the personalization tag is per platform; so if we wanted to do this for MailChimp, we would copy in this tag instead of the Klaviyo tag. It would look like that for MailChimp, but in this case for Klaviyo it looks like this. That’s basically what it looks like.

As I said, you’ve got the HTML exported as we’d expect from Figma, and you’ve got the template tag swapped out. And of course you can do more than just add names. If you wanted to add email address, phone number, organization; you can also add defaults, so if there’s no name, you can actually just change this to have a fallback. For example, we could do this, we could add this tag and instead of saying the first name, we can basically say if we change that to hello and instead of the first name, if the first name doesn’t exist, this default will basically change it to fallback to the word there. Instead of saying “Hello Adam”, it would say “Hello There”. So that’s an option you can do, and It’s probably a good idea to do that in case the customer or the user data isn’t complete and doesn’thave their first name, you can add things like fallbacks.

Again, you just need to go through the documentation and see what is supported, there’s all different custom properties. You can add account variables, you’ve got event variables which can be really handy if you want to do things like dynamic shopping carts, for example, you can do that. You can create these events in Klaviyo specifically, and I believe this works with Shopify, so you can basically create things like abandoned carts. If there’s an abandoned cart event, you can actually create these variables inside of your email to swap out with those abandoned cart items or product items.

You can also use these variables in images as well, for example, if we swap in, let’s go to the ecom one, and swap in an ecom example. We just added a really basic ecom example here, and if you wanted to make this image variable dynamic,you can click on the Figma image layer here, you can see we clicked on the image layer, go to “HTML & Mobile Settings” in the Figma plugin; click on that button, and what you cando is you can basically paste in your variable into this “Override Image Source” field. What this is going to do is instead of linking to the image in Figma, you can make it override that image source with a static URL, or you can use variables in that URL.

For example, it might be something like this, it’s not going to be this but a Shopify assets URL and then you might have something like “Item.Image_Name” or something like that. Obviously this is a fake example, but the point is that we’re mixing in a dynamic tag into the URL and it might actually even just be a variable on its own, the platform might just inject that variable. Again, you have to look up whatthese variables are, but that’s the way that you can override the image source if you want to do dynamic images, you can do that.

The same thing goes for links, if you wanted to add a clickable link with some dynamic content, you can definitely do that as well. We might do an example URL and maybe you want to pass a variable to that. so you could do “name equals” and then add in something like “First Name” and this will allow you to have a clickable link where the variable also gets included into the link. If you were to click on that image, it would go to “example, query string, name equals Adam” in this case. That’s a way that you can do dynamic link URLs and dynamic image sources. You could also do it for image alt text, if you wanted to put the product name in there; again, I don’t know what the variable would be, but it would be something like “Item.Product_Name” and that would make a dynamic alt text as well.

You can really use these dynamic tags anywhere that text is available, so you could do this on buttons, you could make a dynamic button again, you could add the name into there. We could do “First Name” and that would basically populate my name into the button, and that’s roughly what it would look like. Again, we can get rid of these because they’re not going to do anything, but if we re-upload this email, I’m just going to upload that to Klaviyo again. We’ll jump back into Klaviyo knowing that it’s going to be finished in a second and we’ll go back to “Content” and we’re going to do “Change Template”, I’m just going to use the new template that we’re uploading now.

That’s finished uploading and I’m going to go to “Drag and Drop”, I’m going to go to “My Templates” and I’m going to click on this “New Template”. As you can see, we’ve got our tags as we would expect, in the button and in the title. Now I’m going to click on “Use Template” and go to “Preview” and “Preview Email”, then “Show in Klaviyo” and “Preview Now”, and there we go; you can see now that the button also has a dynamic variable in it as well as in the title.

As I said, basically anywhere where there’s a text layer, or a link, or alt text, or a custom property, like on the images, you can use these variables based on the platform that you’re using to populate this data. It can be really powerful if you really get fancy with it. You can do other things like include conditional statements, this allows you to do things like “if else” blocks. You can do some crazy stuff like copy these “if else” statements. If you click on your email, the Emailify frame, and then click on the “Quick add” option and click on “Custom Code”, and add custom code.

That’s going to add this special “Custom Code” layer here where you can actually drop in custom code. I’m going to paste in this conditional statement and I’m just going to drag that up to here and then I’m going to add another one; I’m just going to add another custom code layer and if we go back to here we can do an “end if”. Again, this is going to vary depending on what platform you’re using; the Templating language will be different, but if you dig into the documentation you’ll be able to find out what this looks like per platform.

This is a custom code wrapper, and what this does is it injects raw template code or custom code in between the rows, so this allows you to basically create dynamic rows. In this case, this row will only show up if the person is interested in dogs and not interested in cats. This is a very specific example, obviously they’re just giving you a potential use case, but you could change this logic to be whatever you want; you could change it to be location based, you could change it to be name based, organization based, or tier based depending on what kind of customer they are.

You can basically use these tags to dynamically inject or swap out content, so you could do “end if”, you could also do “else”, so if we do “else” you could basically add that in there and we could create a different block. If we just duplicate this block and pop it between those tags, we could do “else”, so it’s a terrible name for a product but you can see what I mean. In this case if the person is interested in dogs, then this block would show up, else if they’re not interested in dogs, then everyone else will get this block here, and then “end if” kind of closes off that wrapper.

If we just close up these Figma layers on the left here it gives us a really quick look at what that looks like. You’ve got a custom code block here, that’s the “if”, so that’s the condition, then you’re going to inject this block if that condition matches, “else” if it doesn’t match, show everyone else this block here and then end that condition; so this area now is now conditional. Again, you can explore this in detail, I’m not covering this in detail at all.It’s basically up to you what you use those conditions for, and this is going to differ depending on what platform you’re using. If you’re using MailChimp, it’s going to look quite different. You basically want to dig into the documentation based on the platform you’re using.

Okay, I think that’s a pretty good overview of conditional tags, how they work and specifically how they work with emails that are designed in Figma using the Emailify Figma plugin again. It’s really simple, all you have to do is find the conditional tags or the merge tags that you want to use, and if they’re text based, like a name or something like that, you can just drop them into a text layer in your Emailify layers. Again, you can use them for button labels and you can use them for links, you can use them for dynamic image tags; anywhere where you can use text, you can use these dynamic tags.

Then of course, as we just wentthrough, these special tags here, dynamic tags;you can use these tags for code blocks, but you can also use them for just regular text layers as well. You can actually just drop these in here if you don’t want to do a section based or a block based approach, if you just actually want to do conditional text. If we do conditional text and then “end if”, that’s what it looks like. Again, this would be conditional inside of that text layer, so you could do if interested in dogs or cats and then you could do dogs and else cats; that would basically mean that inside of this text layer, if that condition is met, it will show the word “dogs”, else it will show the word “cats”. That’s another way you can do it if you want to do it inside of a Figma text layer, that’s possible as well. If you want to use it in a block layer context, swapping out entire rows, then using that code snippet or code block that we went through before is still going to be the way to go.

Okay, I think we’ll leave it there, I don’t want to go too deep into it. I just wanted to go over the general principles and general fundamentals of how dynamic text and content works in email marketing platforms, in this case, specifically for Klaviyo; but as I said, check out the documentation on the Emailify documnetation page and you’ll get alist of all the different templating links per platform; whatever marketing platform you’re using, you really just need to dive deep into those documentation pages and figure out how to use those to the best of your ability to customize the content in your own designs for whatever email marketing platform you’re using.

I hope that’s been helpful, I’ve had quite a lot of questions about dynamic personlized content tags and dynamic content in general as it pertains to email marketing platforms, so I hope this is a bit ofa good 101 introduction into customizable email content in email platforms using the Emailify Figma plugin. Thank you as always for watching, and we’ll be back soon with more Figma tutorials like this one very soon.