Okay, I’ve spent WEEKS problem shooting this with ChatGPT and today I finally found out what was wrong. It was a bug. Nothing I did wrong.

So, I wanted to create a link navigation where the hover effect was an underline for the link text. First surpirse was that I couldn’t just do that inside my initial “Navigation button” component, because Figma overhauls text styles to be consistent within a component’s variants. Okay, easy workaround: create a Label component with an instance without underline and one with and use those inside the final button component using the underlined variant only in the “Hover” variant. I learned that interactions should only be done in the main component, not in the “Label” component. Okay, seemed to be working on the test layer, but moving it to the actual design page broke the interaction and nothing happened. Cue weeks of troubleshooting, creating and re-creating components, testing with background colour changes to see if at least the button hover instance works and the problem is between the Label component and the Button component.

Eventually I find out that sometimes Figma just “is blinded” if an underline is the only style change that occurs and therefore doesn’t trigger it in the design. Just changing the text colour by one number or adding a bold or italic on top of the underline effect and voilá everything works perfectly.

I think I’m more upset at Chat GPT for not making me test this in the first place instead of making me completely recreate my components and designs multiple times, when this could’ve been tested really quick and easy.

Anyone else bumped into this particular bug??