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 — You can’t open them in Figma
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
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. Magicul is a direct psd to .fig conversion
I’ve used Magicul a few time since January to open Photoshop designs in Figma.
It works great. Let me show you how to do it.
Demo: Magicul Photoshop to Figma conversion
Let’s see what Magicul can do with this UI kit.
Find the PSD to Figma conversion on their website. This is what it will look like once you’re in the right place.
Upload your file.
You need to wait 20 seconds to fifteen minutes depending on the size of your files, the number of artboards, and your internet connection.
The preview looks promising.
Pay for the conversion.
I buy credits to lower the cost price average per file. It works out to about $50 a month for 8.3 months. I think this is reasonable considering the amount of time it saves me. It takes a very long time to manually export svgs and pngs from Photoshop and recreate the designs in Figma. For this conversion, I have a free coupon.
The Conversion
As soon as I opened the converted file, Figma started telling me that I don’t have the font SFUIText size Medium.
I found this article that will help you recover fonts in Figma if you have a similar problem.
Nice! Look at the layers.
Photoshop looks like torture when put side-by-side the sensible Figma frames.
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.
Figma can open Sketch files.
Avocode works by first converting Photoshop to Sketch and then you can open your 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. The first month isn’t billed until after the trial period.
I did all that and converted the file.
Results: Avocode PSD to Figma Conversion
Let’s open the converted Sketch file in Figma.
I think I just wasted $5, but let’s take a closer look.
All the elements have disappeared.
Only my buttons survived.
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.
If I’m doing something wrong please tell me in the comments, but yeah, this has been my experience with Avocode’s Photoshop to Sketch and then Figma conversion.
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
Magicul 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.
I don’t consider exporting svgs and pngs from Photoshop and reassembling them in Figma a viable solution since this takes hours, it’s soul-crushing work and is a massive productivity bottleneck.
PS: I think the whole thing is silly and all design tools should work together.
