How to create animated GIF files in Figma using TinyImage

Video Transcript

Today, we're going to be looking at how to create and export animated GIFs from Figma using the TinyImage Figma plugin. This functionality is not built into Figma, so we're going to use a plugin called TinyImage to make this happen for us.

If you haven't already installed it, you can go to the Figma icon in the top menu bar and go down to "community"; then click on "plugins"; then what you want to do is search for "tinyimage" up in the search bar up hereand just hit the "enter" key and you'll see it pop right up. This is the TinyImage compressor plugin, I already have it installed but if you don't have it installed, you'll be able to click the "install" button over here on the right, and once you've clicked "install: it'll look like that, and it'll say that it's installed and then you're good to go back to your Figma file.

Back in our Figma file, we've just got a few very simple layers here so we've got four image layers and three frames and three SVG frames. The first thing we're going to do is run the Figma plugin, so you can right-click anywhere, go down to "plugins" and then go to "TinyImage Compressor" and left click on that. As soon as it loads, you should see some images. If you don't see any images, it means that you haven't added any image exports onto your layers. If I click on any of my layers here and then go over to the right hand side, you'll see under the "export settings" that I've added a few export settings already, so if you haven't done that, you can click on your layers that you want to include into this animated GIF that we're going to make, and just make sure they've got at least one export setting on those layers; JPG is fine, PNG is fine, or SVG - anything you want to add really, just to make them show up in this list here.

I've already done this, and you can see here I've got a bunch of exports that I can that I can see and use. What I'm going to do, is I'm going to select a few of these photos; I'm going to select four, and it doesn't really matter which export setting you select, all that matters is these are the frames that we're going to add into our animated GIF. Once you've selected the images that you want to create an animated GIF from, you can go up here, and instead of clicking the normal "Compress" button that you might use quite a lot for other formats, we're going to use this middle button called "Create GIF". You can you can set the quality beforehand if you want to do that, so I'm just going to bump this up to 95. Once you're happy with that you can click on this "Create GIF" button and what that's going to do is it's going to take the selected images that you've just specified in the select panel before we clicked the button, and it's going to add those into this little preview here. This preview is just looking through the four frames that we've already selected before clicking the button and it's giving us a real-time preview of that what that will look like if we were to export this to an animated GIF.

Let's dive into a few of the settings that we have some control over. The first one would be the "time per frame"; this is a slider that we can move up and down at the moment it's set on 0.5 seconds, which means that each of your four frames are going to show for half a second before it moves on to the next one. If we want to increase that and slow it down a little bit, we can set the time per frame to be something more like 1 second. If you want to see that change reflected you can click on this "Update Preview" button down here, and what that's going to do is just refresh that preview with our settings that we've just changed. Now you can see it has slowed down the animation instead of going and from 0.5 seconds per frame, we're now doing 1 second per frame; so every 1 second it's going to switch through these four, and you can see here it's set to playback as "infinite" which means that that will just keep going on forever, it's never going to stop. If we did want to change that, we can uncheck this "infinite" check box and we now have access to this input number here. We can actually change this to say loop it one time, if I set it to "1" and then click "Update Preview", let's just let it play through. That's done one play through, and you can see it stopped on our last frame here; so it's gone through these stops. We can change that we can make it make it play through 3 times, so that's basically going through these four frames, it's going to do that, and it's going to repeat it 3 times, so we can change that.

