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
  • Explore OpenType and other text properties

  Fonts

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

  Style text

  • Create and apply text styles
  • Create a bulleted list
  • Add links to text
  • Add emoji to text layers

  Edit text

  • Edit text layers
  • Resize text layers
  • Convert text to vector paths
  • Information on changes to line height behavior
• 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 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 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 →

• Add links to text

  Before you start

  Who can use this feature

  Users on Any Plan

  Users with Edit access to a file can create and edit links.

  Users with View access to a file can only follow links.

  Want to add links to Prototypes? Learn about Getting Started with Prototyping.

  Add links to any text layer within your design file to:

  • Direct collaborators to external sites like documentation and project management tools.
  • Create navigation within a large Figma file to specific frames and pages.
  • Link to other Figma files and prototypes.
  • Represent actual links that will exist in production.

  Note: It's not currently possible to add links to images or vector objects in the Editor, only when creating prototype hotspots. Linking to default email clients using HTML like mailto: is not supported at this time.

  Create a link

  You can add a link to an entire text layer, or to a selection of text within the layer. Select the text layer, then press the Enter key to edit the text layer and make your selection.

  Create link icon

  1. Make your selection.
  2. Click the create link icon in the toolbar:

  

  Create link shortcut

  1. Make your selection.
  2. Use the keyboard shortcut to open the link modal above the selected text:
     • MacOS: Command K
     • Windows: Control K
  3. Enter a URL or paste a URL from your clipboard:

  

  Paste in place

  1. Make your selection.
  2. Paste a URL from your clipboard using the keyboard shortcut:
     • MacOS: Command V
     • Windows: Control V 

  

  Note: If you want to display the full URL in the page, use the paste keyboard shortcut twice—once to paste it as text, and once more to turn it into a link.
  
  Keep in mind, you will need to edit both the text layer and the URL to make any changes.

  Tip! Learn more about how Links work in our Links playground file.

  Copy links to Files, Pages, and Frames

  Create navigation links to pages and frames within a large file, or link out to other Figma files and prototypes.

  To find the link for your destination:

  File

  1. Open the file in the Editor.
  2. Click the Share button and set Link Sharing permissions.
  3. Click Copy Link to copy the URL to your clipboard: 

  Prototype

  1. Open the file in the Editor.
  2. Click the Present button
     to open the prototype in presentation view.
  3. Click the Share Prototype button and set Link Sharing permissions.
  4. Click Copy Link to copy the URL to your clipboard.

  Page

  1. Open the Layers panel and expand the page list.
  2. Right-click on the page name and select Copy Link: 

  Frame

  1. Right-click on the Frame in the canvas or Layers Panel.
  2. Go to Copy/Paste > Copy Link.

  Once copied, you can create a text layer and use it as a link to a page, file, frame, or prototype.

  Tip! If you're using Figma in the browser, you can copy a link to the selected object from the browser's address bar.

  Interact with links

  Preview or follow a link

  1. Hover over the linked text to preview the link.
  2. Click Open Link to follow the link: 
  3. What happens when you follow the linked text will depend on the type of link:
     • Figma file or prototype: Figma will open links to other Figma files and prototypes—or frames and pages within them—in a new tab.
     • Page or frame: Figma will take you to the page or frame in the current file.
     • External website: Figma will open all external links in a new tab. The first time you open a link, you'll need to confirm that you're leaving Figma.

  Edit or delete a link

  1. Hover over the linked text.
  2. Click Edit to make changes.
  3. Update the URL or click the detach icon to remove the link:

  Style links

  You can style linked text as you would any other text layer. Whether this is applying text styles or adjusting text properties, like underline, font, or color.

  Links are styled with an underline by default. Use the keyboard shortcut to remove the underline:

  • MacOS: Command U
  • Windows: Control U

  Learn more about editing and styling text in Figma.

• 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.
• Bulleted and numbered lists

  Before you start

  Who can use this feature

  Supported on any team or plan.

  Anyone with can edit access to a file to create and edit text layers.

  Lists are a great way to organize and emphasize related information. List items in Figma can either be ordered or unordered in the form of a numbered or bulleted list.

  Figma currently supports up to five levels of indentation.

  

  Bulleted lists

  You can use bulleted lists to represent unordered sets of information. Figma bullets will keep the same styling at all levels of indentation. At the moment, bullets cannot be customized.

  Create a bulleted list

  1. Select the Text tool in the toolbar or by pressing the T key
  2. From within the text layer, there are a couple of different ways to start a bulleted list:
     • Enter one of the creation characters below followed by a Space:
       Mac:
       • -
       • *
       • ⌥ Option - 8
       
       Windows:
       • -
       • *
       • Alt + 0 + 1 + 4 + 9
     • In the right sidebar, under the Text properties section, you can also click to open the Type details panel. From the List style property, select Bulleted list.

  

  Note: Paragraph spacing does not work between list items. Any paragraph spacing in a text layer will be applied after the list and between non-list lines of text.

  Tip! You can use ⌘ Command – Shift – 8 to turn an individual text selection or multiple text layers into a bulleted list.

  Numbered lists

  Numbered lists can be used to represent groups of ordered or sequential information. In Figma, numbered list counters rotate between numbers, alphabetical characters, and roman numerals with each indentation:

  

  Create a numbered list

  1. Select the Text tool in the toolbar or by pressing the T key.
  2. From within the text layer, there are a couple of ways to start a numbered list:
     • Enter one of the creation characters below followed by a Space:
       • 1 - .
       • 1 - )
     • Click in the Text section of the right sidebar, then select Numbered list.

  

  Tip! You can use ⌘ Command – Shift – 7 to turn an individual text selection or multiple text layers into a numbered list.

  Format list items

  Keep in mind that keyboard shortcuts will activate automatic list styling.

  Using ⌘ CommandZ immediately after a list shortcut removes the default styling.

  Indentation

  Figma bulleted and numbered lists currently support five levels of indentation. To change a list item's indentation:

  Increase indentation

  • Use Tab - ⌘ Command - ] or Control + ] to increase the indentation of a line.
  • Pressing Tab will increase the indent again.

  Decrease indentation

  • Use Backspace or Delete at the beginning of a list item to delete the counter, but keep the same level of indentation.
  • Each line's indentation can be decreased individually.
  • Use Return or Enter while on an empty list item to decrease indentation.

  List styling

  Text color

  • Changing the text color of a list item will not change the color of the bullet or counter associated with it. Bullets will follow the color of the text layer they are in. 
  • Following list items will take on the text color of the item preceding it.

  

  Stroke

  • Stroke properties are applied to the entire selected text layer.
  • Changes to the weight of your text will apply to the bullet associated with it.

  Effects

  • Effects will be applied to the entire selected text layer. This includes any bullets and counters.

  Tip! Selecting the No list property from the Type panel removes any current list styling from a text selection.

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

