How to add animated GIFs from Figma to HTML email exports using Emailify

Video Transcript

Today I'm going to be showing you how to include animated GIFs into your HTML emails from your Figma designs using the Emailify Figma plugin.

The first thing you need to do is just go to the Figma Community, search for "Emailify", and if you click on the "Install" button next to the result under the "Plugins" tab that'll install the Emailify Figma plugin, and then we can get started.

I'm just opening up a new Figma file, and I can run the Figma plugin just by right-clicking anywhere, going down to "Plugins" and clicking on the "Emailify" item, and that's just going to run the Figma plugin that we just installed. The first thing we need to do is just create a new frame, so I'm just going to call this one "GIF Email "Test" so we can do a test, and I'm going to click on "Add New Emailify Container"; this is going to add a new frame to your Figma canvas and that's going to allow us to include these content modules which I've covered in some other tutorials, if you want a deep dive on those, and you can also include custom modules as well.

What we can do to add GIFs is, I'm going to run through the few different ways that you can include GIFs in your Figma email design. The first one I'm going to do is the hero background; you can use a GIF as a hero background, so if you find one of the content modules which are a "Hero Background" type; for example, this "Full Width Background Image" is one, there's also other ones like the "Hero CTAs", these will also work. What you can do to include GIFs on those is just click on the frame; it'll add this brand new component, and you just want to click on that component, and where you've got the "fills" on the right hand side, you want to click on the image fill, and you can see here it's got the default one, but we want to actually put our own one in there.

I'm just going to grab a GIF that I downloaded from the internet and drag that into the Figma fill, and that's going to include that as the background fill. That allows us to keep all of the text as rich text, and it allows us to have the GIF as an actual background image. This background is a little bit lighter, so what we can do is we've already got a fill on there, a transparent fill that we can increase that value. It's a bit darker if you want the contrast to be a bit better, so you can include that just make it however you want, and that's going to include the fill on top of the GIF when it gets exported. That's the first way you can use GIFs.

The second way is just by using them as inline images. For example, if you get any of these image components; I might just add this one, and what you can do is the exact same thing. You want to drill down into the Figma image layer inside of the column, you've got the image frame, and again we've already got an image fill set, but we obviously want to replace that and add our own one. I'm going to do that, and I'm going to add this other GIF; I can add that GIF in there and I can do another one. I'll just add another frame, do the exact same thing; I'm going to click on the image fill, and I'm going to drag a GIF in there, and that's adding another GIF.

The third thing I can do is I can actually create content modules or inline content images, which allow us to just drag and drop the image onto the content as well. Let's say I've already got a text component for example, so I can click on that, and while this doesn't have any any images yet, what I can do is actually drop an image on there. If I want to make this a little bit narrower and drop a brand new GIF in there, I can just drag that GIF straight into the frame, and if you have a look on the left hand side you'll see that inside of the content column the GIF has been added as just an inline GIF. It's not set as a frame background, it's not set as a component background, it's just a layer in and of itself. That's the other way that you can add GIFs in there, and we can move that around.

There's there's benefits to doing each of these, so I'll run through those really quickly. The first thing to know is that you can apply any additional fills on top of any of these; for example, if I wanted to add an overlay to this GIF image, I can click on the "plus" icon next to the Figma fills click on that. I can do things like add opacity color with some opacity, I can create a gradient, I could do a colored gradient, so we could do something like that and that would allow a static gradient on top; you can do that, and when the GIF gets exported the gradient will actually be included in the GIF. That's one thing that you can do with any of these GIF images.

The advantage to having a frame, so for example, these ones are actually frames rather than an image layer, and the advantage to having a frame is you can do things like add other layers inside of the frame. I'll show you what I mean by that; if I click on this image layer I'm going to add a fill just to make it a little bit more contrast. I'm going to add a fill on top of that, but then now that this is a frame I can actually add layers within that frame. That allows me to add things like text, so I can add text, I can say "Sushi Sleeping"; I can put a little text overlay on there. You could include other static images on top of that, and that'll all get included in the export.

