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.

  Figma's Text Rendering

  There can often be a difference in how browsers and operating systems render text. This can make designing across systems and platforms unpredictable.

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

  Getting Started

  • Create Type layers with the Text tool
  • Edit Text Layers
  • Explore OpenType and other Text Properties

  Fonts

  • Browse and Manage Fonts in an Organization
  • Use Local Fonts with Figma Font Helper
  • Use Icon Fonts in Text layers
  • Manage Missing Fonts

  Styling

  • Create and Apply Text Styles
  • Use Text in Non-English Languages
  • Create a Bulleted List
  • Add Emoji to Text layers
  • Changes to Line Height Behavior
• Create Type Layers with the Text tool

  Before you Start

  Who can use this feature

  Users on Any Plan

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

  I want to:

  • Create a new Text layer
  • Adjust the Resize Behavior

  Create a new Text Layer

  You can create a new text layer using the Text tool.

  You can select the Text tool from 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. The approach you choose will determine the auto-resizing behavior:

  • Click once in the canvas
  • Click and drag in the canvas

  Single Click

  This will create a Text layer with auto-resizing set to Grow Horizontally. This allows the width of the Text box to grow as you add more Text. This is sometimes called Point Text.

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

  Click and Drag

  This creates a Text layer with auto-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 sometimes called Area Text.

  1. Click somewhere on the canvas.
  2. Drag to create a Text layer with specific dimensions. 

  Adjust the Resize Behavior

  If you want to change this behavior, you can adjust the Resizing settings for a Text object. 

  The Resizing setting can be found in the Advanced Type menu: 

  In addition to Grow Horizontally and Fixed Size, you can set your Text layers to Grow Vertically. This fixes the width of the Text box and allows it to grow vertically as new line are added.

  Learn more about the Resizing settings in our Explore Text Properties article.

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

  You can make changes to a Text layer after you have created it.

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

  Select Text Layers

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

  To select a single layer, simply click on the Text layer in the canvas.

  To select multiple Text layers:

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

  To select all Text Layers:

  1. Open the main menu. You can use the keyboard shortcuts:
     • MacOS: Command-/
     • Windows: Ctrl + /
  2. Search for Select All Text Layers. You can also choose to select layers with the same properties.

  Tip! You can also choose to select Text 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 do this in a couple of ways:

  • Double-click on the Text layer.
  • With the Text layer selected, press the [Enter] or [Return] key on your keyboard.

  You will then be able to edit the contents of the Text box:

  Tip! Once you are in Text edit mode you can click on any other Text object on the Page to edit.

  Adjust the Dimensions

  There will be a blue bounding box around every Text layer. This bounding box controls how we position and arrange Text on the canvas.

  It's also an important component in setting and adjusting Vertical and Horizontal alignment.

  If you would like to change the size of a Text layer, or how much space in the canvas it uses, you can adjust the bounding box.

  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. We will reposition the Text within the layer based on its current properties.

  Resize Text using 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 scaling Text layers by adjusting the Font size to ensure whole numbers.

  1. Select the Scale tool in the Toolbar. You can find this in the drop down under the Move tool:
  2. Select the Text layer and hover over the bounding box until the Scale handle appears.
  3. Click and drag to Scale your Text. You will see the Font Size change in the Text section of the Properties Panel.

  Convert Text to Vector Paths

  You may want to convert your Text from glyphs to vector pathways.

  This is handy if you want to customise aspects of the text for a logo or wordmark. 

  Or, if you want to reduce the File size, or the size of any exports

  There are two main approaches:

  Flatten Text

  If you choose to flatten your Text layers, we will:

  • Combine selected objects or layers into one layer.
  • Convert Text layers from editable text to vector paths.

  Note: It's not possible to "unflatten" a layer. If you've made a mistake, then 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.

  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:

  Outline Stroke

  If you want to convert Text layers to vector paths, without combining them into a single layer, you can use the  Outline Stroke setting.

  1. Right-click on the layer in the canvas.
  2. Select Outline Stroke from the options:
  3. Or, use the Keyboard Shortcuts:
     1. MacOS: ⇧ + ⌘+ O
     2. Windows: Ctrl + Shift + O
• 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.

  I want to use Emoji on:

  • MacOS
  • Windows

  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.
