Need to transform design to code? Don't hardcode it, Avocode it!
See how
GET A FREE MONTH
Design
·
LAST UPDATED
June 19, 2017

How to efficiently share Sketch designs, artboards and assets with developers

Content Marketing Manager at Avocode.

"I write for those who want to be seen..."

Sharing Sketch designs with developers who are working on Linux or Windows

Currently, the Sketch app only runs on macOS. Also, there is no tool to my knowledge which would allow you to edit a Sketch design on Windows or Linux.

However… when it comes to developers, they don't really need to edit the file. They just need to open it, inspect it and export assets for the project they're building, right?

So, how do developers tackle this?

Well, if they are on Mac, they can buy the Sketch app (and pay for a tool which has been built for designers, not developers).

When they are on Windows, they can only work with Photoshop and Illustrator designs, so they will ask the designer to somehow hack and convert the Sketch design to Illustrator.

And if the developer is on Linux and can't run Illustrator in Wine he can ask the designer to export all images for him, send color codes, attach a PNG of the entire design and eyeball the sizes and distances.

Whatever works, right? Right, if you're like me not satisfied with these options, you might want to keep reading.

Share designs via a cross-platform tool built for designers and developers

Let me introduce you to Avocode. It is a tool for sharing and inspecting Photoshop and Sketch designs - not just on Mac, but also on Windows, Linux and in the browser (Chrome). We've built it as a bridge between designers and developers - one can seamlessly share designs and the other can inspect and export assets without limitations. When it comes to the Sketch design format, there a few things you might like:

  • Upload Artboards directly from the Sketch app with a CMD + E shortcut
  • Your team will be automatically notified via e-mail or Slack
  • You can upload multiple design versions and keep them together
  • Anyone on your team will be able to open and inspect the file
  • The developer can export any layer at any resolution directly (You don't have to bother with pre-setting Exportables or renaming layers with special symbols like + * & or .png.)
  • You can also share the design via a public link and let others comment


This is how Avocode helps teams all around the world:

 


How to share a Sketch design via Avocode?

All you need to share a Sketch design via Avocode is the Sketch app and the Avocode app. Just sign up here, download and install the app. It will automatically install a Sketch plugin to your Sketch app.

Next, open any .sketch design in the Sketch app. If you want to upload only particular artboards, select them with the SHIFT key and hit CMD + E. You can also go to the window menu bar to Plugins, select Avocode and click on Export Selected Artboards.

If you want to upload all artboards from this Sketch file to Avocode press CMD + ALT + E.


Your Avocode app will automatically open and you will be Create a new project. If you already have a project in Avocode, just select it from the projects dropdown menu (above the green ADD TO PROJECT button).

You can keep working in Sketch during the design upload which syncs quietly in the background.

NOTE: We realize there can be situations when you have a Sketch design on your computer but don't have the Sketch app to open and upload the design to Avocode. Therefore we're working on technology to parse and render the Sketch design, so you would be able to upload the Sketch file to Avocode directly without Sketch - just drag and drop. Stay tuned; it's coming soon.

By this time, also make sure your fellow developer is invited to your Avocode team, so he/she can comment and inspect the design once you upload it.

One more thing…

Do you love Sketch? Need to convert Photoshop files to Sketch? Check out our free online PSD to Sketch Design Converter.

get guacamole
Free 3-in-1 UI kit
Are you a modern designer with taste? Get Guacamole
- a free UI kit  for Adobe Xd, Photoshop and Sketch.
Get a free UI kit
Available for: