Sketch 2: A Simple, Powerful, Vector Graphics App

There is typically high anticipation when applications that could potentially compete with the powerful Adobe CS product line-up get released. Designers everywhere are very reliant on those products in a lot of situations and while they do get the job done (and typically better than any other available option) there seems to be this burning desire for something different.

Even though applications like Photoshop and Illustrator are so widely used, you’ll often see complaints about different aspects of these tools. One common gripe is that the applications have begun to feel bloated after so many years of feature additions. If you’ve ever spent time with either Photoshop or Illustrator you are nodding your head right now. That’s probably why when a prospective, more simple, competitor pops up we’re all staring right at it hoping it can be just what we want. We hope that all of the great features we love in our CS applications make it over and all the fluff dies off.

The buzz about the release of Sketch 2 started a while back and being a designer myself I followed along closely. All things pointed to this thing being pretty darn cool so I decided to take it for a spin.

Intro

An application like this can lend itself to a lot of different specific graphic based jobs. The limit is really based more on the creativity of the user than the actual tools built into the application. Look at how we’ve turned Photoshop, actually built for professional photographers, into a web design tool.

Because of this craftiness I’ll be taking a look at this from more of an interface, mobile and web designer aspect as I think that there is some serious potential for the folks in that area. We’re not going to get too crazy here, but my examples will be in that vein. And I should note that Sketch 2 is aiming to be more of an Illustrator competitor as it is a vector graphics app by definition. That said, there appears to be some features that can be of direct benefit to the interface designers among us.

Interface

Coming from the Photoshop/Illustrator world, opening up Sketch 2 for the first time feels like a breath of fresh air. Oddly, the feeling I do get on some level is that this thing can’t possible do what I want it too. There just isn’t enough “stuff.” Yeah, I’m pretty sure that’s just my conditioning from using the more bloated products I’m used to. As we get along we’ll actually see what the application is capable of. Maybe this feeling will be proved wrong. Maybe not.

Layers

There are four core areas of the application window that you’ll be working with for the majority of the time. The left-most panel will house the layers of the project. Each layer is essentially one element of the page. Each shape, hand drawn vector or text will live on its own layer.

Layers can be grouped into folders. When elements are combined, you’ll see one layer with an indicator noting that multiple elements make up that one layer. For example, if you combine shapes together to create one new shape you’ll be able to see the components that make up that new shape.

Toolbar

This is probably pretty obvious, but I’ll point it out anyway. The toolbar is located at the top of the application window and holds the tools that you’ll be using.

It has a very uncomplicated feel to it. There aren’t a ton of tools to worry about and they reside on this toolbar all the time. There’s plenty of white space holding large-ish tool icons. It feels roomy and it’s easy to quickly locate just what you’re looking for. There is some context interaction going on here as well that will make your life even easier. Different tools become functional and nonfunctional depending on what you are doing. If you only have one element selected, the union button won’t be active. It’s pretty obvious most of the time.

Inspector

The inspector resides on the right-hand side of the application window. This is where the all the fun stuff happens. This is the area that let’s you take action on the elements of your project. Adding drop shadows and gradients and such. We’ll get into this a bit more with a specific example.

Let’s Make Something

In the interest of keeping this post at a tolerable length, I’ll try to illustrate some cool aspects of Sketch 2 while I actually design a log in form. This is something that I’d use an application like this for and it seems like other reviews I’ve seen have focused more on the illustration side of things. We’re going to go at this from a little different angle and hopefully it’ll be useful for you to see another use case.

First off, here’s what we’re going to end up with. It’s a very basic login form. I envision this as a modular box that would drop down from a top navigation bar. It’s a fairly common element and something I’m sure you’ve all seen before.

The container box is a rounded corner rectangular form with a small triangle protruding from the upper border. This form is created by selecting the rounded tool from the shapes button on the toolbar. Then simply draw the shape. We can use the inspector to tune the radius width and exact dimensions. I then grabbed the triangle tool from the shapes again and drew a triangle on top of the box. With both items selected they became one by simply pressing the union tool from the toolbar.

You’ll also notice that I’ve added a fill color, a drop shadow and a border. Those features can simply be checked and then easily tweaked as needed. It is also possible to add multiple fill layers and toggle them on and off as needed.

Next we’ll add in the form fields. Again, I’ll grab the rounded tool and draw the shape. This time I’ll simply duplicate that box. Automatic layout features help me to line up the fields just where I want them. This time I’ll add a subtle inner shadow to give the field some depth.

A very cool feature of Sketch is the ability to link styles to multiple layers. If we click the link button on the top of the inspector we can add this style to the list. Then we select the second field and select that linked style. Now, every time we change that style on either element it’ll change on the other as well. That’s pretty awesome if you ask me.

The last thing to add is the button. You guessed it, we’ll draw another rounded rectangle just as we did above. Once the shape is in its place we can add some styles to it to make it look like a button.

This style was created by layer a couple different fill gradients. These are pretty straightforward to create. If you take a look at the screenshot above you’ll see a couple handles that can be dragged around to adjust the gradient angle. Their respective colors can also be changed. It’s a little different than what I’m used to, but after a few minutes of fooling around with gradients i caught right on.

You’ll also notice that I have been adding some text in the proper places as we’ve gone along. This is very simple and done using the obvious text tool. I added a couple basic styles to them to make the text pop just a bit as well.

And now we’re left with something like this.

Copy CSS Attributes

Here’s a feature that would make web designers flat out giddy. Sketch does have the capability to copy the CSS attributes of what you’ve created. You’re then free to paste them in your projects.

Here’s what we get using this feature.

The code isn’t amazing, but it’s pretty usable. It’s really well formatted and even commented based on your layer names. I will warn you that you will hit some limits in what can be copied to CSS attributes, but the cool thing is that you’ll see messages saying that certain elements weren’t brought over. I hit this when messing around with some background patterns. The message did read with a “this isn’t available yet” tone to it so that leads me to believe this functionality will be expanded with future releases.

Final Thoughts

I came into this with a basic working knowledge of applications like Photoshop and Illustrator, but otherwise no experience with Sketch. This is literally the first thing that I’ve made with this application and think it turned out pretty darn well. And I’ll be honest, it really didn’t take me all that long. A couple hours of fooling around and I had a fair amount of the application figured out. The application is much, much easier to get comfortable with when compared to Illustrator. It’s simple and at the same time pretty darn powerful.

For someone like me who is definitely a more novice Illustrator user, Sketch feels like a much better solution. I essentially never take advantage of Illustrator’s more advanced features and frankly the thought of trying to become an Illustrator expert seems really daunting and I’m not sure I’ll benefit much from the effort. At $49.99 Sketch is definitely at a much more appealing price point and for a lot of folks it will suitable to accomplish a good portion of your vector work. I know I’ve only scratched the surface here and I’m really looking forward to using Sketch more and more and giving it a more thorough run through on the interface development front. For me personally, it already has some exciting features and I’m very much looking forward to where things application heads.