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 
• Add right-to-left text

  Before you start

  Who can use this feature

  Supported on any plan

  Available in Figma design and FigJam files

  Users with can edit access to a file can use RTL and bidirectional text controls

  RTL languages and bidirectional text are supported in Figma design and FigJam files. Control the direction of bidirectional text on text layers, stickies, arrows, and more.

  • RTL (right-to-left) refers to scripts, or writing systems, that start on the right and continue to the left. This includes Arabic, Hebrew, Farsi, Urdu, and more.
  • Bidirectional (bidi) text refers to text containing both RTL and LTR (left-to-right) scripts, or writing systems.

  By default, Figma automatically handles text direction based on language detection. However, you can override text direction with controls ↓ in Figma design and FigJam files.

  RTL fonts are available by default in Figma design. If a character isn’t supported by the font you’re using, Figma will fall back ↓ to a Noto font.

  Note: If any RTL plugins were previously used on text layers in files, the text will be preserved. However, you can upgrade these text ↓ layers to use Figma’s RTL and bidi features.

  RTL text

  Align text

  In Figma design files, text layers default to left alignment. That is, the blocks of text align to the left side of the layer’s bounding box. However, Figma will remember the alignment setting of the previous edited text layer until the file tab refreshes or closes.

  Note: Each text layer can have one text alignment. If you need different text alignment, create a new text layer.

  In FigJam, text will automatically right-align on new stickies if you’re typing in an RTL script.

  Navigate text

  Mixing RTL and LTR scripts in the same text layer affects how highlighting and cursor movements work.

  When using the left and right arrow keys to navigate through your text, think of their directions as “forward” and “backward” based on the direction setting ↓ of the text.

  When clicking and holding your mouse to highlight bits of text, the highlight moves in the direction of the selected language.

  Direction controls

  Figma supports bidirectional text, so you can write in both LTR and RTL scripts in the same paragraph. By default, Figma automatically handles text direction based on language detection. However, controls are available to override text direction per paragraph in Figma design and FigJam files.

  If an RTL script is detected in your text layer, a will appear in the text section of the right sidebar, allowing you to control the text direction.

  Figma design

  Change the direction of RTL text in a Figma design file from the right sidebar, quick actions menu, or main menu.

  Right sidebar:

  1. Select text layer(s) containing RTL script.
  2. Click or to toggle between RTL and LTR directions.

  Quick actions:

  1. Select text layer(s) containing RTL script.
  2. Open the quick actions menu.
     • Mac: ⌘ Command/
     • Windows: Control/
  3. Use right to left text direction or left to right text direction.

  Main menu:

  1. Select text layer(s) containing RTL script.
  2. Click to open the main menu.
  3. Go to Text > Text direction.
  4. Select Left to right or Right to left.

  FigJam

  Change the direction of RTL text in a FigJam file from the quick actions menu or the main menu.

  Quick actions:

  1. Select text layer(s) containing RTL script.
  2. Open the quick actions menu.
     • Mac: ⌘ Command/
     • Windows: Control/
  3. Use right to left text direction or left to right text direction.

  Main menu:

  1. Select text containing RTL script.
  2. Open the main menu in the top left corner.
  3. Go to Text > Text direction.
  4. Select Left to right or Right to left.

  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.

  Figma’s default font list includes RTL fonts.

  If the font you’re using does not support the RTL scripts you’re typing, Figma will fall back to a different font ↓.

  Tip! Figma supports most Google fonts. Go to fonts.google.com and use the Languages filter to find fonts that support the script you want to use.

  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.

  Text using RTL plugins

  Any RTL plugins previously used on text layers in Figma design or text in FigJam will be preserved. However, you can upgrade the text to use Figma’s RTL and bidirectional control features.

  Before you upgrade: Check the RTL plugin for a way to reset the text to its original state before the plugin was used. This ensures your text will flow as expected when you upgrade to using Figma’s RTL and bidirectional features.

  If the plugin doesn’t provide a way to reset the text, you can still upgrade it to use Figma’s RTL and bidi features, but you will need to create a new text layer and rewrite your copy.

  Figma design

  Upgrade specific text layers using RTL plugins in Figma design files to use Figma's RTL and bidirectional text features.

  Right sidebar:

  1. Select text layer(s) that previously used an RTL plugin.
  2. From the right sidebar, click in the Text section to open the Type details panel.
  3. At the bottom of the Type details panel, click Upgrade.

  Quick actions:

  1. Select text layer(s) that previously used an RTL plugin.
  2. Open the quick actions menu.
     • Mac: ⌘ Command/
     • Windows: Control/
  3. Use update to support bidirectional text.

  FigJam

  Upgrade specific text using RTL plugins in FigJam files to use Figma's RTL and bidirectional text features.

  1. Select text that previously used an RTL plugin.
  2. Open the quick actions menu.
     • Mac: ⌘ Command/
     • Windows: Control/
  3. Use update to support bidirectional text (RTL).
