How to convert Photoshop design to a layered Sketch file?
Design Inspiration

How to convert Photoshop design to a layered Sketch file?

Matous RoskovecMatous Roskovec

Are your switching to Sketch from Photoshop, but don’t have the time to recreate all your designs? In this tutorial, we’ll show you how to do it automatically in a matter of minutes.

Using our PSD to Sketch Converter is really no brainer. Let's just quickly go through the flow.

1. Go to

NOTE: Please make sure to read this section, about what can be currently converted. (TLDR: It converts layers, layer groups, text layers, vector shapes, basic layer effects, layer masks, guides and more.)

2. Choose your PSD, add an email address, and wait for the upload

The upload, processing, and conversion time (between you see “Completed” and the moment when you receive the e-mail with a download link) depend on the size and complexity of the PSD file. The smaller the file, the faster the conversion.

3. Check your e-mail box and download your Sketch file

By now, there should be an email with a download link in your email box. Open it and click “Download Sketch file”.

Notice that the Sketch file size is significantly smaller. Go vectors!

4. Before you open the design…

Well, you can open it just now, but bear in mind that:

  • This is a Beta version and only these design features can be currently converted.
  • All converted Sketch designs can be opened in Sketch app Version 43 and later.
  • You should have installed all of the fonts from the original PSD file to be able to see them in Sketch.

Here are some PSD to Sketch Converter results:

Join 30K+ designers & developers by subscribing
to our monthly newsletter

5. Try it and let us know what you think about the result

Photoshop data format is significantly different from Sketch JSON. Some things — like Smart Objects or particular layer effects — simply don’t exist in Sketch, therefore cannot be replicated.

List of features we’ll be adding/fixing soon:

  • Text layers (bounding box line height)
  • Circular gradient, Radial gradient
  • Layer styles (Inner glow, Outer glow)

In the meantime, if you stumble upon a problem, please report it here.

Did you like this article? Spread the word!

What is Avocode?

It’s an all-in-one tool for teams that want to code and collaborate on UI design files 2x faster.