Skip to main content
SLT-UX
SLT-UX
Active Member
July 17, 2024
Solved

Underline text on hover not working?

  • July 17, 2024
  • 15 replies
  • 2591 views

This should be very simple:

  1. I have a component with 2 variants. Variant1 has a text layer which is not underlined text, and Variant2 has the same text layer (same layer name of course), which is underlined text.
  2. I added a hover interaction on Variant1 to change to Variant2

When I test it out in the prototype, the underlined text doesn’t show up on hover.

To make sure the variant switch is happening on hover, I changed the background of Variant2, and sure enough, the background change does happen on hover.

So for some reason the text underline is just not happening.

This is a bug, right?

Any workarounds?

    This topic has been closed for replies.
    Best answer by KennLucas

    Oh hey!

    I just stripped the text style off of my text and the variant hover works with no variables on my text.

    So there is a conflict somewhere.

    But unstyled text works!

    15 replies

    Show previous replies
    y_toku
    Figmate
    y_toku
    Community Support
    February 6, 2025

    Hi ​@Cristiane ,

     

    Thanks for reaching out. Could you share the video recording? I couldn’t replicate this with or without styles. 

     

    Thanks,

    Toku

    Stefan Tomic
    Stefan Tomic
    New Member
    March 14, 2025

    If your component is defined like this:

    • Link – default
    • Link – hovered
    • Link – pressed

    And you defined certain font size of the component.

     

    Each time when you change the font size or the text value of the component, the text-underline style is not working. It will only work when the text value is “Link” and the font size is the default one that is set on the component.

     

    I don’t know the solution to this issue, but maybe now somebody has an idea what it could be?

      Andrew M
      Andrew M
      New Member
      August 22, 2025

      Encountered this same issue today. I concur that it appears that using text styles (pre-defined fonts) and overriding that style to add the underline to the “On Hover” variant results in the behavior others are seeing here. 

      Not sure if the Figma team intends for the application to behave this way but it would be nice to not have to decouple my text style.

      Perhaps the better practice is to create two separate text styles and apply them to their respective variants:

      Default Text Style - Arial 14px
      On Hover Text Style - Arial 14px Underlined

      Then apply them to your variants:

      Default Variant - Default Text Style
      On Hover Variant - On Hover Text Style

        Annisaa Utami
        Annisaa Utami
        New Member
        September 24, 2025

        Encountered this same issue today. I concur that it appears that using text styles (pre-defined fonts) and overriding that style to add the underline to the “On Hover” variant results in the behavior others are seeing here. 

        Not sure if the Figma team intends for the application to behave this way but it would be nice to not have to decouple my text style.

        Perhaps the better practice is to create two separate text styles and apply them to their respective variants:

        Default Text Style - Arial 14px
        On Hover Text Style - Arial 14px Underlined

        Then apply them to your variants:

        Default Variant - Default Text Style
        On Hover Variant - On Hover Text Style

        Big thanks to you Andrew, not i have solved this issue!

        Ingrid_Beke
        Ingrid_Beke
        New Member
        November 17, 2025

        Encountered this same issue today. I concur that it appears that using text styles (pre-defined fonts) and overriding that style to add the underline to the “On Hover” variant results in the behavior others are seeing here. 

        Not sure if the Figma team intends for the application to behave this way but it would be nice to not have to decouple my text style.

        Perhaps the better practice is to create two separate text styles and apply them to their respective variants:

        Default Text Style - Arial 14px
        On Hover Text Style - Arial 14px Underlined

        Then apply them to your variants:

        Default Variant - Default Text Style
        On Hover Variant - On Hover Text Style

        it helped! i also had the preset text style and hit CMD+U to make it underlined, and it didnt work on the prototype. i duplicated the original style with an underlined settings and now it works fine! thank you!

        Terms & ConditionsAccessibility statement