The Art of Typography: Crafting Compelling Text in Figma

In the dynamic world of design, typography is the unsung hero that often goes unnoticed but plays a pivotal role in shaping user experiences. It’s more than just picking a font; it’s about making informed design choices that resonate with a brand’s identity and guide users to the information they seek. In this blog post, we’ll delve into the basics of working with typography in Figma, from creating text fields to adjusting fonts and sizes. So, let’s embark on this typographic adventure!

Creating Text Fields

Before you dive into the fascinating world of typography, you need to set the stage by creating text fields in Figma. Here’s how:

  1. Open your file in Figma.
  2. Select the Text icon: This tool, represented by a letter “T,” is your gateway to text creation (highlighted in blue in the image below).
  3. Click anywhere on the Canvas: Once you’ve activated the Text tool, click on the Canvas and start typing to enter your text.

    Figma toolbar with text tool selected

To master the use of the text tool in your designs, consider watching this helpful tutorial video on the Text Tool and Fonts in Figma.

Selecting and Editing Text Fields

Now that you’ve created text fields, it’s time to fine-tune and adjust them. Here’s how to select and edit text fields in Figma:

  1. Select the text box: To make changes to your text, you must first select the text box. If you have only one text box on your Canvas, a single click will do. However, when there are multiple text boxes, you need to choose the correct layer.
  2. Click the text you want to edit in the Layers panel: In the Layers panel (located on the left side of the screen), click on the text layer you wish to edit. The selected text layer will be highlighted in blue, as shown below.

    Text highlighted on Figma

  3. Double-click the text on the Canvas: Alternatively, to select all the text within a box, press the “Enter” key (or “Return” on Mac).
  4. Make changes to the text as needed: Once you’ve selected the text, you can proceed to make any necessary edits.

For those instances when you need to select multiple text boxes, follow these steps:

  1. Choose the Move tool: This tool is located in the upper toolbar, as highlighted below.
  2. Click and drag a selection box: Find an empty space on your Canvas, click, and drag to create a selection box that encompasses the text boxes you wish to edit. All the text within this selection box will be highlighted in blue in the Layers panel.

    Two layers of text highlighted on Figma

For more detailed information on working with text, check out this informative article on Edit Text Layers from Figma.

Adjusting Fonts and Font Sizes

Once you’ve selected a text box, you’re ready to dive into the world of design choices. Here’s how you can adjust text properties, such as font size and weight:

  1. Select a text box: Begin by selecting the text box you want to modify, following the steps outlined in the previous section.
  2. Locate the Text section of the Design panel: This panel resides on the right side of the screen and houses various text-related options.
  3. Browse the Font dropdown: Click on the Font dropdown to explore a wide array of web, local, and shared fonts available in Figma.
  4. Choose a font weight: The Weight dropdown allows you to select the desired thickness or weight of your font.
  5. Adjust the font size: Using the Size dropdown or manually entering a size in the field, you can easily change the size of your text.

Beyond font size and weight, the Text menu also offers options for manipulating paragraph spacing, line height, alignment, and more. For a deeper dive into utilizing text properties to make your designs truly unique, refer to this article on Explore Text Properties in the Figma Help Center.

Reorganizing Text

In the world of design, alignment, size, location, and constraints play vital roles in shaping the visual appeal of your text. Let’s break down these sections of the Design panel:

Alignment: The alignment options, located at the top of the Design panel, determine how text and other design elements are distributed within the boundary box. After selecting a text box, you can choose from options like Align Left, Align Right, Align Top, Align Bottom, and more. These alignment choices guide the visual arrangement of your text.

Alignment tools on the design panel in Figma

If you’ve selected multiple text boxes, you can access additional alignment options by clicking the dropdown menu. This menu offers features like Tidy Up (evenly distributing elements), Distribute Vertical Spacing (evenly spacing elements vertically), and Distribute Horizontal Spacing (evenly spacing elements horizontally). These tools help you fine-tune the alignment of your text.

Tidy up alignment tools in Figma

To explore more, check out this article on Smart Selection from Figma.

Location and Size: The numerical values below the alignment options correspond to an element’s position on the Canvas. By adjusting these values, you can move an element along the X-axis (left and right) and the Y-axis (up and down). You can also modify an element’s width and height using the W and H values. Keep in mind that these values affect the size of the text box, not the font itself. These adjustments come in handy when you need to match the box size to your resized text.

Location section on the Figma design panel

Constraints: Constraints are indispensable when you need to restrict where an element can be placed within a frame. They help maintain specific distances from the canvas’s edges, especially when designing for various devices. Each element features horizontal and vertical constraints that determine its proximity to the frame’s edges. You can also center an element on the X or Y axis. If you need to resize the frame, you can set the element’s scale to maintain proportionality. For a deeper understanding of constraints, watch this informative video on Constraints from Figma.

Set and Save Preconfigured Fonts

As you become more proficient with Figma, you can save time by creating and reusing text styles across different designs. Here’s how to do it:

  1. Select the text with the properties you want to save: In the Layers panel, choose the text that exhibits the desired properties you wish to reuse.
  2. Go to the Text header in the Design panel: Locate the Text header in the Design panel, then click on the Style icon (represented by four dots in the shape of a square).

Keep learning about type

If you’re not sure how to choose the best font for your design, check out these 7 Things to Remember When Selecting Fonts for Your Design

from UX Planet. Then, learn about how typography can impact the Legibility, Readability, and Comprehension of your designs from the Nielsen Norman Group.


Posted

in

by

Tags: