Related Videos

• Getting started with text

  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.

  Getting Started

  • Create type layers with the Text tool
  • Explore text properties
  • Add links to text
  • Create text and links in FigJam

  Fonts

  • Access your local fonts with the Font Helper
  • Add icons to text layers with icon fonts 
  • Add text in Chinese, Japanese, and Korean
  • Add right-to-left text

  Edit text

  • Edit text layers
  • Resize text layers
  • Convert text to vector paths

  Style text

  • Create and apply text styles
  • Create a bulleted list
  • Add emoji to text layers
  • Use variable fonts
  • Use OpenType features

  More

  • Information on changes to line height behavior
  • Troubleshoot font issues
  • Manage conflicting fonts 
• Create type layers with the text tool

  Before you start

  Who can use this feature

  Users on any team or plan can create text layers.

  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.

  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.

  

  Tip! Adjust the resizing behavior in the Text section of the right-side panel. .

• Edit text layers

  Before you Start

  Who can use this feature

  Users on any Figma team or plan can use the text tool

  Users with Edit access to a file to create and edit text layers

  Want to adjust the properties of a Text layer? Check out our Explore Text Properties article.

  You can make changes to the content of any text layer you have created.

  Select text layers

  You can select a single Text layer at a time, or multiple.

  Select a single layer

  Click on the text layer in the canvas or in the layers panel.

  Select multiple text layers

  1. Select the first layer.
  2. Hold down the Shift key.
  3. Click on any additional layers to select them:

  

  Select all text layers

  1. Open the quick actions bar using the following keyboard shortcut: 
     • MacOS: Command /
     • Windows: Ctrl /
  2. Search for Select All Text Layers. You can also choose to select layers with the same properties.

  Edit the contents

  To make changes to the content of a Text box, you will need to enter Text Edit mode. You can enter text edit mode in a couple of ways:

  • Double-click on the text layer.
  • Select the text layer and press the Enter or Return key.

  Edit the contents of the Text box:

  

  Tip! Once you are in Text edit mode you can click into any other text layer on the page to the enter 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 →

  Spell check

  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

  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.
• Resize text layers

  Before you Start

  Who can use this feature

  Users on Any plan can use the text tool

  Users with Edit access to a File to create and edit text layers

  Want to adjust the properties of a Text layer? Check out our Explore Text Properties article.

  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.

  1. Select the Text layer you'd like 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.
  4. 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.

  1. Select the Scale tool in the move drop down in the toolbar. Or, press the K keyboard shortcut.
  2. Select the Text layer and hover over the bounding box until the Scale handle appears.
  3. Click and drag to Scale your Text. The Font Size will change in the Text section of the Properties Panel.

  

• Find and replace in Figma

  Before you Start

  Who can use this feature

  Users on any plan

  Users with View or Edit access to a file can find text

  Users with Edit access to a file can replace text

  Using FigJam? Check out our Find and replace text in FigJam boards article.

  Locating items in 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.

  1. 1. Click in the left sidebar or use the following keyboard shortcut to open the search bar:
        • Mac: Command + f
        • Windows: Ctrl + f
     2. 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. 
     3. Click to select a layer. Edit, replace, or delete selected layers as needed.
     4. To return to the Layers panel, click X or press esc.

  

  Replace text

  Use the Replace option to quickly replace text layers.

  1. Click and select Replace.
  2. 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.

  3. 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.
  4. Enter the replacement text in the Replace with field.
  5. Click Replace to replace the selected layers, or click Replace all to replace all layers on the page.
  6. To return to the Layers panel, click or press Esc.

  

• Convert text to vector paths

  Before you Start

  Who can use this feature

  Users on Any Plan

  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:

  1. Select the Text layer(s) you want to flatten:
  2. Right-click on the layers (in the canvas or in the Layers Panel) and select Flatten from the options:
  3. Or, use the Keyboard Shortcuts:
     • MacOS: Command E
     • Windows: Ctrl E
  4. The Layers will be combined into a single layer:
  5. 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: Ctrl Z

  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:

  1. Right-click on the layer in the canvas.
  2. Select Outline Stroke from the options.

  

  Tip! Use the Keyboard Shortcut to apply Outline Stroke to your selection:

  • MacOS: Shift ⇧ ⌘ O
  • Windows: Ctrl Shift O