• Add text in Chinese, Japanese, and Korean

  Before you start

  Who can use this feature

  Users on any team or plan can use these text properties.

  Users with can edit access to a file can apply and adjust text properties.

  CJK languages refers to scripts that use Chinese characters and their derivatives. This includes Chinese (Simplified and Traditional), Japanese, and Korean.

  Supported fonts

  If you are using the Figma desktop app, you can use any fonts already on your computer. If you're using Figma in the browser, you can install the Figma Font Helper to access your local fonts.

  Mac

  Figma supports the following native fonts, by language:

  • 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

  Figma supports the following native fonts, by language:

  • 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

  Google Noto Fonts

  Google has a repository of open-source fonts that support a variety of syllabary and logogram based languages.

  • Search for languages, regional variations, and font names on the Google Noto website.
  • Filter by Language when looking for Google Web Fonts.

  Figma includes a selection of popular Google Noto fonts in the font picker. This covers both the Serif and Sans Serif versions.

  Select a Noto font

  You can update the font for a selection of text, or an entire text layer.

  1. Select the text layer you want to update.
  2. Open the Design tab in the right sidebar.
  3. Click the next to the current font family.
  4. Search for and select the relevant Noto font.

  Tip! Figma lists some Noto fonts in shorthand. For example: Figma shows Noto Sans Simplified Chinese as Noto Sans SC.

  Listed below are the full name of supported Noto fonts:

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

  Figma displays the name of the following supported languages in full:

  Noto Sans or Noto Serif Bengali, Javanese, Malay, Telugu, Tai, Thai, Tamil, Gujarati and Kannada.

  Font fallback

  Font fallback allows you to use characters and icons that aren't specifically supported by that font.

  If a font doesn't support a character you input, Figma will render that specific character in a Noto font. No more empty spaces or missing character icons.

  For people writing in Chinese, Japanese, or Korean, Figma may choose the wrong language.

  To fix that, you can select your text and update the font to use the specific Noto font for your language. Or select another font that supports the language you’re writing in.

• Add icons to text layers with icon fonts

  Before you start

  Who can use this feature

  Users on any plan can use icon fonts in their designs.

  You will need to have can edit access to a file to edit any text layers.

  Icons are images or symbols that represent specific actions or tools in an interface. You can add icons to your designs as actual images, or use an icon font.

  Icon fonts are fonts that are made up of symbols, as opposed to regular letters and numbers. Like regular text, icon fonts can be styled using CSS, which makes them popular in web development. 

  Font Awesome icons

  By default, Figma supports Font Awesome, a popular set of icons in an easy-to-use font. Font Awesome is free to use, or you can purchase an extended range of icons.

  Font Awesome has both regular or solid versions of an icon. If an icon isn't showing up when you paste it, you may need to switch to the solid style to see the icon.

  

  In Font Awesome

  View and copy icons from the Font Awesome cheatsheet.

  1. Open the Font Awesome cheatsheet
  2. Use the tabs at the top of the page to choose between Solid or Regular Font Awesome icons. You'll need to update the font style in Figma to match: 
  3. Right-click on the icon you want to use and select Copy from the menu to add it to your clipboard:

  In Figma

  1. Create a text object in the canvas.
  2. In the Text section of the properties panel, click the arrow next to the font.
  3. Select the Font Awesome 5 Free font from the list.
  4. Based on your icon choice, use the font style field to select Regular or Solid:
  5. Paste the icon into your text object in Figma using the keyboard shortcut:
     • macOS: Command V
     • Windows: Ctrl V
  6. Figma will display the icon in the canvas:

   

  Other icon fonts 

  If you have a different icon font installed on your device, you can still use these icon fonts in Figma.

  There are a few ways to access fonts from your device:

  • Download the font helper to access local fonts in the browser
  • Use the Figma Desktop app

  Once you have access to your local fonts, you can find any icon fonts in the font picker.