Text Styles using Sketch

JIN Design

26 Dec, 2017

Featured

Ho ho ho guys!

Hope you had a great Christmas, now it’s time to get back to the grind.

It is great to have a style guide for each project, especially when working in a team. This way, team members can easily take over the project without worrying about interfering with your style. (We wouldn’t want two different styles on a project, am I right?)

Did you know?

You can change all the colours of your buttons and text style of your fonts with a mere few clicks.

As a 3 part series consisting of Text Styles, Shared Styles and Symbols, we will be touching on Text Styles today. Let’s get going!

Here we have 3 different types of text. Title, Sub-Title and the Body copy.

Step 1: Start by clicking on the text and “No Text Style”.

Step 2: Upon clicking, you should be able to change the name of the style. By default it will key in the text of what is selected.

Step 3: Change it to something you can remember. In this case, I will call it “Title”.

Now, here is how text styles will be helpful to you. These text are all assigned to the different text styles.

Step 4: Click on the text to see if there is a text style assigned to it, if not, assign one to it.

Step 5: Change the properties of the selected text, I changed the font size from 30 to 24. After making the changes, click on the refresh icon.

That will change all the properties for the text under the Sub-Title text style.

Hmm.. does it work for colours?

Yes, it does! This saves so much hassle!

Hope you learned something! Stay tune in for more upcoming Sketch tips!

More From the Blog.

Featured

How Icons impact UX design

How Icons impact UX design Icons are ubiquitous. They are everywhere in our lives. As we’re sat here, typing this out, there are at least twenty visible icons

Featured

Microinteractions: What Are They?

Micro-interactions: What Are They? You’re using a chat app to talk to a friend. Anytime they take a while to type a message, a familiar indicator appears, along