How to export GIFs from Figma layers using TinyImage

Video Transcript

Today I'm going to be showing you how to export animated GIFs from Figma using the TinyImage Figma plugin.

The first thing we need to do is go to the Figma Community and install the TinyImage Figma plugin, if you haven't already. You can do that by searching for the term "TinyImage" in the search bar and under the "Plugins" tab you'll see a result pop up called "TinyImage Compressor", and if you haven't already done so, there'll be an "Install" button on the right hand side; just click on that, and once it says "Installed" you'll be ready to go.

Now that we've got that installed, we can go back to our project and run the Figma plugin just by right-clicking anywhere, going down to "Plugins" and then clicking on "TinyImage Compressor"; and that's just going to fire up the Figma plugin that we just installed.

To create a GIF, we need to click on this button in the top of the Figma plugin that says "Create a GIF"; just click on that once, and it will prompt you to select some layers on your page that you want to use as the frames for your GIF. You can actually select those frames before you click the button and that will automatically load them in, or you can just click the button first like we've just done, and we can select them now. I'll show you what that looks like; just go to your Figma canvas and select as many layers as you want, and these will make up the frames for your GIF and they'll be the ones that we're going to be animating in a second. In my case, I'm just going to be selecting all of the six frames or photos that I've got in my Figma file. You can see down here the button has changed to say "Use Selected Layers" and it's got "6" in the the brackets to tell us how many we've selected. Now I've selected those, I'm just going to click on the "Use Selected Layers" button here and that's just loaded up a preview with all of our layers that we've selected.

I've already used this before, so there's a couple of preset values in here, but I'll go through all of these with you now so you can understand what's going on. The first thing to see is we've just got our little preview up here; this is just playing back what the GIF is going to look like, and what the speed looks like, and the ordering looks like in real time. You can change the order of these by changing the drag and drop feature here; you just click on any of the frame thumbnails and drag them along and you'll be able to manually reorder those frames in the order that they get played back here. The other way you can order your frames is by clicking on this little drop down box here, and you'll see some preset options to do ordering; we can order by the frame layer order and that will order them the way that they're ordered in your layers panel, you can order them visually, so if you want to sort the frames from left to right we can just click on that and you can see here it's going from top to bottom and then left to right; we can do that in columns, as this one is, or we can do it by row, so if we do the row version it's going to sort it from the top all the way across and then go to the next row and then sort all the way across to the bottom. That's the way we can visually order it.

The other thing we can do is change the pause and play state of the preview. I can click "Pause" and that just stops it wherever it is, and then I can manually navigate using these arrows; that's just a really nice way of double checking all the ordering or just pausing the animation to see what's going on. You can also restart the animation to the front just by clicking this reset button, and you can also do that while the animation is playing; if you want to reset it during the animation back to the start to see what it looks like back at the start, that's the quickest way to do that.

The other option we have is changing the speed; if we click the "play" button again, we can actually change the speed in real time. If I change this from one second per frame down to 500 milliseconds per frame, you can see here that it's going much faster than it was before. I can even speed that up again, so I can do it to 100 milliseconds and that's much, much faster again, or I can do the other extreme and slow it right down; if I want to each frame at two seconds each, that's the way I can do it there, I just set the timer to 200 milliseconds, which is two seconds, and you'll get a two second delay per frame now.

The other thing that we can do is individually override those timings as well; if I want frame two and frame four to both be 500 milliseconds, I can do that, and that will override those two frames. You can see here it's jumping over those in half a second, those two specific frames, but all of the other frames are still inheriting the two second delay that we've set down here. That's just a really nice way of overriding those frames if you do want to have a certain frame go quicker or stay on longer than any of the other frames; you can do that manually using those controls there.

The other option that we have is to loop or playback the GIF. By default, it's just set to "infinite", so it will just loop forever, but you can uncheck that option and overwrite it. If we want the GIF to play back only four times and then stop, we can uncheck "infinite" and change that playback value to "4" or I can make it go twice, or I can make it go 10 times, it's really up to you. In my case, I'm just going to leave it on "infinite" and just have the GIF loop over and over.

