Establish a Typography System in Figma with Text Styles

Instructor: [00:00] The first thing we're going to do is select the frame tool, and create a new frame, where we will store our typography system. Let's call this typographySystem. Now, let's go ahead and add a few different styles of text that we would like to use in our project.

[00:21] Select the text tool at the top. Then let's create an h1. To make it easier to read, let's go ahead and type heading one. Now, let's go over to the text menu on the right and change the font size. We want h1s to be 64 pixels, and we want them to be bold.

[00:55] Let's clean this up a bit. Great. Now, let's turn this into reusable style using text styles. In the text menu on the right, click the four dots, and then click plus to create a style. Let's call this h1. Great. Now, we have our first style.

[01:20] Let's go ahead and create another style. Click the text tool, then click and drag a box. Let's type "heading two." Head over to the text menu. We'll change the font. We'll use 48. Click the four dots, click the plus. Let's name this h2.

[01:41] Great. Now, we have two styles. If you click off, you'll notice on the right, Figma is showing us all of our local styles. Now, if we want to edit it and change that style, we can click this button with the sliders. Then we can change anything we want.

[02:04] Let's go ahead and create one more. Now, let's see what it's like to actually use one of these styles. Scroll down to the mobile frame, and then select the text tool. Click and drag to create a text box. Let's call this awesomeApp.

[02:25] Now, let's click off. You'll notice that it's already using the paragraph style. Let's click that, and we'll see a dropdown with our text styles. Select each one. Great. Let's clean that up a bit, and let's center it. Cool.

[02:49] By establishing a typography system using Figma's text styles, you can reuse text styles very easily across your project.