Text is one of the crucial components of interface design. It can help determine the legibility and appeal of your design.
Your decisions around text can impact how successfully you convey your message. Everything from the placement and arrangement of text, to the choice of font, has a part to play.
Note: Browsers and operating systems often render text differently, making designing across systems and platforms unpredictable. Figma uses its own custom text rendering to ensures your designs look consistent, regardless of your browser or operating system.
Users with can edit access to a file can create new Text layers.
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.
Single click anywhere on the canvas.
Start typing to create a text layer.
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.
Click somewhere on the canvas.
Drag to create a Text layer with specific dimensions.
Spell check helps you review and correct spelling errors. Spell check identifies errors while you are in text edit mode and only for the text layer you currently have active.
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.
There are a few ways you can adjust the size of a text layer.
Drag to resize
Every text layer will have a blue bounding box around it. This bounding box controls how Figma positions and arranges text on the canvas.
You can control how text appears within the bounding box using the vertical and horizontal alignment properties.
If you would like to change the size of a Text layer, you can adjust the bounding box. Adjust the bounding box with the Move tool selected.
Select the Text layer you'd like 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.
Use the Scale tool
We recommend using the Font Size property to adjust the size of your Text. However, you can also use the Scale tool to resize text. This is handy when you want to resize a group of elements at once.
Note: Scaling a Text layer can result in fractional Font sizes. We recommend changing the size of a text layer by adjusting the Font size to ensure whole numbers.
Select the Scale tool in the move drop down in the toolbar. Or, press the K keyboard shortcut.
Select the Text layer and hover over the bounding box until the Scale handle appears.
Click and drag to Scale your Text. The Font Size will change in the Text section of the Properties Panel.
Locating itemsin large files can be a challenge. Find and replace lets you quickly find, select, and make changes in bulk.
Find items
Use the Find option to quickly search your entire file for text, shapes, frames, and more.
Click in the left sidebar or use the following keyboard shortcut to open the search bar:
Mac:Command + f
Windows:Ctrl + f
Enter the text or layer name you want to find. The search results automatically populate as you type.
You can display results by your current page or see results for all pages.
Click to add search filters for layer type—such as text, frame, shape, etc.
Use and to move through your results.
In the Settings menu, use Other to search for everything else, such as widget or slice names.
Click to select a layer. Edit, replace, or delete selected layers as needed.
To return to the Layers panel, click X or press esc.
Replace text
Use the Replace option to quickly replace text layers.
Click and select Replace.
Search for the text you want to replace.
Note: Only text layers display as options to be replaced. If you search for an item that cannot be replaced (such as a widget or frame name), no results will display.
From the search results, select the layer you want to replace.
To select several layers, hold Command (Mac) or Ctrl (Windows) and click each layer.
To select all layers within a range, hold Shift and click layers at the beginning and end of the range.
Enter the replacement text in the Replace with field.
Click Replace to replace the selected layers, or click Replace all to replace all layers on the page.
To return to the Layers panel, click or press Esc.
Users with Edit access to a File can create and edit text layers
Convert any of your text layers into vector paths.
When you convert text to a vector path, you will no longer be able to edit the text or any properties associated with it. However, you will be able to edit the vector paths in vector edit mode.
This will allow you to continue to edit text as vector objects, allowing you to:
Customize aspects of a typeface
Create logos or wordmarks
Prepare assets for printing
Reduce file or export size
Combine multiple paths into a single object
There are two methods available:
Flatten text
When you flatten text layers, Figma will:
Combine any objects or layers you selected into a single layer
Convert text layers from editable text to vector paths
To flatten a Text layer:
Select the Text layer(s) you want to flatten:
Right-click on the layers (in the canvas or in the Layers Panel) and select Flatten from the options:
Or, use the Keyboard Shortcuts:
MacOS: CommandE
Windows: CtrlE
The Layers will be combined into a single layer:
You can double-click on the layer to enter Edit object mode:
Note: It's not possible to "unflatten" a layer. If you've made a mistake, you can undo the action using the Keyboard shortcut:
MacOS: ⌘Z
Windows: CtrlZ
Or, restore a previous version of the file in your Version History.
Outline Stroke
When you use Outline Stroke, Figma will:
Convert text layers from editable text to vector paths
Not combine any objects or layers you selected into a single layer
To apply Outline Stroke:
Right-click on the layer in the canvas.
SelectOutline Strokefrom the options.
Tip! Use the Keyboard Shortcut to apply Outline Stroke to your selection: