How to add a countdown timer to HTML emails in Figma using Emailify

Video Transcript

Today I'm going to be showing you how to add a countdown timer to your email designs that can then be exported to HTML directly from Figma.

To get started, all we need to do is open up a new Figma file, go to the "Resources" icon in the top header here, then if you search for "Emailify" under the "Plugins" tab you'll see the Emailify result pop up. If you click on that, you can run the Figma plugin by either clicking the "Run" button here or you can click on this little "More options" icon and save that to your Figma plugins list, and that's just going to let you access it again later really easily. I've already added it to my Figma plugins list, so I'm going to right click on my canvas, go down to "Plugins" go down to "Saved plugins", then just click on the Emailify menu item and 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 you basically add a special email frame using the Figma plugin, so I'm just going to add a new frame, I'm just going to call it "Email Countdown", add that container, and then what you can do is you can basically go through and add customizable Figma content. If we go through and add some of these modules, it just instantly adds a whole bunch of content that you can customize in Figma, as you'd expect; changing the content, changing the styles, changing the colors, all of that sort of stuff to suit your needs. I'm going to keep the design really simple today, if you want to deep dive into how to actually design these using the Figma plugin for desktop and mobile, and do a whole bunch of fancy stuff, there's a whole bunch of other tutorials on the channel that you can check out if you find the Emailify playlist on our YouTube channel.

For today, as I said, I'm just going to be showing you how to add a countdown timer, one that looks like this, directly into your HTML emails in Figma. There's a few different services that offer this, I don't have a particular one that I recommend, there's a whole bunch, most of them have free options; there's mailtimers.com, motionmailapp.com, mailtimer.io, promofeatures.com, there's a whole bunch of them. Today I'm just going to be using this one called sendtric.com, and the reason I'm using this is just because it's a really simple generator, and you don't have to go through a lengthy sign up process to generate one of these countdown timers; you can basically just pop in the details. If you just search for your time zone, and pop in the time that you want to change the time to end, I'm just going to say end this on Saturday, and then you can customize the design of the timer. In this case I'm going to match the background color to the email background color, and then I'm just going to change the label colors a little bit as well, I'm just going to make these a bit darker, and then once I'm happy with that I'm just going to generate the countdown timer. I've just hit "Generate", and you can see here it's given me this countdown timer that I can now use inside of our email.

Basically, if you look down here, you'll see this special image link that's in this source tag; don't worry about all of the other code, all we're going to be focusing on for today is this link in between the "src" attribute here. Where I'm highlighting that, if you just copy that to your clipboard and then open up a new tab; I've just opened that up in a new tab in the browser, and what we're going to do is we're going to drag and drop this image, we have to actually copy it, so if we do "Copy image", and then do paste with "Command + V", or "Control + V" if you're on Windows, and now we've got our image layer. This is a static image layer, this is not a GIF, but the way we're going to be using this is to swap out the image URL with the live one in a second. Keep this tab open, because we're going to be using it again in a second. I'm going to be taking this Figma image layer and I'm going to be moving it inside of my existing content layer, I want to include the countdown timer in this content here, so I'm actually going to drag and drop that image directly into that "Column" layer. That's in there now, and I can center that by going to the column layer, clicking on the center icon in the Figma auto-layout settings; that's now centered this image layer. Now what we want to do is we can either leave it at that size, so this is the 1x size, but I actually want to make this a little bit smaller. I'm going to go into my width properties and I'm just going to go divide by two; I've just divided that by two, and that's basically going to make it look a little bit sharper once we now export this into HTML.

To make this dynamic, the way that we can do it is if you click on the image layer; once you've clicked on the image layer, you want to go into the Figma plugin and click on the "HTML & Mobile Settings" button. As you can see, once you click that, it loads up a whole bunch of options that you can apply to this image. The one that we're interested in today is the "Override image source" option; what this allows us to do is paste in a custom image URL and when this email gets exported to HTML in a moment, this value here is going to be automatically swapped in place of whatever image we've got in Figma. I'll show you what that looks like, if we go back to our browser tab and just copy that URL; copy that whole dynamic countdown timer link that we generated, go back to your Figma plugin, and paste it inside of that "Override image source" attribute, and close off the settings panel. Then we can now preview that by clicking on the "Preview" button up here, and this is going to generate a HTML preview; this is a real HTML preview of the HTML email. We can expand that out to go to a wider size, so we can see what it looks like on desktop, and you can see here this is a dynamic GIF; this is now pointing to the dynamic link that we got from our browser that we generated, this is now the exact same URL that is now being loaded in to this image tag here dynamically. It's overriding whatever image is in Figma, and it's swapping it out with that URL pointing directly to the countdown timer, and this is how we can include a dynamic countdown timer in our HTML email.

I'm now going to export that to HTML, and the way we do that is just by closing off the preview, and clicking on the "Export HTML" button. I'm going to do that, and then I'm going to hit the "HTML Email" option, there's a whole bunch of other platforms, if you're using a certain platform like MailChimp or Klaviyo you can upload this directly into your platform; today I'm going to keep it really simple and just download it to the computer. I'm just going to click "Export to HTML", and this is going to generate the HTML for us. I'm just going to save that, I'm going to download the zip file, I'm just going to pop it on my desktop and hit "Save", and then if I open up Finder and just go to the desktop, double-click on the zip file, open up the folder. Now if we open up the preview HTML, I'm just going to drag that into my browser, and you can see here that we've now got our exported HTML ready to go. It's got our countdown timer, we can see what it looks like on mobile, we can see what it looks like on desktop in this preview. If you want the actual HTML file that's exported, just go into the folder, name grab the "index.html" file and drop that in, and now you can see the full HTML. If we go to "View Source", you can see if we explore the image source and then we go to our image tag; I'm just going to search for the "img" tag, and you can see here that in the image tag, it's actually pulling in the same countdown image that we generated before.

As I mentioned before, I went to the trouble of halving the size of that countdown; if you want to leave it at the regular size, you can totally do that. Just put it back up to the normal size, preview that again, and you'll see that it's now much bigger; you can you can make it whatever size you want, I just didn't want it to be too pixelated if it got too big, that's why I'm at it a little bit smaller before. Bear in mind, if you do make it bigger, it will automatically resize down on mobile as well. If you do have a smaller mobile screen, that'll responsively shrink the image width based on the width of the mobile width as well, so you don't need to worry too much about that.

I think we'll leave it there for today, I hope that's been helpful, as some of you have been asking for how to do this; how to insert a dynamic countdown timer into your HTML emails using the Emailify plugin in Figma, this is the best way to do it. As I mentioned, explore some of these options, we've only gone through one of these services today, and some of the other services are going to allow you to create more customizable countdown timers. Do check out a whole bunch of different options and find the right one for you, as you can see here, some of these are much more advanced, and you can customize the design a lot more. This one is always going to be a basic one if you just want a really easy option, but if you're wanting something that's more engaging, you might want to check out some of these other services, such as this one, mailtimer.io, or some of the other ones that are available.

We'll leave it there for today, I just wanted to focus on the countdown timer for this Figma tutorial and keep it fairly straightforward; I hope that's been helpful, as I said, and please feel free to give it a try in Figma with you or your team. Thank you as always for watching we'll be back with more Figma tutorials like this one very soon.