New Level of Sketch-ing

Working with Sketch as Developers

At 1minus1, we use Sketch when designing websites and apps. It’s is a vector-based, Mac-dedicated, visual editor that is a direct competitor to Photoshop. The two editors are very similar, mainly because Sketch is a more streamlined and more specialised version of Photoshop.

From a designer’s perspective, Sketch offers many improvements over Photoshop, even if overall, Photoshop is the stronger software. For example, something as small as creating round corners on a rectangle can be troublesome in Photoshop, whereas Sketch has a highly fine-tuned feature just for this purpose.

The real question for us was: is Sketch good for developers? Are there features that make our designer-developer relationship easier and more productive?

As it turned out, the short answer is “Yes!”. And here  is why..

Agile Asset Exporting

Sketch offers several ways to export assets, making it a favorite for many developers. To start, you have the slice tool, which allows you to manually select a region and export it. You then have layers and groups, which can be selected and exported from the palette in the interface. This feature allows you to easily isolate assets in more complex documents. Finally, you have artboard exports, which can be used when you want to export the whole screen.

CSS & Sketch

Sketch comes with a built-in feature which allows developers to copy the CSS of an element. Building a website from a template would require constant “translation” of the image into code. It also automatically adds CSS in the design of an element, allowing developers to streamline their website building process.

Creating Style Libraries

There are numerous ways to create a style library in Sketch, but using a plug-in such as Craft Library can help automate the process. Craft will index styles in two ways. First, you have Document Styles, which categorizes all the styles, font sizes, and colors within your document. You then have the Shared Library, which is customizable, and may contain groups and symbols (“symbols” refers to the feature that allows you to reuse assets across documents).

Sketch and Front-End Development on PC

To be fair to designers who work on PCs, Sketch has one major disadvantage when compared to Photoshop – it is a Mac exclusive app. Id does help us when we develop for iOS, however, with the help of free-to-use software such as Zeplin, Sketch files can be run and used on a PC. This will allow you to work with the files as if you were using Sketch, giving you full access to all of the features you need as a developer. With that being said, let’s take a look at what Sketch has to offer.

Why We Chose Sketch

If you’ve worked with Photoshop in the past, you will find that Sketch’s laser focus on website and app development opens the way to a much more streamlined workload. All of the little (and big) extras are there to meet common pain points that Photoshop, and other visual editors, have not yet addressed. We’ve chosen Sketch because it provides a lot of convenience to both designers and developers. Our team is able to deliver better results in a shorter period of time, while our clients find it easier to implement our designs.

1minus1 wrote this awesome blog