Figma Beginner: Working With Text

Name: Figma Beginner: Working With Text
Author: Justin Billmeier

Figma's Text Tools: Design with Clarity and Consistency

Preview the first lesson free — get full access to all 3 lessons.

Course: On-Demand

Hello, my name is Justin and in these lessons you will learn all about using text in Figma. We'll learn how to add and adjust text and how to create reusable text styles. In this lesson we'll dive into adding text. By the end of the lesson you'll know how to create text layers and what properties are available in the design panel. Here we're looking at some text that I've copied over from a design we've been working on. I want to add some new text. I'll go up here to the toolbar and I can click on text or use my keyboard shortcut T and I'm going to click on my frame and start typing. I don't want to type all of that. I'm just going to copy and paste. Now that's not what I wanted. Let's see what's going on here. The default when you add text is to set the resizing mode to auto width. So that's what's going on here. I don't want to do that. Let me try that again. This time when I add text I'm going to click and drag. I'm going to click and drag my text tool and if I look at the resizing mode is now set to fixed size. So that shouldn't happen when I copy and paste. I also want you to take note of how things work when you copy and paste. There's a couple of ways to do it. If I just go command V to paste I will copy things over as they were from the source. But there's another way I can do it. I can also shift command V and if I use shift command V the text is just going to all have the style that's already set in the text properties for that text box. So there's something that's good to know. So let's look a little bit more at the text properties. Here's our text panel and we have a way to add textiles here. I'm going to get more into that in another lesson. Here's our font family. Here's our font weight. Here we have font size set in pixels and below that we have line height. This line height is set at 160% right now. Next to that we have letter spacing which is at 0% and here we have paragraph spacing. We've already touched a little bit on the resizing modes right here. We have auto width, auto height and fixed size and we have our text alignment options here. Text align left, text align center and text align right. To that is the vertical alignment settings, a line top, a line middle and a line bottom. And these dots right here are our type settings with some options that are the same as what we're seeing in our text panel here but we have a little bit more and we have some previews of what the change is going to look like if we apply these things. Then we get into some more details with things like hanging punctuation. You can see the difference there and hanging lists how you want the bullet points to appear. These are things that you might start typing and get frustrated by while you're working and not know how to fix. This is where you go to fix those. And a few other things like case, working with numbers, fractions, how you want fractions to be applied, superscripts, slash zeros. You can explore here. There are a lot of options if you run into a text that's doing something you don't want it to do. This is most likely where you can go to fix it. Okay. We've learned how to add text and we've walked through the text properties. In our next lesson, we'll get into adjusting text. Thanks for watching.

Beginner Provider : Justin Billmeier 3 Lessons · 12m in English

Course Description

Mastering the use of text in Figma is a fundamental skill for any designer. Text is a crucial component of design, conveying information and guiding users through an interface. Understanding how to add, format, align, and adjust text will significantly improve your strengths as a designer. Creating reusable text styles can ensure consistency across a design, reinforcing a brand's identity and creating a rhythm that users can follow. Gain knowledge that will empower you to create designs that are visually appealing and effective in communication.

In these lessons, you will learn how to effectively incorporate and manipulate text in Figma. We’ll start with creating and formatting text layers, followed by the alignment and adjustment of those elements. Next, we will explore the creation of reusable text styles. You’ll also learn the skills to manipulate text properties, work with detailed settings, and apply your text styles. By the end of these lessons, you'll have the expertise to enhance the readability and visual appeal of your designs with text.

What You'll Learn

Add and format text in Figma, including creating text layers and understanding text properties
Align and adjust text elements, working with detailed settings, resizing, and spacing
Create reusable text styles to maintain consistency across a design
Apply text styles and manipulate text properties within your designs
Add links to text elements when working with detailed settings
Enhance the readability and visual appeal of your designs with text

Key Takeaways

Text is a crucial component of design that conveys information and guides users through an interface.
Understanding how to add, format, align, and adjust text improves your strengths as a designer.
Creating reusable text styles ensures consistency across a design and reinforces a brand's identity.
By the end of the lessons, you will be able to enhance the readability and visual appeal of your designs with text.
The course progresses from creating and formatting text layers to aligning, adjusting, and applying reusable text styles.

Frequently Asked Questions

Who is this course for?

It is for designers who want to master the use of text in Figma, described as a fundamental skill for any designer.

What topics does this course cover?

It covers adding and formatting text, aligning and adjusting text elements, and creating reusable text styles in Figma.

What skills will I gain from this course?

You will learn to add, format, align, and adjust text, manipulate text properties, work with detailed settings, and create and apply reusable text styles.

Is this course suitable for beginners?

Yes. The course is titled a Figma Beginner course and starts with creating and formatting text layers before moving to more detailed skills.

What will I be able to do after completing this course?

You will have the expertise to enhance the readability and visual appeal of your designs with text.