Text tool basics in Figma - Step-by-Step Guide

Introduction

The Text tool in Figma lets you add words and numbers to your designs. This helps you label charts, add titles, or explain data points clearly.

When you want to add a chart title to explain what the data shows

When you need to label axes on a graph for clarity

When you want to add a note or comment on a dashboard design

When you need to create buttons or menu labels in a report prototype

When you want to highlight key numbers or insights in your visualization

Steps

Step 1: Click

- Text tool icon in the toolbar (looks like a T)

The cursor changes to a text insertion point

💡 You can also press the T key as a shortcut

Step 2: Click

- anywhere on the canvas

A blinking cursor appears where you clicked, ready for typing

Step 3: Type

- the blinking cursor on the canvas

Your text appears as you type

Step 4: Select

- the text box

The text box shows selection handles for resizing

Step 5: Drag

- the selection handles of the text box

The text box resizes and text reflows inside it

Step 6: Use

- Text section in the right sidebar

You can change font, size, color, alignment, and spacing of the text

Before vs After

Before

Canvas with no text elements, only shapes and charts

After

Canvas shows a clear title above the chart reading 'Sales by Region' in bold, size 24 font

Settings Reference

Font family

📍 Text section in the right sidebar

Choose the style of the letters to match your design

Default: Roboto

Font size

📍 Text section in the right sidebar

Set how big or small the text appears

Default: 16

Text color

📍 Fill section in the right sidebar when text is selected

Change the color of the text for visibility or style

Default: Black

Text alignment

📍 Text section in the right sidebar

Control how text lines up inside the text box

Default: Left

Line height

📍 Text section in the right sidebar

Adjust space between lines of text for readability

Default: Auto

Common Mistakes

Clicking and dragging to create a text box before typing

This creates a fixed-size box that may cut off text if too small

Click once to create a point text box for short labels, or drag to create a box for paragraphs

Not selecting the text box before changing font or color

Changes won't apply if the text box is not selected

Always click the text box to select it before adjusting settings

Summary

The Text tool adds words and numbers to your Figma designs for clear communication.

You can create point text by clicking or paragraph text by dragging to size the box.

Use the right sidebar to style your text with fonts, sizes, colors, and alignment.