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

• 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.

  

• Add Emoji to Text Layers

  Before you Start

  Who can use this feature

  Users on Any Plan

  Users with Edit access to a File can add Components to text layers.

  You can add emoji to any Text object on your canvas, or in your Comments. Figma uses the Apple emoji style.

  MacOS

  You can add emoji to any Text object via the Emoji Picker:

  1. Create a Text object 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 object.

  Windows

  Before you can add emoji to Text objects, you will need to enable the Touch Keyboard:

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

  You can then add emoji to any Text object via the touch keyboard:

  1. Create a Text object in the canvas.
  2. Click the Touch Keyboard icon.
  3. Select the Emoji option:
  4. Choose the emoji you would like to use, to add it to your Text object.
• 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