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

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. 🙂

Thanks for the suggestion! Moved to the Ideas section.

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.

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

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.

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.

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!

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:

I would love to see this as well! 🙏

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