Categories
Conversion Figma

How to Convert Photoshop Files into Figma — 2021

View the original post

How to Convert Photoshop Files into Figma — 2021

Interoperability between UI and UX tools has become a subject of great curiosity for me. I’m mostly curious about why it’s so terrible.

Send me a Sketch file or a Figma file, and I’m grand. The problem is I work with agencies and see A LOT of different workflows.

A shockingly large population of designers are still using Photoshop for UX, and I’m always getting mockups and concepts sent to me as PSD files.

PSD Files are locked to Photoshop — You can’t open them in Figma or anything else

The file is not supported. Boooo!

Now, I’ve seen some of the best teams and the most amazing designers do all their work in Photoshop. Teams I’d like to continue working with. Around the beginning of this year, I finally snapped and set out to find a way to convert PSD files to Figma.

Disclaimer — “I waffle on for a bit. If you’d like skip this bit. There’s a big heading that will make it obvious when I’m ready to tell you about solutions.”

Why don’t I just export it as SVG and open it in Figma?

We can’t just export the design as a png, svg or jpeg from Photoshop and open it in Figma.

I mean we can, but we’ll lose all the application-specific info.

Bye-bye, layers and folders and access to styles and strokes and colours. Literally, everything that made it possible to edit the image in Photoshop is now gone. It is impossible to change these files without remaking them from scratch or extensive rework.

Let’s be clear about what counts as a Photoshop to Figma conversion

To call something a Photoshop to Figma conversion there needs to be a way to edit individual strokes and fills. The conversion must copy photoshop layers across to Figma as frames. 🖍️🖋️✏️✒️

Why go to the trouble of converting Photoshop to Figma?

Figma was built for web design and Photoshop was not.

If I had to put it down to three things I’d say:

  • Lightweighteness
  • Prototyping-abilities
  • Plugins
  • Unmatched collaboration

I’ve Found 3 Ways to Open Photoshop Files in Figma.

1. Hire a freelancer to remake the designs in Figma

lonely minions

Since it’s not physically possible to open PSDs in Figma, you need to manually redraw every rectangle, re-colour every gradient and re-group every component.

If I’m being honest that sounds like a super boring and time-consuming task, and I like to keep my workday free for big brain tasks. I’ve had success outsourcing on Upwork, and in Facebook groups specifically for design.

The more complex your design files the harder it is to hire, and the more expensive it is to continue getting quality from freelancers, all good reasons why you might want to look into this next option.

2. XD2Sketch is a direct psd to .fig conversion

Photoshop to Figma Conversion

I think that XD2Sketch is the only direct conversion from Photoshop to Figma on the internet. If you know of another, please drop that name in the comment section below, so I can check them out.

I’d sum up XD2Sketch by telling you it is still beta software or at least the Photoshop to Figma is, and XD2Sketch is expensive.

I’m not promising perfect, but after having tried all other options I’m happy shilling XD2Sketch.

I’ve used XD2Sketch since January, at least twice a month, to open Photoshop designs in Figma.

Let me show you what it can do.

Demo: XD2Sketch Photoshop to Figma conversion

Let’s see what XD2Sketch can do with this UI kit.

Here’s me at the XD2Sketch website selecting the psd to Figma conversion from the dropdown.

And this is what it should look like once you’re in the right place.

Now you upload your file.

You need to wait about three to five minutes depending on the size of your file and your internet connection. It’s really quick with tiny mock design files, but it takes its time for larger conversions.

The preview looks promising.

So spenny.

I buy credits to get the price down per file. With a batch of 25 credits, I convert about 3 files a month….so that’s, $50 a month for 8.3 months.

As soon as I opened the conversion, Figma started telling me that I don’t have the font SFUIText size Medium.

I found this XD2Sketch article that will help you recover fonts in Figma is you have a similar problem.

Results: XD2Sketch Photoshop to Figma Conversion

Nice!

Photoshop looks like torture side-by-side the sensible Figma frames.

The XD2Sketch Figma to Photoshop Conversion is Beta

Like, look at this. What is this?

Border issue after converting from XD to Photoshop

“Update — I reported this bug to XD2Sketch, or the parent company Magicul, and they’ve fixed it, below you’ll see the temporary fix I used in Figma to solve the problem.”

After some thought: Here’s my pseudocode solution.

  1. Draw a new frame inside the oversized frame
  2. Put everything in the new frame
  3. Give the new frame the same name as the oversized frame
  4. Cut and paste the new frame onto the same level as the old frame
  5. Delete the old frame
  6. Repeat with every parent frame or “artboard”

Sometimes you need to rearrange the order of frames like that, or import a font or reset all your layers. XD2Sketch isn’t perfect, don’t expect it to be. They themselves have said it’s still beta software.

In my experience, it works well enough. Shill complete.

3. Avocode — Photoshop to Figma conversion via Sketch

Avocode is another paid tool that can convert Photoshop into Figma files. It does this via Sketch.

As I’m sure you’re aware, Figma can open Sketch files. Avocode works by first converting Photoshop to Sketch and then opening a Sketch file in Figma.

Demo: Avocode Photoshop to Figma Conversion

I’ll upload the same file for demonstration purposes and we’ll see if we can convert it

Next, I press convert and it asks me to pay $5 for the conversion. You also need to subscribe to one of Avocode’s plans before you can pay $5 to convert your file, but the first month isn’t billed until after a trial period.

Anyway, I did all that and converted the file.

Results: Avocode PSD to Figma Conversion

Let’s open the converted Sketch file in Figma.

What’s going on here?

Already, you can see I’ve wasted $5, and later $35 because I forgot to cancel my subscription but let’s take a closer look.

All the elements have disappeared.

The only visual elements that survived the conversion were my buttons.

Lonely buttons

So what went wrong? Well upon closer inspection everything is there, it’s just that all the background colours were changed to white.

This would be a bit of a hassle to fix. I need to manually enter in the hex codes for all my colours and select elements one at a time.

If I’m doing something wrong please tell me in the comments, but yeah, this has been my experience with Avocode. Not always everything is white, but there’s always some issue. I’ve tested it with other design files and had mixed results. It’s possible that converting Photoshop to Sketch and opening it in Figma is too ambitious. I don’t know.

My Final Remarks

XD2Sketch is the best tool available for converting psd to Figma files.

It’s expensive, but when you bulk buy credits, it’s not as expensive as freelancers which is how I was solving this problem before.

PS: I think the whole thing is silly and all design tools should work together.


How to Convert Photoshop Files into Figma — 2021 was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.