How to upscale images and boost resolution in Figma (100% local AI) using TinyImage

Video Transcript

Today I’m going to be showing you a quick tutorial on how you can automatically upscale or boost the resolution of your Figma images using the TinyImage Figma plugin. To get started, all we need to do is go to our Figma file, go down to the actions icon down here at the bottom, and then just click on that and search for TinyImage. Under the Figma plugins tab, if you click on the TinyImage item, you can run the Figma plugin by either clicking on this run button down here, or I’d recommend clicking on the save icon next to that. That’ll let you run the Figma plugin from your Figma plugins list.

I’m just going to go to my canvas because I’ve already clicked on the save icon. Just right-click anywhere, then go down to plugins and go down to saved plugins. Then go down to the TinyImage item and click on open TinyImage. That’s just going to run the Figma plugin we saved a second ago. If you’re new to the Figma plugin, the way that it works is it basically has a bunch of different features to compress, export, and modify images. Today, we’re just going to be focusing on the boosting resolution or the upscaling feature. We’re not going to be paying attention to any of these other tabs; we’re just going to be going to this editor tab.

What you want to do is switch over to this editor tab in your header here. We want to load up one of these images. We’re going to try all three of them, but we’re just going to load up one first. You’ll notice that we’ve got some pixelation in these images. You can see they’re kind of lower resolution. There’s a little bit of pixelation happening here. What we want to do is increase the resolution of those and upscale them using a local AI model in the Figma plugin.

To get started, all you need to do is click on the image layer or the layer in Figma with an image fill that you want to modify and just go ahead and click on the use selected Figma layer button in the Figma plugin. That’s going to load it up into the editor feature here. You can see that’s all loaded up and looking nice. We’re not going to touch any of these other options today. We’re going to go all the way down to the bottom left here where it says local AI and click on that. You can see that by default, the boost resolution tab is selected, and that’s the one we’re going to be focusing on today.

What this is going to do is download a small upscale model or local AI upscale model, and it’s going to allow us to automatically increase the resolution of this image or any other images using the Figma plugin directly. It’s not going to upload the image anywhere. This happens 100% locally on your own machine. I’ll show you what that looks like now. I’m just going to set this to upscale it by 2x. Just to give you a bit of a before and after, you can see here that when I zoom in, you’ve got those pixelated edges. Keep an eye on those, and we’ll swap it out in a second.

Now, I’m going to click on the boost resolution button. This is going to download a small model; it’s only about 5 megabytes. It’s going to download that model and load that up locally inside the Figma plugin. Then it’s going to take the Figma image and use that AI model locally in the Figma plugin to upscale it. It’s going to go through all of the pixels and sort of smartly upscale all of those in the context of the image. Once that’s done in a moment, we’re going to then be able to either insert the upscaled image as a new image layer, or we can also replace the Figma layer or download the layer as well.

You can see that it’s just finished upscaling the image based on that notification. It’s also saying that the resolution’s been boosted, so we don’t have to click the button again. I’m just going to insert this into Figma by clicking on the insert image button down here. That is going to add it as a brand new image. You can see that it’s got edited in the brackets over here, so we know which one is which. If we now zoom in to compare these, I’ll just put those kind of side by side. This is the old one. You can see here that the hair and a lot of the lines in the image are quite pixelated. The images just aren’t as sharp as you’d expect.

If we scroll over to the right, which is our new image, you can see the upscaled version is much sharper. All of the lines are much sharper. There’s a lot less pixelation going on. All the hair looks a lot more streamlined. There’s no sort of obvious pixelation happening. If you zoom out, it’s clear that this one is just looking overall much sharper than the other one over here. That’s one example of the upscaling happening with an illustration. We can also do it on smaller images like this. This is actually a fairly tiny image over here.

We’re going to load that in by just clicking on the use selected Figma layer again. We’re going to discard the other edits in there. You can see this one’s about 375x450 pixels. If we zoom in, you’ll notice that it really is quite pixelated. There’s not much detail or resolution going on in here. What we want to do is upscale that. I’m actually going to upscale this by 4x because we’re going to make it a little bit bigger. Upscaling it by more will take a bit longer, but because the image is quite small to begin with, it shouldn’t take too long. I’m just going to click on the boost resolution button again under the upscale feature.

