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?

Improve this question
6
  • 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
    Commented May 27, 2015 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
    Commented May 27, 2015 at 11:22
  • Photoshop can directly read pdf so whetever you like. Illustrator files are PDF, but special kind
    – joojaa
    Commented May 27, 2015 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
    Commented May 27, 2015 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
    Commented May 27, 2015 at 13:49

5 Answers 5

Reset to default
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.

Improve this answer
2
  • is there a free alternative?
    – Babbzzz
    Commented Jun 26, 2017 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
    Commented Jun 27, 2017 at 7:48
2

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.

Improve this answer
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.

Improve this answer
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.

Improve this answer
0

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

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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