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.
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.
- Single click anywhere on the canvas.
- Start typing to create a text layer.
Returnto 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.
- Click somewhere on the canvas.
- Drag to create a Text layer with specific dimensions.
Tip! Adjust the resizing behavior in the Text section of the right-side panel. .
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.
Note: In order to edit a text layer, you must have the text layer's font installed and accessible. Learn more about accessing local fonts on your computer →
You can add emoji to any text layers, Figma uses the Apple emoji style.
Use the emoji picker to add emoji to text layers.
- Create a text layer in the canvas.
- Use the keyboard shortcut Ctrl Command Space to display the Emoji picker.
- Type the name of your emoji in the field provided.
- Select the emoji from the search results to add it to the text layer.
To add emoji, you first need to enable Microsoft's Touch Keyboard:
- Right-click on the Windows task bar.
- Click the Show touch keyboard button.
Now you can add emoji using the touch keyboard:
- Create a text layer.
- Click the Touch Keyboard icon.
- Select the Emoji option.
- 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.
Tip: You can also click on a misspelled word and press Tab to automatically insert the first suggested spelling.
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
Note: Installing the Figma font installer allows you to access any language supported on your operating system in the Figma web app. If you have the Figma desktop app installed, the Figma font installer is installed automatically.
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.
Note: Spell check preferences set in the web app are not applied to the desktop app or vice versa. If you switch between the two apps, you must configure your spell check preferences again.
Enable or disable spell check
- Click on the menu.
- Go to Text > Spell check.
- Click Check spelling to enable or disable spell check.
Change preferred spell check language
- Click on the menu.
- Go to Text > Spell check.
- 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.
- Highlight the word you want to add to your dictionary.
- 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.
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.
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.
- Select the layer you want to edit.
- Hover over the section of the bounding box you would like to change. Your cursor will change to the Scale icon.
- 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.
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.