How to Edit Images in Figma (Crop, Retouch, Filters & Effects) using TinyImage

Video Transcript

Today I’m going to be showing you a quick tutorial on how you can edit photos and images in a Photoshop-style editor 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 actions icon at the bottom and click on that, then just search for TinyImage. Under the Figma plugins tab, if you click on TinyImage, 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’s just going to let you run the Figma plugin from your Figma plugins list. I’ve already clicked on the save icon, so I’m just going to go back to my Figma canvas and right-click anywhere. Then go down to plugins, go down to saved plugins, and then just go to the TinyImage item and click on open TinyImage. That’s going to run the Figma plugin we saved a second ago.

If you’re new to the Figma plugin, it has a bunch of different features, the main one being allowing you to export compressed images from your Figma layers. It has a bunch of other features as well. I’m not going to be going through any of those today; we’re just going to be focusing on this new editor feature. You can access the editor in the Figma plugin by going to the top menu and clicking on the editor tab. That’s going to switch you into the editor mode. You can see here that we’ve got this full editor window open. You can actually resize that if you want to make it bigger or smaller depending on your screen, but this is just the default size.

There are a couple of different ways you can load in images. You can either open an image from your computer. If you click on this button here or down here, you can actually upload an image locally from your computer into the editor. Today, we’re just going to be focusing on editing images that we’ve already got in our Figma file. You can click on any of your images that have an image fill. Any layer that has an image fill inside of it can be opened up, and you can click on the use selected Figma layer button down here, and that’s going to load it up in this editor.

If you’ve used tools like Photoshop before, you’ll recognize some of these different features. We’ve got features like adjusting the exposure, brightness, contrast, and all that sort of stuff you’d expect for photo editing. We can adjust those and also reset them if we want to jump that back. You can also do things like change the color. If you want to change the temperature of the color, you can do that, and the tint and all that kind of stuff for photo editing, saturation, vibrance, all that sort of stuff. You can also do auto balancing as well if you just want it to automatically set those numbers. Again, we can reset that if needed. Also, if you’re familiar with using curves, you can plot those down here, allowing you to easily do those.

I’m just doing a few of these because I also wanted to show you the history tab. As you’re making all these edits to your photos, going through these various features, you can go up here to either just undo and redo those edits really quickly, or if you’ve made a bunch of edits and you want to go back and forth in time, you can click on this history button up here. That’s going to allow you to jump back to any of those edits that we’ve just made in those prior actions. We can jump between those. If we made a mistake or want to go back a few steps or forward a few steps or compare different steps, you can just use this history tab. That’s a really easy way of making those changes and backtracking, going through all the changes you’ve made in a history way, just like you would in Photoshop.

Another cool thing you can do is a before and after. If you click on this before button and hold that down with your mouse, you can see down here in the corner, it’s changing the before and after label, and also the image is changing. Before is just the original layer as we can see it in our Figma file here. If you hold that down, you can see that before and then compare it with the after. That’s a really quick way of doing that. You can also compare it with a slider. If you want to click on this compare button here, that will enable this slider comparison. You can actually see what the edits are looking like with different parts of the image. That’s a really nice way of previewing it as well. You can go through and adjust all of those settings as you need to. You can do things like sharpening and all the other kinds of things you’d expect from a photo editor.

We’ve also got filters as well. For example, if we wanted to use some of these presets, we can do that as well. If I just go ahead and click reset all edits first, I’m just going to reset all of the edits that we’ve made just to reset that back to normal. What we can do is apply some preset filters. If you just want a really quick kind of filter, you can click on any of these, and that is going to automatically apply some nice presets if you know the style that you want. That just means you don’t have to go through and tweak all of those different elements.

We’ve also got effects. If you go to the effects panel, similar to Figma, you’ve got a list of effects you can layer on top of each other. If you just select the filter or effect that you want and then click on the add button, that’s going to layer that onto the effects list. If we zoom in here, which you can do either using your mouse scroll wheel or the zoom settings down here, you can zoom and pan around. I just wanted to show you that zoomed in so we can see the effect. You can see here the blur effect that we’re applying. We can see that nice and clearly. Again, you can layer these on. If you wanted to add another effect like film grain, just click on that option and click on add. You can also adjust things like the intensity. You can see here we’ve got the film grain appearing on the photo. You can change the intensity, show and hide those effects. If you want to temporarily show or hide any of those, you can quickly do that. You can also rearrange them. If you want to shift one above the other, you can definitely do that, or you can delete one of those effects entirely. If you wanted to delete the blur, just click on this trash icon, remove effect, and that will actually just remove it.

