Underlining in Figma runs through a single property called Decoration. It sits with the rest of the text settings, and it stopped being a plain on/off switch a while back. Style, thickness, offset and color are all separate fields now.
You’ll find it in the Design panel under Text, near letter case and letter spacing. Same control in FigJam. Same control in Figma Slides. A Figma staff update posted to the company’s community forum in June 2024 confirmed that applying underline overrides an assigned text style automatically, which killed the old requirement to detach the layer first.
What Is Underline (Decoration) in Figma
Figma files the whole thing under Type properties, alongside letter case, letter spacing and alignment. The dropdown is labeled Decoration, which is exactly why searching the panel for the word “underline” gets you nowhere.
| Value | What It Does | Notes |
|---|---|---|
| None | No line under or through the text | Default state on a new text layer |
| Underline | Draws a line beneath the characters | Only value with style, color, and thickness options |
| Strikethrough | Draws a line through the middle of the text | Fixed single style, no customization |
Figma’s plugin API documentation lists NONE, UNDERLINE and STRIKETHROUGH on a text node. That’s the entire set.
A layer holds one of them at a time, so a run of text can’t be underlined and struck through at once.
The two aren’t treated equally either. A Figma community thread from November 2024 has a designer, Jan\_Soholm\_Knudsen, asking for strikethrough to get the same styling options underline received. It still ships as one fixed line.
Sticky notes in FigJam and titles in Figma Slides use the same Decoration control, and behave the same way a design file does.
Where Is the Underline Option Located in Figma
Right side of the screen, Design panel, Text section.
The path in the current layout is short.
- Select a text layer, then open the Text section in the Design panel
- Open the Decoration dropdown and pick Underline
- Style, color and thickness appear in that same panel once Underline is set
Older versions of the interface bury it behind a three-dot Type settings menu and a Basics tab. Which click path you get depends on the layout your file happens to be running, and that isn’t something you control.
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 Learn documentation states the feature is supported on any team or plan, and that anyone with can-edit access to a file can apply and adjust text properties.
Viewers without edit rights can still see an applied underline through the Dev Mode inspect panel. They just can’t toggle it.
How Do You Underline Text in Figma
Select a layer, change one dropdown, done.
- Click the text layer on the canvas, or double-click to enter edit mode and highlight specific characters
- Open the Text section in the Design panel
- Set Decoration to Underline
- Click outside the layer to deselect and check that the line clears descenders on letters like g, y, and p
Double-clicking into a layer is the same motion you use any time you’re editing text in Figma, so the workflow should feel familiar if you’ve reformatted a layer before.
Partial highlights take the Decoration value on their own, which means one text layer can mix underlined and plain words inside the same sentence.
Underlining Part of a Text String
Nothing changes structurally when you only want a word or two.
- Double-click into the layer to enter edit mode
- Drag across the word or phrase you want
- Set Decoration to Underline while that selection is still active
That’s how most designers underline a single linked word inside a paragraph without dragging the rest of the sentence along with it. Rich text editing lets several decoration values, weights and colors live inside one layer at once.
What Is the Keyboard Shortcut to Underline Text in Figma
Ctrl+U on Windows. Cmd+U on Mac. Same modifier pattern Figma uses for the rest of its text shortcuts.
- Ctrl+U / Cmd+U: toggles underline
- Ctrl+B / Cmd+B: toggles bold
- Ctrl+I / Cmd+I: toggles italic
- Ctrl+Shift+? / Cmd+Shift+?: opens the searchable shortcut panel
Press it a second time and the line comes off, since it toggles the same Decoration value the dropdown controls.
It lines up with italicizing text in Figma, just the I key under the same modifier instead of U.
A published Figma shortcut reference updated in mid-2026 lists Ctrl+U for underline alongside Ctrl+B for bold and Ctrl+I for italic. The full list stays searchable through Figma’s keyboard shortcuts, which beats memorizing them one at a time.
How Do You Customize Underline Style, Color, and Thickness in Figma
November 2024 is the dividing line here. Before that update, every underline in Figma was one fixed style that matched the text color, and there was nothing to adjust.
| Style | Visual Look | Typical Use |
|---|---|---|
| Solid | One continuous straight line | Standard emphasis or link text |
| Dotted | Broken line of small dots | Secondary or optional-field cues |
| Wavy | Curved, repeating line | Spelling or review-style markup |
Figma’s plugin documentation dates the underlying properties to Version 1, Update 106, released December 19, 2024. That release put five new fields on the text node.
Thickness sets line weight independently of font size. Offset controls the gap between the baseline and the line. Color, for the first time, can differ from the text fill. Style covers solid, dotted and wavy. Then there’s skip ink, which decides whether the line breaks around descenders like g and y, and it’s the one most people never touch until an underline slices straight through a lowercase y and looks wrong.
Five controls like that sit closer to what CSS offers on the web than to a normal design tool toggle.
It isn’t finished, though. A separate Figma forum post from November 20, 2024 asks the team to add underline styling to the Copy/Paste Properties shortcut, because it doesn’t carry over when you copy formatting between layers.
Should You Underline Text for Emphasis or Reserve It for Links
Links, mostly. I’d keep it off everything else unless there’s a specific reason.
Figma doesn’t auto-underline text carrying a hyperlink, unlike a browser’s default styling for an anchor tag. So a plain-looking word can have a link attached and give the reader no visual clue at all.
That gap matters more than it looks. The National Eye Institute estimates that roughly 1 in 12 men and 1 in 200 women worldwide have some form of color vision deficiency. For that group, a link identified only by color is invisible.
The W3C’s Web Content Accessibility Guidelines cover it under Success Criterion 1.4.1, which requires that color never be the only signal marking a link or an action. General web accessibility guidance treats an underline as the cheapest way to meet that without redesigning a palette.
For emphasis, bold or a heavier weight or a tagged component communicates it better than a line does. Underline stays the clearest non-color cue that text is clickable. Use it for both jobs on one screen and the actual links get harder to spot.
WCAG’s related contrast rule sets a minimum ratio of 4.5:1 between text and its background, and color contrast guidance covers how to hit that number inside a Figma file.
Why Does Underline Break Inside Components and Auto Layout
Underline formatting is less sticky than it looks.
Detaching or swapping a component instance can revert a manually applied Decoration value back to whatever the main component was set to. Expected behavior for any text override, not a bug specific to underline.
Auto layout has a stranger quirk. A Figma community forum thread from November 8, 2024 describes a designer, Chris\_Tucker, adding a background color to a text label through an auto layout container, then applying the new underline offset control. There turned out to be no relationship between the text baseline and the auto layout container, so the offset value didn’t line up the way it does on a plain text layer.
- Component swaps can silently reset a Decoration override applied to instance text
- Auto layout resizing can force text to re-wrap, exposing descenders a skip ink setting previously cleared
- Mixed decoration values across one layer’s characters report as figma.mixed rather than one readable state
None of it throws an error message, which is why it usually gets reported as underline “not working” instead of a documented interaction.
If it seems odd that resizing behavior touches text formatting at all, the fundamentals in a Figma auto layout guide explain the connection. Same logic with using components in Figma, where instance overrides follow different rules than edits made directly on the main component.
How Do Developers Access Underline Through the Plugin API and Dev Mode
Designers set underline through the Design panel. Developers and plugin builders reach the same data through two other surfaces, the plugin API and Dev Mode’s Inspect panel.
Reading and Writing Underline with the Plugin API
Plugins get at underline data through ranged methods, not just the whole-layer property.
- getRangeTextDecorationStyle() and setRangeTextDecorationStyle() read or write the line style on a character range
- getRangeTextDecorationColor() and setRangeTextDecorationColor() do the same for color
- getStyledTextSegments() returns all five fields together for every styled run inside a layer
Range-based access is what lets a plugin underline one word in a sentence without touching the rest of the layer. Annotation and grammar-checking tools built on Figma’s API depend on that level of control.
Reading Underline as CSS in Dev Mode
Dev Mode’s Inspect panel shows a CSS box model and simplified code snippets for whatever layer is selected, according to Figma’s own documentation. It’s read-only, built for developers who don’t have edit access to the file.
- text-decoration-line tells you whether the line is present at all
- text-decoration-style reports solid, dotted, or wavy
- text-underline-offset carries the gap from the baseline
- text-decoration-color holds the line’s color value
Three of these map to the CSS Text Decoration Module Level 3 spec, which the W3C still lists as a Candidate Recommendation Draft rather than a finished Recommendation, most recently updated in May 2022. text-underline-offset is a separate case: it belongs to CSS Text Decoration Module Level 4, a Working Draft last published that same month, since Level 3 never defines that property.
Genesys built a custom Dev Mode codegen plugin, Spark CSS Generator, that translates Figma’s output directly into its own design token variables instead of raw CSS. Everything else in the Inspect panel, past text properties, is covered in the broader Figma Dev Mode guide.
How Does Figma’s Underline Customization Compare to Other Design Tools
Figma is the only one of the four with independent controls for line style, thickness, offset, and color.
Adobe XD didn’t even offer strikethrough at first. An Adobe employee confirmed on the company’s own community forum in February 2018 that XD shipped with underline support but no strikethrough option yet.
- Figma gives you five independent fields for style, thickness, offset, color and skip ink, though none of that customization reached files until November 2024
- Adobe XD stayed with a stable on and off toggle, later joined by strikethrough, uppercase, lowercase, and title case, per Adobe’s own product documentation
- Sketch, same single toggle. Custom color or thickness means drawing a line under the text by hand
- In Canva, underline applies from the toolbar or Ctrl+U, and that’s where it ends. No style, color, or thickness fields in the interface
None of the three alternatives has published a plugin or public API that exposes underline data the way Figma’s TextNode does.
When Does Underline Not Apply in Figma
Text only. Vector shapes, frames, images, and straight lines have no Decoration property at all, so there’s nothing to toggle.
- A frame or a rectangle layer never shows a Decoration field in the Design panel, regardless of what’s inside it
- Selecting several text layers at once with different underline settings leaves the style, thickness, offset, and color fields blank, since Figma cannot display one shared value for a mixed group
- Locked layers block any Decoration change until they’re unlocked, the same as every other text property
Timing plays a part too. Figma’s own community forum shows the five customization fields rolling out account by account during the week of November 5, 2024, so two people opening the same file on the same day could have been looking at different panels.
The plugin API adds one more gate. Figma’s TextNode documentation notes that text property writes, Decoration included, require the layer’s font to be loaded first, so a missing or unavailable font blocks the change until that’s sorted.
FAQ on How To Underline Text In Figma
Can You Combine Underline and Strikethrough in Figma
No. The Decoration property holds one value at a time, so a character run can’t carry both.
Getting both effects means layering a separate strikethrough text layer over underlined text, or drawing one of the two lines manually.
How Do You Remove Underline from Text in Figma
Set the Decoration dropdown back to None in the Design panel’s Text section. Fastest fix if you’re not using the keyboard shortcut.
Highlight only part of a layer and apply None, and the line disappears from that selection alone. The rest stays untouched.
When Should You Use a Component Instead of Manual Underline
A one-off underline on a single layer is fine for a unique moment.
Recurring patterns, underlined links across a design system being the obvious case, belong in a component or a published text style, so one update reaches every instance.
Should You Use Italic Instead of Underline for Emphasis
Usually, yes. Italic doesn’t compete visually with hyperlinks and doesn’t need extra line height to clear descenders.
Reserve underline for links, and lean on bold or italic for emphasis elsewhere in the same file.
What Should You Prioritize First in How To Underline Text In Figma?
Set the Decoration values on the layer first, push them into a shared text style second, then check the result in Dev Mode.
- Layer-level Decoration setting
- Shared text style
- Dev Mode verification
Nailing the line’s properties at layer level avoids rebuilding a style around values you’re going to change anyway. Once it’s confirmed, pushing it into a text style leaves you with one definition instead of a recheck on every new layer.
That order depends on text-decoration-thickness and text-underline-offset staying fixed at the CSS layer beneath Dev Mode’s export. The W3C’s CSS Working Group was still closing safe-to-release exceptions for both properties as of September 13, 2025, and a future spec revision, not a Figma update, decides the next change to that mapping.
The next step from here runs through Figma developer handoff, where Dev Mode’s output meets an engineering team’s build process.
