Sketch App Ui Design Windows

How I Started Using Sketch App In Windows

This is my first story and it won't be a long one. Actually it's more of a heads up/tutorial to people who want to use Sketch but are bound to their Windows operating systems.

Important Edit

Before you read on I want to make sure everyone is getting the most out of this article. This story is about getting Sketch on Windows, and this part won't change that. But as Sketch has been on the market for quite some time now, there are some new applications that enable you to at least view the Sketch files on your Windows pc. If you want to know how to get Sketch on your Windows pc, read on. If you want to know more about these applications, scroll down to the section "Viewing Sketch files in Windows".

About Sketch

As a Windows 10 user I am one of the many designers who cry when someone comes up with the term "Sketch". If you don't, then you have no idea what Sketch is. Sketch is an amazing app for Mac that allows you to easily create stunning designs, mostly for UI and UX designers. As Bohemian Coding (creators of Sketch) states:

Sketch gives you the power, flexibility and speed you always wanted in a lightweight and easy-to-use package. Finally you can focus on what you do best: Design.

The program itself costs $99 and only takes up about 25 MB of storage space. It uses vector graphics so your files should not be enormous like Photoshop's. By the way, it is not really fair to compare Sketch with Photoshop, although a lot of people do (and I used Photoshop too for webdesign). Photoshop was not built to cope with webdesign even though the newest updates include artboards and a so called "Design Space".

Adobe's closest program to that "genre" was Fireworks which isn't supported anymore. What I'm trying to say is that Photoshop is not a bad program, but when working with bigger files, it lacks speed and control. Things that Sketch does have and maybe Project Comet: Adobe's new competitor, but that's not for this article. On that note, let's move on!

Sketch And Windows?

But if you say that Sketch is a Mac only app, how can you run it on Windows? Is there a hack or something?

Unfortunately not. I would like to see a windows version or some kind in the future but there will not likely be one. Sketch is super lightweight because it uses a lot of OS X's core features, that can be seen in its interface. That means the entire app would have to be rewritten for it to work on Windows or any other operating system.

How To Install OS X and Sketch

But how do you get it to work? Let's get on with it!

Okay, the solution is fairly simple: get Mac on your Windows machine. Either get yourself a Hackintosh or do it my way and use a virtual machine (VMPlayer) to run OS X. I know it's not the best solution, but it works really well. I'm on an Asus laptop with 8 GB of RAM, and an SSD (a VM works faster on an SSD, obviously), and I can say it works like a charm. Also my laptop uses an Intel i7 and a Nvidia graphics card (GTX 650m). Intel tends to work better with an Apple operating system.

I do need to say that this method is not my idea. I read it on a forum and decided to find out more about OS X on a VM. Besides, I'm not really sure if the entire process is legal, so be aware of that. I saw this video (new link) on YouTube and it worked for me, so I thought : "Why not share it on Medium?". Edit: I know the links don't work anymore, they keep getting removed from YouTube. Therefore I encourage you to carefully research and find other sources, the method stays the same of course.

I know it's kind of an anti-climax but actually the only thing you have to do is watch the video and do what the instructor does, then you're good to go. I can go through every step like he does, but then I'm just copying someone who has done a very well job of explaining the process. The only thing next to do, is to buy and install sketch (a free trial is available here).

This is a solution that has certainly worked for me, I'm now able to enjoy working with Sketch and have Windows open at the same time. You can even have a shared folder that both OS's can access.

Thanks a lot for reading this. I hope you enjoyed it and perhaps are able to use this technique to enrich you designs by Sketch's simplicity in Windows!

Note

I know the original YouTube link does not work anymore and the files on my pc are over 9 gigabytes, so sending them isn't really an option. There are many other links online that will get you OS X El Capitan 10.11 on your Windows PC. I have updated the YouTube link with another one that does almost the same. I am not, however, taking any responsibilities towards anyone installing VMware.

Viewing Sketch files in Windows

