• 20 hours
  • Hard

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 11/30/21

Work with text in Sketch

Adding Text

You can add text in Sketch in the following ways:

  1. Via the menu bar Insert > Text and then clicking on the area where you would like to add text

  2. 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:

  1. Showing the currently selected layer as a blue row in the Layer List

  2. 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.

sd

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

sdfdsf
The properties of our (selected) text layer

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

Alignment Options in the Inspector window
Alignment Options in the Inspector window

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.

asdd
Resizing text layers
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.

Spacing Options
Spacing Options

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.

Example of certificate of achievement
Example of certificate of achievement