Ability to automate and adjust text underline styling

Have a feature request/idea for underline application that would really help speed up our team’s workflow and file maintenance.

The Problem:
We frequently create editorial designs (articles, etc.) and have to mock up inline hyperlink styles within body copy paragraphs to show stakeholders. For accessibility, we generally have to use an underline for our hyperlinks.

The problem is that the underline function in Figma is limited to basic rich text styling and not editable at all. So, it’s super thin, same-color-as-the-text, and the spacing from the baseline b/w underline can’t be adjusted.

I’m aware that we can manually add an underline/stroke instead and use auto layout to achieve our desired spacing/color, but the issue there is that it doesn’t flex with the actual body copy, causing us to do tedious adjustments so the underlines remain aligned with the respective hyperlink text as things in our designs change/update.

The Idea:
Is there a way to automate this in Figma somehow? Meaning, to have the ability to manually click into a word within a paragraph text block, assign it a “hyperlink” style that flexes as the design/content adjusts, and have that hyperlink be customizable (color, spacing, and stroke thickness)?

12 Likes

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.

We really need the ability to set underline styles – especially position from the baseline.

2 Likes

I don’t know if styling the underline/decorative text is something that would be possible to be implemented on the dev side later, but if it is possible, then it makes sense to add the option for designers to increase the distance between the word and the underline/decorative text. For example: font inter the “g” touches the underline. It sores my eyes. :sweat_smile:

This topic should be reopened! Ability to style underlines would be so helpful. I often have to break components with custom link styling when the link spans more than one line, it’s very frustrating when mocking up in context examples.

1 Like

Dev can customize this, at least on the web side

Its possbile in CSS CSS text-underline-offset property so should be great if its possible in Figma indeed! Please re-open.

1 Like