How to Underline Text in Figma

Need to emphasize a word, heading, or call-to-action with an underline? Figma offers a quick and easy way to underline text, whether you’re designing for web, mobile, or presentations. While underlining is a common typographic style, it’s important to apply it with purpose—and Figma gives you full control to do so.

This guide will show you how to underline text in Figma using built-in tools, shortcuts, and a few design tips for best results.

✅ How to Underline Text in Figma

Figma includes a native underline feature you can apply with one click.

Steps:

Select a Text Layer
Click on the text you want to underline. You can either select the entire text box or highlight a specific portion.
Use the Toolbar Option
In the top bar, look for the “U” icon (Underline).
Click it to apply or remove an underline.
Use the Keyboard Shortcut
- Windows: Ctrl + U
- Mac: Cmd + U

This will toggle the underline on and off for the selected text.

✏️ Underline Part of a Text Layer

If you want to underline just part of the sentence:

Double-click into the text layer.
Highlight the portion you want to underline.
Use the toolbar button or keyboard shortcut.

💡 This is useful for styling links, prices, or emphasis without needing to create separate text objects.

🔧 Customize Underlined Text

While Figma applies a default underline, you can style the rest of the text with:

Font family and weight
Color
Letter spacing and line height

However, Figma doesn’t currently let you customize underline thickness, style (dotted/dashed), or offset. For those, you can use a manual method (see below).

🛠️ Alternative: Manual Underline Using a Line

If you want full control over the underline style, you can create one manually:

Add a line under your text using the Line Tool (L).
Position it precisely beneath the text baseline.
Style it with custom stroke width, color, or dashes.

This method works well for unique styles, animated underlines, or when exporting to systems that don’t preserve text styles.

🚫 Limitations to Keep in Mind

Figma underlines are not exported as separate lines—they’re part of the text formatting.
Prototype interactions won’t trigger on just the underlined portion unless you use a separate text object with a link.
There’s no built-in support for underline offset or thickness customization.

Final Thoughts

Underlining text in Figma is easy with the built-in tools and shortcuts—perfect for links, emphasis, and simple styling. For more advanced underline designs, the manual method gives you additional creative freedom. Whether you’re designing a web UI or preparing a pitch deck, knowing how to control text styling helps your message come through more clearly.