Before dive into using type in mockups in Figma, let’s first go over typography first. Typography is one element of visual design and it focuses on the use of text and font.

There are three steps to find the perfect typography for your design:

• Selecting a type classification. Type classification is a generral system to describe style of type.

• Picking a typeface. Typeface is the overall style of a letter. Typefaces are distinguished by their stroke weight, shape, type of serif, and line lengths.

• Choosing a font. Font refers to the size, thickness, and emphasis of letters

Typography has an important role in any design work and not just in UX design. It adds hierarchy to the overall design. Typographic hierarchy is a method of ordering typefaces and fonts in a layout to create divisions that show users where to focus and how to find information. Second, it makes text easy to read, which normally refers to as legibility. The third one is that can be used to match brand guidelines, which enforces the brand identity. The great example is how Google uses typography across their design to enchance their brand identity.

Now that’s we understand the basic of typography, it is time to create it in Figma.

Create text fields

First, we need to create a text field in Figma before we can choose typography.

• Open you file in Figma

• Select the Text icon in the toolbar, which looks like a letter T (highlighted in blue in the image below).

• Click anywhere on the Canvas and start typing to enter text.

Select and edit text fields

To edit or adjust your text, you must first select the text box. When there is only one text box in your Canvas, you can select it with a single click. But when there are multiple boxes, you will need to select the correct layer. To select a text box:

1. Click the text you want to edit in the Layers panel (on the left side of the screen). The selected text layer will be highlighted in blue in the Layers panel, as shown in the image below.

2. Double-click the text in the box you selected on the Canvas. Or, to select all the text in a box, press enter (or return).

3. Make changes to the text as needed.

To select more than one text box, first choose the Move tool (highlighted in the upper toolbar of the image below). Then find an empty space on your canvas and click and drag a selection box over the text boxes you want to edit. All the text in this selection box will be highlighted in blue in the Layers panel, as shown below.

Adjust fonts and font sizes

Once you’ve selected a text box, you’re ready to make design choices! You can adjust text properties like font size and weight (the thickness of your font). To adjust your font:

1. First, select a text box using the steps in the previous section.

2. Then, find the Text section of the Design panel (on the right side of the screen).

3. To find a typeface or font family, click the Font dropdown. From here you can browse a list of web, local, and shared fonts.

4. You can choose a weight from the Weight dropdown.

5. To change the size of the text using the Size dropdown, or manually enter a size in the size field.

There many things you can do in the Text menu and you can explore more here.

Reorganize text

You can adjust the alignment, size, location, or constraints of your text in the Design panel. Let’s break down the sections of this panel:

Alignment

The alignment options are located at the top of the Design panel. Alignment determines how text and other design elements are distributed inside the boundary box. There is an option in Figma – Smart Selection that can help designer’s work less repetitive. You can check that article here.

Location and size

The numbers below the alignment options correspond to a selected element’s position on the Canvas. To change the position of the text box, we use X axis (left and right) and the Y axis (up and down). To adjust text box’s width and height use the W and H values.

Constraints

Constraints limit where an element can be placed within a Frame. They are helpful when you need to maintain a specific distance from the edge of the canvas and for designing on different devices.

Each element has horizontal and vertical constraints. The horizontal constraints dictate how close the element can get to along the left or right edge of the frame. The vertical constraints determine how close it can get to the top or bottom edge. You can also decide on how to center the element on the X or Y axis. If you need to resize the frame, you can also set the scale of an element so that it remains in proportion to the resized frame. To learn more on Constraints in Figma, here.

Set and save preconfigured fonts

Saving a text style and reusing it across different designs can save you time.

1. In the Layers panel, select the text with the properties you want to save and reuse.

2. Go to the Text header in the Design panel. Then click the Style icon (represented by four dots in the shape of a square).

3. The Text Styles will appear. Click the Plus (+) icon in the top right corner of this menu to name your style.

4. Once you’ve picked a name, click Create Style.

5. To apply the saved Text Styles just select texts in the Layer panel then go the Text Styles for saved Text Styles.

That’s how you save and reuse text style to save you from repeating works. To learn more on creating and saving Text Styles, go here.

To learn more on types:

• 7 Things to remember when selecting fonts for your design

• Legibility, Readability, and Comprehension: Making Users Read Your Words

Good luck!