How to import 3D model files to Figma with one click using Convertify

Video Transcript

Today I’m going to be showing you a quick tutorial on how you can automatically import 3D models into Figma using the Convertify Figma plugin. To get started, all we need to do is go to our Figma file, go to the little actions icon down here at the bottom, and if you search for Convertify, click on the Figma plugins tab and click on the Convertify 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 will 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. I’m just going to go ahead 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 basically helps you to export files from Figma and also import files into Figma. In today’s example, we’re going to be using the import tab. I’m just going to click on the import into Figma tab up here. I’m going to change the default option from Adobe XD and just go ahead and change that to import 3D to Figma. That’s going to load up this little selection down here. What you need to do is basically just drop in a 3D model file. That could be a glTF file, a GB file, or an OBJ file. Sometimes they can also include secondary files like BIN files and MTL files or other textures. If you do have multiple files for your model, you can just go ahead and either zip those up into a single zip file and drop that in, or you can just drag and drop all of the files at once, and that should work as well.

In today’s example, I’ve just got a few different files that I’m going to load up. The first one is just a glTF file inside of a zip along with those texture files I mentioned. I’m just going to drag and drop this zip file here. As soon as I drop that in, it loads up a preview. I can basically go ahead and manipulate that 3D preview right here in the Figma plugin window. That allows me to do things like rotate the image, zoom in, and drag the image in different positions. Then I can just go ahead and click on the add to canvas button when I’m happy. That’s going to allow me to automatically insert that into my Figma file. If you want to edit that, if you just want to play around with different angles or different positions, you can go ahead and rotate that again and click on update canvas. As long as you’ve got that layer selected that we just added, it’ll automatically go ahead and update that for you.

If you want to load in a new model, all you need to do is either click on this load another button down here or you can just drag and drop your model file directly. I’m just going to go ahead and drag and drop this file here. This time it’s just a GB file. I’m just going to drag and drop that into this load another drop zone area here. That’s going to load up a brand new 3D model inside of the Figma plugin. Once again, when I’m happy with it, I can just go ahead and click on add to canvas. That’s going to load that in. If I want to rotate that or move it around and update it, I can do that as well.

Now we’ve got two different models. I’m going to load in a new model now that’s a bit more complex. I’m going to load in a car model, which is just a Porsche model. This one’s about a 20 MB model file just to show you a bit bigger one. This is also a GB file, so I’m just going to drag and drop that into here. Once I load that up, you can see again we can obviously rotate that and move it around. This one’s a much higher detailed one, so you might want to zoom in a little bit more just to get that detail showing off a little bit better. Of course, we can move that around like this as well and position it how we want. Once we’re happy, just click on add to canvas. Again, that’s going to add that in just as we’d expect.

In terms of where to get these models from, you can basically go to any site that offers these kinds of models. The one in the tip in the Figma plugin is just one that links to Sketchfab. You can go to sketchfab.com and sign up for a free account. The link in the Figma plugin that I showed a minute ago says if you need a model, you can browse the 3D models on Sketchfab. This link just goes directly to this page here and allows us to browse all of these free models that we can download directly to our computer and then import those directly into the Figma plugin.

For example, I already downloaded this Sheba model. I just went ahead and opened that up. Down here, you just want to click on the download 3D model button. It’ll give you a list of different formats you can download. I would recommend either the GB format or the glTF format. You can just go ahead and download whichever one you prefer. In this case, I just used the GB format with a texture size of 2K, which is a bit higher resolution. Just click to download, and then I can just drag and drop that downloaded file directly from my computer. I’ve got this Sheba.zip file. Drag and drop that in, and you can see that’s loaded up the model instantly from the Sketchfab site that we just downloaded. Again, you can just drag and drop that around. You can move the model around, zoom in, shift the perspective, and basically get it however you want. Just click on add to canvas, and that’s going to add that right in just as you’d expect.

That’s basically it. I just wanted to keep this really short and show you how to import these 3D models directly into your Figma files. This is a really flexible way of getting 3D content into your designs without having to go through any other weird software. You can just do this directly into Figma. It’ll recognize those file formats, and you just position it in here and add that in directly. You’ll be able to use a bunch of different 3D models and 3D content inside of your Figma designs.

Just a super quick one that’s worth flagging. If you’ve already added a model in and you’ve rerun the Figma plugin since adding that model, you won’t be able to load that model back from Figma; Figma won’t keep those stored. It’ll work if you’ve got the session saved. If you’ve been adding those 3D models into the Figma plugin in the same session and you haven’t closed the Figma plugin, it’ll keep that model in memory. You can update the canvas without reloading the model from your computer. If you’ve already loaded a model and then closed the Figma plugin, you can see here that it’s just letting you know the source files aren’t in the Figma plugin memory. If you wanted to edit that again, you would basically just have to drag and drop that original file back in.

For this example, I can just drag and drop this marble model back in. Now we can basically update the canvas if we’d like. We can click on update canvas, and that will work once again. I just wanted to flag that in case you’re wondering why that’s happening. That’s just because it’s not keeping the model stored in Figma. Otherwise, it would be really big to store that in your actual Figma file, and you wouldn’t really be able to do it. Anyway, just wanted to give that heads up. Feel free to give this feature a try. If you’ve been wanting to load 3D models into your designs, this is going to be a really easy way to get started. Feel free to browse either sketchfab.com or just Google for free models, and you’ll be able to automatically upload those into Convertify and add them into Figma. We’ll leave it there for today. Thank you as always for watching, and we’ll be back with more Figma tutorials like this one very soon.