So, if you don't want to or are not able to install Sketch via VMWare there are ways to only view Sketch files in Windows. It's definitely not the same as editing, but it can be a useful tool to have, especially for developers. There are, as we speak, quite a few tools available. I'll be listing 3 of them, with each one of them doing things a bit differently.

Lunacy

Lunacy is developed by the company called Icons8. They are currently in Beta but provide you with enough tools to usefully view a Sketch file. You can view the css properties of a layer you select and export them. To quickly switch artboards you just click it in the left window panel and the view will jump to it immediately.

Exporting files as png is available too, also in 2x or 3x resolution, so you can enjoy those juicy images on your retina screen (well not actually, because we don't have Macs!).

Anyway Lunacy is the first tool I know of that let's you view Sketch files directly in a standalone Windows application without the need of registering first. Just install the app and get started, for free! Also, they are planning on letting you edit the files, which will be a huge thing!

Zeplin

Most of you guys probably know Zeplin. If you don't, here is a quick summary of the things it can do.

Like I said, viewing Sketch files is a not a very exciting functionality (like editing is), so don't expect loads of differences between apps.

Anyway, Zeplin is available for Windows and Mac in the browser but only lets you create projects from within the Mac application. That said, viewing the files in browser works great and lets you view all css properties you want. Also you can export assets as png, jpg or SVG.

Zeplin is an application that has gained some real popularity over the years. Unfortunately you need a paid account to create more than one project, which can be a drawback.

Avocode

Avocode has also been on the market for a while now, and seems to gain more popularity. It works online and their desktop application supports Mac, Windows and Linux. It does the same as Zeplin like css generation and even code generation for Swift, Android and React Native.

Also, like Zeplin, Avocode is only really useful if you become a paid user.

Conclusion

I could explain you all the ins and outs of these applications but there are already tons of useful articles on Medium available. I would recommend you to test out these applications yourself and choose your favorite!

Sources

YouTube
How to Install OS X El Capitan 10.11 on VMware PC
h̶t̶t̶p̶s̶:̶/̶/̶w̶w̶w̶.̶y̶o̶u̶t̶u̶b̶e̶.̶c̶o̶m̶/̶w̶a̶t̶c̶h̶?̶v̶=̶j̶u̶c̶D̶X̶d̶Q̶V̶L̶P̶8̶
̶h̶t̶t̶p̶s̶:̶/̶/̶w̶w̶w̶.̶y̶o̶u̶t̶u̶b̶e̶.̶c̶o̶m̶/̶w̶a̶t̶c̶h̶?̶v̶=̶w̶o̶d̶q̶G̶v̶u̶g̶6̶e̶0̶ ̶(̶I̶ ̶h̶a̶v̶e̶ ̶n̶o̶t̶ ̶u̶s̶e̶d̶ ̶t̶h̶i̶s̶ ̶t̶u̶t̶o̶r̶i̶a̶l̶ ̶m̶y̶s̶e̶l̶f̶)̶
https://www.youtube.com/watch?v=YmqtE8jzDlQ (I have not used this tutorial myself)

I am aware of the fact that the video's are being removed from YouTube. This is due to the fact that VMware should be bought (OS X too). I decided that the smart thing to do would be leaving out another YouTube link. There are many other tutorials on how to do this, I just wanted to inform you!

Bohemian's Sketch App
http://www.sketchapp.com/

Why Sketch Won't Come To Windows
https://www.designernews.co/stories/38071-how-to-open-sketch-designs-on-windows

How I Was Triggered To Find Out More About OS X On A VM
http://graphicdesign.stackexchange.com/questions/47276/alternate-for-sketch-on-windows-platform

Super Helpful Sketch Tips, Tricks & Tutorials

You can always follow me to keep yourself updated about new Sketch tips, but I can recommend you to use Medium's search query to look up more about Sketch. You will find a lot of interesting articles. Also this guy (Marc Andrew) does an amazing job at explaining al the ins and outs of Sketch and above all, why you should use it!