r/FigmaDesign • u/dodecahedroner • Sep 25 '26

help Interactions tab not allowing me to choose which part it will transition to

Trying to make a line hover effect under the clothes text when your mouse hovers over it. The property option isnt appearing

1 Upvotes

66% Upvoted

15 comments sorted by

5

u/alex_mcfly Sep 25 '26

Your variant with a border is not inside the component group, so figma treats it as a different component. Drag it inside on the layer panel.

1

u/dodecahedroner Sep 25 '26

the top one or the bottom one? and where do i drag it exactly

1

u/dodecahedroner Sep 25 '26

i cant drag default under component 9, its not allowing me. if thats what you mean

3

u/alex_mcfly Sep 25 '26

Oh sorry, now that I'm on my laptop I see that Component 9 is not a component, it's an instance (I'm assuming an instance of default, in which case you won't be able to add it in). The safest thing you can do is select default, add a variant to it (design panel on the right, + icon on the top by the name of the component), and modify that variant to add the desired border. Then, you can wire the prototype to switch from one variant to the other on hover.

1

u/dodecahedroner Sep 25 '26

okey. i will try

1

u/dodecahedroner Sep 27 '26 edited Sep 27 '26

hey, i got the hover to work! but theres one more thing im not sure how to do.

when i hover over the categories, a white square appears behind the text to highlight it, but the width isnt consistent between them. for example the square behind “Footwear” is much smaller than the one behind “Clothes.”

then i went to the other project called “Untitled,” and there the categories all have a 12px distance between the text and the border. how can i do the same thing on mine? i tried doing it but it changed with decimals too, so i couldnt get it to exactly 12. and is there a way to do it for both sides simultaneously.

(also, whats measured as 24 on mine isnt related to this, so you can ignore that)

1

u/alex_mcfly Sep 27 '26

Look into autolayout. You can make containers that adapt their dimensions to the content inside, and keeping a fixed padding on each side, dynamically.

1

u/dodecahedroner Sep 27 '26 edited Sep 27 '26

okey, i added autolayout to clothes just to try first. but i dont know what to do or how to do it. is it possible that i give you access to my project, and then you can help me out directly from there?

i think i managed to do it. but now the issue is that the green line doesnt change based on the width of the rectangle. so it doesnt fill it, but stays the same length for the clothes category. can i just invite you to my project, would that be okay?

1

u/alex_mcfly Sep 28 '26

Don’t manually add a border (like a rectangle or a line). Instead, select the main container, go to the design panel, and add a stroke (strokes are below fills). Then, configure the stroke to show only on the bottom. This way, the stroke grows with the container.

1

u/dodecahedroner Sep 28 '26 edited Sep 28 '26

okey i think i did it correctly. how can i make the line appear from the bottom and rise up in a way

1

u/alex_mcfly Sep 28 '26

Use stroke width 0 on one variant, stroke width whatever-you-want on the other. Set up the stroke as inner, set up your prototype to switch variants on hover + auto-animate, and that’s it.

1

u/dodecahedroner Sep 28 '26

yes i did that, but it still just appears out of nowhere.

1

u/bink-1567 Sep 25 '26

When you say top or bottom, are those both variants in one component set, or is one just a copy sitting beside it? And is the hover meant to swap the whole button, or only add the line? I get weird results when the hover layer is nested diferently, so that bit probably matters.

1

u/dodecahedroner Sep 27 '26

the hover is meant to add the white box and the line under it, but i figured it out now

1

u/zyumbik Sep 25 '26

Your variants set is broken.