The other thing that you can do with something like the hero; we've got this hero background, the other thing that we can do there is also add static images to that, too. What I can do is I can maybe copy this as a PNG, so I'm just going to copy that layer and I'm going to jump into my hero, and I'm going to paste that. I'm just going to scale that down and move that to the top, and maybe I'll put some border radius on there. What that's going to do is, it's going to include this as an image layer inside of the hero background; what that means is it's going to leave the background image as an animated GIF, but you can also include this image as its own image element. The difference between this method and the frame method is that it will still get exported as a single image, whereas these two will get exported as two different images; the background image on the hero will be exported as a GIF, and the image here will be exported as its own image on top of that.

If that doesn't make any sense, I'll do an export now just to show you what I mean by that, and you'll actually get a sense of what this all looks like when it gets exported. The other thing to quickly note is that this will not show up in the preview; if you click on the "Preview" button in the header, you'll notice that the GIFs don't actually get rendered. We've got all of our images as we expected, but they're all static and that's expected; you basically have to render out the GIFs from Figma, and this takes a little bit of time. The preview at the moment doesn't actually do this automatically, but the way that we can see it in the export is just by clicking on the "Export" button, and I'm just going to click on the "Export to Code" button and that's going to now export our email from Figma to HTML and it's also going to go through and export any GIFs that it picks up on that we just added. We've added four separate GIFs, so it's going to go through detect all those GIFs render them out.

That's just finished, so what we need to do is just click on "Download your .zip file"; if we click on that, I'm just going to save it to my desktop, and once that saves,we can actually go ahead and open that in our browser. I'm just going to double click on the zip file, open up the folder, and I'm just going to drag the preview onto my browser. There we go now, you can see the GIFs actually being rendered out from Figma to HTML.

We've got our background GIF with the opacity layer included on the top, and we've got our rich text over the top, which is real selectable text; it hasn't been included in the GIF. We also have our image; this image is its own image that's been exported to sit on the top of the hero, and the hero is a very special kind of element because it does allow that real background image; most of the other normal rows don't allow that, but the heroes do. Then we've got our other GIF here; this is the GIF that we included the overlay fill on, and the embedded text; this text is embedded in the GIF, it's not sitting on top, it's not like this rich text that's all embedded in that GIF image. This is the GIF that we left as is, so this was just completely untouched, we didn't add any fills, we didn't have any text layers, anything like that. Finally, we have our inline image; this was the image that we dragged and dropped directly onto the folder onto the Figma file, and that's included the gradient on top as well; we've got the gradient, we've got the normal one, we've got the opacity and we've got the hero.

We can also do things like scale this image down; by default, it will just go to 100% width. I've covered this in some other Figma tutorials, but just really quickly, what you can do is you can click on that image, click on the "settings" icon and you can actually override those widths and heights. That's what that looks like there; you could put in something like 44 by 44 pixels maybe, and that would export it as 44 by 44; or if you want to do 103 by 103, as it is now, you can do that; you can also just uncheck the "100% Fluid Width" toggle and that will work as well.

That's basically what it looks like. The GIFs all get included, and these are directly from Figma. You don't have to do any extra work to upload them anywhere else to get them exported from Figma to HTML emails, but of course, you will have to upload these as images online somewhere if you're sending them via an email; you'll want to use something like a MailChimp, Klaviyo or Campaign Monitor email service provider. However, this tutorial is just basically just going through including the GIF from Figma to HTML, how they work, what the different types of GIFs are, and just running through that specifically. This has been a highly requested feature, and we just shipped this recently, so I hope that you enjoy it. If you've been wanting to include Figma GIFs into your HTML emails and not need to manually replace it in the HTML, as I know has previously been the only way to do it, then this should save you a lot of time including those Figma GIFs. As always, thank you for watching, and we'll be back soon with more Figma tutorials just like this one.