Once you’ve done these effects, you can then add them into your Figma file. You can either click on the insert image button here. If you click on insert image, that is going to insert the full image into your Figma file as a brand new layer. That’s going to give you the full resolution edited image. You can see that’s looking really good in there. The other thing you can do if you want to swap the fill, for example, we’ve got this image fill in here. If you wanted to just replace that entirely, you can do that as well just by clicking on the replace fill. If I click on that, that will basically replace the existing fill. That’s now overridden that existing fill, and that can be another good option as well. I’m just going to undo that so we get our old fill back for a second. I’m going to delete the other one. You can also download to your computer. If you wanted to download this as a JPEG, for example, this edited image here, you can just click on download. That is going to download the image to your computer, saving it anywhere locally. When we open that up, you can see here in our file browser, we’ve got the filtering effects and the film grain effects all saved out nicely.

You can save a project. If you wanted to save this project with all these settings and come back to it later, you can actually do that as well. If you click on the save project button in the header up here, I’m going to click on that now. Once that pops up, you’ll notice that it’s got the image layer name plus this TinyImage extension. You can just go ahead and save that anywhere to your computer. That means if we now close off the TinyImage Figma plugin, if I just close that up and restart it, you can see we’ve now got a blank editor. All of that previous work has been removed. What we can do because we just saved the project is click on the open project button in our header here. We’re going to find that TinyImage file that we just saved a minute ago. Click on that and then just click on open. You can see it’s opened up the project. All of the existing image data and all of the filters are there. For example, if we go to the filters, you can see that it’s got the soft matte filter applied like we had before. If we go to our effects panel, it’s saved the effect that we added. It’s got the film grain effect just like we had it. You can continue working on the image in here by loading that saved TinyImage file.

Another thing that might be really helpful is you can also apply these settings to multiple images at once. For example, if we know that we really like this film grain effect and this filter effect and any other tweaks that we may have made in our image layers over here, you can apply that to multiple Figma layers at the same time. The way to do that is just by selecting the Figma layers, the Figma image layers that you want to apply that effect to. We can select these images here, and then you want to click on the batchedit button in the top right corner here. You can see it’s got batch edit with four selected. If you click on that, that’s just going to open up this little popup here, allowing us to apply those filters or those image editing settings to multiple images all at once. It’s giving us a little bit of an option to apply those edits and also list out what those edits are. You can see that the edits that will be applied are the soft matte filter and the film grain because those are the only two edits that we made. It’s just giving a summary of what those edits are going to be. You can also toggle if you want to compare what those look like. We can see here that the filtering is actually being applied as we’d expect.

You can download this as a zip file to your computer. If you just want to download them without touching your Figma file, you can save those edited images. Just click download zip in that case. Save it to my desktop. If we open up that zip file and open up the folder, you can see here that we’ve got our originals. Because we’ve got this include originals in zip file check enabled, that’s going to include all the original assets. We’ve got all the original unedited images, and we’ve also got another folder for edited images. You can see here these are the ones with the soft matte and film grain effect applied. Those are just local files. Of course, you can also insert those into Figma. Just click on the insert button down here, and that is going to automatically insert those four images with those editor settings applied in bulk. That’s a really easy way of automatically applying filters or automatically applying photo edits to as many layers as you need just in one click without having to manually go through all of those and click on each one individually.

You’ve also got cropping, which means that you can load up an image. For example, if we load up this image here of this portrait and use that selected Figma layer, I’m just going to discard the edits there. If we wanted to open that up and crop a portion of this, we can select the crop tab over here. Just click on the crop and resize button over here to open up the cropping editor. Now we can do things like set an aspect ratio, for example. We can manually change that aspect ratio as well if we want to just do it freeform. You can basically just change that to whatever you want. If you just wanted to crop in on this face here, you can do that and just click on this little magnifying glass to automatically center that. You can also do rotation. If you drag this rotator down at the bottom, that’s going to allow you to rotate that. You can also flip, of course. If you wanted to flip that image around, you can do that as well. You can also rotate it, doing a full rotation or these smaller rotations as well. When you’re happy with that crop, all you do is click on the apply crop button up here. That is going to apply the crop into the editor. Now we’ve got a cropped image which we can either apply more filtering to or just leave it as is. Of course, we could have replaced the fill or downloaded it as a JPEG, PNG, or WEBP file.

One final thing I’ll touch on before we finish the video is retouching. Retouching can be useful as well if you want to touch up certain parts of an image using a clone tool. You can do that using the Figma plugin. For example, if we wanted to remove this logo from this hat, you can do a bunch of different options. In my case, I would probably pick the content-aware fill. That means you can essentially use the brush over here to just highlight the area that you want to remove or fill smartly. Just highlight that with your brush, and then click on the apply fill button down here. That is going to magically use the brush to content fill that area based on the content around the image.

I’ll leave it there for today. I hope that’s been helpful if you’ve been wondering how to do some more advanced image editing and photo editing work directly inside of Figma without having to jump back and forth between tools like Photoshop or other image editing software. This is hopefully going to give you 80 to 90% of what you need at most times. Hopefully, that helps your workflow if you’ve been wanting a tool like this in Figma. Thank you as always for watching, and we’ll be back with more Figma tutorials like this one.

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