# How to edit animated GIFs directly in Figma using TinyImage

> Learn how to edit, combine, trim, transform, and export animated GIFs directly in Figma with TinyImage.

- Canonical page: https://www.hypermatic.com/tutorials/how-to-edit-animated-gifs-directly-in-figma-using-tinyimage/
- Product: tinyimage
- Published: 2026-08-27T00:00:00.000Z
- Updated: 2026-08-27T00:00:00.000Z
- Video: https://www.youtube.com/watch?v=8fcC5R915oE

## Steps

1. Open TinyImage in your Figma file, select the GIF tab, and open GIF Editor.
2. Load an animated GIF from a selected Figma layer or choose a GIF file from your computer.
3. Resize, rotate, flip, crop, trim, reverse, or retime the GIF, then choose its loop and compression settings.
4. Insert the edited GIF back into Figma or export it to your computer as an animated GIF or MP4 video.
5. To add static Figma content, place the GIF and other layers inside one frame, select the parent frame, and load it into GIF Editor.
6. To combine multiple GIFs, place them in the same frame with any other layers, then load and edit the parent frame.

#### Video Transcript

Today I'm going to be showing you a quick tutorial on how you can edit and compose animated GIFs in Figma using the TinyImage Figma plugin. To get started, all we need to do is go to our Figma file. If you go down to the toolbar at the bottom and click on actions, then just search for TinyImage. If you go into the Figma plugins tab and click on TinyImage, you can run the Figma plugin by either clicking on the run button or you can click on the save button next to that. That's going to let you save the Figma plugin and run it from your Figma plugins list. I've already saved the Figma plugin, so I'm going to go to my Figma canvas, right-click anywhere, then go down to plugins, go down to saved plugins, and click on TinyImage. That's just going to run the Figma plugin we saved a second ago.

By default, the Figma plugin is going to be on this compress tab, which basically allows you to compress and export any of your exportable Figma layers like JPEGs and PNGs, but the Figma plugin has a bunch of other features as well. Today we're not going to be focusing on any of the other ones; we're just going to be going to the GIF tab. If you click on the GIF tab over here, which by default is just going to be on this create a GIF tab item, that allows you to create a new GIF from layers. It lets you select a bunch of static Figma layers and then curate those into an animated GIF. But today, we're going to be focusing on this new feature, which is the GIF editor feature. If you go to GIF and then click on the GIF editor tab here, that'll put you in the mode for GIF editor.

You've got two different options. You can either choose a GIF from a Figma layer; for example, we've got these Figma layers here which are animated GIFs. Or you can also choose a file from your computer as well. I'm going to show you both those different options, and I'm also going to show you a bunch of different ways you can go about creating GIFs with other layers inside of those layers. You can kind of mix and match GIFs and static Figma layers too. But to get started, let's just select a GIF layer that I've already got in Figma here. You can see in the fill panel this is an animated GIF. All you need to do in that case is just select that one GIF layer and then click on the use selected Figma GIF layer button in the Figma plugin. That's going to automatically load up the GIF editor for that particular animated GIF.

You can see here we've got a bunch of different options. Anything from changing the size; we can change the width and height, for example, and apply that change. We can rotate the GIF. If we want to rotate it, we can definitely do that. We can flip it, so if we want to flip it horizontally or vertically or both, we've got that option as well. Of course, we've also got a cropping tool. We can click on crop, and that will allow you to crop the GIF. You can specifically crop the part of the GIF that you want to keep. In this case, you might want to create this crop here, just click on apply crop, and that'll let you crop it as well. You can mix and match all of these different tools. You've also got a bunch of other tools down here. For example, you can reverse the GIF. If you want to play the GIF backwards, just enable that toggle. You can also change the speed. If you want it to be faster, we can make it faster, or we can also slow it down. If the GIF is too fast, we can slow it down.

You've also got control over the looping as well. By default, the GIF is just set to infinitely loop. But if you only want the GIF to play a certain number of times, for example, you might want it just to play twice and then stop on the final frame. You can uncheck the infinite toggle there and set the number of playbacks you want it to do. In this case, I'm just going to leave it as infinite. You've also got a bunch of compression options down here as well. By default, it's just going to apply some nice and light compression. You can also make it lossless, so that won't compress it at all; it'll just use the original kind of data. You can also set a size target, so you might want to set a target for a particular file size to shrink the GIF. You can do that as well, but today I'm just going to be leaving all those as default.

Once you're happy with the GIF, there are two different ways you can export it. You can either insert the GIF to Figma. Click on the insert GIF to Figma button. I'm just going to set that to be a bit different so we can see what that looks like, then click on insert GIF to Figma. That's basically just going to insert the compressed GIF in this case to Figma. Now we can actually load that up and play it inside of Figma. You can see here in the preview the GIF has been added based on the edits that we just made. That's a really quick way of getting it into your Figma file. If you want to export the GIF to your own computer instead to use it for other purposes, you can definitely do that too. All you have to do is make sure that the animated GIF option is selected in the export settings here, and then you can just go ahead and click the export GIF button. That's going to again export the GIF to your computer, so you can just save that anywhere. Just save it to your desktop in this case. If we open up that GIF, like we can see here on my computer, the edited GIF has been saved directly to the computer. You can use that GIF file for whatever you like.

