Is there a way to make components change positions when you interact with another component?

[NCEFI-2526665]

Hi there, can anyone explain how to make components change positions when you interact with another component?

More specifically, i want to make a menu of buttons that, when you click one of the buttons, shows a text box and moves the other buttons down to fit the text box. Illustrated below.

The way i have done this, is to make a main component with all the buttons, and then individual instances of each button to host the hover and toggle effects. If i create one component with all the buttons in it, i can't hover/toggle each button individually. Any advice on this?

[AkinGn · Accepted solution]

Hi @NCEFI-2526665 I think what you're saying is the same with the way this tutorial shows, which is the best way to do with current features: https://www.adobe.com/products/xd/learn/design/layout/faq-page-design.html You may want to upvote this feature request in user voice also: https://adobexd.uservoice.com/forums/353007-adobe-xd-feature-requests/suggestions/40762615-stacks-sh... Have a great day!

[Spas K. · Accepted solution]

In addition to what Akin linked, I made a tutorial a little while ago on your exact case with hover states for the headers. Might not be clearer than the "official" one, but could be useful with some small tips 🙂

The feature closely relates to this request as well.