• Create a Bulleted List

  Creating a bulleted list within a single Text layer isn't currently supported. 

  We've put together some tips on how to replicate this using existing features. 

  1. Create a Text layer for the bullet
  2. Create a Text layer for the list item
  3. Duplicate both layers to create further list items
  4. Use Smart Selection to adjust the spacing between items
  5. Create Components to reuse in your designs (Optional)

  Replicate a Bulleted List

  1. Select the Text tool in the toolbar. Or use the T keyboard shortcut. 
  2. Click on a spot in the canvas to create a new Text layer. This will be the Text layer for our bullet. You can also click and drag to create a Text layer with a Fixed size: 
  3. Use the keyboard shortcut to add a single bullet in the Text layer:
     
     • macOS: Option-8
     • Windows: Alt + 0 1 4 9
  4. Create a second text object next to the bullet. This is where we'll add the text for the first item on our list:

     Note: If you are using different a font or font size is used between the bullet and the text, make sure the line height is set to an equivalent value.

  5. Select both Text Layers and copy them.
     
     You can use the following methods:
     
     1. Duplicate:
        • macOS: Command-D
        • Windows: Control + D
     2. Use the Copy and Paste shortcuts:
        • macOS: Command-C and Command-V
        • Windows: Control + C and Control + V
     3. Hover over the selected layers, hold down the Option key and drag to create a copy of those layers. Release your mouse/trackpad before you release the option key.
  6. You can then adjust the space between the bullet and the text. As well as the spacing between each list item. Our Smart Selection feature will help to create uniform spacing: Using Smart Selection.

  Tip! You may also want to create a Component of the bullet and the Text box. This would allow you to reuse the bullet you've created for additional lines. Learn more about creating Components in our Using Components and Instances article.

• Create and Apply Text Styles

  Before you Start

  Who can use this feature

  Users on Any Plan

  Users with Edit access to a File can create and edit Styles.

  Users with View access to a File can use Styles from libraries they have access to.

  Styles allows you to define a set of properties that can be reused across your team's designs.

  You can apply a Text Style to an entire block of text e.g. headings (h1, h2 etc). Or, to text strings within a text layer e.g.links.

  I want to:

  • Create a Text Style
  • Apply a Style to Text
  • Edit an Existing Text Style

  Create a Text Style

  You can create a Style from an existing Text layer.

  1. Select a Text layer that has the properties you want to reuse.
  2. Click the Style icon (four dots) in the Text section of the Properties Panel: 
  3. Click the "+" icon in the Text Styles menu to create a new style.
  4. Give the Style a name and click Create Style to apply.

  Apply Styles to Text

  You can then apply that Style to other Text layers within that File.

  Tip You can also apply Color and Effect Styles to Text layers!

  1. Select the Text layer you want to apply the Style to.
  2. Click the Style icon (four dots) in the Text section of the Properties Panel.
  3. Select the Style from the options to apply it to the selected Text layer:

  Edit an Existing Style

  You can adjust the properties of an existing Style at any time. This applies to Local Styles, as well as Styles that are published in a Team Library.

  • When editing Local Styles, your changes will immediately be applied to any Text layers in that File. 
  • For Styles in a Team Library, you will need to publish and accept these changes to see them in your designs.

  Learn more about making changes to Styles in our Managing and Sharing Styles article.

• Use Text in Non-English Languages

  Update: Figma now supports Font Fallback! This allows you to view any syllabaries, logograms or symbols, directly in the Editor. Previously, if the font didn't have those glyphs then they would show as blank spaces when viewing or editing text in Figma.

  In this article, we'll show you a couple of ways you can make working with Figma in other languages, a little easier.

  1. Font Fallback
  2. Use Google Noto Fonts
  3. Supported Local Fonts
  4. Use Right-To-Left (RTL) Languages

  Font Fallback

  Font Fallback allows you to use symbols, logograms or other icons, that aren't part of the font you're using, within text objects in your Figma designs.

  This is especially handy for designers using languages that rely heavily on logograms like Chinese, Japanese, or Korean languages.

  However, you can also use this to simply paste symbols into your text, that don't exist in that font, without being met with a blank space.

  

  Use Google Noto Fonts

  Google has developed a font family, Google Noto, that supports a variety of syllabary and logogram based languages. If you spend a majority of time designing in/for a language that relies on syllabaries or logograms, then we recommend using the Noto fonts.

  Figma includes a selection of the most popular Google Noto fonts, by default. This covers both the Serif and San Serif versions. You can select a Noto font from the Font Picker, like you would any other font:

  1. Click the down arrow next to the current font.
  2. Select the applicable Noto font from the options.

  Note: Some of the Noto fonts are listed in Figma with a shorthand version of the language supported e.g. Nato Sans SC instead of Nato Sans Simplified Chinese. The list below details the full name of the supported Noto fonts:

  • Noto Sans (most Latin and Cyrillic languages including English and Russian)
  • Noto Sans SC (Simplified Chinese)
  • Noto Sans TC (Traditional Chinese)
  • Noto Sans JP (Japanese)
  • Noto Sans KR (Korean)

  Other supported Noto fonts, such as Noto Sans Bengali, Javanese, Malay, Telugu, Tai, Thai, Tamil, Gujarati and Kannada - will be displayed in full.

  Supported Local Fonts

  If you are using the Figma Desktop app, or have the Figma Font Helper installed, then you can use any fonts stored locally on your computer.

  By default, Figma will support the following international fonts:

  • macOS
  • Windows

  MacOS

  • Simplified Chinese中文: Song, ST Heiti, ST Kaiti, Fang Song
  • Traditional Chinese 中文: Apple LiSung, LiHei Pro, LiSong Pro
  • Japanese 日本語: Osaka, Hiragino
  • Korean 한국어: Hangangche, Seoul, Apple SD Gothic Neo

  Windows

  • Simplified Chinese 中文: SimSun, KaiTi, Microsoft YaHei
  • Traditional Chinese 中文: Ming Light, Microsoft JhengHei
  • Japanese 日本語: MS Gothic, MS Mincho
  • Chinese 中文: Microsoft JhengHei, Microsoft YaHei, SimHei
  • Korean 한국어: Dotum, Gulim, Batang, Gungsuh

  Learn more about using local fonts in our Use Local Fonts article.

  Use Right-To-Left (RTL) languages

  At present, Figma does not natively support Right-To-Left (RTL) languages e.g. Arabic, Hebrew etc. However, you are able to paste pre-formatted text (from an RTL language) into a text object in Figma.

  We recommend using the following workaround to convert text into RTL format. This involves using Sublime Text, in conjunction with a bidirectional SublimeText plugin.

  1. Download SublimeText, a popular text editor that supports code, markup and regular prose: https://www.sublimetext.com/
  2. Download and install the BIDI plugin: https://github.com/imdark/Sublime-Text-2-BIDI
  3. Enter your text into SublimeText in the language/font you wish to use.
  4. Convert it into the correct glyphs using the plugin.
  5. Copy the converted text from SublimeText.
  6. Paste this into a text box in Figma. The desired glyphs and direction will be retained.
