How to add transition effects to animated GIF exports in Figma using TinyImage

Video Transcript

Today, I'm going to be showing you a quick Figma tutorial on how to add transition effects to your animated GIF exports from Figma using the TinyImage Figma plugin.

To get started, all we need to do is go to our Figma file, click on the little resources icon up the top here, and then search for "TinyImage" under the "Plugins" tab. If you click on the TinyImage item, you can run the Figma plugin by just clicking on this run button here. Alternatively, I'd recommend clicking on this little save icon here, and that'll let you run it from your Figma plugins list later. I've already clicked on the save button, so I'm just going to go to my canvas and right-click anywhere. Then go down to "Plugins", go down to "Saved plugins", and then just click on TinyImage, and that'll run the Figma plugin that we just saved a second ago.

If you're new to the Figma plugin, it has a bunch of different features, and I'm not going to be going through all of those today. I'm just going to be focusing on the GIF feature and how to add transition effects to those exported GIFs. If you're interested in some of the other compression features and exporting and downsizing features, check out some of the other tutorials on the YouTube channel. But for today, we're just going to be going through how to add transitions to your animated GIF exports.

The way to get started is we just have to go ahead and click on this "Create GIF/MP4" button at the top of the Figma plugin. I'm just going to click on that now, and that's going to prompt you to select any Figma layers in your page or in your file. So, in this case, I've just created four different Figma frames, very simple, just 400 pixels by 400 pixels each, and I've just added some placeholder images from Unsplash there. What you want to do is you want to highlight all the frames you want to animate. So, I'm just going to highlight these four frames and then click on "use selected layers" in the Figma plugin here. If I click on that, that's going to load up a preview of the animation in the Figma plugin.

You can see here that by default, it's basically setting a 500 millisecond per frame time. Each frame is showing up for about half a second, and then it's also set to 400 pixels by 400 pixels. You can obviously scale that up or down if you wanted to double the size during the export or not, but that's pretty much all standard. The thing we're going to be looking at today is at the moment it's set to instant, so you can see the slides are just changing from one to the next without any transitions. So, if we want to change that, we just click on this instant drop-down list down here. This is the effect dropdown list, and we can actually change this to be something else. For example, if we wanted to have a fade effect, we can click on the fade button, and that's going to add a fade effect between each frame. So, you can see now it's not just jumping between one and the next; it's adding a little fade there. We can do the same thing if you want to add a slide animation. So, if you want to slide right, you can add a slide right, and you can see it's now sliding out to the right. We can change that to be sliding to the bottom, so you can do a slide to the bottom like that. We can also do wipe effects as well. So, if you want it to wipe instead of slide, one frame wiping over the next, you can do that as well. We can go wipe left to right or wipe top down.

You've also got full control over the transition speed. By default, it's going to add that transition at about 400 milliseconds, just under half a second. But if you wanted to slow that down, you can do that by just toggling this little slider here, and you can see that the swipe transition or wipe transition in this case is coming in a bit slower now. Same thing with the slide, so if you wanted to make that a 1-second slide, you can actually update that to 1 second, and it'll be much slower. The one thing to be mindful of is the longer the transition speed or the longer it takes for each slide to transition, the bigger the file size is going to be because it's going to require more frames to actually achieve that effect for longer. Whereas if it's a shorter effect, so if you made a really fast transition speed like 250 milliseconds, it only needs a couple of frames because it's only going to be showing for a fraction of a second. So, it's probably better to leave it somewhere in the middle if you do want to enable these effects. But you can totally play around with that and set it for yourself based on the animation style. In this case, I'm just going to set it to a fade.

To export it, all we need to do is click on this "export GIF" button up here, and that's going to allow us to export the GIF and render it out. Once it's finished rendering, it's going to ask you to save it. In this case, I'm just going to save it onto my desktop. Click save, and if I open that up in the preview, you can see here that the fade effect has been added. So, we've got our GIF; it's got an infinite loop on it, so it's fading into each other and just keeps going around and around. So, that's our fade effect, and the same thing will happen if we export that to a slide effect as well. So, if we just want to try a slide effect, we can do a slide-down effect, we can make that a little bit longer, and again, once we're happy with the preview, we just go ahead and click on "export GIF," and that'll do the same thing. Once that's finished rendering, we'll again save it to our desktop. I'm just going to call this one "slide" so it doesn't override the other one. And if we now preview that one, you can see here that it's adding the slide effect onto our slides. Each frame is sliding down and sliding out. So, that's what that looks like there.

You can also export this to MP4, so if you don't want a GIF and you want to actually use a video file itself, you can export it to either a webm video or an MP4 video. In this case, I'm just going to select MP4, and this time, let's do like a wipe effect and make that a little bit longer. So, we can add that in and then just click on "export MP4" instead. So, we're going to click "export MP4"; this is going to again render those frames with the transition effects applied, and it's going to give us an MP4 encoded video file. So, we can save that MP4 to our computer, click save, and now if we open up the MP4, you can see this is a video. We've got full control over the actual playback here, and you could use this on a website; you could use this in a social media campaign. That's what that's going to look like once it's exported to a video.

There we go, we got a couple of different options there depending on what kind of format you want to use, whether it's a GIF or a video, depending on what kind of application the animation is used for. It's totally up to you to pick that format. But yeah, hopefully, this gives you a little bit more flexibility with creativity if you're wanting to export your Figma frames to an animated GIF or an animated MP4 just using the export function in TinyImage. This will give you a little bit more flexibility than just the default instant switching, which was previously there. So, hopefully, that helps if you've been wondering how to add fade, slide, and wipe transitions, which are in there at the moment. There may be more added over time, and keep an eye out for those if they do get added. You can play around with those ones as well. So, thank you as always for watching, and we'll be back soon with more Figma tutorials like this one very soon.