The other thing that we can do is (we'll get to this in a second), but at the moment it's being set to have a transparent background, so that's why we can see this little gap at the top and the bottom here, because we've got the size set to be square; it's set to 512x512, and that means that we've got this little bit of space up here, and that's why the transparency is showing through. There's a couple of things we can do here, we can either change the image fit. At the moment, it's set to "contain", which means that it's actually not going to crop any of the image data at all, it's just going to center position the image and shrink it down far enough so that none of the image gets cut, and anything that it doesn't fill up it's just going to be left kind of blank. We can actually change that, and make it go to "cover"; and if we change it to "cover", you'll see that it'll still be square, but the images will be automatically made to fit. That's that's how it works, and you can see some artifacts popping up here; the reason for that is, we do not need transparency for this particular GIF, so I'm going to turn transparency off and update that; now you can see those artifacts have disappeared, so it's just left with the images without any transparency.

If we do switch it back to contain for a moment, I'm just going to show you one more thing you can do. Because we've turned the transparency off, you can see that the the gaps here which are showing because we've changed it back to "contain", they're set to white, and that's because down here we're setting the background color to be white for anything that shows through. If we wanted to change that, we can actually do that by just changing the HEX value down here ,so if I change it to black and update the preview, those gaps there are now going to be black. You can change that to any HEX value that you like, and anything that's showing through because you've set it to contain will automatically be made to be the same color as the the preference you've set down here.

We can also change the image size as well, so if we did want to kind of shrink down that height a little bit, we can change that from 500 down to 400, and you'll see it's shrunk that down here. If we go down further and make it 300, you can see what's happened here is now that the width is actually greater than the the height, you've got bars on the side now, so that's what it does, because we've got it set to "contain", it's just going to keep containing the image based on whatever dimensions you specifified. If we want to change that again to "cover", we can do that, and this time it fills up those gaps.

The other thing that we haven't looked at yet is image dithering; "dithering" is essentially a way to smooth out the colors inside of a GIF. By default, it's set to "None", but we have a bunch of options here which we can change to make the dithering a bit different. This is going to be a little bit of trial and error, as certain dithering works better for different types of images. You can really just play around with it and see which one makes the most sense for the images that you're using; in this case I'm going to use the "Atkinson" dithering and just save that.

When you're happy with this preview, you can go ahead and click on this "Export to GIF" button in the bottom right down here. If I click on that, it's going to grab those frames and turn them into an animated GIF. If I save this and open it, you can see here that it's exported it exactly the way that we we saw it in the preview; so we've got these four frames looping at one frame per second, the dimensions are 512 by 300, and because it's being set to "cover", there's no gaps whatsoever and and the dithering option that we selected looks really nice, it's very smooth, we can't see any artifacts, can't see any nasty pixel blurring, and overall it's just looking really good. Even at quality 95, it's actually saved out at a reasonable file size, we've got 488 kilobytes for this animated GIF, and I'd say it's it's actually turned out quite well.

If we want to create another one, I'm going to open up TinyImage once more; and because we've already run the Figma plugin, if you want to access it really quickly, you can get to it from this shortcut in the right-hand column. Underneath the "plugin" heading, you'll see "TinyImage" pop-up and it's a little milk bottle icon. The reason I have two is because one of them is my development version, but your one will look like this. Okay, in this case I'm going to do something a little bit different, and instead of selecting these photos, I'm going to select these little SVGs, all these transparent ones. If I select these, I'll just do three of them, I'll just bump the quality up for the sake of it, and I'm going click on "Create GIF" one more time. This is loading up a new preview, and again it's inheriting the settings that we saved before; so you can see here we've got the "cover" setting selected, the image dithering from before is selected, the background color we selected and the timings that we selected are all in there, and the playback count. The size is updated every time, as it basically takes the dimensions of the first layer that you've selected and it'll pre-populate those inputs down here, and that's just to make it easier to have a bit of a baseline size so you don't have to click back and forth and figure out roughly what those image dimensions are going to be. That's how it sets it up.

There's a few things we can do here, because we're using layers that have no background or have transparent backgrounds, it's immediately filling in that transparency area with our background color down here. Again, we can change that if we wanted to, make it a white background; we just changed the HEX value and now it's a white background; so that would be perfect if you're using this GIF on a website or something that already has a white background and you do will get a great result there. I'm actually going to going to do that now, if I just update this a little bit, I'll set it to playback "infinite" and if I "Export to GIF"; we've got that setup now. If I open that up, you can see there it's just it's really crisp, there's no artifacts, no blurring, no anything at all; and that one's come out at 89 kilobytes. Bear in mind, this is at 100 percent quality, so even at 100 percent, the file sizes are very reasonable.

I'm going to get out of that and relaunch TinyImage again, because I'm going to show you how to do a transparent export. Once again, we'll keep our 3 layers selected and click "Create GIF". This time, instead of having the white background, let's say for some reason the background on my website might need transparency, so I'm going to make the image transparent. I'm going to update the preview, and what you'll notice is the background is gone, but there's these weird artifacts around the image; the reason for that is because we still have the image dithering set to this "Atkinson" setting. That setting is really good for if we were using photos like in the last example, they looked really smooth with that particular setting, but in this case we don't want to be doing that, as there's nothing really to blend into. In this case, I'm actually going to turn dithering off and I'm going to refresh the preview and you'll see now that blac outline and artifact has completely disappeared, and we're left with just the smooth image outlines in the transparent GIF, and I'm fairly happy with that. We can actually change the size down here if we'd like, so we can make this 1000x1000 and I can set that to "contain". I think they're all square anyway, but that's all good; in this case, I'm going to make this one a little bit faster and see what that looks like. Okay, I'm quite happy with this, so we've got a fairly fast animation happening, it's going on forever (set to "infinite"), I've got a transparent background set at 1000x1000 pixels with no image dithering because that's working really well for the transparency; and we've set it to "contain", so we know that all the pixels are going to be added to the square no matter what.

Once again, I'm just going to click "Export to GIF", and it's going to merge those for me into an animated GIF. It may take a little bit longer because it's a bit bigger 1000x1000 pixels, but still pretty quick. I'm just going to save that and open that up; and there we go so, you can see it saved it out at 1000x1000. Because these are vector layers the quality is really sharp, really nice and if we would just do this in a retina fashion on our website, we could actually shrink that down to 500x500, so that would that would basically make it an @2x kind of animated GIF and that just looks incredibly sharp when you when you kind of have the dimensions as well. That's a really good trick if you want extra sharp animated GIFs, you can export them at double the size that you actually want to use them at, and then have that size on your website using CSS and you'll get really crisp GIFs and GIF animations. That's actually come out really small, too. The last one that we did we had the white background and saved out at 500x500, but the transparent version at 1000x1000 has actually come out much smaller, so it's quite interesting to note as well if you are wondering why those two have come out differently, it's because of the transparency.

So, that's that's a pretty good overview of how to export compressed animated GIFs from Figma using TinyImage. You can actually play around with this slider a little bit more; you're not going to see huge amounts of differences between these different qualities for GIFs in particular, but you will get a little bit of difference. If you do want to play around with file sizes, I would encourage you just to mess about with some of these maybe at the extremes to get a bit of an idea of what those size difference is going to be, but for the most part you can you can still get away with fairly high settings and and have fairly small file sizes as well.

That's a fairly comprehensive overview of all the different settings you can use, and the different ways you can go about creating GIFs directly from Figma or compressing GIFs using TinyImage. Thank you again for watching; if you've been following along with these Figma tutorials, I hope they've been helpful. If you have any requests or questions please just reach out to me directly, I'm always trying to make these plugins (like this GIF Figma plugin) better, and feedback from people like you definitely makes it improve a lot faster when I know what kind of things and workflow issues that people are having. Until next time, I hope that you've enjoyed the video and we'll see you soon!