Before you start

Who can use this feature

Supported on any team or organization plan.

Anyone with can edit access to a file can 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.

Figma uses its own custom text rendering. This ensures your designs look consistent, regardless of your browser or operating system.

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

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.

Add emoji

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

Mac

Use the emoji picker to add emoji to text layers.

1. Create a text layer in the canvas.
2. Use the keyboard shortcut Ctrl Command Space to display the Emoji picker.
3. Type the name of your emoji in the field provided.
4. Select the emoji from the search results to add it to the text layer.

Windows

To add emoji, you first need to enable Microsoft's Touch Keyboard:

1. Right-click on the Windows task bar.
2. Click the Show touch keyboard button.

Now you can add emoji using the touch keyboard:

1. Create a text layer.
2. Click the Touch Keyboard icon.
3. Select the Emoji option.
4. Select the emoji you would like to use.

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.

The following default languages are available to use for spell check:

• Figma desktop app: Any language supported on your operating system
• Figma web app: English (US, CA, UK) and Russian

There are some differences depending on the operating system you are using:

• On Mac: Figma auto-detects and uses your system’s preferred language for spell check
• On Windows: If you don’t see the language you want to use, you may need to install a language pack. Language packs for Windows →

Spell check is enabled by default for most users. Spell check is only disabled if you do not have the Figma font installer installed and your browser’s preferred language is something other than English or Russian. 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.

Enable or disable spell check

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

Change preferred spell check language

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

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.

Adjust text properties

Text properties allow you to control everything from the appearance and position of text, to resizing behavior and OpenType features.

Text properties can be found in the right sidebar and in the type settings panel. Explore layer properties →

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.

Resizing property

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 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 tool

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.