Related Videos

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

  

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

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

• 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

  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.
• 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 version of a character.

  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.