• Use OpenType features

  Before you start

  Who can use this feature

  Users on any team or plan can use OpenType features.

  Users with can edit access to a Figma design file can apply and adjust OpenType features to text.

  OpenType can refer to a format or a set of features or functions available in a font. In this article, we're referring to OpenType features.

  Figma supports OpenType features across all fonts. Not all fonts support the same OpenType features.

  Typeface creators have full control over which OpenType features they support. They could be popular features - like kerning, case, or numerical figures. Or, custom features like alternative characters or glyphs, and stylistic alternatives.

  OpenType features vary between fonts, so we won't post a list of possible features.

  Instead, we'll show you how to use the Type details panel. This will allow you to explore and interpret a font's available OpenType features.

  Tip Learn more about OpenType and Figma in our blog post: An Ode to OpenType

  Explore OpenType features from the Type Details panel.

  • We display any OpenType features that the font supports below the Numbers setting.
  • We will grey out the OpenType feature if a font does not support it.
  • Hover over a feature's button to view a preview of the feature.

  Letterforms

  Letterforms include:

  • Ligatures
  • Rare Ligatures
  • Contextual Alternates
  • Ordinals

  Stylistic Sets ssxx

  Stylistic sets vary greatly - in name and availability - between fonts. A font can support up to 20 stylistic sets. Some examples include:

  • Stylistic Alternates
  • Alternate Digits
  • Disambiguation
  • Lower case R curves into rounded neighbors

  Character Variants cvxx

  Character variants vary greatly - in name and availability - between fonts. These are at the discretion of the typeface creator. They could include the following types of variations:

  • Open Four
  • Closed lower case G
  • Closed lower case A

  Horizontal Spacing

  Use horizontal spacing, like kerning and kerning pairs, to change the spacing between characters. 

  More features

  More features can include fraction denominators, numerators, and more. 

  

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

  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.
• Find and replace text in Figma files

  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 text in large files can be a challenge. Find and replace lets you quickly navigate through text and make updates to text layers as you go.

  Find text

  Use the Find option to quickly search your entire file for text, layers, objects, and more.

  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 you want to find. The search results automatically populate as you type.
  3. Click to add search filters and use and to move through the results. You can display results by your current page or see results for all pages.
     

     Note: The Other option in the Settings dropdown menu searches for all text not covered by the other options such as widget or slice names.

  

  4. To return to the Layers panel, click 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 text that cannot be replaced (such as a widget or frame name), no results will display.

  3. Enter the replacement text in the Replace with field.
  4. Click Replace to replace the currently highlighted instance or click Replace all to replace all instances.
  5. To return to the Layers panel, click or press Esc.

  

• 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. Once in the text layer, there are a few ways to start a bulleted list: 
     • Enter one - or * followed by a Spaceon a Mac or Windows.
     • Enter the keyboard shortcuts:
     • Mac: ⌥ Option8
     • Windows: Alt+0+1+4+9
     • In the right sidebar, under the Text properties section, you can click to open the Type details panel. From the List style property, select Bulleted list.

  

  Tip! You can use ⌘ CommandShift8 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 ⌘ CommandShift7 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.

  Spacing

  List

  List spacing lets you control the distance between each line item in a bulleted or numbered list. By default, list spacing is set to 0 when creating a new list and for any existing text styles. Figma represents list spacing in pixels (px).

  To adjust list item spacing:

  1. Select text in a list or a text layer with only list text.
  2. Use the field to enter a px value in the list spacing field. Or hover above the icon and drag to decrease (left) or increase (right) the value.

  You can also adjust list spacing from the Type details panel by clicking in the Text section of the right sidebar.

  Paragraph

  Paragraph spacing lets you control the distance between paragraphs. This can increase or reduce the whitespace around text in your design. White space can help to focus the viewer's attention, as well as increase legibility and readability.

  Figma represents paragraph in pixels (px). Enter a px value in the paragraph spacing field. Or hover above the icon and drag to decrease (left) or increase (right) the value.

  Note: Figma will create a new paragraph when you use the Enter or Return keys. This is something to bear in mind if your text resizing is set to Auto Width.

  Learn more about text properties →

  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.

• 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

  To preview a URL link, hover over the linked text.

  To follow a link, click the linked text. What happens when you follow the linked text depends on the type of link:

  • Figma design or FigJam files: Links to other Figma files, prototypes, frames, or pages open in a new tab.
  • Page or frame in current file: Figma takes you to the page or frame in the current file.
  • External website: All external links open in a new tab in your browser. If it’s your first time opening a link, you'll need to confirm that you're leaving Figma.

  To prevent a link from opening when clicking it, hold ⌘ Command or Control while clicking.

  Note: If you’re in text edit mode, you’ll need to hover over the linked text and click the URL from the link modal.

  Edit or delete a link

  1. Double-click the linked text to enter text edit mode.
  2. Click or hover over the linked text to open the link modal.
  3. Click Edit.
  4. Update the URL, or delete the URL to remove the link.

  

  Note: If you double-click a linked text and the Edit button is unavailable, this means the layer is locked. Learn how to lock and unlock layers →

  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.