• Use Icon Fonts in Text layers

  Before you Start

  Who can use this feature

  Users on Any Plan

  Users with Edit access to a File can edit Text layers.

  Want to learn the basics of working with Text? Check out our Create Text Layers article or watch the Video Tutorial...

  By default, Figma already supports Font Awesome, a popular and easy-to-use set of icons. 

  If you'd like to use icon based fonts with Figma, you can do this using Local Fonts. This will require you to have a copy of this font installed locally on your device. Once installed, any icon fonts will be available in the Font Picker alongside your other fonts.

  Use Font Awesome

  1. Create a text object in the Editor.
  2. In the Text section in the Properties Panel, click the down arrow next to the current font.
  3. Select the Font Awesome 5 Free font from the list: 

     

  4. Copy the icon your want to use from the Font Awesome cheatsheet: https://fontawesome.com/cheatsheet
  5. Paste the icon into your text object in Figma:
  6. Font Awesome has both Regular or Solid versions of an icon. Depending on the icon you wish to use, you may need to switch between these using the Font Style field:

  Note: Font Awesome has icons in both Regular or Solid style. If an icon isn't showing up when pasted, you may need to switch the Font Style to Solid before the icon is displayed.

• Use Local Fonts with Figma Font Helper

  Before you Start

  Who can use this feature

  Users on Any Plan

  The Desktop App is available for Windows and macOS. (Linux and ChromeOS are not supported).

  Figma gives you access to an extensive catalog of Google Web Fonts. If you would like to use extra fonts in your Figma designs, you can use local fonts on your computer.

  If you're using the Figma Desktop app, then any local fonts will already be available to you.
  You can find these alongside the Google Web Fonts in the Font Picker.

  If you're using Figma in the browser, then you will need to install the Figma Font Helper application. 
  This allows you to access any local fonts in the browser.

  Note: Professional Teams rely on all collaborators having a font installed locally. Figma Organization allows collaborators to share fonts across a team or Organization.

  ---

  Install Figma Font Helper

  When you install the Figma Font Helper, you will see it referred to as the FigmaDaemon. Your computer will use this name in the Activity/Resource Monitor and on any dialog windows. "Daemon", in this context, refers to a program that runs in the background. 

  1. Open the File Browser in Figma.
  2. Click on your name in the top-left corner.
  3. Select Account Settings from the options.
  4. Scroll down to the Fonts section.
  5. Click the Download Installer to enable local fonts button:
  6. Or, download the Font Helper from the Figma website: https://www.figma.com/downloads/
  7. Run the installer and follow the on-screen instructions.

  Uninstall Figma Font Helper

  You will need to download an Uninstaller to remove the Figma Font Helper from your computer.

  1. Click on your name in the top-left corner and select Account Settings.
  2. Scroll down to the Fonts section.
  3. Click the Download Uninstaller to Disable Local Fonts link.
  4. Run the uninstaller and complete the on-screen instructions.
  5. The Installer will remove the Figma Font Helper from your computer.

  Note: If you have the Figma Desktop App downloaded, you will still have access to local fonts. The Figma Desktop app accesses local fonts via Figma Agent. This is the program you will see in your Activity/Resource Monitor.

  Use Adobe TypeKit Fonts

  We don't have an integration with Adobe Typekit - now known as Adobe Fonts.

  If you have Adobe Fonts on your computer, you will be able to access them as Local Fonts in Figma.

  1. Activate Adobe Fonts on your computer (Link to Adobe's Help Center).
  2. Install Figma Font Helper (Browser only)

  Note: Adobe Fonts supports devices running macOS or Windows 10. If you aren't seeing these fonts, check you're running the latest version of Windows.