F Figma

How to add text to designs on Figma

beginner 8 min read Updated 2026-03-18
Quick Answer

Add text to Figma designs by selecting the Text tool from the toolbar or pressing T, then click anywhere on your canvas to create a text box. You can then type your content and customize formatting using the properties panel.

Prerequisites

  • Figma account
  • Basic familiarity with Figma interface
  • An existing Figma file or new project

Step-by-Step Instructions

1

Select the Text Tool

Click the Text tool (T icon) in the toolbar on the left side of your screen, or press the T key on your keyboard as a shortcut. The cursor will change to indicate text mode is active.
Press T anywhere on the canvas to quickly activate the text tool without clicking the toolbar.
2

Create a Text Box

Click anywhere on your canvas where you want to add text. This creates a text box that will expand automatically as you type. Alternatively, click and drag to create a fixed-width text box for paragraph text.
Dragging creates a text box with defined boundaries, while clicking creates auto-width text perfect for headings.
3

Type Your Text Content

Start typing immediately after creating the text box. Your text will appear in the default font and size. Press Enter to create new lines, or press Escape when finished typing to exit text editing mode.
4

Access Text Formatting Options

Select your text box and open the Design panel on the right side of the screen. Here you'll find all text formatting options including font family, size, weight, and color. You can also access these options while editing text.
Double-click any text to quickly enter edit mode and make changes.
5

Customize Font and Size

In the Design panel, click the Font family dropdown to choose from available fonts. Use the Font size field below to adjust the size, or use the Font weight dropdown to change from regular to bold, light, etc.
Use Ctrl+B (Cmd+B on Mac) to quickly toggle bold formatting for selected text.
6

Adjust Text Color and Effects

Click the Fill color swatch in the Design panel to change text color. You can apply solid colors, gradients, or even images as text fills. Use the Effects section to add shadows, blurs, or other styling.
Hold Alt while clicking a color anywhere in your design to quickly apply it to selected text.
7

Position and Align Your Text

Drag your text box to reposition it on the canvas, or use the alignment options in the Design panel. Use Text align buttons to align text left, center, right, or justify within the text box.
Use the arrow keys to nudge text positioning by 1 pixel, or hold Shift+arrow keys to move by 10 pixels.

Common Issues & Troubleshooting

Text appears blurry or pixelated

Check your zoom level and ensure text is positioned on whole pixel values. Avoid scaling text boxes - instead, change the font size directly in the Design panel.

Can't find the font I want to use

Install the font on your system first, then restart Figma. For team sharing, consider using Google Fonts which are available to all users, or upgrade to Figma Professional for custom font sharing.

Text is getting cut off in the text box

If using a fixed-width text box, drag the corner handles to resize it. Alternatively, switch to Auto width in the Design panel under the Text section to let text expand naturally.

Unable to edit text after creating it

Double-click the text element to enter edit mode, or select it and press Enter. If text is inside a component, you may need to Go to main component to make edits.

Prices mentioned in this guide are pulled from current plan data and may change. Always verify on the official Figma website before purchasing.