Skip to main content

Dotted, dashed, etc underlines (text-decoration-style) support


Connect_Team

Hi, Figma community!

It would be great to support dotted/dashed underlines in Figma.

In CSS, it’s supported through the text-decoration-style attribute - see [text-decoration-style - CSS: Cascading Style Sheets | MDN].

Please vote 👍 👍 👍 for this feature!
We hope to see it supported one day in Figma. 🥳

57 replies

Gleb
  • New Participant
  • 4705 replies
  • January 27, 2021

For short one-line texts, you can simulate any sort of underline with auto layout. But for more complex texts, that won’t be possible. You will need to manually place underlines under words.

I think it would be better to turn this post into a suggestion and put it in the #product-ideas category so people can vote for this change. Feel free to edit your post for that. 🙂


Connect_Team

Thanks for the suggestion! Moved to the Ideas section.


Dave_Curtis

Can underline styling be added? There are a number of CSS styles that can be applied, and unfortunately, none are exposed to the designer. As text links can be added in designs, it is important for those designing interfaces to ensure that they are styled correctly - the default one in Figma is very feint. and closer to the text than most browsers.


Ben_Wilson

Voted! This would help bridge the gap between figma and CSS/build. Please figma 🙂


Justin_Ong

With CSS, you can change the colour of the underline, size/thickness, etc. and have effects like an underline underlapping the text. It’s difficult to create a workaround using a line or shape when creating a component, or using Auto Layout.

Would be awesome to have more options in a Text Style to style underlines.


Ev_Davies

I swear this idea was implemented in a few versions of Figma, but it appears it’s reverted again? A regression bug from a couple of versions ago perhaps?

It means I can’t use a single text style for a DS component when applying a hover interaction.

Here’s a GIF example, I don’t want the text style to revert to the (broken) text style I want the hover state to hold the new font, the interaction should just apple a decoration over my overridden text style.
Broken underline style


Joe_Garlick

Patiently waiting for this one. ATM I have to build complicated text underlines with auto-layout where I build three layers for any wrapping text. Gets laborious!


megaroeny
  • 68 replies
  • October 7, 2022

Yes ++ on this one.

Currently we’re looking to implement Links with wavy underlines. It’s mostly possible with Auto Layout, but without some complex tricks:

image


Debra_Ohayon

I would love to see this as well! 🙏


kswanson2
  • New Member
  • 3 replies
  • November 15, 2022

To add to this, we really need to be able to adjust the offset of the underline, just like we can in CSS!


McKenzie
  • 1 reply
  • November 15, 2022

our team needs the ability to offset underlines — plug for that 👍


CBracy
  • 1 reply
  • November 15, 2022

This would be such a helpful feature!


Caroline_Bischof

Also to change the thickness of an underline, this would be super helpful!


Hans_Spooren

text-underline-offset
text-decoration-thickness

these can also be added please 🙂


Sofie
  • 12 replies
  • February 2, 2023

This would have been super helpful!


dennsi
  • Active Member
  • 256 replies
  • February 2, 2023

Yes please! +1
Give us all the options that exist in css.


Conner_Drew1

+1 for being able to style the underline text separately from the text style itself.

  • Color
  • Weight
  • Distance

Edward_Margallo

After all this time, how is this still not a thing? It’s basic CSS text styling


asaf_agranat

Underline and strikethourgh were basic decoration specs in 1996 (CSS1 - 27 years ago!). It was 20 years old when Figma was born…


Rob_Gale
  • New Member
  • 2 replies
  • April 6, 2023

One more vote for this!


Aaaron
  • 2 replies
  • May 12, 2023

+1!
It’s a nightmare trying to support our inline link style right now. Currently must be manually placed and absolutely positioned if the text it’s apart of is inside of an auto-layout container.


Natalie_Soontornvinate1

+1! Desperately needed for editorial designs.


Christian_Klose

I also need it for a design system project. Please make it possible soon!


Giovanni1

+1
We also need to change the underline thickness (you might need very fine lines or extremely thick ones for the same text size).


Denys_Honcharov

+++
Is there perhaps a plugin to accomplish this?


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings