Name: Establish a Typography System in Figma with Text Styles
Uploaded: 2018-11-11T11:53:45-06:00
Description: In this video, you will learn how to establish your typography system for your project using Text Styles in Figma.

Create a Mobile, Tablet and Desktop Frame in Figma

Build Reusable Designs with Figma Components

Add a Reusable Figma Component to Multiple Frames

Create a Simple Icon with Figma Ellipse and Pen Tool

Duplicate Grouped Vectors to Create a Patterned Logo in Figma

Establish a Typography System in Figma with Text Styles

Create Figma Color Styles to Reuse Across Frames 

Reuse a Drop Shadow in Figma with Effect Styles

Prototype a Screen Transition in Figma

Export and Share Figma Frames

The Beginner's Guide to Figma

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

https://app.egghead.io/api/v1/lessons/figma-establish-a-typography-system-in-figma-with-text-styles/subtitles

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.

Establish a Typography System in Figma with Text Styles

Share this video with your friends

Course

The Beginner's Guide to Figma