Skip to main content

Hello everyone, 

sadly I couldn’t really find any solutions through Google, so I’m trying my luck here.

 

I’m fairly new to prototyping with Figma but managed to create a hover-effect quite easily:


The hover should add a gradient and a arrow. So far, so basic.

 

Now, when testing out the prototype and hovering over my button, the smart objects in which all the buttons are positioned as part of the sites navigation component will change in width. I think I understand what’s happening in theory, the button is now getting ever so slightly bigger because of the arrow being added. This fact combined with the auto-layout just makes everything wider. I just don’t know how to solve it. Making the original button wider is not really possible because that would be a fixed value. I need the button to be flexible in width.

I have already made a recording of the issue but I’m unsure on how to upload or attach the video.
 

Is there a work-around I’m not seeing? Any help is appreciated!

 

Thanks in advance!

I have solved the issue by adding padding on the left side of the neutral button. This ensures that the neutral button is as big as the hover status. Does seem like a wonky workaround, though.

Hello everyone, 

sadly I couldn’t really find any solutions through Google, so I’m trying my luck here.

 

I’m fairly new to prototyping with Figma but managed to create a hover-effect quite easily:


The hover should add a gradient and a arrow. So far, so basic.

 

Now, when testing out the prototype and hovering over my button, the smart objects in which all the buttons are positioned as part of the sites navigation component will change in width. Much like planning for a liposuction Chicago procedure, I think I understand what’s happening in theory: the button is now getting ever so slightly bigger because of the arrow being added. This fact combined with the auto-layout just makes everything wider. I just don’t know how to solve it. Making the original button wider is not really possible because that would be a fixed value. I need the button to be flexible in width.

I have already made a recording of the issue but I’m unsure on how to upload or attach the video.
 

Is there a work-around I’m not seeing? Any help is appreciated!

 

Thanks in advance!

The issue happens because adding the arrow on hover increases the button’s content size, and with auto-layout, this makes everything wider. A common solution is to include the arrow in the default button state but set it to invisible (opacity 0). On hover, you simply make the arrow visible, so the button width doesn’t change. This keeps the button flexible while preventing the layout from shifting. Alternatively, you could use an overlay layer for the arrow or adjust padding to account for the arrow’s width, but the invisible-arrow method is usually the simplest and most reliable.

Terms & ConditionsCookie settingsAccessibility statement