Summarize this article with:
Figma doesn’t make underlining obvious. There’s no underline button staring at you in the toolbar.
Yet knowing how to underline text in Figma matters when you’re designing hyperlinks, emphasizing key phrases, or building accessible interfaces that follow web conventions.
The good news? Once you know where to look, the process takes seconds.
This guide covers three methods: the Ctrl+U keyboard shortcut, the Type Settings panel approach, and full customization options for underline style, thickness, offset, and skip ink behavior.
You’ll also learn how to troubleshoot common issues like underlines not appearing in prototype hover states.
How to Underline Text in Figma
Underlining text in Figma adds a horizontal line beneath selected characters to indicate hyperlinks or create visual emphasis.
Designers use this text decoration when building web interfaces, styling clickable elements, or highlighting specific words within a paragraph.
This guide covers 3 methods requiring about 2 minutes and basic Figma navigation skills.
You’ll learn the keyboard shortcut method, the Type Settings panel approach, and how to customize underline thickness, offset, and skip ink behavior.
Prerequisites
Before applying underline styling to your text layers, gather these requirements:
Have you seen the latest Figma statistics?
Discover comprehensive Figma statistics including revenue growth, market share, user demographics, and funding data.
Check them out →- Figma desktop app or browser version
- A design file containing at least one text layer
- Can edit access to the file
- Basic familiarity with the Figma interface and right panel
Time estimate: 2 minutes for standard underline application.
The process works identically across Mac and Windows, though keyboard shortcuts differ slightly between operating systems.
Step One: How Do You Select the Text Layer You Want to Underline?
Click any text layer on the canvas to select the entire layer, or double-click to enter edit mode and highlight specific characters for partial underlining.
A blue selection box appears around the text layer when selected correctly.
For highlighted text inside edit mode, you’ll see a blue background behind the selected characters.
Selecting the Entire Text Layer
Single-click the text on your canvas.
The selection handles appear at the corners and edges of the text box.
This method applies underline formatting to every character in that layer.
Selecting Specific Words or Characters
Double-click to enter the text layer’s edit mode.
Click and drag across the specific words you want underlined.
This approach works well when you need to style hyperlinks within a paragraph or emphasize particular phrases without affecting surrounding text.
Why Selection Matters
Figma requires active text selection before applying any text decoration properties.
Without proper selection, the underline option remains inactive in both the toolbar and Type Settings panel.
Step Two: How Do You Apply the Underline Using the Keyboard Shortcut?
Press Ctrl+U on Windows or Cmd+U on Mac to instantly toggle the underline on your selected text.
A horizontal line appears beneath the text baseline immediately after pressing the shortcut.
Press the same shortcut again to remove the underline.
Windows Keyboard Shortcut
Hold Ctrl and press U with your text layer or characters selected.
The underline applies instantly without opening any menus.
Mac Keyboard Shortcut
Hold Cmd and press U.
Same instant result as the Windows method.
When to Use the Shortcut Method
Keyboard shortcuts provide the fastest workflow for applying standard underlines during rapid prototyping or when editing text in Figma across multiple layers.
The shortcut applies default underline settings only.
For custom styling like dotted lines, wavy underlines, or adjusted thickness, you’ll need the Type Settings panel covered in the next step.
Step Three: How Do You Access the Underline Option Through Type Settings?
Navigate to the right panel, find the Text section, and click the three-dot icon to open Type Settings where the Decoration options live.
Under the Basics tab, locate the Decoration section and click the underline icon (the letter U with a line beneath it).
This method provides access to customization options unavailable through the keyboard shortcut.
Finding the Type Settings Panel
With your text selected, look at the right panel in Figma.
The Text section displays your font family, size, and weight.
Click the three horizontal dots (the Type Settings icon) to expand additional typography options.
Locating the Decoration Section
Inside Type Settings, stay on the Basics tab.
Scroll down to find Decoration alongside options like strikethrough.
The underline icon resembles the letter U with a horizontal line beneath it.
Applying the Underline
Click the underline icon once to apply.
The icon highlights to indicate active status.
Click again to remove the underline from your selected text.
This panel method takes slightly longer than the Ctrl+U shortcut but opens the door to detailed underline style options like thickness adjustment, offset control, and skip ink settings that affect how the line interacts with descender characters.
Step Four: How Do You Customize the Underline Style, Thickness, and Offset?
Click the chevron next to the underline icon in Type Settings to reveal the underline details panel with full customization controls.
Adjust style, thickness, offset, skip ink behavior, and color independently from your text.
Accessing Underline Details
Type Settings > Decoration > Click the small arrow next to the active underline icon.
The expanded panel shows five customization options.
Style Options
Choose between three underline style options:
- Solid – standard continuous line
- Dotted – spaced dots along the baseline
- Wavy – squiggle pattern, useful for indicating spelling suggestions in UI mockups
Thickness Adjustment
Set the underline weight in pixels.
Default thickness matches your font weight proportionally.
Increase the value for bolder emphasis; decrease for subtle link indicators.
Offset Control
Offset determines the distance between text and underline.
Positive values move the line downward, negative values move it upward toward the text baseline.
Useful when descenders like g, y, or p clash with the default line position.
Skip Ink Setting
Skip ink controls how the underline behaves around descender characters.
- On – line breaks around letters like g, y, p, q, j (matches CSS text-decoration-skip-ink behavior)
- Off – line runs straight through all characters
Keep skip ink enabled for better readability and web accessibility compliance.
Underline Color
Select a custom color independent of your text fill.
Click the color swatch to open the color picker.
Useful for link styling where underlines need different colors than the text itself, especially when designing call-to-action elements.
Alternative Method: Manual Underline Using the Line Tool
When you need full creative control, draw a custom line beneath your text instead of using the built-in decoration.
When to Use Manual Underlines
Custom animated underlines in Figma prototypes, gradient line effects, or exports to systems that strip text formatting.
Creating the Manual Underline
- Select the Line Tool (L)
- Draw a horizontal line beneath your text baseline
- Adjust stroke width, color, and dash pattern in the right panel
- Select both text and line > Ctrl+G / Cmd+G to group
Limitations
Manual underlines don’t scale automatically with text size changes.
You’ll need to resize the line separately if you adjust font size later.
Consider using components in Figma to manage text-and-line combinations more efficiently across your design system.
Verification
Confirm your underline applied correctly by checking these indicators:
- Horizontal line visible beneath selected text characters
- Underline color matches text color (unless custom color applied)
- Skip ink displays correctly around descenders (g, y, p, q, j)
- Underline persists after deselecting the text layer
- Formatting remains intact when duplicating the text layer
Preview your design at different zoom levels in Figma to ensure the underline thickness looks appropriate at various scales.
Troubleshooting
Underline Not Appearing in Prototype Hover State
Problem: Text underline doesn’t show when hovering over a component variant.
Solution: Create separate text styles for default and underlined states; apply each style to respective component variants instead of overriding a single style.
Underline Cuts Through Descender Characters
Problem: Letters like g, y, and p get crossed by the underline.
Solution: Type Settings > Underline details > Set Skip ink to On.
Underline Color Doesn’t Match Requirements
Problem: Need a different underline color than the text.
Solution: Type Settings > Underline details > Color > Select custom color from picker.
Underline Not Visible in Exports
Problem: Underline disappears when exporting to PNG or PDF.
Solution: Check export preview first; PNG and JPG preserve formatting, but exporting Figma to HTML may require CSS adjustments for underline styling.
Keyboard Shortcut Not Working
Problem: Ctrl+U / Cmd+U does nothing.
Solution: Ensure you have a text layer selected (not a frame or group); check that you’re not in comment mode.
Related Processes
Continue building your Figma typography skills with these related guides:
- How to italicize in Figma – apply italic styling to text
- How to superscript in Figma – create trademark symbols and footnote references
- How to curve text in Figma – bend text along paths for logos and badges
- How to add fonts to Figma – expand your typography options
- How to make a button in Figma – combine underlined text with interactive button components
For hover state underlines on links, learn how to make Figma interactive with prototype triggers.
FAQ on How To Underline Text In Figma
What Is the Keyboard Shortcut to Underline Text in Figma?
Press Ctrl+U on Windows or Cmd+U on Mac with your text layer selected.
The underline toggles on instantly. Press the same shortcut again to remove it.
Can You Underline Only Part of a Text Layer?
Yes. Double-click the text layer to enter edit mode, then highlight the specific words you want underlined.
Apply the underline using Ctrl+U or through Type Settings. Only selected characters receive the decoration.
How Do You Change the Underline Color in Figma?
Open Type Settings > Underline details > Color.
Click the color swatch to select a custom underline color independent from your text fill. Useful for styling links differently from body text.
Why Is My Underline Cutting Through Letters Like G and Y?
Your skip ink setting is disabled. Go to Type Settings > Underline details > Toggle Skip ink to On.
The underline will now break around descender characters for better readability.
Can You Make a Dotted or Wavy Underline in Figma?
Yes. Access Type Settings > Underline details > Style.
Choose from solid, dotted, or wavy options. Wavy underlines work well for indicating spelling errors in user interface designs.
How Do You Adjust Underline Thickness in Figma?
Open Type Settings > Underline details > Thickness.
Enter a pixel value to increase or decrease the line weight. Higher values create bolder emphasis; lower values produce subtle link indicators.
Why Doesn’t My Underline Show in Prototype Hover States?
Text style overrides often cause this bug. Create two separate text styles: one default, one underlined.
Apply each style to its respective component variant instead of manually overriding a single style.
Can You Save an Underlined Text Style in Figma?
Yes. Style your text with the desired underline settings, then click the four-dot icon in the Text section and select Create style.
Reuse this style across your design system in Figma.
Does the Underline Export Correctly to PNG and PDF?
PNG and PDF exports preserve underline formatting correctly.
Check the export preview before saving. SVG exports may require adjustments depending on how you plan to use the file.
How Do You Create a Custom Underline Using the Line Tool?
Select the Line Tool (L), draw a horizontal line beneath your text, and style the stroke with custom width, color, or dashes.
Group text and line together with Ctrl+G for easier management.
Conclusion
Now you know how to underline text in Figma using three different methods.
The Ctrl+U shortcut handles quick applications. The Type Settings panel unlocks customization for thickness, offset, and skip ink behavior. The Line Tool gives you complete creative control when native options fall short.
Remember to enable skip ink for cleaner underlines around descender characters like g, y, and p.
Save your underlined text as a reusable style to maintain consistency across your design file.
Test hover states carefully when building interactive components. Text style overrides can break underline visibility in prototypes.
Start with the keyboard shortcut for speed. Move to the decoration panel when you need dotted lines, wavy styles, or custom colors that differ from your text fill.
