How to export WebM videos from your Figma layers using TinyImage

Video Transcript

Today, I’m going to be showing you how to create and export animated WebM videos from Figma using the TinyImage Figma plugin.

The first thing you’ll need to do is install the Figma plugin by going to the Figma Community, searching for the word “TinyImage”, and under the “Plugins” tab you’ll see a result called “TinyImage Compressor” come up. If you haven’t already installed it, there’ll be an “Install” button on the right hand side, just click on that and you’ll be ready to go.

I’m just going to switch back into my project and run the Figma plugin we just installed by right-clicking anywhere on the page, going to “Plugins”, and then going down to “TinyImage Compressor” and clicking on that; that’s just going to open up the Figma plugin that we just installed.

The first thing we need to do is click on this “Create a GIF” button; this is going to open up a little dialog down here, and it’s going to prompt us to select some layers that we’d like to use as the frames for our GIF. Obviously we’re clicking the GIF button, but we are going to be exporting a WebM video file, so just keep that in mind.

Okay, all we need to do is select the layers that we want to use for our animation, and I’m just going to select all of mine. You can see down here that it’s changing how many layers it’s picking up on; you can pick less or morem it’s really up to you, but you can use any Figma layer in your designs for this process. I’m just going to use those six and then click on “Use Selected Layers” and you can see here it’s loaded up all of those frames we’ve just selected from Figma into the TinyImage Figma plugin.

It’s giving us a little playback preview directly in the plugin window. You can see here I’ve got all of my frames, all six, and there’s a few things I can do here. I can re-arrange them either by manually dragging the frames around, so I can click and drag those frames to drop them into different spots; I can do that manually or I can actually go up to this little drop down here and I can click on that to get some pre-defined sorting options. What I can do is I can actually sort those visually, so if I want to sort them by left to right visually, that’s going to correlate to what we see over here on the Figma canvas. I can also sort them from bottom to top, so if I want to do bottom right to the top left I can do that, or I can just sort them by their layer name; so if I’ve named them in a certain way in my Figma layers panel and I want to arrange them in that way, I can just use the sorting option there to arrange them as well. I’m just going to use the visual option for now.

Now we’ve got our layers visually ordered the way that we want, we can we can play back the frames a little bit differently if we want to. If you want to actually go through them manually, I’ve just clicked on the “Pause” button, and now I can actually go through them one by one and just make sure that they’re in the order that I wanted, and click this button here just to go right back to the start, and that’s just going to do that. I can also click that button while it’s playing, so I can click on the “Replay” button, and that’s just going to keep taking me back to the start every time; that’s the way you can control the preview there.

The other thing that we have access to is changing the delay between the frames. At the moment, it’s half a second between each frame, I can decrease that to make it faster, so I can change that to be 200 milliseconds or 150 milliseconds, and you can see it’s going much faster now. I can also slow that down, if I wanted to bring that all the way down to a one second or two seconds, that’s something that I can do as well; it really just depends on what you want to be doing in your GIF. The other option you do have as well is changing it manually per frame, so if I want this second frame to go by really quickly and this fourth frame to go really quickly, I can do that, I can make it even quicker if I want; and now that’s basically going to change those two specific frames to be played back a bit quicker. You can see there, it’s just jumping past the second and fourth frame much faster than every other frame, which is inheriting the one second delay that we’ve got over here. These are in milliseconds as well, so that’s 200 milliseconds, and that’s 1000 milliseconds, which equals to one second.

Then we can see here we’ve got a couple of other options; we can we can replay the animation infinitely, so that’s just going to infinitely loop it and or we can actually uncheck that and say exactly how many times we want the animation to loop; we can do loop three times, or loop twice in this case, and I’m just going to set it to “Infinite”.

Down here we’ve got the size of the exported image, or exported video; this just takes on the first frame that you’ve included in your frame selection, so if we have a look over here you can see that it’s 1711 pixels by 1142 pixels, and that’s just getting automatically pre-filled there; a really quick way to scale that if you want to export the frames at a different size is you can either manually change it there, or I like to use the scale option. You can actually just say I want that at half the scale, or twice the scale, and that’s just going to show you what size is actually going to get exported at. In this case, I might just do it at half the scale.

The last options down here that we have are the background options. If we wanted to change the background color, this is only useful if we’re using an option where the images are different sizes, and we’re using the “Contain” option, and that’s going to make sure that any different sized or ratio sized images are going to get “contained”; which means that you’ll end up with some different solid colors on either the left and the right, or the top and the bottom, depending on how it’s going to fit that frame size. If you do want to change that, you can change it down here, so if you wanted to do a a white background you could put in the hex code for white, but in this case we don’t have any of that that background color, so this is not going to make any difference in our case.

Same thing goes for transparent background; if you’re using frames that have transparency or PNG icons, or PNG icons, or something like that, you probably want to enable the “Transparent Background” option, but if you’re just using photos or using images that take up the entire frame, you can leave that transparent background option completely turned off.

As I mentioned before, this option here will determine whether the images cover the frame, so whatever size frame you’re sitting here if you check the “Cover” option, the images in your frames will always be made to cover or fill that frame, and you won’t have any blank spots in the in the sides or the tops on the bottom. If you decide to go with “Contain”, contain is going to make sure that it always contains all of the image content even if that means squishing it down a little bit and then adding in those solid colors that I mentioned a minute ago; those are the options that you have there for fitting the images.

Finally, we’ve just got the image quality; you can change this up or down, you can tend to leave it up pretty high unless you really need to squash the image size down, or the compression down, but typically it’s fine to leave it around 80 or 90. Finally, we have dithering; by default there’s no dithering included, but if you know what these options do, then feel free to have a play around with them, otherwise it’s pretty safe just to leave it with “No Dithering”.

As I mentioned, we’re going to be exporting to WebM today; this is a brand new feature in the TinyImage Figma plugin, and instead of exporting to GIF, which we could also do, I’m going to show you what it looks like to export a WebM video. I’m going to click on “Export WebM” now, and this is just generating a WebM video with all of those frames. You can see here it’s finished and prompting me to save the file, so I’m just going to save that to my desktop; I’m going to click on “Save”.

Probably the easiest way to open it is just open up in your web browser; I’m just going to open up this file in the browser now, and you can see here that we’ve got our WebM video playing back nicely. This is just in the browser, and WebM is a is a web video format, so you can include this on your web pages, you can send it around, and it’s typically a really good way to share video via the web. That’s what it looks like, you can see there, it’s skipping over those frames much quicker the two frames that we added the higher speeds on; they’re getting skipped over a bit quicker, but the rest are getting played back at the speed that we expected.

Cool, so that’s what it looks like to export the WebM file directly from Figma, and you can play around with this yourself. There’s many use cases for it, of course, but it all depends on what you want to be doing with it, and what kind of content you want to include in your WebM video export from Figma. I hope that’s been helpful for you if you’ve been wondering how to export WebM files from Figma, you can do it using the TinyImage Figma plugin. If you give it a go, I hope you have good results; thank you as always for watching, and we’ll be back very soon with more Figma tutorials just like this one.