···

    Guide to text in Figma Design

    This article is available for both the previous Figma UI and the new Figma UI. Use the toggle at the bottom left of the page to select your current UI. Get to know UI3: Figma’s redesign →

    Before you start

    Who can use this feature

    Available on any team or organization plan.

    Anyone with can edit access to a file can create and edit text.

    Text is a crucial component of interface design. In this article, we’ll cover how to create, edit, and style text in Figma Design. Learn more about using text in FigJam or Figma Slides.

    Terminology

    There are a few different terms we'll use to talk about text in Figma Design:

    • Text layers: Any layers you create with the text tool.
    • Text contents: The text content that goes inside of a text layer.
    • Type properties: Any text-specific properties in the Typography section of the right sidebar. For example: font size, line height, OpenType features, and more.
    • Other text properties: Other properties you can apply to text layers, that aren’t related to typography. For example: resizing behavior, fill, stroke, and effects.

    Create text layers

    Select the text tool from the toolbar, or using the T keyboard shortcut.

    Create text UI3.png

    There are two ways you can create a text layer. Click to create an automatically resizing text layer, or click-and-drag to create a text layer with fixed dimensions.

    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 know this as point text or paragraph 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 text.gif

    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.

    Click and drag text.gif

    Edit text content

    Double-click on a text layer, or press Enter with a text layer selected to edit its contents.

    Type directly in the field, or paste in your content. You can check your spelling in the language of your choice as you go. You can also add emoji, icons, lists, and hyperlinks to text.

    If you’re writing across languages, you can switch to bi-directional or right-to-left text, or use Noto fonts for text in Chinese, Japanese, and Korean.

    Edit text content.gif

    Note: Once you're editing a text layer, you can update the contents of other text layers without having to double-click. With a text layer selected, click on another text layer to start editing its contents.

    Multi-edit text

    You can update the content of multiple text layers at the same time.

    1. Select the text layers you want to update.
    2. Click Multi-edit text, or press Enter or Return,
    3. Edit the contents. Any changes you make will apply to all text layers you have selected.

    Select fonts

    Browse, preview, and select fonts in the Typography section of the right sidebar. There are three ways to use fonts in Figma Design:

    Caution: If you are using fonts installed on your computer across teams and files, make sure you are all using the same version of the font. If you can’t edit text, get a missing font alert in some files, or notice text reformatting when editing, editors may be using different versions of the font. Learn how to troubleshoot font issues.

    Edit type properties

    Adjust any type properties—including font size and weight, spacing, alignment, formatting, and more—in the Typography section of the right sidebar.

    Define a set of type properties as text styles to reuse them across your designs.

    Adjust other properties

    Adjust other properties of the text layer that aren’t specific to the text’s typography settings.

    • Layout: Adjust the text layer's dimensions and resizing behavior.
    • Color: Add color, gradients, and images to text using the layer’s Fill properties.
    • Stroke: Add an outline around individual characters in a text layer using Stroke.

    Want to adjust the background color of a text layer? Applying a fill to a text layer will only update the color of the text. To add a fill behind text, you can add the text layer to a frame and update the Fill of the frame instead.

    Troubleshooting

    Running into issues with text? Check out these troubleshooting guides:

    Note: Browsers and operating systems can render text differently, which can make designing across systems and platforms unpredictable.

    To make sure your designs look consistent, regardless of browser or operating system, Figma uses custom text rendering.

    This means there may be subtle differences between your designs in Figma and the final implementation.

    More text resources

    Text is a crucial component of interface design. In this article, we’ll cover how to create, edit, and style text in Figma Design. Learn more about using text in FigJam or Figma Slides.

    Terminology

    There are a few different terms we'll use to talk about text in Figma Design:

    • Text layers: Any layers you create with the text tool.
    • Text contents: The text content that goes inside of a text layer.
    • Type properties: Any text-specific properties in the Text section of the right sidebar. For example: font size, line height, OpenType features, and more.
    • Other text properties: Other properties you can apply to text layers, that aren’t related to typography. For example: fill, stroke, and effects.

    Create text layers

    Select the text tool from the toolbar, or using the T keyboard shortcut.

    text tool in UI2.png

    There are two ways you can create a text layer. Click to create an automatically resizing text layer, or click-and-drag to create a text layer with fixed dimensions.

    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 know this as point text or paragraph 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 text.gif

    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.

    Click and drag text.gif

    Edit text content

    Double-click on a text layer, or press Enter with a text layer selected to edit its contents.

    Type directly in the field, or paste in your content. You can check your spelling in the language of your choice as you go. You can also add emoji, icons, lists, and hyperlinks to text.

    If you’re writing across languages, you can switch to bi-directional or right-to-left text, or use Noto fonts for text in Chinese, Japanese, and Korean.

    Edit text content.gif

    Note: Once you're editing a text layer, you can update the contents of other text layers without having to double-click. With a text layer selected, click on another text layer to start editing its contents.

    Multi-edit text

    You can update the content of multiple text layers at the same time.

    1. Select the text layers you want to update.
    2. Click Multi-edit text, or press Enter or Return,
    3. Edit the contents. Any changes you make will apply to all text layers you have selected.

    Select fonts

    Browse, preview, and select fonts in the Typography section of the right sidebar. There are three ways to use fonts in Figma Design:

    Caution: If you are using local fonts across teams and files, make sure you are all using the same version of the font. If you can’t edit text, get a missing font alert in some files, or notice text reformatting when editing, editors may be using different versions of the font. Learn how to troubleshoot font issues.

    Edit type properties

    Adjust any type properties—including font size and weight, spacing, alignment, formatting, and more—in the Typography section of the right sidebar.

    Define a set of type properties as text styles to reuse them across your designs.

    Adjust other properties

    Adjust other properties of the text layer that aren’t specific to the text’s typography settings.

    • Size: Adjust the text layer's dimensions and resizing behavior.
    • Color: Add color, gradients, and images to text using the layer’s Fill properties.
    • Stroke: Add an outline around individual characters in a text layer using Stroke.

    Want to adjust the background color of a text layer? Applying a fill to a text layer will only update the color of the text. To add a fill behind text, you can add the text layer to a frame and update the Fill of the frame instead.

    Troubleshooting

    Running into issues with text? Check out these troubleshooting guides:

    Note: Browsers and operating systems can render text differently, which can make designing across systems and platforms unpredictable.

    To make sure your designs look consistent, regardless of browser or operating system, Figma uses custom text rendering.

    This means there may be subtle differences between your designs in Figma and the final implementation.

    More text resources

    Was this article helpful?

    Your feedback helps us improve Figma’s Help Center. To get help from support, submit a request through our contact form.

    Your feedback helps us improve Figma’s Help Center. To get help from support, submit a request through our contact form.

    Thank you for helping us improve Figma’s Help Center!

    Return to top