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.

• 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.
• Create a bulleted list

  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

  At the moment, there isn't a purpose-built bulleted list feature in Figma.

  Instead, we'll be using text layers, Smart Selection, and Components to create a bulleted list.

  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

  Create a text layer for the bullet

  1. Select the Text tool in the toolbar or by pressing the T key.
  2. Create the text layer for the bullet.
     1. Click on a spot in the canvas to create a resizing text layer. 
     2. 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

  

  Create a text layer for the list item

  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.

  Copy your bullet and item

  Select both Text Layers and copy them. You can use any of the following methods.

  Duplicate:

  • macOS: Command D
  • Windows: Control D

  Copy and paste

  Use the Copy and Paste shortcuts:

  macOS: Command C and Command V

  Windows: ControlC and Control V

  Drag to copy

  1. Hover over the selected layers, hold down the Option key and drag to create a copy of those layers.
  2. Release your mouse/trackpad before you release the Option key.

  Adjust spacing with Smart Selection

  You can now adjust the space between the bullet and the text, as well as the spacing between each list item.

  Use Smart Selection to create uniform spacing between objects.

  

  Tip! Create a Component for the bullet and the Text box to reuse the bullet for each item in the list. Learn more about creating components in our Getting started with Components 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.

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

• Access local fonts on your computer

  Before you start

  Who can use this feature

  Supported on any team or plan

  Caution: Figma doesn't currently have applications available for computers and devices running ChromeOS or Linux. Unfortunately, this means Chromebook and Linux users can only use Google's Web Fonts.

  Members of Figma Organizations are able to upload fonts and share them in teams or across the organization, regardless of platform.

  Figma gives you access to an extensive catalog of Google Web Fonts, which you can use in Figma without having to install anything.

  If you've purchased your own fonts, or have a catalog of fonts on your computer, you'll likely want to use them in your designs.

  For Figma to find your fonts, you'll need to make sure these are added or installed in your operating system (OS). Follow the links below for instructions on how to add fonts to your specific OS:

  • Mac: How to install and remove fonts on your Mac (via Apple)
  • Windows: Add a font (via Microsoft)

  To access these fonts installed from the font picker, you'll need to use the Figma desktop app ↓ or install the Figma font helper ↓. 

  I'm using the desktop app

  Figma agent is a secure background service that Figma also installs when you install the desktop app. It allows Figma to access fonts on your computer, and open Figma links in the desktop app.

  If you're using the Figma desktop app, you can find your local fonts in the font picker:

  1. Select a text layer, or select some of the text within a text layer.
  2. Figma will show the Text properties in the right sidebar.
  3. Click the to the right of the font to browse your font list.
  4. Click on a font family to select it. You can then adjust other properties of the text, like style, size, line height, letter spacing, and more. Learn more about text properties →

  Figma agent runs an HTTP and HTTPS server on localhost. It only allows connections from figma.com and isn't exposed to the public internet.

  You may see events related to the Figma agent in your console log or when monitoring activity on your computer. The loopback address for localhost resolves to 127.0.0.1.

  I'm using Figma in the browser

  If you're using Figma in the browser, you will need to install Figma's font helper. This is a secure background service that allows Figma to access any fonts on your computer and make them available in the font picker.

  Install the font helper

  Note: The Figma font helper has the same browser requirements as using Figma in the browser. Learn more about Figma's browser requirements →

  You can download the font helper from two places:

  • 1

    Figma's downloads page

    1. Visit Figma's downloads page →
    2. Run the installer and follow the on-screen instructions.
  • 2

    Your account settings

    1. From the file browser, click on your name in the top-left corner to open your account.
    2. Select the Settings tab at the top of the page.
    3. In the Fonts section, select the Download installer to enable local fonts button.
    4. Run the installer and follow the on-screen instructions.

  Uninstall the font helper

  To remove the font helper from your computer you will need to run the uninstaller.

  • Windows: the app will come with an uninstaller.
  • Mac: click this link to immediately download the uninstaller.

  You can also find the uninstaller in your Figma account:

  1. From the file browser, click on your name to open your account.
  2. Select the Settings tab and in the Fonts section, click the Download Uninstaller to Disable Local Fonts link.
  3. Run the uninstaller and complete the on-screen instructions.

  Figma doesn't have an integration with Adobe Fonts (formerly Adobe Typekit). However, if you activate Adobe Fonts on your computer (via Adobe), you can access them in the font picker.

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