How to export Figma to Adobe Photoshop (.psd) files with one click using Convertify

Video Transcript

Today I’m going to be showing you a quick tutorial on how you can export your designs from Figma to Photoshop PSD files with one click using the Convertify Figma plugin.

To get started, all we need to do is go to our Figma file. Go down to the actions icon at the bottom here. If you click on that and search for Convertify under the Figma plugins tab, 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, and that’s just going to save it to your Figma plugins list. I’ve already clicked on the save icon, so I’m just going to go back to my Figma canvas. I’m just going to right-click anywhere and then go down to plugins, then 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.

By default, the Figma plugin will export Figma to Sketch files, but there’s a whole bunch of other export from Figma options down here and also import to Figma options. Today we’re just going to be focusing on this one down here, which is called export Figma to Adobe Photoshop. If you click on that, you can basically then have the option of exporting the entire page, so all of these artboards out to an Adobe Photoshop PSD file. Or if you only need selected artboards, you can just select those frames on your page and then click on the export selected frames button. For today, I’m just going to keep it simple and export the whole page. I’m just going to click on this export this page button with my export Figma to Adobe Photoshop option selected up here. I’m just going to go ahead and click on that now. That’s going to go through every single layer in your page or in those artboards, and it’s going to convert all of those into a single PSD file. You can see here it was pretty quick; there are only five artboards for this one. It’s going to say that your converted PSD file is ready. You can just go ahead and click on the download PSD button in the footer down here. Click on that, and you can then save that anywhere to your computer directly. I’m just going to save that to my desktop. If I now double-click that PSD file, that’s going to open it up in Adobe Photoshop.

You can see here we’ve got all of our artboards that have been exported from Figma. In our PSD file that we’ve just converted, you can see that we’ve got all of these as individual layers. We can resize and edit those. We can edit text; we can edit all of those content layers as you can see in our layers panel down here. Those are all being included. You’ll notice that the icons have all been carried over, which is really great. We can edit those if we need to as well. These are all editable layers. Instead of manually recreating all those layers from Figma into PSD if you need to work with the designs in Photoshop for any reason, this is going to be a really easy way to get started. As you might have seen before, this feature is still in beta. Although it does work, there might be a few bits and pieces that aren’t quite exactly right. You can see some of these tags over here; some of the measurements as far as these tags go are a little bit different. Some of these are just related to how Figma and Photoshop render certain things as well. In any case, this is going to get you very far with that import process, and then you can just tweak anything that you notice that isn’t 100% correct.

Just to give another example, if we also wanted to do a bigger page like this landing page, for example, which is just a single frame, we can run the Figma plugin by just clicking anywhere, right-clicking on the page, going down to Figma plugins, and then going down to saved Figma plugins, and clicking on the Convertify item as well. That’s going to fire up the Figma plugin one more time in this other Figma file. Again, we’ve only got one frame, one long artboard on this frame for this website mockup. We’re just going to export that entire page. I’m just going to click on export this page. Once again, it’s going to go through all of the layers. There are 584 layers in this particular frame. It’ll give you an estimate, but often it’s much quicker than the estimate.

Once it finishes bundling the PSD file, it’s going to tell us that the converted PSD file is ready. I’m just going to again click on the download PSD button here, save that to my desktop directly, and I’m going to double-click on that new PSD file on my desktop. That’s going to open up a new tab in Photoshop. You can see here it’s saying some of the text layers might need to be vectorized before they can be used as vector output. I’m just going to leave those off for now because I believe a lot of these text layers have a font that I don’t have installed on this particular machine. You can see here it’s got a little warning saying that the font isn’t installed. I won’t be able to edit those until I actually install the font. That’s going to look a bit odd. You can see here it’s rendering a little bit differently than in the Figma file. But all of the layers have been included. We can see we’ve got all of the content layers here. We’ve got all the image assets. We’ve got all these icons. All of those are being carried over from Figma as we’d expect. Again, you can see in the layers panel, these are all being reflected from the Figma layers down here. These are all being named the same. All of the content structure is going to be the same as far as the layers go. You’ve basically got direct access to all of those individual layers to edit however you like. Once again, this is just going to save you a whole bunch of time if you are needing to go from Figma out to Photoshop. This is going to be a really easy way of automatically doing that without having to manually recreate every single one of those layers in PSD, which would be quite painful.

That’s basically it. I just wanted to run through a couple of really quick examples just to show you how to do that using the Convertify Figma plugin. It’s literally just this one-click process now where you just open up your Figma file, select the export Figma to Photoshop option, and either click on the export this page button or if you only want to export a selection, just click on the parent level frames in Figma, select any of those, and you can just export those selected frames out on their own. I’ll show you what that looks like really quickly, just to give you a full walkthrough. In this case, I’m just going to export these three frames. I’m just going to export those ones. I’m going to click on export selected frames this time with those three layers selected. This time, it’s just going to take those three frames into account rather than doing the whole page. If I save that one last time to my desktop and open that up, you can see here that this time we’ve just got those three artboards that we exported from Figma. Because that’s just reusing the position of those artboards from Figma, you can see that because we didn’t include those middle two, those are being removed. Of course, you can rearrange that as needed in Photoshop as well. That’s what it looks like to export a subset of the frames if you don’t want to export an entire page in case you’ve got a massive amount of frames on the page and you just want a few of them into Photoshop.

We’ll leave it there for today. I hope that’s been useful. If you or your team has been wondering how to automatically get your Figma designs into Photoshop as PSD files, this is an option you can now try out just by firing up the Convertify Figma plugin and using that new option in the export options. Thank you as always for watching, and we’ll be back with more Figma tutorials like this one very soon.