The next section we have is the sizing. By default, it will pre-populate the size with whatever the first Figma frame that you've selected is. In our case, we've got the frames here; you can see it's "1711" by "1142", and that's been pre-populated down here, so you don't need to worry about pre-filling that. Of course, you can change those sizes as well, so if we wanted to change that to "500" let's say, you can change that, and we can see the preview instantly update there, or we can actually set that to something different where we've got "500" by "1711", or "500" by "500", and that's just going to change that to a square ratio instead of the more landscape version that we had a second ago. I'm just going to undo that now and put that back to where we had it.

The other thing I did want to show you was the scaling; we've got scaling, and currently it's set to half. By default, it gets set to "@1x" and you can see over here it's giving us a preview of what the actual pixel size is going to be exported as when we save our GIF. At "@1x" it's always going to replicate whatever we've got here, but we can easily halve that or double that or quarter it just by clicking on these presets. If we check "@0.5x", that's going to halve it, if we check "@2x", that's going to double it, and it gives us a preview in pixels of what that's actually going to get saved out as. In my case, I'm just going to leave it as half, I'm going to do "@0.5x".

The other option that we have is to do a background color. Currently we can't see a background because we've got our image filling up the entire frame, but if we change this "cover" option to "contain", and then we change our sizing down to "500", let's say. You can see here, by using the "contain" image option, it's actually making sure that all of the image content always remains in the frame, and it does that by adding in some blank space at the top and the bottom, or the left and the right, depending on the ratio that you've selected. If we change "contain" back to "cover", you can see the cover option will always make sure that the entire frame is covered by the image content, and in that case it will crop off wherever it needs to crop off to make sure that it all fits; but if we do use "contain", that's the option where the background color comes into play.

If we wanted to change this from the default black background to a white background, we can add a hex code for white, so we can do "#fff"; that will change it to the white hex code, and we can see in the preview it's just updating to show us what that would look like if we would export it. You can put any hex code you want in there, and if you are using the "contain" option and you are getting these bars on the left and the right of the top and the bottom, you can change the background color manually just by changing that field there.

The other option we can we can do is transparency; you can make the background transparent if you've got those gaps in there, or more importantly if you're using transparent SVGs, or transparent PNGs, as part of your layers. If you're doing a sprite animation or something along those lines, then the transparent background option can be really handy for exporting a GIF with transparent edges. If you're using character animations, or using transparent GIFs, SVGs or PNGs as your source material; in my case I'm going to leave that off and I'm just going to revert that back, so I'm going to make this just a completely square image and I'm going to set that to "cover".

In this case I'm going to select the image quality to be pretty high, so I'm just going to leave it at 90. It's pretty safe to leave it up there, it's not going to blow out the file size too much compared to something really low with the GIF files in particular; you can leave that somewhere around 80 to 90 and you'll be you'll be pretty safe.

The very last option is dithering; by default no dithering is added. If you are familiar with some of these dithering options and presets, and you know what is going on there, feel free to play around with those; but for almost all cases you can just leave it on "No Dithering", and that's just going to leave the image looking how it's pretty much meant to look.

Okay, now that we've got all of our settings configured the way that we want, and we've got our GIF playing back the way that we like it, all we need to do now is finally click on the button that says "Export GIF" that's just in the top little header up here. I'm going to click on that now and this is going to add all of the frames and render a GIF from Figma for us. It's just finished; I'm just going to click on "Save", as we're prompted to save it to our computer. I'm just going to save it to the desktop, click on "Save", and if I preview that now you can see here it's giving us our GIF file just the way that we saw it in the Figma plugin. We can go ahead and upload this on our website, or we can send it to our team via Slack, or really use it for whatever you want; this is your your exported GIF from Figma. You can basically send it around or share it or upload it anywhere you want, and that will work as expected.

There we go, that's the process of exporting animated GIFs from Figma. This is an updated tutorial of one that we had out a while ago, just because the interface and the features have been updated in the TinyImage Figma plugin quite a lot since that first tutorial, so if you've come from that tutorial, this is a more updated one which will reflect much closer to what you'll see in the the Figma plugin if you download it today. I hope you've enjoyed watching this Figma tutorial, and I hope if you're creating GIFs with Figma then this has been helpful for you. Please let me know if you have any feedback or questions, always happy to help; and until next time, thank you again for watching.