Text in Figma

Text is a crucial aspect of interface design. Everything from the placement to font choice, has a part to play.

Text properties allows 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.

Text in the properties panel

Apply and adjust text properties in the Text section of the properties panel.

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 style or weight
  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 details menu and explore more text properties.
Annotated image showing the location of each property in the list above

Font family

There are a few terms associated with a font:

  • typeface is a set of letterforms and glyphs with similar design features.
  • font is a file containing the visual details that make up the design of each glyph or letter in that typeface.
  • 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 Roboto 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 thee 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. Some of the styles for the Roboto font family are: thin, light, regular, and medium.

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 thee 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 points (pt). Points are a standard measurement in typography for length, leading, font size, and other units.

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. 

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

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 line height: 1000px tracking = 100% letter apacing = 1em letter-spacing (CSS)

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.

Resizing

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

  •  Auto Width: The width of the text layer will grow so that all the content fits within the layer’s bounds. Figma will create new lines of text when you use the Return or Enter key.
  •  Auto Height: The height of the text layer will grow 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: 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.

Note: When you click in 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.

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.

Type Details panel

The Type Details Panel gives you access to some extra Text properties. You can also access any OpenType features from this panel.

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

  1. View a previewof any text properties
  2. Adjust the horizontal alignment of text
  3. Apply decoration to text, which includes:
    1.  Underline
    2.  Strikethrough
  4. Offset the first line of text with paragraph indentation
  5. Adjust the letter case. Choose from Uppercase, Lowercase, Capitalize and Small Caps.
  6. Apply any number settings, including: Style, Position, Fractions and any related OpenType features.
  7. Access any OpenType features.
  8. Click  to close the Type Details panel.
Annotated image showing the location in the type details menu of each property in the list above

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 any number properties.
  • Letters (or combinations of letters) affected by ligatures or stylistic alternatives.

Decoration

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

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

Paragraph indentation

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.

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 your 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 into 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).

Number

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.

  1. Change the figure Style options including: Proportional or Tabular Lining; and Proportional or Tabular Old Style.
  2. Offset numbers as subscript or superscript
  3. Create fractions from numbers. Enter a fraction as X/X

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.

Typeface creator’s 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.
  • We group OpenType features accordingly:
  1. Letterforms including:
    • Ligatures
    • Rare Ligatures
    • Contextual Alternates
    • Ordinals
  2. Stylistic Sets ssxx 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
  3. Character Variants cvxx 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
  4. Horizontal Spacing like: kerning.
  5. More features like: Fraction denominators and numerators.
Annotated image showing the location of Open Type properties in the list above

Other Properties in the Properties Panel

You can also apply other properties to text layers.

Fill

Use the Fill property to apply paints to text.Image showing the Fill section of the properties panel with a fill applied

  1. Find the Fill section of the Properties Panel.
  2. Click the Fill thumbnail to open the Color Picker.
  3. You can then:
    • Select a color from the canvas using the Eyedropper
    • Explore colors and opacities using the sliders
    • Select a color from your available Styles, or from the document’s colors
    • Enter a specific HEX or color profile code in the field provided

Stroke

Apply stroke properties to text. This will apply a stroke around every character in your selection.

  • Fill
  • Weight
  • Distribution
  • Cap
  • Join
  • Dashes
  • Miter Angle
Image showing the Stroke section of the properties panel with a stroke applied

Effects

Text layers also support shadow and blur effects.Image showing the Effects section of the properties panel with four effects applied

  1. Click the  next to the Effects property to add an effect.
  2. Figma will apply Drop Shadow by default. Click the  to select another effect:
    • Drop Shadow
    • Inner Shadow
    • Layer Blur
    • Background Blur
  3. Adjust any settings as desired.

Styles allows you to define a set of properties that can be reused across your team’s designs.

You can apply a Text Style to an entire block of text e.g. headings (h1, h2 etc). Or, to text strings within a text layer e.g.links.

I want to:

Create a Text Style

You can create a Style from an existing Text layer.

  1. Select a Text layer that has the properties you want to reuse.
  2. Click the Style icon (four dots) in the Text section of the Properties Panel: 
  3. Click the “+” icon in the Text Styles menu to create a new style.
  4. Give the Style a name and click Create Style to apply.

Apply Styles to Text

You can then apply that Style to other Text layers within that File.

Tip You can also apply Color and Effect Styles to Text layers!

  1. Select the Text layer you want to apply the Style to.
  2. Click the Style icon (four dots) in the Text section of the Properties Panel.
  3. Select the Style from the options to apply it to the selected Text layer:

Edit an Existing Style

You can adjust the properties of an existing Style at any time. This applies to Local Styles, as well as Styles that are published in a Team Library.

  • When editing Local Styles, your changes will immediately be applied to any Text layers in that File. 
  • For Styles in a Team Library, you will need to publish and accept these changes to see them in your designs.

Learn more about making changes to Styles in our Managing and Sharing Styles article.

Was this article helpful to you?