Create and edit text

Text is one of the crucial components of interface design. Everything from the placement and arrangement of text, to the choice of font, has a part to play.

In this article, we'll cover how to create text layers, change their contents, and adjust the size of text layers.

This article doesn't cover how to change style properties of text layers, like the font size, family, or weight. For more guidance on styling text, check out our Explore text properties article.

Create text layers

Create new text layers using the text tool.

• Select the Text tool in the Toolbar.
• Or, press the T key to use the Text tool keyboard shortcut.

Once you have the Text tool selected, you can create a text layer in the canvas.

We have two default behaviors available when you create a new text layer. Figma uses a different text resizing property, depending on which approach you use.

Single click

Click on the canvas to create a new text layer. This will create a layer with text resizing set to Auto width. This allows the width of the text box to grow as you add more text.

You may also know this as point text, paragraph text or area text.

1. Single click anywhere on the canvas.
2. Start typing to create a text layer.
3. Press Enter or Return to create a new line.

Click and drag

When the text tool is selected, click and drag on the canvas to create a new text layer.

This creates a layer with text resizing set to Fixed size. This allows you to enter longer strings of text and have them wrap and overflow on to a new line. This is also known as area text.

1. Click somewhere on the canvas.
2. Drag to create a Text layer with specific dimensions.

Edit the content of text layers

Edit individual layers

You can make changes to the content of any text layer you have created. The process differs based on whether you have the layer selected.

• With the layer already selected: press the Enter / Return key to edit its contents.
• Without the layer selected: double-click on the layer in the canvas.

Once you're editing a text layer, you can update the contents of other text layers without having to double-click. Click on another text layer to edit its contents.

Edit multiple layers at once

You can update the content of multiple text layers at the same time.

1. Select more than one text layer. Learn how to select multiple layers and objects →
2. Click Multi-edit text, or press Enter or Return, to edit the contents. All selected text layers will update to match.

Add emoji

You can add emoji to any text layers, Figma uses the Apple emoji style.

Use spell check

Spell check helps you review and correct spelling errors. Spell check identifies errors with a red squiggly line while you are in text edit mode and only for the text layer you currently have active.

• Right-click on a misspelled word to view a list of suggested spellings.
• Click on a misspelled word and press Tab to automatically insert the first suggested spelling.

Supported languages

If you're using the Figma desktop app, spell check is available is any language supported by your operating system. 

If you're using Figma in the browser, spell check is available in English (US, CA, UK) and Russian by default. To access spell check for any other language supported by your operating system, you can install the Figma font installer.

Figma will detect your system’s preferred language and use this for spell check. If you're on a Windows device and don't see the language you want to use, you may need to install a language pack. Language packs for Windows →

To change your preferred spell check language:

1. Click on the menu.
2. Go to Text > Spell check.
3. Select from the list of available languages.

Enable or disable spell check

Spell check is enabled by default for most people. Spell check is only disabled if your browser’s preferred language is something other than English or Russian, and you don't have the Figma font installer installed.

Since the Figma web app cannot pull in the additional languages supported on your operating system without the Figma font installer, spell check is disabled to prevent it from flagging all text in a file as incorrect.

1. Click on the menu.
2. Go to Text > Spell check.
3. Click Check spelling to enable or disable spell check.

Add words to your personal dictionary

You can add words to your dictionary to prevent them from being flagged by spell check. Your dictionary applies to all files you can edit. For example, if you add a word to your dictionary in a Figma design file, spell check will recognize that spelling in your other Figma design or FigJam files. Once a word has been added to your dictionary, it cannot be removed.

1. Highlight the word you want to add to your dictionary.
2. Right-click and select Add to dictionary.

Change the size of text layers

Every text layer has its own dimensions. There are a few ways to control or change a text layer's dimensions.

Change how text reflows (resizing)

The resizing property controls how a text layer shrinks or grows to accommodate any changes you make to its contents. There are three resizing settings available:

• Auto width: the width of the text layer grows to fit its contents. You need to press Enter / Return to create a new line.
• Auto height: the height of the text layer grows to fit its contents. Figma will wrap any lines that extend beyond the original width of the text layer to a new line.
• Fixed size: both the width and height stay the same, regardless of the layer's contents. Figma will wrap additional text, even if it extends beyond the layer's horizontal bounds. This can make aligning this with other layers difficult.

Resize the bounding box

Every text layer has a bounding box around it in the canvas. This controls how Figma positions and arranges text on the canvas. You can resize a text layer by changing it's bounding box.

When you resize the layer in the canvas, Figma will register this as a manual resize and update the resizing property to Fixed size.

1. Select the layer you want to edit.
2. Hover over the section of the bounding box you would like to change. Your cursor will change to the Scale icon.
3. Click and drag to change the dimensions of the bounding box. Figma will reposition the text within the layer based on its current alignment properties.

Scale text layers

You can also use the scale tool to change the size of a text layer. If you take this approach, you'll change the font size as well as the bounds of the text layer.

If you're wanting to change the size of a text layer in relation to other elements in a design, we recommend using the Font size property instead. This makes sure your font size is a whole number.

The scale tool can be handy for situations where you want to resize a group of elements at once. This makes sure all elements, including text, are scaled consistently. It also ignores other settings like constraints.

While handy for some situations, the scale tool can lead to fractional font sizes or layer with subpixel positions and dimensions. Aside from annoying pixel perfectionists, it can also lead to unwanted export artifacts and dimensions.