Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Establish a Typography System in Figma with Text Styles

    Joe PreviteJoe Previte
    figmaFigma

    In this video, you will learn how to establish your typography system for your project using Text Styles in Figma.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

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

    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.

    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.

    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.

    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.

    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.

    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.

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