How to import Adobe Photoshop (.psd) 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 import your Photoshop PSD files into Figma automatically with one click using the Convertify Figma plugin.

To get started, all we need to do is go to our Figma file. If you just go down to the actions icon down here, you can click on that and then search for Convertify. Under the Figma plugins tab, if you click on the Convertify result, you’ll be able to 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 will let you save the Figma plugin to your Figma plugins list. I already clicked on the save icon here, so I’m just going to go to my Figma file, right-click anywhere on the canvas, 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 that we saved a second ago.

If you’re new to the Figma plugin, the way that it works is it basically gives you a bunch of different options for importing and exporting different file formats from Figma or into Figma. This allows you to automatically convert a bunch of layers from one file type to another. But today, we’re going to be focusing on clicking the select box here and then going down to the import to Figma section. We’re going to click on the import Adobe Photoshop to Figma option. This is basically going to allow us to drag and drop a PSD file and import that PSD file into Figma.

I’m just going to show you three different examples of three different Adobe Photoshop PSD files. I’m going to import each of those into Figma and show you what that looks like for each of these different designs. We’ve got the one we just had a look at, this furniture website, which is quite a big long furniture website. We’ve got this one, which is more of a landing page. This is kind of a yoga website landing page. Then we’ve also got this more minimal portfolio site as well. I’m going to import all of these and show you how they look in Figma and show you what the process looks like now.

To get started, we’ll just do this minimalist one first. I’m just going to drag and drop my PSD file directly into the drag and drop area in Convertify here with the import Adobe Photoshop to Figma option selected. That’s going to load in the Photoshop file into the Figma plugin. Once it loads up, it’s going to start importing those layers. You can see it’s just finished. This is a pretty quick file. If we get the Figma plugin window over to the side here, it’s gone ahead and imported all of those layers from Photoshop. We’ve got our image layers, we’ve got our text layers. These are all editable as you would expect. The image layers are all separated as well. You can see here this is an individual image layer that we’ve got here, and that’s resizing and scaling up nicely. Of course, we’ve got some more text over here as you’d expect. Because these are all editable, we can move them around. We can change them just as we would in Photoshop. That’s going to give us the flexibility of changing all of that design data in Figma without having to edit it all in Photoshop if we don’t want to. That’s basically what that looks like there.

Now I’m going to close off the file here and I’m just going to import a new one. We can actually just leave this page open, and I’m going to now drag and drop another file. I’m going to drag and drop the yoga PSD file into the Figma plugin as well. Again, it’s going to load up the Photoshop file. It’s going to create a brand new page in your Figma file and it’s going to import that one as well. You can see that one was also quite quick. It’s a fairly small Figma file as well. It’s gone ahead and imported all of those PSD Photoshop layers into our Figma file here. We can edit those again as you’d expect. We can edit all of this content in Figma rather than having to do it in our Photoshop file. That’s looking really good.

You’ll notice there’s a couple of small inconsistencies. For example, in the original PSD, you’ve got this button here with the text aligned more vertically. This one in Figma, just due to the different ways that the properties are rendered, the line height here might be throwing that off a little bit. You might just have to go through and tweak a few of those just to get them 100% pixel perfect, but it is going to go through and import all of those layers and give you a really strong starting point rather than migrating those files layer by layer from Photoshop into Figma.

The last one I’m going to show you is this longer, more detailed one, which is the furniture website that we just loaded up a preview of a second ago. This one’s quite a bit bigger than these landing page style designs. I’m going to again just drag and drop the furniture.psd file into the Figma plugin. Just dragging and dropping it into this drop zone here. That’s going to again load up the Photoshop file. It’s going to create a new page in Figma. You can see it’s importing all of the layers in real time automatically. You can see it pre-populating all those layers. We’re done. It’s now finished importing the Photoshop file. Because that was the last one, I’m just going to move this over to the side here and get that out of the way so we can zoom in and take a look.

Again, you can see that all of the content has been imported as individual content layers. Those are all looking really good. We can see we’ve got our icon layers here, and we can edit those. We can also see that these are all individually editable layers as well. We can move those around and change those as needed. Of course, we’ve also got the similar alignment issue that we saw a minute ago, just with the vertical alignment being a few pixels off. Again, just due to how Figma and Photoshop render text quite differently. You can see that this extra bit of space here in Figma is probably being accounted for differently in Photoshop. You might notice a few of those little things here and there, but again, it’s importing every layer as a really strong starting point. You don’t have to manually go through Photoshop and manually copy and paste each of those layers, copy and paste each of the text styles, font styles, colors, all that sort of stuff. You just get that all in one go, and you get a really strong import from the PSD file that you don’t have to manually recreate.

That’s looking really good. We can see all the layers here. Again, these are all editable individual layers, so you don’t have to worry about reimporting those. Again down here, you’ve got all of this as editable text. These are all grouped based on their groupings in Photoshop. All of the layers from Photoshop are being imported with their layer names included, the structure included, all of the groups being included, and that structure is being imported layer by layer just to give you a really accurate representation of all that there.

That’s basically it. I just wanted to run through a few different examples of importing these PSD files from Photoshop into Figma, which we can now do automatically with the new import Adobe Photoshop to Figma option under the import to Figma section in Convertify. You’ll notice there’s a little tip down here just saying that the Adobe Photoshop import feature is currently still in beta, as it’s just been released. If you do notice any issues in your own imports, feel free to send an email and attach your PSD file. That’d be really helpful just to narrow down any edge cases or anything that could be improved with the imports because, as you would know, there are many different layer types in Photoshop and different properties, and they all kind of work a little bit differently to how they do in Figma. It’d be great to catch any of those and make the imports even closer to 100% perfect.

I hope that’s helpful if you’ve been wondering how to import your PSD files that you might have laying around from Photoshop or if you’re working with other stakeholders or other companies that you’re just being forced to work with and they use Photoshop while you want to use Figma. This is a really easy way of getting those PSD files into Figma without having to manually wade through those layers in Photoshop and copy and paste those over. This is going to automate that, streamline it, and you can go ahead and start importing your PSD files into Figma starting from today. Thank you as always for watching, and we’ll be back with more Figma tutorials like this one very soon.