FREELessons: 19Length: 2.4 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.2 A Quick Tour of the Sketch Interface

Now that we know how to download Sketch, let's open it up and do a quick tour of the user interface. So here it is. This is how it looks like when you create a new document. Notice we have a nice dark theme. That can actually be switched to a light theme. If we go to the Sketch preferences you'll see that our appearance currently has the system default, but we can can change it manually from here. Or we can leave it on system default and it's gonna change automatically when we change our operating system theme from light to dark. That's actually a pretty cool addition. Now, there are a couple of elements we need to get familiar with in Sketch. First, on the top, we have the toolbar. This is where we can put our most used tools, and we also have some contextual controls that will become active or inactive depending on the selection we make. This toolbar is customizable. We can right click it anytime and select from three different view modes. And by clicking Customize Toolbar we can drag the default set like this, or we can manually add new items in here. So, for example, if I wanted this triangle tool in my toolbar I can simply click here and drag it onto my toolbar in any position I want. So that's very nice. You can also customize this by adding spaces and flexible spaces. And when you're done, click this button and you now have an updated toolbar. On the left side, we have the Pages panel and the Layers panel. Currently, we don't have any layers, but once we populate our art board, let me quickly show you, once we populate the art board with elements, a new layer will automatically be created for that element. And within this Layers panel, we can right-click on a layer. We have several options for it. And we can also hide or show that particular element. Up top we have the pages panel, which allows us to add new pages, customize or delete existing ones. We'll cover pages and layers in a future lesson. On the right side, we have the inspector. Now the inspector will actually present contextual information depending on our selection. So if for example, I'm selecting this rectangle shape, I have a specific set of options. I can modify position, width, height, border radius, I can choose opacity, and then I can define different styles like fill color, border color, border options, I can apply shadows in shadows and blurs. And I can also use this panel to make a specific item exportable. Now, if I were to add a text element, I would have slightly different options. As you can see here, we now have access to text properties like font family, weight, font size, text alignment, and so on. So that's what I mean when I say it's a contextual panel. It depends on what is selected in my canvas. And that brings us to the biggest part, right here in the middle. This is called the infinite canvas. And I say infinite because well, there is no limit to how many elements you can put in here. The canvas will expand as much as you need it to, and it's able to accommodate a lot of elements. By default, you can not change any of the properties for the canvas. So if you don't have anything selected here, the inspector is actually empty. You can modify certain properties for the canvas from the Sketch preferences. If you open them up by going to Sketch preferences, you can see canvas. It has Sketch default, but you can choose a light canvas or you can choose a dark canvas depending on your preference. For me, I just leave both of these on system default. So whenever I switch my theme in my OS from light to dark, the app gets updated automat ically and I don't have to worry about anything. And that's a quick tour of the user interface. All right, so now that we got familiar with the sketch UI, let's go into more detail on each of these tools and features. We'll start in the next lesson with pages and art boards. See you there.

Back to the top