How to convert a Sketch file into a PSD file and a PSD file into a Sketch file

*I wrote this article in Korean first and translated it into English afterward. Please consider that there might be some awkward sentences.

The number of companies using Sketch for a whole UI task has rapidly increased in the past few years. However, Photoshop is still being used a lot because of regulations in the company, it’s familiarity, and the developers who are not used to using Zeplin. You might have experienced being asked for the PSD file from a client, even after informing that you’re going to use Sketch as a design tool. On the other hand, sometimes PSD file may need to be converted to Sketch file to use Sketch plugin. (For me, I usually convert PSD files to Sketch file to use Measure plugin to make it easier to create the guideline.) Many designers are getting through a difficult time converting files between these two programs, but most of the answers in google are quite fragmentary. So I would like to share two websites, which would rescue designers who are suffering from file converting, and also share some tips you should know to save the hassle while converting.

Converting PSD file to a Sketch file

Original Photoshop file (left) and Sketch file converted by Avocode (right)

The thankful site that helps to convert PSD file to Sketch file is ‘Avocode’. Avocode also provides conversion between Sketch file and Adobe XD file as well. Once you upload the PSD file and enter the email address, the Sketch file will be transferred to your email address.

• When designing a UI screen with Photoshop, it is likely to create a text in ‘point text’ rather than creating a text box. However, when it is converted into the Sketch file, Sketch will recognize it as an extremely thin text box. It will cause a random line-break or leaving the text in a wrong location. Since it is very inconvenient to adjust all of the text positions again after converting the file, save the text in paragraph text (a.k.a text box) rather than point text in Photoshop.
• The biggest advantage of photoshop for UI work over Sketch might be the availability of various effects and filters. Effects such as color gradation and clipping mask can be implemented similarly in Sketch, but more complex effects can cause errors. So it’s better to rasterize or merge all the effects and save the file in a different name.
• If you are converting file just for guide work, it is better to duplicate original PSD file and merge layers you don’t need particularly for a guide. It is also convenient when using a Measure tool because you don’t have to waste time choosing the exact layer. However, if there is any possibility of modification on original PSD, it is cumbersome to repeat this process twice or modify the Sketch and PSD files respectively. Therefore, it is recommended to convert the file after completion, where no further modification is made.
• Since Advocode changes the file immediately without preview on the Web, it doesn’t seem to have an error in fonts unless the font is installed on your computer.

Convert a Sketch file to a PSD file

The conversion from Sketch to PSD is possible in Photopea. Photopea’s screen is composed just like Photoshop so that layers of PSD file can be operated within the website. For conversion between two programs often make an unintended difference in the position of layers, you can adjust that in advance on the screen of Photopea before saving PSD files. However, unlike in the past, the conversion is free of charge only for the first 30 minutes of every hour (ex 10:00–10:30), and conversion in any other time requires a premium upgrade.

Text symbols are all broken and moved slightly.

• Photopea keeps the hierarchy of the folder and layers as in the Sketch file, and each screen will be created as artboard in Photoshop. It is also useful as it shows the symbols in Sketch file under the artboard.
• Sadly, Photopea does not support many fonts. Photopea can recognize popular fonts such as Roboto, but in the case of other fonts, they appear to be not available, making the text appear to be missing. The text is not actually deleted but it became transparent, so you can download the file and activate the text back on Photoshop. (Too much text in a file can be quite a hassle.)
• The text symbols appear to be broken in the screen. It means that the Photopea ignores the edited text in symbol and automatic resizing. Therefore, all the text symbols appear as primary text and overflow over the text box. For example, in the image above, the card with the name of singer, date, and title is a symbol. I have changed all of these texts differently in the Sketch file but converted Photoshop file ignores the changed text and recognizes only the original symbol. It shows them all under the title ‘Little Christmas.’
• In this case, it is recommended to make a copy of the original file and to detach all symbols in the file before conversion. As it is cumbersome to modify the Sketch and PSD files respectively, it is recommended to convert only at the point where there is no further modification.
• As you can see from the tags and bottom navigation bars in the image above, the positions of the texts move slightly after conversion. You need to move the position of each text box to the right place to get the correct pixel value.

There is no perfect conversion

Errors are inevitable, even after the conversion using various tools. In particular, the position values of text often change slightly, and for tasks that require precise pixel values, such as a guide for development, additional touch is necessary to adjust these values as intended. Of course, it is also recommended to organize the layers and folders in advance so as not to work twice after converting them.

You might have been disappointed for the websites I had introduced didn’t produce a magical, perfect conversion. However, I think these websites might help someone who has wasted a few days drawing the same screen using a different program. Unless it is necessary to use Sketch, using Adobe XD which is from same Adobe company as Photoshop, can also be a solution. As someone who still loves using Sketch, I hope compatibility between Adobe program and Sketch gets better for the mental and physical health of countless designers in the world.