If you are working in Photoshop and need to create a prototype, you might encounter difficulties directly opening or importing your Photoshop files into Figma. Unfortunately, Figma doesn’t support direct opening of Photoshop files.

However, there is a solution to this problem. If you have access to Adobe XD or know someone who does, you can utilize XD as an intermediate step. By opening your Photoshop file in XD, you can seamlessly transfer your design with all its elements, including folder structure, layers, and naming conventions, remaining intact. After successfully completing the transition, save your file in XD.

Now, regarding working in Adobe XD, in theory, it is possible. However, considering recent developments, it appears that Adobe XD might not be available to subscribers anymore. Adobe acquired Figma for a substantial amount, $20 billion dollars, indicating that Figma could potentially become the primary application going forward. Therefore, it would be wise to transition to using Figma as your wireframe, mockup and prototype tool of choice.

Working with Adobe XD

Don’t fall for those videos claiming you can easily copy and paste an artboard from XD to Figma. It doesn’t work that way. If you try, you will end up with a flattened image, and that’s not what you’re aiming for. So, best to steer clear of that method!

Using Figma Plugins!

Instead of going down the copy-paste route, we are going to use a cool plugin to make things work like magic. First, let’s open up a fresh file in Figma. Look up to the top here and find this icon, then hit the resources icon. Now, do a quick search for ‘Convertify Sketch/Adobe/Google.’ If you don’t have it yet, no worries, it should show up for you. Click on that plugin, and you should see the ‘run’ option. Hit that ‘run’ button, and you’re good to go!

It will say Figma > Export Figma. You will see a down arrow. Click on it to expand a drop-down list. Now, scroll on down and find “Import Adobe XD to Figma.” If your Adobe XD prototype is all set with connections, colours, and text styles, you can totally transfer it to Figma without any hassle. Just remember, there’s a slider button you need to slide to the right to make sure everything gets included in the transfer.

Import Adobe XD to Figma

Okay, now go ahead grab your XD file and simply drag and drop it right into that field. Alternatively, you can click on the field and manually select the XD file. Let me show you with a cool example we did in class how incredibly easy it is to convert an XD file to Figma. Watch me as I drag and drop my file into this dropbox area right here. It’s that simple!

It took a matter of a few seconds. There we go, it’s imported our XD file automatically into Figma. If we have a look at the layer breakdown here, just to confirm that it’s pulled in everything as we’d expect. You can compare the original design in Adobe XD you can see here that these are the layers that it originally had and if I jump over to my Figma file you can see that those same layers have been imported.

If you wish to do so, click on the link provided in the description. It will promptly take you to the Figma plugin page. Alternatively, you can also access it through the resources icon, as shown a minute earlier.