6

I've been wanting to learn Sketch but am not sure what the process is once it comes to handing over the design to the developer. Most developers won't have Sketch as it's mac only, and even then most won't know how to use it.

Here is a solution I found on youtube, but even the author does not vouch for it as ideal:

https://www.youtube.com/watch?v=qFMMqjqSJzQ&index=51&list=WL

He basically just exports from Sketch to Illustrator, then from Illustrator to Photoshop, which creates some messy layering.

Is there a better way?

  • Try exporting a pdf and place that pdf as smart object in Photoshop. Not much better you can do without soem havy sreamlining of your workflow. – joojaa May 27 '15 at 11:20
  • exporting a pdf from sketch or illustrator? The main reason you would want to give a developer a photoshop file is so that they can measure dimensions, check fonts, layer styles, colors. Just placing a smart object in a PSD doesn't let you do that...? – rjtkoh May 27 '15 at 11:22
  • Photoshop can directly read pdf so whetever you like. Illustrator files are PDF, but special kind – joojaa May 27 '15 at 11:24
  • How well export import chains work for said workflows depend greatly on what you need. There is a reason why its not called save. And as you have niotcied theres a reason why people use adobe software. Sucks but tahst the way it is. – joojaa May 27 '15 at 11:25
  • I'll second that - stick with Photoshop. Problem with vector artwork in PDF and Illustrator is that it scales nicely, which can end up with incorrect dimensions on finished website. True story on what happened when sending PDF for client approval (and to developers for programming) instead of PSD - oss-usa.com/blog/… – Max Tokman May 27 '15 at 13:49
3

You can use Zeplin. It's an app that shares mockups right from Sketch or Photoshop, including all measures and color values. No extra effort from your side and your developer will thank you.

  • is there a free alternative? – Babbzzz Jun 26 '17 at 6:30
  • @Babbzzz, you can give Invision Inspect a try. They have a free plan which does a good deal of things Zeplin does. – Modestos Kaffes Jun 27 '17 at 7:48
1

The first thing you need to consider is what exactly the developer does with your photoshop files to take them from working file to website. Developers use your file to see your font sizes, styles and margins. They also use it to extract image assets.

The developer my agency uses has Sketch & mentions that he prefers Sketch files to PSDs because they are cleaner and easier to read. However, for a developer that doesn't have Sketch it's as simple as creating a handoff kit to go along with even a png or pdf of your overall screen designs. enter image description here This is a part of the handoff that I create. Those details are already available to you. And instead of the developer having to guess at different states and margins, you can be in complete control of your final designs this way.

1

Another solution is - Icons8 Lunacy. It is free and works offline. Developer can open a file, copy CSS of any object with one click and copy plain text for any text layer. And new features are constantly being added.

1

Best thing would be to create a handoff like Peacockerie suggested, but sadly these are very time consuming.

Luckily there are a lot of third party apps and plugins you can use. My personal favourite would be Sympli, but don't be afraid to shop around for a solution that works best for you and your developer. Keep communicating and evaluating.

0

I'll chip in with another alternative: avocode, which opens both psds and sketch files.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.