Adding Text
You can add text in Sketch in the following ways:
Via the menu bar Insert > Text and then clicking on the area where you would like to add text
Via the shortcut 'T' on your keyboard and then clicking on the area where you would like to add text
Selecting Layers
In this example, I do this process (of inserting text) three times.
The result is 3 layers (each of which contains text).
You can see those three layers in the panel showing in the left (the layer list). If you click on a Layer in the Layer List, it will be selected. You can also click on this layer in the main window and it will also select this layer.
Sketch helps us to understand which layer is currently selected by:
Showing the currently selected layer as a blue row in the Layer List
Showing the current selection in the main window
In the screenshot below, you will see the layer which contains the text "Product Manager" has a blue row in the Layer List and is also showing as selected in the main window.
Changing Text Properties
Once a text layer is selected, you will see its properties in the Inspector Window (showing by default in the right hand side).
The most commonly used options are:
Typeface: the font that is applied to the text (e.g. Arial or Helvetica are typefaces)
Weight: the options that include Bold, Italic or Condensed
Color: the color of the text
Size: the font size to be applied to your text
Paragraphs in Text Layers
If you press Return on your keyboard while editing the text in a text layer, you can add a second line of text. You can see in the screenshot below that I have done this below to create a paragraph of text.
Putting a paragraph of text into a text layer allows you to do some pretty cool things in Sketch. You can:
Align the text within the paragraph
Resize the layer which will result in the text auto-fitting to the available space in the layer
Adjust spacing
Aligning Text
Resize Text Layer
If you select a text layer, then by clicking on one of the white rectangle on the boundaries of the layer, you can drag to resize the layer. When you do so, the text will auto-fit to the available space. This is really great for prototyping app screens or web pages because you can decide which text you want, specify which space it has and then increase or decrease the font until everything fits nicely.
Adjust Spacing
The spacing options allow you to specify how far apart you would like each line of text to be. Play around with these settings to explore what their effect can be.
Summary
Working with text is an important part of learning Sketch. Next, we'll investigate how to use icons as the first part of our prototype creation is to build a menu bar using icons.