That’s now upscaling it. We didn’t have to redownload the model because we’ve already done that once in the Figma plugin run. You can see that’s already finished upscaling. I’m just going to insert this as a new image again. I’m just going to insert that into Figma. If we put that side by side and again zoom into that, just to refresh your visual memory, this was kind of the old version with quite a lot of pixelation happening around the details here. If we scroll over to the upscaled version, you can see that it’s much sharper. We’ve got the logo and the details of the shoe much sharper than the original one.

We can also open that up a little bit bigger as well because we’ve got that upscaled 4x resolution. We can actually now increase the size of the image itself as well. If we tried to do that with the original one, if we just purely resized this one and didn’t upscale it, and then we put that next to the upscaled one that we just ran through the Figma plugin, you will notice that if we zoom in now again, you can see that there’s quite a lot of pixelation going on in the image. If we go over to the other one, it’s looking much sharper overall. We can actually kind of bump up that resolution. Even just at a glance here, you can see that it’s quite a lot sharper than the original.

Finally, we’re just going to do this last example over here. This one isn’t too bad; it’s kind of got some artifacting here. I think that’s the main thing we want to tidy up. Again, I’m just going to load that selected Figma layer in. This one we’re just going to do as a 2x and hit boost resolution. That is again going to prepare the local model. But we’ve already downloaded it, so it’s just kind of starting it up, and it’s going to upscale this one because this one has quite a lot more detail. It’s got this dust and all these kind of particles and things like that. It’ll probably take a little bit longer than the other two. It’s also a bit bigger in size, about 1,300 by 1,000.

I’ll just speed this up in the editing just so you don’t have to sit through it. Then we’ll add it in Figma. Okay, that’s just finished upscaling in the Figma plugin here. What we can do is again insert this as a new image. If I click on insert image, that is going to insert it as a brand new image in Figma here. We can actually zoom in and check out what it’s done. You can already notice the lines are looking much sharper than the original one. If we kind of toggle this off and on, you can see here that the pixelation we’re observing in these details has all been smoothed out. It’s looking much cleaner and much sharper. A lot of that pixelation has kind of disappeared when we toggle that on and off.

You can see down here by the windows as well. If you look at the dots or the pixels over here and then enable the other layer, you can see that’s sharpened up quite a bit. It’s looking much smoother. Again, just at a glance, if we zoom out, you can just tell side by side that this one is just looking sharper. Less of the pixelation detail on the side here. That’s also looking much sharper. Finally, as I mentioned before, if you did want to just swap out that image directly, if you knew you just wanted to get rid of this original fill completely, you can just select the original layer and click replace fill, and that will just replace it.

That’s now just swapped out that original layer image fill. You’ve just got that replaced instead of adding it as a new layer. As I mentioned, you can also download it to your computer. In this case, we’d just go with a JPEG and click on download. That’ll let you save it directly to your computer. I’m just going to click on save. If I open that up now, you can see I’ve got the JPEG file directly open on my computer as well. That’s just letting me download it directly to my machine. If I don’t want to use it in Figma, I can just use it however I like as an image file. Again, that’s looking really good as well.

I’ll leave it there for today. I just wanted to run through a few different examples of how you can automatically upscale and boost the resolution of your Figma layers. This is a really easy way to go about it if you don’t want to use a third-party service or if you want to keep all of your image data completely local inside Figma. This is all happening directly in the Figma plugin. The data never gets uploaded anywhere. It’s not using any third-party services. It’s all happening 100% locally inside of your Figma file. That might be attractive if you want to use confidential assets or you just want to know and be sure that the image data is not going anywhere. This is a really nice way of doing it 100% locally in the TinyImage Figma plugin. Thank you as always for watching, and we’ll be back with more Figma tutorials like this one very soon.

Read as Markdown · Related resource index · Site index for AI agents