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.

  

• Explore text properties

  Who can use this feature

  Users on any team or plan can use text properties.

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

  Text properties allow you to control everything from the appearance and position of text, to resizing behavior and OpenType features.

  In this article, we'll take you through all the properties available for text. As there are a number of properties available, we've grouped them by location in this article, followed by sections with additional details. 

  Access text properties

  Text properties can be found in the right sidebar and in the type settings panel. 

  Right sidebar

  Apply and adjust text properties in the Text section of the right sidebar.

  Use the annotated image below to identify each property in the properties panel. Click the link to learn more about each property.

  

  1. Click the icon to view, create and apply text styles
  2. Click the arrow to browse a list of web, local, and shared fonts to find a typeface or font family
  3. Use the arrow to select a font weight or style.
  4. Use the arrow to adjust the size of your text
  5. Adjust the vertical distance between lines of text using the line height field.
  6. Adjust the horizontal distance between letters with letter spacing
  7. Adjust the vertical distance between paragraphs with paragraph spacing.
  8. Select how text overflows or wraps with resizing behavior.
  9. Adjust the horizontal alignment of text within the text box.
  10. Adjust the vertical alignment of text within the text box.
  11. Click to open the type settings panel and explore more text properties.

  Type settings panel

  The type settings panel gives you access to some extra text properties. You can also access any OpenType features from this panel.

  To open the type settings panel, click the three dots in the bottom-right corner of the Text section.

  

  1. See a preview of any text properties
  2. Basics tab
  3. Choose how you want your text to horizontally resize
  4. Adjust the horizontal alignment of text
  5. Apply decoration to text, like strikethrough and underline
  6. Change the spacing between paragraphs of text
  7. Offset the first line of text with paragraph indentation
  8. Create numbered or bulleted lists →
  9. Details tab
  10. Adjust the letter case. Choose from uppercase, lowercase, capitalize, and small caps. If available, you can also toggle case-sensitive forms and capital spacing. 
  11. Apply any number settings, such as style, position (superscript and subscript), fractions, and more.
  12. Access any OpenType features, like letter forms, stylistic sets, character variants, horizontal spacing, and more
  13. Variable tab (available for variable fonts only). Adjust a font's variable axes settings.
  14. Click to close the type settings panel.

  Preview

  Use the preview at the top of the type details panel to see how a particular property or OpenType feature looks. Hover over any feature or property to see the preview.

  Figma will display sample text that best suits the feature you're previewing. This includes:

  • Blocks of text for alignment, spacing, and indentation.
  • Numerals for number properties.
  • Letters (or combinations of letters) affected by ligatures or stylistic alternatives.

  Basic properties

  Font family

  There are a few terms associated with a font:

  • A typeface is a set of letterforms and glyphs with similar design features.
  • A font is a file containing the visual details that make up the design of each glyph or letter in that typeface.
  • A font family is the collection of styles that make up a typeface. For example: Helvetica, Times New Roman, and Roboto are all font families.

  Figma will use Inter as the default font for new text layers. You can select another font family using the font picker. Click the arrow to explore styles for the selected font.

  Font weight

  A typeface can have any number of styles or weights. Every font family will come with its own selection of styles. For example, a few font weights from the Inter font family include thin, light, regular, medium, bold, black, and more.

  You can access weights once you select the font family. Adjust the font-weight using the field directly below the font family.

  • Click the arrow to explore styles for the selected font.
  • Use the keyboard shortcuts to increase and decrease the font-weight.
    • Mac: Hold down ⌥ Option ⌘ Command and < to increase or > to decrease.
    • Windows: Hold down Ctrl Alt and < to increase or > to decrease.

  Font size

  Font size controls the scale of your text. Figma represents font size in density-independent pixels.

  Adjust the font size using the field next to the font style. There are a few ways to adjust font size:

  • Click the arrow to select a default font size.
  • Enter your own number in the field.
  • Use the keyboard shortcuts:
    • Mac: Hold down Shift ⌘ Command and < to increase or > to decrease.
    • Windows: Hold down Ctrl Shift and < to increase or > to decrease.

  Figma represents text sizes in a few different ways.

  If you're translating your designs to code, your screen resolution will determine the actual size of any text. You can view the CSS pixel value (px) of any text in the Inspect panel.

  If you're exporting your designs to PDF, Figma will render font size using traditional print points (pt).

  Alignment

  Horizontal alignment

  Alignment determines how we distribute text within its bounding box. Horizontal alignment defines how you align the text along the x axis (horizontal).

  Left-aligned text is commonly used for paragraph text. Whereas center-aligned text is often used for shorter lines of text, like headings.

  Use the icons to select the horizontal alignment. Choose from:

  • Left
  • Center
  • Right
  • Justify*

  Justify aligns the first word in each line of text to the left-most edge, and the last to the right-most edge. Figma spaces each word in a line of justified text uniformly.

  Vertical alignment

  Alignment determines how we distribute text within its bounding box. Vertical alignment aligns text along the y axis (vertical).

  Use the alignment icons to select a vertical alignment. Choose from:

  • Top
  • Middle
  • Bottom

  Note: It's only possible to vertically align text in text layers with a Fixed Size. Layers with resizing set to Auto Width or Auto Height will ignore alignment.

  Decoration

  Apply text decoration to an entire text layer, or to selected text. You have two types of decoration available:

  • Strikethrough
  • Underline

  Strikethrough

  Strikethrough adds a horizontal line through the center of your text.

  Use strikethrough to indicate obsolete or inaccurate information. This allows you to convey its state, without redacting or obscuring the original text.

  Click the icon to apply strikethrough to selected text.

  Underline

  Underline adds a horizontal line along the baseline of your text. Use underline to place emphasis on a particular section of the text, or show that it includes a link.

  Underlining links is considered good practice in web design. If applied consistently, this can help to improve the accessibility of your design.

  Click the icon to apply underline to selected text.

  Tip! Apply an underline to selected text using the keyboard shortcut:

  • Mac: Option U
  • Windows: Ctrl U

  Letter case

  Letter case allows you to change the case of selected text. This is super handy when you want to switch between cases without having to delete and retype your text. Choose from:

  • Uppercase: transforms text to UPPER CASE
  • Lowercase: transforms text to lower case
  • Capitalize: transforms the first character of every word to upper case. You may know this asTitle case.
  • Small Caps: transform text to SMALL CAPS. This displays uppercase letters inline with lowercase letters. While this looks like an UPPERCASE transformation, it's a little different. Small Caps characters usually have different proportions (e.g. weight, aspect ratio).

  Lists

  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.

  Learn more about creating bulleted or numbered lists →

  Numbers

  The number section includes any properties or features for numerical figures. The properties in this section will depend on the font family you are using.

  Style

  Style options include proportional figures and monospace figures. Proportional figures have varying spacing depending on the width of the character being used. Monospace figures, also known as tabular figures, have the same width regardless of the character being used.

  Both figures are offered in uppercase (also called lining style) or lowercase (also called old-style).

  • Proportional uppercase/lining
  • Proportional lowercase/old-style
  • Monospace uppercase/lining
  • Monospace lowercase/old-style

  Position (subscript and superscript)

  Use subscript or superscript to offset the position of numbers and characters.

  Subscript characters are positioned below the line the type. Superscript characters are positioned above the line of type. Both default to a smaller size than the rest of the text.

  Note:

  When you apply superscript/subscript to text, Figma tries to use any superscript/subscript glyphs provided by the font. If it isn’t provided, Figma draws a synthesized version by using the font's standard version of the character, shrinking it, and positioning it accordingly.

  This is often called “faux typography.”

  Also, if you mix available and unavailable superscript/subscript glyphs in the same text layer, they’ll all update to the synthesized form for consistency.

  Fractions

  Create fractions from numbers. Enter a fraction as X/X and click the to turn it into a fraction.

  Slashed zero

  Use slashed zero to display the zero integer with a slash through it. This is another way to distinguish it from the letter O.

  OpenType features

  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.

  Supported features include letterforms, stylistic sets, character variants, horizontal spacing, and more.

  Learn more about OpenType features →

  Resizing

  The resizing property controls how a text layer shrinks or grows to accommodate its contents. There are several settings available:

  • Auto width
  • Auto height
  • Fixed size

  Note: When you click on the canvas to create a text layer, Figma uses Auto Width. If you click and drag in the canvas, Figma will use Fixed Size. If you adjust the size of a text layer after it is created, Figma updates the resizing to Fixed Size.

  Auto width

  With auto width , the width of the text layer grows so that all its contents fit within the layer's bounds. Figma will create new lines of text when you use the Return or Enter key.

  Auto height

  With auto height , the text layer grows to fit its contents. Figma will wrap any lines that extend beyond the original width of the text layer to a new line.

  Fixed size

  With fixed size , both the width and height of the text layer will stay the same, regardless of the layer's contents. Figma will wrap any additional text that extends beyond the layer's horizontal bounds. Text can still extend beyond the text layer's vertical bounds without clipping. This can make aligning this with other layers difficult.

  Text truncation

  Use text truncation to hide any text overflowing outside the bounding box. An ellipsis ... is added at the end of the text to indicate any hidden overflow text. 

  

  Spacing and formatting

  Letter spacing

  Letter spacing lets you define the space between characters in a word, line, or paragraph. This can determine how easy your text is to read.

  This is not to be confused with kerning, which refers to the process of adjusting space between individual characters in a typeface.

  Adjust the letter spacing for an entire text layer, or a selection of text. To replicate kerning, place the cursor between two letters and adjust the letter spacing.

  Use the field to adjust letter spacing for your selection, or use the keyboard shortcuts:

  • Mac: Hold down ⌥ Option and < to increase or > to decrease.
  • Windows: Hold down Alt and < to increase or > to decrease.

  If you select text with different letter spacing values, Figma will scale the letter spacing proportionally.

  Tip! Tracking describes the letter spacing process in pre-digital systems and is usually represented in pixels (px). Use this formula to convert tracking to letter spacing: 1000px tracking = 100% letter spacing = 1em letter-spacing (CSS)

  Line height

  Line height allows you to control the vertical distance between lines of text in a paragraph. This can help to balance designs and improve the readability of your copy. This is the same as line spacing.

  Small line heights can make text difficult to read. Large line heights can make text look messy and disjointed.

  Use the field to adjust the vertical space between lines of text, or use the keyboard shortcuts:

  • Mac: Hold down ⇧ Shift ⌥ Option and < to increase or > to decrease.
  • Windows: Hold down Alt Shift and < to increase or > to decrease.

  Figma allows you to set a fixed line height in pixels (px) or a line height that's a percentage of the font size (%).

  Figma uses a font's intrinsic line height as the default value(Auto), which varies between typefaces. You can switch between fixed and percentage line heights and Figma will convert the value for you, to the nearest pixel.

  Translating line height: The Inspect panel allows you to view your designs as code. Each platform has a different way of representing line height.

  Figma includes the appropriate values and measurements for each platform, as well as alternative units of measurement.

  List spacing

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

  Paragraph indentation offsets the text in the first line to the right. You can only apply Paragraph indentation to text that uses Text-Align Left.

  A good rule of thumb is to avoid indentations greater than 4 x the font size. We also recommend taking the width of the text layer into account - the wider the layer, the larger the indentation.

  Figma represents paragraph indentation as a pixel (px) value. Use the Paragraph Indent field to adjust paragraph indentation.

  Tip! Paragraph indentation applies to all paragraphs in a text layer. If you wish to indent a single paragraph, you will need to create a separate text layer for it.

  Paragraph spacing

  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.

  Variable fonts

  A variable font provides a range of dynamic font variations for a typeface in a single file. While static fonts can only contain one font per file, a variable font can contain many.

  

  Variable fonts also contain a wide range of property customizations, such as weight, width, optical size, and slant, but font authors can also provide additional customizations for more style options.

  Learn more about variable fonts →

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