As I mentioned before, there are a few other options we've got here. Let's say you've got an existing GIF, but you want to mix and match some Figma layers over the top of that GIF. For example, we've got this GIF here from the movie American Psycho. You'll see here that we've got it inside of a Figma frame. We've basically just taken that GIF, gone to the right-click menu, and clicked frame selection, which has added this Figma frame here. What that allows us to do is then add other layers inside of that Figma frame. For example, we can add this text layer here. I've just added that in. You can style that however you like. You can also add other layers if you wanted to. If you want to add shapes or other static images and things like that, you can certainly do that too. That's going to allow you to select that parent frame, the frame that contains the GIF and the other layers. You can essentially select that, then go over here, which is going to allow us to again use the selected Figma GIF layer. I can just click on that, and that's going to automatically load up all of the GIF frames along with the Figma layers you've included. It'll let you mix and match those and overlay the GIF.

This is really useful if you've got a GIF and you want to add your own content above it or use the GIF as a background for other content. This is going to let you do that really easily. Again, you don't even have to make any other changes; you can just purely load that in with those layers, then click on the insert GIF to Figma button here. That's going to load up the brand new GIF with those Figma layers included. We can see here this is now a single GIF frame that we've just added. If we open up the sidebar here, you can see when I click play that is now just a single GIF. The GIF has the text and this shape in this case included, and that's just now a single GIF being included as a layer. That's really cool. Again, of course, you can export that to your computer. Just click on the export GIF button here. That's going to again output that, so you can open that up on your computer as a file. If we open that up locally, you can see I've got the full GIF here with the new text layer and shape that we included as part of that GIF.

You can also change the export format too. You might want to export this as a video instead of a GIF. You can do that by changing the export format from animated GIF to MP4 video in this case. You can just click on export MP4, and that's going to basically convert that GIF into an MP4 video instead. Now we can save that again as MP4 this time. If I save that to my desktop and then load up that file, you can see here that this is now a proper video. It didn't save it as a GIF; it's a full MP4 video that you can use for any other video tools or any other platforms that accept videos as well. That's pretty neat.

Finally, the other thing I wanted to cover is you can mix and match multiple GIFs inside of a single frame as well. In this example, we've got another Figma frame, and you'll notice that we've got two GIF layers in here. We actually took the GIF layer from over here. We had this one in our file, and I've moved that into this frame number two. You can see we've got the American Psycho GIF and the Homer Simpson GIF. Plus, we've got this rectangle shape. As we saw before, you can just add basically any Figma layer into the frame. I've just used that as a bit of a background for the text here. We can style that however we want, and that's going to get included in the final GIF. Importantly, we've got two GIFs in the same GIF that we're going to create. We can essentially load up this frame and load that into the Figma plugin. That's going to process both of the GIFs. We've got two different GIFs running in the same output GIF. We're essentially merging two GIFs plus these static layers over the top, and we're able to combine all of those into this single frame via the Figma plugin. That's pretty neat.

The other thing that you can do that I didn't mention before is you can also trim the timeline. For example, if we wanted this GIF to start much later, we don't want the close-up on his face. We can just change the timeline to start at this part of the clip instead. We can even cut it off before this card drops out of his hand, for example. We can do that, and we can also reverse that part of the timeline as well. Maybe we want the card to come up into his hand. You can do that as well. You can see now that the GIF's been reversed. Of course, it's the same process. We'll do insert GIF to Figma. That's going to load the trimmed GIF in this case. We've got the GIF here that we can open up and play. You'll notice that it's now in reverse, and we've also got the secondary GIF in there, plus the text and the shape layer. You can really be a bit creative and load a bunch of different Figma layers, content layers, and mix and match all of those to create a fresh brand new GIF.

Finally, I thought I'd just show you an example of loading in a GIF from your computer as well. If you click on this icon here, it'll let you choose a file from your computer. If you just click on that icon, that will load up your file selector. You can go ahead and just select any GIF from your computer and load that into the Figma plugin directly. In this case, I've just loaded in another GIF here, and that's just from the computer. We didn't already have that one in our Figma file; that's been loaded externally in this case. Again, we can use all of the editing features here as well. Maybe we just want the last part of this GIF where it starts zooming in on his face and he starts nodding. We can purely just select that part of the GIF and render that as we need to. You can flip that around, change the size. Maybe we want to make this massive and we'll just do 1,000 by 1,000 pixels or something like that. We can apply that size, then render that into Figma as we just saw. You can also reset the edits. If you want to just reset everything back to normal, you can just click on that reset button. If you've accidentally done something that you didn't mean to, you can certainly do that.

That's basically how you can go about editing these GIFs. Again, I'm just going to do a really quick example. Maybe we want to blow this up to 600 pixels. You can also remove the aspect ratio lock. If you wanted to make that purely square, you can certainly do that as well, and that will change it into a square. In this case, I'm just going to leave that as it was originally. Then I'm going to insert the GIF to Figma as we've done before. That's going to add that new GIF that we've got right here. You can see it's sized it to 600 by 630 just as we input into the Figma plugin. We can play that back over here too. That's basically it. I just wanted to run through all of the different options that we've got here in the Figma plugin. Hopefully, that's going to be really useful if you're working with GIFs in Figma and you want to be able to edit those or take existing GIF layers and repurpose them or re-export them or compress them. There are a whole bunch of different options and use cases that you could use this particular GIF editor feature for. Feel free to give it a try if you're using the TinyImage Figma plugin. As I said, it's just under the GIF tab up here. Make sure you go into the GIF editor, which is separate from the create a GIF feature. This is more for taking static Figma frames and building up a timeline of static frames. This one is going to let you use existing GIFs and repurpose those and edit them as you need to. Thank you as always for watching, and we'll be back soon with more Figma tutorials like this.