How to add 3D Isometric Perspective to your Figma images using Convertify

Video Transcript

Today I’m going to be showing you a quick tutorial on how you can automatically turn images in your Figma file or images from your computer into 3D isometric perspective images using the Convertify Figma plugin. To get started, all we need to do is go to our Figma file, go down to the little actions icon down here, and if you click on that and search for Convertify. Under the Figma plugins tab, if you click on the Convertify item, you can run that 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 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 to my Figma canvas and right-click anywhere. Then go down to plugins and go down to saved plugins and click on the Convertify item. 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 helps you to export files from Figma and also import files into Figma. Today we’re going to be clicking on the import into Figma tab up here. Then we’re going to go ahead and change the default option from the Adobe option up here. We’re going to go down to the import 3D to Figma option down here. This is going to allow us to import images into a 3D isometric perspective. You can basically turn that flat image into a 3D isometric perspective. I’m going to show you how to do this for images from your computer, but also using images from your selected Figma layers.

For example, if we wanted to turn this particular image into a 3D isometric perspective, we could just go ahead and click on that Figma layer, then click on the use selected Figma layer button over here in the Figma plugin. I’m going to click on that now, and that’s going to load up the image in this 3D space down here. You’ll notice that it automatically loads it up into a 3D isometric perspective by default. It’s just kind of a right angle up here from a top-down perspective, but you can obviously rotate that as much as you want or move it around. You can move it around like this or zoom in and zoom out. If you want to make it bigger or smaller in the window, you can do that. You can even flip it around if you wanted to reverse it. You can actually reverse the entire image. In this case, I’m just going to leave it as the default view. I’m going to click on add to canvas, and that’s going to automatically take that source image and create a brand new Figma layer with this 3D prefix that we can now use in our designs. You can see here that that’s now been added.

We can also modify that while it’s selected. If we want to change it, we just keep that layer selected, modify the angle over here, and click on update canvas. That’s going to reframe that again into a different 3D isometric perspective. Again, we can do this for all sorts of layers. You can select this one over here and go ahead and click on use selected Figma layer again, and that’s going to now load in this other Figma layer instead. Once again, we can change that 3D isometric perspective to whatever we want. It just depends on how we want to preview that layer. Then again, click on add to canvas, and that’s going to once again add that in. We’ve got this now as a brand new Figma layer. That’s just going to add that into your canvas as you’d expect. Once again, you can toggle that while you’ve got it selected and tweak it. If you want to update that based on a different angle, you can do that, and that’s totally fine.

You can also add images from your computer. For example, if you wanted to load another one, you can click on this load another button down here, or you can actually just drag and drop a file directly into that little drop zone as well. For example, I can just drop that in here. That’s going to load in this album cover from my computer, and I can just go ahead and once again tweak that to whatever I like and click on add to canvas. That’s going to add in that image as a 3D isometric perspective as well. This is a really easy way of adding a 3D isometric perspective to images without having to use any other kind of 3D tools. You can just do this directly in Figma. Once again, you can use any files from your computer or from Figma.

If I relaunch this one here and click on image to 3D again, I can just drag and drop an image directly in here when it’s in that empty sort of state. I could just drag and drop this JPEG file, which I’ve already got in Figma, into this drop zone here as well. This Blackpink image, I can drop that in. Again, you can see that’s loaded in the image. This time I’ve loaded it in from my computer. Even though I have the original image in Figma as well, I’ve just loaded it in directly from my computer instead. Again, you can just hit add to canvas, load that in. That’s automatically going to add it for you, and you can basically just tweak it to be whatever you like.

That’s basically it. I just wanted to show you that quick tutorial. If you’ve been wondering how to add a 3D isometric perspective to images in Figma, this is a really easy way to go about it and will allow you to create this nice-looking 3D isometric perspective for any image layers. If you want to mock up things a bit differently in your designs, this is a really nice way of going about it. Feel free to give it a try with your own designs and your own files, and hopefully, it helps with your workflow. Thank you as always for watching, and we’ll be back with more Figma tutorials like this one very soon.